Use tRPC in other group pages (#249)

* Use tRPC in group edition + group layout

* Use tRPC in group modals

* Use tRPC in group stats

* Use tRPC in group activity

src/app/groups/[groupId]/stats/totals-your-spending.tsx

@@ -1,26 +1,19 @@
 'use client'
-import { getGroup, getGroupExpenses } from '@/lib/api'
-import { useActiveUser } from '@/lib/hooks'
-import { getTotalActiveUserPaidFor } from '@/lib/totals'
 import { cn, formatCurrency } from '@/lib/utils'
 import { useLocale, useTranslations } from 'next-intl'
 
-type Props = {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
-}
-
-export function TotalsYourSpendings({ group, expenses }: Props) {
+export function TotalsYourSpendings({
+  totalParticipantSpendings = 0,
+  currency,
+}: {
+  totalParticipantSpendings?: number
+  currency: string
+}) {
   const locale = useLocale()
   const t = useTranslations('Stats.Totals')
-  const activeUser = useActiveUser(group.id)
 
-  const totalYourSpendings =
-    activeUser === '' || activeUser === 'None'
-      ? 0
-      : getTotalActiveUserPaidFor(activeUser, expenses)
-  const currency = group.currency
-  const balance = totalYourSpendings < 0 ? 'yourEarnings' : 'yourSpendings'
+  const balance =
+    totalParticipantSpendings < 0 ? 'yourEarnings' : 'yourSpendings'
 
   return (
     <div>
@@ -29,10 +22,10 @@ export function TotalsYourSpendings({ group, expenses }: Props) {
       <div
         className={cn(
           'text-lg',
-          totalYourSpendings < 0 ? 'text-green-600' : 'text-red-600',
+          totalParticipantSpendings < 0 ? 'text-green-600' : 'text-red-600',
         )}
       >
-        {formatCurrency(currency, Math.abs(totalYourSpendings), locale)}
+        {formatCurrency(currency, Math.abs(totalParticipantSpendings), locale)}
       </div>
     </div>
   )