From 72ad0a4c90054cdb28c115ccd2d144b946e58d51 Mon Sep 17 00:00:00 2001
From: Yuvaraj Sai <63961211+yuvarajsai@users.noreply.github.com>
Date: Sat, 7 Dec 2024 22:23:14 +0530
Subject: [PATCH] feat(expense-list): Display the attachment count only when
 the expense includes attachments (#267)

* feat(expense-list): Display the attachment count only when the expense includes attachments

* handle attachments - singular & plural

* move documents count between amount and date

* Remove label

* Use document count only instead of whole document list

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>
---
 src/app/groups/[groupId]/expenses/documents-count.tsx | 11 +++++++++++
 src/app/groups/[groupId]/expenses/expense-card.tsx    |  4 ++++
 src/lib/api.ts                                        |  1 +
 3 files changed, 16 insertions(+)
 create mode 100644 src/app/groups/[groupId]/expenses/documents-count.tsx

diff --git a/src/app/groups/[groupId]/expenses/documents-count.tsx b/src/app/groups/[groupId]/expenses/documents-count.tsx
new file mode 100644
index 0000000..167e5a0
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/documents-count.tsx
@@ -0,0 +1,11 @@
+import { Paperclip } from 'lucide-react'
+
+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>{count}</span>
+    </div>
+  )
+}
diff --git a/src/app/groups/[groupId]/expenses/expense-card.tsx b/src/app/groups/[groupId]/expenses/expense-card.tsx
index 2ad4175..0e89c37 100644
--- a/src/app/groups/[groupId]/expenses/expense-card.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { ActiveUserBalance } from '@/app/groups/[groupId]/expenses/active-user-balance'
 import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
+import { DocumentsCount } from '@/app/groups/[groupId]/expenses/documents-count'
 import { Button } from '@/components/ui/button'
 import { getGroupExpenses } from '@/lib/api'
 import { cn, formatCurrency, formatDate } from '@/lib/utils'
@@ -75,6 +76,9 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
         >
           {formatCurrency(currency, expense.amount, locale)}
         </div>
+        <div className="text-xs text-muted-foreground">
+          <DocumentsCount count={expense._count.documents} />
+        </div>
         <div className="text-xs text-muted-foreground">
           {formatDate(expense.expenseDate, locale, { dateStyle: 'medium' })}
         </div>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index d4b467a..b757fd0 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -286,6 +286,7 @@ export async function getGroupExpenses(
       },
       splitMode: true,
       title: true,
+      _count: { select: { documents: true } },
     },
     where: {
       groupId,