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
2026-02-13 02:56:13 +01:00 · 2024-10-19 21:29:53 -04:00
parent 66e15e419e
commit 210c12b7ef
35 changed files with 709 additions and 498 deletions
--- a/src/app/groups/[groupId]/activity/activity-item.tsx
+++ b/src/app/groups/[groupId]/activity/activity-item.tsx
@@ -1,18 +1,20 @@
 'use client'
 import { Button } from '@/components/ui/button'
-import { getGroupExpenses } from '@/lib/api'
 import { DateTimeStyle, cn, formatDate } from '@/lib/utils'
-import { Activity, ActivityType, Participant } from '@prisma/client'
+import { AppRouterOutput } from '@/trpc/routers/_app'
+import { ActivityType, Participant } from '@prisma/client'
 import { ChevronRight } from 'lucide-react'
 import { useLocale, useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'

+export type Activity =
+  AppRouterOutput['groups']['activities']['list']['activities'][number]
+
 type Props = {
  groupId: string
  activity: Activity
  participant?: Participant
-  expense?: Awaited<ReturnType<typeof getGroupExpenses>>[number]
  dateStyle: DateTimeStyle
 }

@@ -44,13 +46,12 @@ export function ActivityItem({
  groupId,
  activity,
  participant,
-  expense,
  dateStyle,
 }: Props) {
  const router = useRouter()
  const locale = useLocale()

-  const expenseExists = expense !== undefined
+  const expenseExists = activity.expense !== undefined
  const summary = useSummary(activity, participant?.name)

  return (
--- a/src/app/groups/[groupId]/activity/activity-list.tsx
+++ b/src/app/groups/[groupId]/activity/activity-list.tsx
@@ -1,15 +1,16 @@
-import { ActivityItem } from '@/app/groups/[groupId]/activity/activity-item'
-import { getGroupExpenses } from '@/lib/api'
-import { Activity, Participant } from '@prisma/client'
+'use client'
+import {
+  Activity,
+  ActivityItem,
+} from '@/app/groups/[groupId]/activity/activity-item'
+import { Skeleton } from '@/components/ui/skeleton'
+import { trpc } from '@/trpc/client'
 import dayjs, { type Dayjs } from 'dayjs'
 import { useTranslations } from 'next-intl'
+import { forwardRef, useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'

-type Props = {
-  groupId: string
-  participants: Participant[]
-  expenses: Awaited<ReturnType<typeof getGroupExpenses>>
-  activities: Activity[]
-}
+const PAGE_SIZE = 20

 const DATE_GROUPS = {
  TODAY: 'today',
@@ -48,23 +49,64 @@ function getDateGroup(date: Dayjs, today: Dayjs) {
 function getGroupedActivitiesByDate(activities: Activity[]) {
  const today = dayjs()
  return activities.reduce(
-    (result: { [key: string]: Activity[] }, activity: Activity) => {
+    (result, activity) => {
      const activityGroup = getDateGroup(dayjs(activity.time), today)
      result[activityGroup] = result[activityGroup] ?? []
      result[activityGroup].push(activity)
      return result
    },
-    {},
+    {} as {
+      [key: string]: Activity[]
+    },
  )
 }

-export function ActivityList({
-  groupId,
-  participants,
-  expenses,
-  activities,
-}: Props) {
+const ActivitiesLoading = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <div ref={ref} className="flex flex-col gap-4">
+      <Skeleton className="mt-2 h-3 w-24" />
+      {Array(5)
+        .fill(undefined)
+        .map((_, index) => (
+          <div key={index} className="flex gap-2 p-2">
+            <div className="flex-0">
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <div className="flex-1">
+              <Skeleton className="h-3 w-48" />
+            </div>
+          </div>
+        ))}
+    </div>
+  )
+})
+ActivitiesLoading.displayName = 'ActivitiesLoading'
+
+export function ActivityList({ groupId }: { groupId: string }) {
  const t = useTranslations('Activity')
+
+  const { data: groupData, isLoading: groupIsLoading } =
+    trpc.groups.get.useQuery({ groupId })
+
+  const {
+    data: activitiesData,
+    isLoading,
+    fetchNextPage,
+  } = trpc.groups.activities.list.useInfiniteQuery(
+    { groupId, limit: PAGE_SIZE },
+    { getNextPageParam: ({ nextCursor }) => nextCursor },
+  )
+  const { ref: loadingRef, inView } = useInView()
+
+  const activities = activitiesData?.pages.flatMap((page) => page.activities)
+  const hasMore = activitiesData?.pages.at(-1)?.hasMore ?? false
+
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) fetchNextPage()
+  }, [fetchNextPage, hasMore, inView, isLoading])
+
+  if (isLoading || !activities || !groupData) return <ActivitiesLoading />
+
  const groupedActivitiesByDate = getGroupedActivitiesByDate(activities)

  return activities.length > 0 ? (
@@ -86,27 +128,29 @@ export function ActivityList({
            >
              {t(`Groups.${dateGroup}`)}
            </div>
-            {groupActivities.map((activity: Activity) => {
+            {groupActivities.map((activity) => {
              const participant =
                activity.participantId !== null
-                  ? participants.find((p) => p.id === activity.participantId)
-                  : undefined
-              const expense =
-                activity.expenseId !== null
-                  ? expenses.find((e) => e.id === activity.expenseId)
+                  ? groupData.group.participants.find(
+                      (p) => p.id === activity.participantId,
+                    )
                  : undefined
              return (
                <ActivityItem
                  key={activity.id}
-                  {...{ groupId, activity, participant, expense, dateStyle }}
+                  groupId={groupId}
+                  activity={activity}
+                  participant={participant}
+                  dateStyle={dateStyle}
                />
              )
            })}
          </div>
        )
      })}
+      {hasMore && <ActivitiesLoading ref={loadingRef} />}
    </>
  ) : (
-    <p className="px-6 text-sm py-6">{t('noActivity')}</p>
+    <p className="text-sm py-6">{t('noActivity')}</p>
  )
 }
--- a/src/app/groups/[groupId]/activity/page.client.tsx
+++ b/src/app/groups/[groupId]/activity/page.client.tsx
@@ -0,0 +1,32 @@
+import { ActivityList } from '@/app/groups/[groupId]/activity/activity-list'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Metadata } from 'next'
+import { useTranslations } from 'next-intl'
+
+export const metadata: Metadata = {
+  title: 'Activity',
+}
+
+export function ActivityPageClient({ groupId }: { groupId: string }) {
+  const t = useTranslations('Activity')
+
+  return (
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col space-y-4">
+          <ActivityList groupId={groupId} />
+        </CardContent>
+      </Card>
+    </>
+  )
+}
--- a/src/app/groups/[groupId]/activity/page.tsx
+++ b/src/app/groups/[groupId]/activity/page.tsx
@@ -1,16 +1,5 @@
-import { cached } from '@/app/cached-functions'
-import { ActivityList } from '@/app/groups/[groupId]/activity/activity-list'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { getActivities, getGroupExpenses } from '@/lib/api'
+import { ActivityPageClient } from '@/app/groups/[groupId]/activity/page.client'
 import { Metadata } from 'next'
-import { getTranslations } from 'next-intl/server'
-import { notFound } from 'next/navigation'

 export const metadata: Metadata = {
  title: 'Activity',
@@ -21,31 +10,5 @@ export default async function ActivityPage({
 }: {
  params: { groupId: string }
 }) {
-  const t = await getTranslations('Activity')
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-
-  const expenses = await getGroupExpenses(groupId)
-  const activities = await getActivities(groupId)
-
-  return (
-    <>
-      <Card className="mb-4">
-        <CardHeader>
-          <CardTitle>{t('title')}</CardTitle>
-          <CardDescription>{t('description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col space-y-4">
-          <ActivityList
-            {...{
-              groupId,
-              participants: group.participants,
-              expenses,
-              activities,
-            }}
-          />
-        </CardContent>
-      </Card>
-    </>
-  )
+  return <ActivityPageClient groupId={groupId} />
 }
--- a/src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx
+++ b/src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx
@@ -10,17 +10,23 @@ import {
  CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { getGroup } from '@/lib/api'
 import { trpc } from '@/trpc/client'
 import { useTranslations } from 'next-intl'
 import { Fragment, useEffect } from 'react'

 export default function BalancesAndReimbursements({
-  group,
+  groupId,
 }: {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  groupId: string
 }) {
  const utils = trpc.useUtils()
+  const { data: groupData, isLoading: groupIsLoading } =
+    trpc.groups.get.useQuery({ groupId })
+  const { data: balancesData, isLoading: balancesAreLoading } =
+    trpc.groups.balances.list.useQuery({
+      groupId,
+    })
+  const t = useTranslations('Balances')

  useEffect(() => {
    // Until we use tRPC more widely and can invalidate the cache on expense
@@ -28,11 +34,8 @@ export default function BalancesAndReimbursements({
    utils.groups.balances.invalidate()
  }, [utils])

-  const t = useTranslations('Balances')
-
-  const { data, isLoading } = trpc.groups.balances.list.useQuery({
-    groupId: group.id,
-  })
+  const isLoading =
+    balancesAreLoading || !balancesData || groupIsLoading || !groupData?.group

  return (
    <>
@@ -42,13 +45,15 @@ export default function BalancesAndReimbursements({
          <CardDescription>{t('description')}</CardDescription>
        </CardHeader>
        <CardContent>
-          {isLoading || !data ? (
-            <BalancesLoading participantCount={group.participants.length} />
+          {isLoading ? (
+            <BalancesLoading
+              participantCount={groupData?.group.participants.length}
+            />
          ) : (
            <BalancesList
-              balances={data.balances}
-              participants={group.participants}
-              currency={group.currency}
+              balances={balancesData.balances}
+              participants={groupData.group.participants}
+              currency={groupData.group.currency}
            />
          )}
        </CardContent>
@@ -59,16 +64,16 @@ export default function BalancesAndReimbursements({
          <CardDescription>{t('Reimbursements.description')}</CardDescription>
        </CardHeader>
        <CardContent>
-          {isLoading || !data ? (
+          {isLoading ? (
            <ReimbursementsLoading
-              participantCount={group.participants.length}
+              participantCount={groupData?.group.participants.length}
            />
          ) : (
            <ReimbursementList
-              reimbursements={data.reimbursements}
-              participants={group.participants}
-              currency={group.currency}
-              groupId={group.id}
+              reimbursements={balancesData.reimbursements}
+              participants={groupData.group.participants}
+              currency={groupData.group.currency}
+              groupId={groupData.group.id}
            />
          )}
        </CardContent>
@@ -78,9 +83,9 @@ export default function BalancesAndReimbursements({
 }

 const ReimbursementsLoading = ({
-  participantCount,
+  participantCount = 3,
 }: {
-  participantCount: number
+  participantCount?: number
 }) => {
  return (
    <div className="flex flex-col">
@@ -100,9 +105,9 @@ const ReimbursementsLoading = ({
 }

 const BalancesLoading = ({
-  participantCount,
+  participantCount = 3,
 }: {
-  participantCount: number
+  participantCount?: number
 }) => {
  return (
    <div className="grid grid-cols-2 py-1 gap-y-2">
--- a/src/app/groups/[groupId]/balances/page.tsx
+++ b/src/app/groups/[groupId]/balances/page.tsx
@@ -15,5 +15,5 @@ export default async function GroupPage({
  const group = await cached.getGroup(groupId)
  if (!group) notFound()

-  return <BalancesAndReimbursements group={group} />
+  return <BalancesAndReimbursements groupId={groupId} />
 }
--- a/src/app/groups/[groupId]/edit/edit-group.tsx
+++ b/src/app/groups/[groupId]/edit/edit-group.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { GroupForm } from '@/components/group-form'
+import { trpc } from '@/trpc/client'
+
+export const EditGroup = ({ groupId }: { groupId: string }) => {
+  const { data, isLoading } = trpc.groups.get.useQuery({ groupId })
+  const { mutateAsync, isPending } = trpc.groups.update.useMutation()
+  const utils = trpc.useUtils()
+
+  // async function updateGroupAction(values: unknown, participantId?: string) {
+  //   'use server'
+  //   const groupFormValues = groupFormSchema.parse(values)
+  //   const group = await updateGroup(groupId, groupFormValues, participantId)
+  //   redirect(`/groups/${group.id}`)
+  // }
+
+  if (isLoading) return <></>
+
+  return (
+    <GroupForm
+      group={data?.group}
+      onSubmit={async (groupFormValues, participantId) => {
+        await mutateAsync({ groupId, participantId, groupFormValues })
+        await utils.groups.invalidate()
+      }}
+      protectedParticipantIds={data?.participantsWithExpenses}
+    />
+  )
+}
--- a/src/app/groups/[groupId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/edit/page.tsx
@@ -1,9 +1,5 @@
-import { cached } from '@/app/cached-functions'
-import { GroupForm } from '@/components/group-form'
-import { getGroupExpensesParticipants, updateGroup } from '@/lib/api'
-import { groupFormSchema } from '@/lib/schemas'
+import { EditGroup } from '@/app/groups/[groupId]/edit/edit-group'
 import { Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'

 export const metadata: Metadata = {
  title: 'Settings',
@@ -14,22 +10,5 @@ export default async function EditGroupPage({
 }: {
  params: { groupId: string }
 }) {
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-
-  async function updateGroupAction(values: unknown, participantId?: string) {
-    'use server'
-    const groupFormValues = groupFormSchema.parse(values)
-    const group = await updateGroup(groupId, groupFormValues, participantId)
-    redirect(`/groups/${group.id}`)
-  }
-
-  const protectedParticipantIds = await getGroupExpensesParticipants(groupId)
-  return (
-    <GroupForm
-      group={group}
-      onSubmit={updateGroupAction}
-      protectedParticipantIds={protectedParticipantIds}
-    />
-  )
+  return <EditGroup groupId={groupId} />
 }
--- a/src/app/groups/[groupId]/expenses/active-user-modal.tsx
+++ b/src/app/groups/[groupId]/expenses/active-user-modal.tsx
@@ -18,22 +18,24 @@ import {
 } from '@/components/ui/drawer'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { getGroup } from '@/lib/api'
 import { useMediaQuery } from '@/lib/hooks'
 import { cn } from '@/lib/utils'
+import { trpc } from '@/trpc/client'
+import { AppRouterOutput } from '@/trpc/routers/_app'
 import { useTranslations } from 'next-intl'
 import { ComponentProps, useEffect, useState } from 'react'

-type Props = {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-}
-
-export function ActiveUserModal({ group }: Props) {
+export function ActiveUserModal({ groupId }: { groupId: string }) {
  const t = useTranslations('Expenses.ActiveUserModal')
  const [open, setOpen] = useState(false)
  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
+
+  const group = groupData?.group

  useEffect(() => {
+    if (!group) return
+
    const tempUser = localStorage.getItem(`newGroup-activeUser`)
    const activeUser = localStorage.getItem(`${group.id}-activeUser`)
    if (!tempUser && !activeUser) {
@@ -42,6 +44,8 @@ export function ActiveUserModal({ group }: Props) {
  }, [group])

  function updateOpen(open: boolean) {
+    if (!group) return
+
    if (!open && !localStorage.getItem(`${group.id}-activeUser`)) {
      localStorage.setItem(`${group.id}-activeUser`, 'None')
    }
@@ -93,7 +97,10 @@ function ActiveUserForm({
  group,
  close,
  className,
-}: ComponentProps<'form'> & { group: Props['group']; close: () => void }) {
+}: ComponentProps<'form'> & {
+  group?: AppRouterOutput['groups']['get']['group']
+  close: () => void
+}) {
  const t = useTranslations('Expenses.ActiveUserModal')
  const [selected, setSelected] = useState('None')

@@ -101,6 +108,8 @@ function ActiveUserForm({
    <form
      className={cn('grid items-start gap-4', className)}
      onSubmit={(event) => {
+        if (!group) return
+
        event.preventDefault()
        localStorage.setItem(`${group.id}-activeUser`, selected)
        close()
@@ -114,7 +123,7 @@ function ActiveUserForm({
              {t('nobody')}
            </Label>
          </div>
-          {group.participants.map((participant) => (
+          {group?.participants.map((participant) => (
            <div key={participant.id} className="flex items-center space-x-2">
              <RadioGroupItem value={participant.id} id={participant.id} />
              <Label htmlFor={participant.id} className="flex-1">
--- a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
+++ b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
@@ -27,7 +27,7 @@ import { ToastAction } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/use-toast'
 import { useMediaQuery } from '@/lib/hooks'
 import { formatCurrency, formatDate, formatFileSize } from '@/lib/utils'
-import { Category } from '@prisma/client'
+import { trpc } from '@/trpc/client'
 import { ChevronRight, FileQuestion, Loader2, Receipt } from 'lucide-react'
 import { useLocale, useTranslations } from 'next-intl'
 import { getImageData, usePresignedUpload } from 'next-s3-upload'
@@ -35,19 +35,52 @@ import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import { PropsWithChildren, ReactNode, useState } from 'react'

-type Props = {
-  groupId: string
-  groupCurrency: string
-  categories: Category[]
-}
-
 const MAX_FILE_SIZE = 5 * 1024 ** 2

-export function CreateFromReceiptButton({
-  groupId,
-  groupCurrency,
-  categories,
-}: Props) {
+export function CreateFromReceiptButton({ groupId }: { groupId: string }) {
+  return <CreateFromReceiptButton_ groupId={groupId} />
+}
+
+function CreateFromReceiptButton_({ groupId }: { groupId: string }) {
+  const t = useTranslations('CreateFromReceipt')
+  const isDesktop = useMediaQuery('(min-width: 640px)')
+
+  const DialogOrDrawer = isDesktop
+    ? CreateFromReceiptDialog
+    : CreateFromReceiptDrawer
+
+  return (
+    <DialogOrDrawer
+      trigger={
+        <Button
+          size="icon"
+          variant="secondary"
+          title={t('Dialog.triggerTitle')}
+        >
+          <Receipt className="w-4 h-4" />
+        </Button>
+      }
+      title={
+        <>
+          <span>{t('Dialog.title')}</span>
+          <Badge className="bg-pink-700 hover:bg-pink-600 dark:bg-pink-500 dark:hover:bg-pink-600">
+            Beta
+          </Badge>
+        </>
+      }
+      description={<>{t('Dialog.description')}</>}
+    >
+      <ReceiptDialogContent groupId={groupId} />
+    </DialogOrDrawer>
+  )
+}
+
+function ReceiptDialogContent({ groupId }: { groupId: string }) {
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
+  const { data: categoriesData } = trpc.categories.list.useQuery()
+  const group = groupData?.group
+  const categories = categoriesData?.categories
+
  const locale = useLocale()
  const t = useTranslations('CreateFromReceipt')
  const [pending, setPending] = useState(false)
@@ -58,7 +91,6 @@ export function CreateFromReceiptButton({
    | null
    | (ReceiptExtractedInfo & { url: string; width?: number; height?: number })
  >(null)
-  const isDesktop = useMediaQuery('(min-width: 640px)')

  const handleFileChange = async (file: File) => {
    if (file.size > MAX_FILE_SIZE) {
@@ -107,160 +139,130 @@ export function CreateFromReceiptButton({

  const receiptInfoCategory =
    (receiptInfo?.categoryId &&
-      categories.find((c) => String(c.id) === receiptInfo.categoryId)) ||
+      categories?.find((c) => String(c.id) === receiptInfo.categoryId)) ||
    null

-  const DialogOrDrawer = isDesktop
-    ? CreateFromReceiptDialog
-    : CreateFromReceiptDrawer
-
  return (
-    <DialogOrDrawer
-      trigger={
-        <Button
-          size="icon"
-          variant="secondary"
-          title={t('Dialog.triggerTitle')}
-        >
-          <Receipt className="w-4 h-4" />
-        </Button>
-      }
-      title={
-        <>
-          <span>{t('Dialog.title')}</span>
-          <Badge className="bg-pink-700 hover:bg-pink-600 dark:bg-pink-500 dark:hover:bg-pink-600">
-            Beta
-          </Badge>
-        </>
-      }
-      description={<>{t('Dialog.description')}</>}
-    >
-      <div className="prose prose-sm dark:prose-invert">
-        <p>{t('Dialog.body')}</p>
-        <div>
-          <FileInput
-            onChange={handleFileChange}
-            accept="image/jpeg,image/png"
-          />
-          <div className="grid gap-x-4 gap-y-2 grid-cols-3">
-            <Button
-              variant="secondary"
-              className="row-span-3 w-full h-full relative"
-              title="Create expense from receipt"
-              onClick={openFileDialog}
-              disabled={pending}
-            >
-              {pending ? (
-                <Loader2 className="w-8 h-8 animate-spin" />
-              ) : receiptInfo ? (
-                <div className="absolute top-2 left-2 bottom-2 right-2">
-                  <Image
-                    src={receiptInfo.url}
-                    width={receiptInfo.width}
-                    height={receiptInfo.height}
-                    className="w-full h-full m-0 object-contain drop-shadow-lg"
-                    alt="Scanned receipt"
-                  />
-                </div>
+    <div className="prose prose-sm dark:prose-invert">
+      <p>{t('Dialog.body')}</p>
+      <div>
+        <FileInput onChange={handleFileChange} accept="image/jpeg,image/png" />
+        <div className="grid gap-x-4 gap-y-2 grid-cols-3">
+          <Button
+            variant="secondary"
+            className="row-span-3 w-full h-full relative"
+            title="Create expense from receipt"
+            onClick={openFileDialog}
+            disabled={pending}
+          >
+            {pending ? (
+              <Loader2 className="w-8 h-8 animate-spin" />
+            ) : receiptInfo ? (
+              <div className="absolute top-2 left-2 bottom-2 right-2">
+                <Image
+                  src={receiptInfo.url}
+                  width={receiptInfo.width}
+                  height={receiptInfo.height}
+                  className="w-full h-full m-0 object-contain drop-shadow-lg"
+                  alt="Scanned receipt"
+                />
+              </div>
+            ) : (
+              <span className="text-xs sm:text-sm text-muted-foreground">
+                {t('Dialog.selectImage')}
+              </span>
+            )}
+          </Button>
+          <div className="col-span-2">
+            <strong>{t('Dialog.titleLabel')}</strong>
+            <div>{receiptInfo ? receiptInfo.title ?? <Unknown /> : '…'}</div>
+          </div>
+          <div className="col-span-2">
+            <strong>{t('Dialog.categoryLabel')}</strong>
+            <div>
+              {receiptInfo ? (
+                receiptInfoCategory ? (
+                  <div className="flex items-center">
+                    <CategoryIcon
+                      category={receiptInfoCategory}
+                      className="inline w-4 h-4 mr-2"
+                    />
+                    <span className="mr-1">{receiptInfoCategory.grouping}</span>
+                    <ChevronRight className="inline w-3 h-3 mr-1" />
+                    <span>{receiptInfoCategory.name}</span>
+                  </div>
+                ) : (
+                  <Unknown />
+                )
              ) : (
-                <span className="text-xs sm:text-sm text-muted-foreground">
-                  {t('Dialog.selectImage')}
-                </span>
+                '' || '…'
              )}
-            </Button>
-            <div className="col-span-2">
-              <strong>{t('Dialog.titleLabel')}</strong>
-              <div>{receiptInfo ? receiptInfo.title ?? <Unknown /> : '…'}</div>
-            </div>
-            <div className="col-span-2">
-              <strong>{t('Dialog.categoryLabel')}</strong>
-              <div>
-                {receiptInfo ? (
-                  receiptInfoCategory ? (
-                    <div className="flex items-center">
-                      <CategoryIcon
-                        category={receiptInfoCategory}
-                        className="inline w-4 h-4 mr-2"
-                      />
-                      <span className="mr-1">
-                        {receiptInfoCategory.grouping}
-                      </span>
-                      <ChevronRight className="inline w-3 h-3 mr-1" />
-                      <span>{receiptInfoCategory.name}</span>
-                    </div>
-                  ) : (
-                    <Unknown />
-                  )
-                ) : (
-                  '' || '…'
-                )}
-              </div>
            </div>
+          </div>
+          <div>
+            <strong>{t('Dialog.amountLabel')}</strong>
            <div>
-              <strong>{t('Dialog.amountLabel')}</strong>
-              <div>
-                {receiptInfo ? (
-                  receiptInfo.amount ? (
-                    <>
-                      {formatCurrency(
-                        groupCurrency,
-                        receiptInfo.amount,
-                        locale,
-                        true,
-                      )}
-                    </>
-                  ) : (
-                    <Unknown />
-                  )
-                ) : (
-                  '…'
-                )}
-              </div>
-            </div>
-            <div>
-              <strong>{t('Dialog.dateLabel')}</strong>
-              <div>
-                {receiptInfo ? (
-                  receiptInfo.date ? (
-                    formatDate(
-                      new Date(`${receiptInfo?.date}T12:00:00.000Z`),
+              {receiptInfo && group ? (
+                receiptInfo.amount ? (
+                  <>
+                    {formatCurrency(
+                      group.currency,
+                      receiptInfo.amount,
                      locale,
-                      { dateStyle: 'medium' },
-                    )
-                  ) : (
-                    <Unknown />
+                      true,
+                    )}
+                  </>
+                ) : (
+                  <Unknown />
+                )
+              ) : (
+                '…'
+              )}
+            </div>
+          </div>
+          <div>
+            <strong>{t('Dialog.dateLabel')}</strong>
+            <div>
+              {receiptInfo ? (
+                receiptInfo.date ? (
+                  formatDate(
+                    new Date(`${receiptInfo?.date}T12:00:00.000Z`),
+                    locale,
+                    { dateStyle: 'medium' },
                  )
                ) : (
-                  '…'
-                )}
-              </div>
+                  <Unknown />
+                )
+              ) : (
+                '…'
+              )}
            </div>
          </div>
        </div>
-        <p>{t('Dialog.editNext')}</p>
-        <div className="text-center">
-          <Button
-            disabled={pending || !receiptInfo}
-            onClick={() => {
-              if (!receiptInfo) return
-              router.push(
-                `/groups/${groupId}/expenses/create?amount=${
-                  receiptInfo.amount
-                }&categoryId=${receiptInfo.categoryId}&date=${
-                  receiptInfo.date
-                }&title=${encodeURIComponent(
-                  receiptInfo.title ?? '',
-                )}&imageUrl=${encodeURIComponent(receiptInfo.url)}&imageWidth=${
-                  receiptInfo.width
-                }&imageHeight=${receiptInfo.height}`,
-              )
-            }}
-          >
-            {t('Dialog.continue')}
-          </Button>
-        </div>
      </div>
-    </DialogOrDrawer>
+      <p>{t('Dialog.editNext')}</p>
+      <div className="text-center">
+        <Button
+          disabled={pending || !receiptInfo}
+          onClick={() => {
+            if (!receiptInfo || !group) return
+            router.push(
+              `/groups/${group.id}/expenses/create?amount=${
+                receiptInfo.amount
+              }&categoryId=${receiptInfo.categoryId}&date=${
+                receiptInfo.date
+              }&title=${encodeURIComponent(
+                receiptInfo.title ?? '',
+              )}&imageUrl=${encodeURIComponent(receiptInfo.url)}&imageWidth=${
+                receiptInfo.width
+              }&imageHeight=${receiptInfo.height}`,
+            )
+          }}
+        >
+          {t('Dialog.continue')}
+        </Button>
+      </div>
+    </div>
  )
 }

--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -5,7 +5,6 @@ import { Button } from '@/components/ui/button'
 import { SearchBar } from '@/components/ui/search-bar'
 import { Skeleton } from '@/components/ui/skeleton'
 import { trpc } from '@/trpc/client'
-import { Participant } from '@prisma/client'
 import dayjs, { type Dayjs } from 'dayjs'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
@@ -13,18 +12,12 @@ import { forwardRef, useEffect, useMemo, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'use-debounce'

-const PAGE_SIZE = 200
+const PAGE_SIZE = 20

 type ExpensesType = NonNullable<
  Awaited<ReturnType<typeof getGroupExpensesAction>>
 >

-type Props = {
-  participants: Participant[]
-  currency: string
-  groupId: string
-}
-
 const EXPENSE_GROUPS = {
  UPCOMING: 'upcoming',
  THIS_WEEK: 'thisWeek',
@@ -63,11 +56,16 @@ function getGroupedExpensesByDate(expenses: ExpensesType) {
  }, {})
 }

-export function ExpenseList({ currency, participants, groupId }: Props) {
+export function ExpenseList({ groupId }: { groupId: string }) {
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
  const [searchText, setSearchText] = useState('')
  const [debouncedSearchText] = useDebounce(searchText, 300)

+  const participants = groupData?.group.participants
+
  useEffect(() => {
+    if (!participants) return
+
    const activeUser = localStorage.getItem('newGroup-activeUser')
    const newUser = localStorage.getItem(`${groupId}-newUser`)
    if (activeUser || newUser) {
@@ -91,7 +89,6 @@ export function ExpenseList({ currency, participants, groupId }: Props) {
      <SearchBar onValueChange={(value) => setSearchText(value)} />
      <ExpenseListForSearch
        groupId={groupId}
-        currency={currency}
        searchText={debouncedSearchText}
      />
    </>
@@ -99,11 +96,9 @@ export function ExpenseList({ currency, participants, groupId }: Props) {
 }

 const ExpenseListForSearch = ({
-  currency,
  groupId,
  searchText,
 }: {
-  currency: string
  groupId: string
  searchText: string
 }) => {
@@ -118,14 +113,23 @@ const ExpenseListForSearch = ({
  const t = useTranslations('Expenses')
  const { ref: loadingRef, inView } = useInView()

-  const { data, isLoading, isError, fetchNextPage } =
-    trpc.groups.expenses.list.useInfiniteQuery(
-      { groupId, limit: PAGE_SIZE, filter: searchText },
-      { getNextPageParam: ({ nextCursor }) => nextCursor },
-    )
+  const {
+    data,
+    isLoading: expensesAreLoading,
+    fetchNextPage,
+  } = trpc.groups.expenses.list.useInfiniteQuery(
+    { groupId, limit: PAGE_SIZE, filter: searchText },
+    { getNextPageParam: ({ nextCursor }) => nextCursor },
+  )
  const expenses = data?.pages.flatMap((page) => page.expenses)
  const hasMore = data?.pages.at(-1)?.hasMore ?? false

+  const { data: groupData, isLoading: groupIsLoading } =
+    trpc.groups.get.useQuery({ groupId })
+
+  const isLoading =
+    expensesAreLoading || !expenses || groupIsLoading || !groupData
+
  useEffect(() => {
    if (inView && hasMore && !isLoading) fetchNextPage()
  }, [fetchNextPage, hasMore, inView, isLoading])
@@ -137,7 +141,7 @@ const ExpenseListForSearch = ({

  if (isLoading) return <ExpensesLoading />

-  if (!expenses || expenses?.length === 0)
+  if (expenses.length === 0)
    return (
      <p className="px-6 text-sm py-6">
        {t('noExpenses')}{' '}
@@ -168,7 +172,7 @@ const ExpenseListForSearch = ({
              <ExpenseCard
                key={expense.id}
                expense={expense}
-                currency={currency}
+                currency={groupData.group.currency}
                groupId={groupId}
              />
            ))}
@@ -183,7 +187,7 @@ const ExpenseListForSearch = ({
 const ExpensesLoading = forwardRef<HTMLDivElement>((_, ref) => {
  return (
    <div ref={ref}>
-      <Skeleton className="mx-4 sm:mx-6 mb-2 h-4 w-32 rounded-full" />
+      <Skeleton className="mx-4 sm:mx-6 mt-1 mb-2 h-3 w-32 rounded-full" />
      {[0, 1, 2].map((i) => (
        <div
          key={i}
--- a/src/app/groups/[groupId]/expenses/page.client.tsx
+++ b/src/app/groups/[groupId]/expenses/page.client.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
+import { CreateFromReceiptButton } from '@/app/groups/[groupId]/expenses/create-from-receipt-button'
+import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Download, Plus } from 'lucide-react'
+import { Metadata } from 'next'
+import { useTranslations } from 'next-intl'
+import Link from 'next/link'
+
+export const revalidate = 3600
+
+export const metadata: Metadata = {
+  title: 'Expenses',
+}
+
+export default function GroupExpensesPageClient({
+  groupId,
+  enableReceiptExtract,
+}: {
+  groupId: string
+  enableReceiptExtract: boolean
+}) {
+  const t = useTranslations('Expenses')
+
+  return (
+    <>
+      <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
+        <div className="flex flex-1">
+          <CardHeader className="flex-1 p-4 sm:p-6">
+            <CardTitle>{t('title')}</CardTitle>
+            <CardDescription>{t('description')}</CardDescription>
+          </CardHeader>
+          <CardHeader className="p-4 sm:p-6 flex flex-row space-y-0 gap-2">
+            <Button variant="secondary" size="icon" asChild>
+              <Link
+                prefetch={false}
+                href={`/groups/${groupId}/expenses/export/json`}
+                target="_blank"
+                title={t('exportJson')}
+              >
+                <Download className="w-4 h-4" />
+              </Link>
+            </Button>
+            {enableReceiptExtract && (
+              <CreateFromReceiptButton groupId={groupId} />
+            )}
+            <Button asChild size="icon">
+              <Link
+                href={`/groups/${groupId}/expenses/create`}
+                title={t('create')}
+              >
+                <Plus className="w-4 h-4" />
+              </Link>
+            </Button>
+          </CardHeader>
+        </div>
+
+        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
+          <ExpenseList groupId={groupId} />
+        </CardContent>
+      </Card>
+
+      <ActiveUserModal groupId={groupId} />
+    </>
+  )
+}
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,22 +1,6 @@
-import { cached } from '@/app/cached-functions'
-import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
-import { CreateFromReceiptButton } from '@/app/groups/[groupId]/expenses/create-from-receipt-button'
-import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
-import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { getCategories } from '@/lib/api'
+import GroupExpensesPageClient from '@/app/groups/[groupId]/expenses/page.client'
 import { env } from '@/lib/env'
-import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
-import { getTranslations } from 'next-intl/server'
-import Link from 'next/link'
-import { notFound } from 'next/navigation'

 export const revalidate = 3600

@@ -29,59 +13,10 @@ export default async function GroupExpensesPage({
 }: {
  params: { groupId: string }
 }) {
-  const t = await getTranslations('Expenses')
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-
-  const categories = await getCategories()
-
  return (
-    <>
-      <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
-        <div className="flex flex-1">
-          <CardHeader className="flex-1 p-4 sm:p-6">
-            <CardTitle>{t('title')}</CardTitle>
-            <CardDescription>{t('description')}</CardDescription>
-          </CardHeader>
-          <CardHeader className="p-4 sm:p-6 flex flex-row space-y-0 gap-2">
-            <Button variant="secondary" size="icon" asChild>
-              <Link
-                prefetch={false}
-                href={`/groups/${groupId}/expenses/export/json`}
-                target="_blank"
-                title={t('exportJson')}
-              >
-                <Download className="w-4 h-4" />
-              </Link>
-            </Button>
-            {env.NEXT_PUBLIC_ENABLE_RECEIPT_EXTRACT && (
-              <CreateFromReceiptButton
-                groupId={groupId}
-                groupCurrency={group.currency}
-                categories={categories}
-              />
-            )}
-            <Button asChild size="icon">
-              <Link
-                href={`/groups/${groupId}/expenses/create`}
-                title={t('create')}
-              >
-                <Plus className="w-4 h-4" />
-              </Link>
-            </Button>
-          </CardHeader>
-        </div>
-
-        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
-          <ExpenseList
-            groupId={group.id}
-            currency={group.currency}
-            participants={group.participants}
-          />
-        </CardContent>
-      </Card>
-
-      <ActiveUserModal group={group} />
-    </>
+    <GroupExpensesPageClient
+      groupId={groupId}
+      enableReceiptExtract={env.NEXT_PUBLIC_ENABLE_RECEIPT_EXTRACT}
+    />
  )
 }
--- a/src/app/groups/[groupId]/group-header.tsx
+++ b/src/app/groups/[groupId]/group-header.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
+import { ShareButton } from '@/app/groups/[groupId]/share-button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { trpc } from '@/trpc/client'
+import Link from 'next/link'
+
+export const GroupHeader = ({ groupId }: { groupId: string }) => {
+  const { data, isLoading } = trpc.groups.get.useQuery({ groupId })
+
+  return (
+    <div className="flex flex-col justify-between gap-3">
+      <h1 className="font-bold text-2xl">
+        <Link href={`/groups/${groupId}`}>
+          {isLoading || !data ? (
+            <Skeleton className="mt-1.5 mb-1.5 h-5 w-32" />
+          ) : (
+            <div className="flex">{data.group.name}</div>
+          )}
+        </Link>
+      </h1>
+
+      <div className="flex gap-2 justify-between">
+        <GroupTabs groupId={groupId} />
+        {data?.group && <ShareButton group={data.group} />}
+      </div>
+    </div>
+  )
+}
--- a/src/app/groups/[groupId]/information/group-information.tsx
+++ b/src/app/groups/[groupId]/information/group-information.tsx
@@ -16,7 +16,7 @@ import Link from 'next/link'

 export default function GroupInformation({ groupId }: { groupId: string }) {
  const t = useTranslations('Information')
-  const { data, isLoading } = trpc.groups.information.get.useQuery({ groupId })
+  const { data, isLoading } = trpc.groups.get.useQuery({ groupId })

  return (
    <>
@@ -41,7 +41,7 @@ export default function GroupInformation({ groupId }: { groupId: string }) {
              <Skeleton className="h-3 w-1/2" />
            </div>
          ) : (
-            data.information || (
+            data.group.information || (
              <p className="text-muted-foreground text-sm">{t('empty')}</p>
            )
          )}
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/src/app/groups/[groupId]/layout.tsx
@@ -1,11 +1,9 @@
 import { cached } from '@/app/cached-functions'
-import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
+import { GroupHeader } from '@/app/groups/[groupId]/group-header'
 import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
-import { ShareButton } from '@/app/groups/[groupId]/share-button'
 import { Metadata } from 'next'
-import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import { PropsWithChildren, Suspense } from 'react'
+import { PropsWithChildren } from 'react'

 type Props = {
  params: {
@@ -35,18 +33,7 @@ export default async function GroupLayout({

  return (
    <>
-      <div className="flex flex-col justify-between gap-3">
-        <h1 className="font-bold text-2xl">
-          <Link href={`/groups/${groupId}`}>{group.name}</Link>
-        </h1>
-
-        <div className="flex gap-2 justify-between">
-          <Suspense>
-            <GroupTabs groupId={groupId} />
-          </Suspense>
-          <ShareButton group={group} />
-        </div>
-      </div>
+      <GroupHeader groupId={groupId} />

      {children}

--- a/src/app/groups/[groupId]/reimbursement-list.tsx
+++ b/src/app/groups/[groupId]/reimbursement-list.tsx
@@ -21,7 +21,7 @@ export function ReimbursementList({
  const locale = useLocale()
  const t = useTranslations('Balances.Reimbursements')
  if (reimbursements.length === 0) {
-    return <p className="px-6 text-sm pb-6">{t('noImbursements')}</p>
+    return <p className="text-sm pb-6">{t('noImbursements')}</p>
  }

  const getParticipant = (id: string) => participants.find((p) => p.id === id)
--- a/src/app/groups/[groupId]/stats/page.client.tsx
+++ b/src/app/groups/[groupId]/stats/page.client.tsx
@@ -0,0 +1,27 @@
+import { Totals } from '@/app/groups/[groupId]/stats/totals'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { useTranslations } from 'next-intl'
+
+export function TotalsPageClient({ groupId }: { groupId: string }) {
+  const t = useTranslations('Stats')
+
+  return (
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>{t('Totals.title')}</CardTitle>
+          <CardDescription>{t('Totals.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col space-y-4">
+          <Totals groupId={groupId} />
+        </CardContent>
+      </Card>
+    </>
+  )
+}
--- a/src/app/groups/[groupId]/stats/page.tsx
+++ b/src/app/groups/[groupId]/stats/page.tsx
@@ -1,17 +1,5 @@
-import { cached } from '@/app/cached-functions'
-import { Totals } from '@/app/groups/[groupId]/stats/totals'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { getGroupExpenses } from '@/lib/api'
-import { getTotalGroupSpending } from '@/lib/totals'
+import { TotalsPageClient } from '@/app/groups/[groupId]/stats/page.client'
 import { Metadata } from 'next'
-import { getTranslations } from 'next-intl/server'
-import { notFound } from 'next/navigation'

 export const metadata: Metadata = {
  title: 'Totals',
@@ -22,28 +10,5 @@ export default async function TotalsPage({
 }: {
  params: { groupId: string }
 }) {
-  const t = await getTranslations('Stats')
-  const group = await cached.getGroup(groupId)
-  if (!group) notFound()
-
-  const expenses = await getGroupExpenses(groupId)
-  const totalGroupSpendings = getTotalGroupSpending(expenses)
-
-  return (
-    <>
-      <Card className="mb-4">
-        <CardHeader>
-          <CardTitle>{t('Totals.title')}</CardTitle>
-          <CardDescription>{t('Totals.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col space-y-4">
-          <Totals
-            group={group}
-            expenses={expenses}
-            totalGroupSpendings={totalGroupSpendings}
-          />
-        </CardContent>
-      </Card>
-    </>
-  )
+  return <TotalsPageClient groupId={groupId} />
 }
--- a/src/app/groups/[groupId]/stats/totals-your-share.tsx
+++ b/src/app/groups/[groupId]/stats/totals-your-share.tsx
@@ -1,30 +1,16 @@
 'use client'
-import { getGroup, getGroupExpenses } from '@/lib/api'
-import { getTotalActiveUserShare } from '@/lib/totals'
 import { cn, formatCurrency } from '@/lib/utils'
 import { useLocale, useTranslations } from 'next-intl'
-import { useEffect, useState } from 'react'

-type Props = {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
-}
-
-export function TotalsYourShare({ group, expenses }: Props) {
+export function TotalsYourShare({
+  totalParticipantShare = 0,
+  currency,
+}: {
+  totalParticipantShare?: number
+  currency: string
+}) {
  const locale = useLocale()
  const t = useTranslations('Stats.Totals')
-  const [activeUser, setActiveUser] = useState('')
-
-  useEffect(() => {
-    const activeUser = localStorage.getItem(`${group.id}-activeUser`)
-    if (activeUser) setActiveUser(activeUser)
-  }, [group, expenses])
-
-  const totalActiveUserShare =
-    activeUser === '' || activeUser === 'None'
-      ? 0
-      : getTotalActiveUserShare(activeUser, expenses)
-  const currency = group.currency

  return (
    <div>
@@ -32,10 +18,10 @@ export function TotalsYourShare({ group, expenses }: Props) {
      <div
        className={cn(
          'text-lg',
-          totalActiveUserShare < 0 ? 'text-green-600' : 'text-red-600',
+          totalParticipantShare < 0 ? 'text-green-600' : 'text-red-600',
        )}
      >
-        {formatCurrency(currency, Math.abs(totalActiveUserShare), locale)}
+        {formatCurrency(currency, Math.abs(totalParticipantShare), locale)}
      </div>
    </div>
  )
--- a/src/app/groups/[groupId]/stats/totals-your-spending.tsx
+++ b/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>
  )
--- a/src/app/groups/[groupId]/stats/totals.tsx
+++ b/src/app/groups/[groupId]/stats/totals.tsx
@@ -2,19 +2,36 @@
 import { TotalsGroupSpending } from '@/app/groups/[groupId]/stats/totals-group-spending'
 import { TotalsYourShare } from '@/app/groups/[groupId]/stats/totals-your-share'
 import { TotalsYourSpendings } from '@/app/groups/[groupId]/stats/totals-your-spending'
-import { getGroup, getGroupExpenses } from '@/lib/api'
+import { Skeleton } from '@/components/ui/skeleton'
 import { useActiveUser } from '@/lib/hooks'
+import { trpc } from '@/trpc/client'

-export function Totals({
-  group,
-  expenses,
-  totalGroupSpendings,
-}: {
-  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  expenses: NonNullable<Awaited<ReturnType<typeof getGroupExpenses>>>
-  totalGroupSpendings: number
-}) {
-  const activeUser = useActiveUser(group.id)
+export function Totals({ groupId }: { groupId: string }) {
+  const activeUser = useActiveUser(groupId)
+
+  const participantId =
+    activeUser && activeUser !== 'None' ? activeUser : undefined
+  const { data } = trpc.groups.stats.get.useQuery({ groupId, participantId })
+  const { data: groupData } = trpc.groups.get.useQuery({ groupId })
+
+  if (!data || !groupData)
+    return (
+      <div className="flex flex-col gap-7">
+        {[0, 1, 2].map((index) => (
+          <div key={index}>
+            <Skeleton className="mt-1 h-3 w-48" />
+            <Skeleton className="mt-3 h-4 w-20" />
+          </div>
+        ))}
+      </div>
+    )
+
+  const {
+    totalGroupSpendings,
+    totalParticipantShare,
+    totalParticipantSpendings,
+  } = data
+  const { group } = groupData

  return (
    <>
@@ -22,10 +39,16 @@ export function Totals({
        totalGroupSpendings={totalGroupSpendings}
        currency={group.currency}
      />
-      {activeUser && activeUser !== 'None' && (
+      {participantId && (
        <>
-          <TotalsYourSpendings group={group} expenses={expenses} />
-          <TotalsYourShare group={group} expenses={expenses} />
+          <TotalsYourSpendings
+            totalParticipantSpendings={totalParticipantSpendings}
+            currency={group.currency}
+          />
+          <TotalsYourShare
+            totalParticipantShare={totalParticipantShare}
+            currency={group.currency}
+          />
        </>
      )}
    </>
--- a/src/components/group-form.tsx
+++ b/src/components/group-form.tsx
@@ -1,4 +1,3 @@
-'use client'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
@@ -175,7 +174,7 @@ export function GroupForm({
                    <FormLabel>{t('InformationField.label')}</FormLabel>
                    <FormControl>
                      <Textarea
-                        rows={10}
+                        rows={2}
                        className="text-base"
                        {...field}
                        placeholder={t('InformationField.placeholder')}
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -310,11 +310,34 @@ export async function getExpense(groupId: string, expenseId: string) {
  })
 }

-export async function getActivities(groupId: string) {
-  return prisma.activity.findMany({
+export async function getActivities(
+  groupId: string,
+  options?: { offset?: number; length?: number },
+) {
+  const activities = await prisma.activity.findMany({
    where: { groupId },
    orderBy: [{ time: 'desc' }],
+    skip: options?.offset,
+    take: options?.length,
  })
+
+  const expenseIds = activities
+    .map((activity) => activity.expenseId)
+    .filter(Boolean)
+  const expenses = await prisma.expense.findMany({
+    where: {
+      groupId,
+      id: { in: expenseIds },
+    },
+  })
+
+  return activities.map((activity) => ({
+    ...activity,
+    expense:
+      activity.expenseId !== null
+        ? expenses.find((expense) => expense.id === activity.expenseId)
+        : undefined,
+  }))
 }

 export async function logActivity(
--- a/src/trpc/routers/_app.ts
+++ b/src/trpc/routers/_app.ts
@@ -1,9 +1,11 @@
+import { categoriesRouter } from '@/trpc/routers/categories'
 import { groupsRouter } from '@/trpc/routers/groups'
 import { inferRouterOutputs } from '@trpc/server'
 import { createTRPCRouter } from '../init'

 export const appRouter = createTRPCRouter({
  groups: groupsRouter,
+  categories: categoriesRouter,
 })

 export type AppRouter = typeof appRouter
--- a/src/trpc/routers/categories/index.ts
+++ b/src/trpc/routers/categories/index.ts
@@ -0,0 +1,6 @@
+import { createTRPCRouter } from '@/trpc/init'
+import { listCategoriesProcedure } from '@/trpc/routers/categories/list.procedure'
+
+export const categoriesRouter = createTRPCRouter({
+  list: listCategoriesProcedure,
+})
--- a/src/trpc/routers/categories/list.procedure.ts
+++ b/src/trpc/routers/categories/list.procedure.ts
@@ -0,0 +1,6 @@
+import { getCategories } from '@/lib/api'
+import { baseProcedure } from '@/trpc/init'
+
+export const listCategoriesProcedure = baseProcedure.query(async () => {
+  return { categories: await getCategories() }
+})
--- a/src/trpc/routers/groups/activities/index.ts
+++ b/src/trpc/routers/groups/activities/index.ts
@@ -0,0 +1,6 @@
+import { createTRPCRouter } from '@/trpc/init'
+import { listGroupActivitiesProcedure } from '@/trpc/routers/groups/activities/list.procedure'
+
+export const activitiesRouter = createTRPCRouter({
+  list: listGroupActivitiesProcedure,
+})
--- a/src/trpc/routers/groups/activities/list.procedure.ts
+++ b/src/trpc/routers/groups/activities/list.procedure.ts
@@ -0,0 +1,23 @@
+import { getActivities } from '@/lib/api'
+import { baseProcedure } from '@/trpc/init'
+import { z } from 'zod'
+
+export const listGroupActivitiesProcedure = baseProcedure
+  .input(
+    z.object({
+      groupId: z.string(),
+      cursor: z.number().optional().default(0),
+      limit: z.number().optional().default(5),
+    }),
+  )
+  .query(async ({ input: { groupId, cursor, limit } }) => {
+    const activities = await getActivities(groupId, {
+      offset: cursor,
+      length: limit + 1,
+    })
+    return {
+      activities: activities.slice(0, limit),
+      hasMore: !!activities[limit],
+      nextCursor: cursor + limit,
+    }
+  })
--- a/src/trpc/routers/groups/information/get.procedure.ts
+++ b/src/trpc/routers/groups/information/get.procedure.ts
@@ -1,14 +1,10 @@
-import { getGroup } from '@/lib/api'
+import { getGroup, getGroupExpensesParticipants } from '@/lib/api'
 import { baseProcedure } from '@/trpc/init'
 import { TRPCError } from '@trpc/server'
 import { z } from 'zod'

-export const getGroupInformationProcedure = baseProcedure
-  .input(
-    z.object({
-      groupId: z.string().min(1),
-    }),
-  )
+export const getGroupProcedure = baseProcedure
+  .input(z.object({ groupId: z.string().min(1) }))
  .query(async ({ input: { groupId } }) => {
    const group = await getGroup(groupId)
    if (!group) {
@@ -17,5 +13,7 @@ export const getGroupInformationProcedure = baseProcedure
        message: 'Group not found.',
      })
    }
-    return { information: group.information ?? '' }
+
+    const participantsWithExpenses = await getGroupExpensesParticipants(groupId)
+    return { group, participantsWithExpenses }
  })
--- a/src/trpc/routers/groups/index.ts
+++ b/src/trpc/routers/groups/index.ts
@@ -1,10 +1,17 @@
 import { createTRPCRouter } from '@/trpc/init'
+import { activitiesRouter } from '@/trpc/routers/groups/activities'
 import { groupBalancesRouter } from '@/trpc/routers/groups/balances'
 import { groupExpensesRouter } from '@/trpc/routers/groups/expenses'
-import { groupInformationRouter } from '@/trpc/routers/groups/information'
+import { getGroupProcedure } from '@/trpc/routers/groups/get.procedure'
+import { groupStatsRouter } from '@/trpc/routers/groups/stats'
+import { updateGroupProcedure } from '@/trpc/routers/groups/update.procedure'

 export const groupsRouter = createTRPCRouter({
  expenses: groupExpensesRouter,
  balances: groupBalancesRouter,
-  information: groupInformationRouter,
+  stats: groupStatsRouter,
+  activities: activitiesRouter,
+
+  get: getGroupProcedure,
+  update: updateGroupProcedure,
 })
--- a/src/trpc/routers/groups/information/index.ts
+++ b/src/trpc/routers/groups/information/index.ts
@@ -1,6 +0,0 @@
-import { createTRPCRouter } from '@/trpc/init'
-import { getGroupInformationProcedure } from '@/trpc/routers/groups/information/get.procedure'
-
-export const groupInformationRouter = createTRPCRouter({
-  get: getGroupInformationProcedure,
-})
--- a/src/trpc/routers/groups/stats/get.procedure.ts
+++ b/src/trpc/routers/groups/stats/get.procedure.ts
@@ -0,0 +1,35 @@
+import { getGroupExpenses } from '@/lib/api'
+import {
+  getTotalActiveUserPaidFor,
+  getTotalActiveUserShare,
+  getTotalGroupSpending,
+} from '@/lib/totals'
+import { baseProcedure } from '@/trpc/init'
+import { z } from 'zod'
+
+export const getGroupStatsProcedure = baseProcedure
+  .input(
+    z.object({
+      groupId: z.string().min(1),
+      participantId: z.string().optional(),
+    }),
+  )
+  .query(async ({ input: { groupId, participantId } }) => {
+    const expenses = await getGroupExpenses(groupId)
+    const totalGroupSpendings = getTotalGroupSpending(expenses)
+
+    const totalParticipantSpendings =
+      participantId !== undefined
+        ? getTotalActiveUserPaidFor(participantId, expenses)
+        : undefined
+    const totalParticipantShare =
+      participantId !== undefined
+        ? getTotalActiveUserShare(participantId, expenses)
+        : undefined
+
+    return {
+      totalGroupSpendings,
+      totalParticipantSpendings,
+      totalParticipantShare,
+    }
+  })
--- a/src/trpc/routers/groups/stats/index.ts
+++ b/src/trpc/routers/groups/stats/index.ts
@@ -0,0 +1,6 @@
+import { createTRPCRouter } from '@/trpc/init'
+import { getGroupStatsProcedure } from '@/trpc/routers/groups/stats/get.procedure'
+
+export const groupStatsRouter = createTRPCRouter({
+  get: getGroupStatsProcedure,
+})
--- a/src/trpc/routers/groups/update.procedure.ts
+++ b/src/trpc/routers/groups/update.procedure.ts
@@ -0,0 +1,16 @@
+import { updateGroup } from '@/lib/api'
+import { groupFormSchema } from '@/lib/schemas'
+import { baseProcedure } from '@/trpc/init'
+import { z } from 'zod'
+
+export const updateGroupProcedure = baseProcedure
+  .input(
+    z.object({
+      groupId: z.string().min(1),
+      groupFormValues: groupFormSchema,
+      participantId: z.string().optional(),
+    }),
+  )
+  .mutation(async ({ input: { groupId, groupFormValues, participantId } }) => {
+    await updateGroup(groupId, groupFormValues, participantId)
+  })