add activity log to expense form

src/app/groups/[groupId]/activity/activity-item.tsx

@@ -16,7 +16,7 @@ type Props = {
   dateStyle: DateTimeStyle
 }
 
-function useSummary(activity: Activity, participantName?: string) {
+export function useSummary(activity: Activity, participantName?: string) {
   const t = useTranslations('Activity')
   const participant = participantName ?? t('someone')
   const expense = activity.data ?? ''

src/app/groups/[groupId]/activity/activity-list.tsx

@@ -11,7 +11,7 @@ type Props = {
   activities: Activity[]
 }
 
-const DATE_GROUPS = {
+export const DATE_GROUPS = {
   TODAY: 'today',
   YESTERDAY: 'yesterday',
   EARLIER_THIS_WEEK: 'earlierThisWeek',
@@ -45,7 +45,7 @@ function getDateGroup(date: Dayjs, today: Dayjs) {
   }
 }
 
-function getGroupedActivitiesByDate(activities: Activity[]) {
+export function getGroupedActivitiesByDate(activities: Activity[]) {
   const today = dayjs()
   return activities.reduce(
     (result: { [key: string]: Activity[] }, activity: Activity) => {

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -4,6 +4,7 @@ import {
   deleteExpense,
   getCategories,
   getExpense,
+  getExpenseActivity,
   updateExpense,
 } from '@/lib/api'
 import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
@@ -40,12 +41,15 @@ export default async function EditExpensePage({
     redirect(`/groups/${groupId}`)
   }
 
+  const activities = await getExpenseActivity(expenseId)
+
   return (
     <Suspense>
       <ExpenseForm
         group={group}
         expense={expense}
         categories={categories}
+        activities={activities}
         onSubmit={updateExpenseAction}
         onDelete={deleteExpenseAction}
         runtimeFeatureFlags={await getRuntimeFeatureFlags()}

src/components/expense-activity-item.tsx

@@ -0,0 +1,57 @@
+'use client'
+import { useSummary } from '@/app/groups/[groupId]/activity/activity-item'
+import { Button } from '@/components/ui/button'
+import { getExpense, getGroup } from '@/lib/api'
+import { DateTimeStyle, cn, formatDate } from '@/lib/utils'
+import { Activity, Participant } from '@prisma/client'
+import { useLocale } from 'next-intl'
+import { useRouter } from 'next/navigation'
+
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  activity: Activity
+  participant?: Participant
+  expense?: Awaited<ReturnType<typeof getExpense>>
+  dateStyle: DateTimeStyle
+}
+
+export function ExpenseActivityItem({
+  group,
+  activity,
+  participant,
+  expense,
+  dateStyle,
+}: Props) {
+  const router = useRouter()
+  const summary = useSummary(activity, participant?.name)
+  const locale = useLocale()
+
+  return (
+    <div
+      className={cn(
+        'flex justify-between sm:rounded-lg px-2 sm:pr-1 sm:pl-2 py-2 text-sm hover:bg-accent gap-1 items-stretch',
+        'cursor-pointer',
+      )}
+    >
+      <div className="flex flex-col justify-between items-start">
+        {dateStyle !== undefined && (
+          <div className="mt-1 text-xs/5 text-muted-foreground">
+            {formatDate(activity.time, locale, { dateStyle })}
+          </div>
+        )}
+        <div className="my-1 text-xs/5 text-muted-foreground">
+          {formatDate(activity.time, locale, { timeStyle: 'short' })}
+        </div>
+      </div>
+      <div className="flex-1">
+        <div className="m-1">{summary}</div>
+      </div>
+      <Button
+        size="icon"
+        variant="link"
+        className="self-center hidden sm:flex w-5 h-5"
+        asChild
+      ></Button>
+    </div>
+  )
+}

src/components/expense-activity-list.tsx

@@ -0,0 +1,60 @@
+import {
+  DATE_GROUPS,
+  getGroupedActivitiesByDate,
+} from '@/app/groups/[groupId]/activity/activity-list'
+import { getActivities, getExpense, getGroup } from '@/lib/api'
+import { Activity } from '@prisma/client'
+import { ExpenseActivityItem } from './expense-activity-item'
+
+type Props = {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+  expense: Awaited<ReturnType<typeof getExpense>>
+  activities: NonNullable<Awaited<ReturnType<typeof getActivities>>>
+}
+
+export function ExpenseActivityList({ group, expense, activities }: Props) {
+  const groupedActivitiesByDate = getGroupedActivitiesByDate(activities)
+
+  return activities.length > 0 ? (
+    <>
+      {Object.values(DATE_GROUPS).map((dateGroup: string) => {
+        let groupActivities = groupedActivitiesByDate[dateGroup]
+        if (!groupActivities || groupActivities.length === 0) return null
+        const dateStyle =
+          dateGroup == DATE_GROUPS.TODAY || dateGroup == DATE_GROUPS.YESTERDAY
+            ? undefined
+            : 'medium'
+
+        return (
+          <div key={dateGroup}>
+            <div
+              className={
+                'text-muted-foreground text-xs py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
+              }
+            >
+              {dateGroup}
+            </div>
+            {groupActivities.map((activity: Activity) => {
+              const participant =
+                activity.participantId !== null
+                  ? group.participants.find(
+                      (p) => p.id === activity.participantId,
+                    )
+                  : undefined
+              return (
+                <ExpenseActivityItem
+                  key={activity.id}
+                  {...{ group, activity, participant, expense, dateStyle }}
+                />
+              )
+            })}
+          </div>
+        )
+      })}
+    </>
+  ) : (
+    <p className="px-6 text-sm py-6">
+      There is not yet any activity for this expense.
+    </p>
+  )
+}

src/components/expense-form.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { CategorySelector } from '@/components/category-selector'
+import { ExpenseActivityList } from '@/components/expense-activity-list'
 import { ExpenseDocumentsInput } from '@/components/expense-documents-input'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
@@ -33,7 +34,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { getCategories, getExpense, getGroup, randomId } from '@/lib/api'
+import {
+  getActivities,
+  getCategories,
+  getExpense,
+  getGroup,
+  randomId,
+} from '@/lib/api'
 import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 import { useActiveUser } from '@/lib/hooks'
 import {
@@ -58,6 +65,7 @@ export type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
   expense?: NonNullable<Awaited<ReturnType<typeof getExpense>>>
   categories: NonNullable<Awaited<ReturnType<typeof getCategories>>>
+  activities?: NonNullable<Awaited<ReturnType<typeof getActivities>>>
   onSubmit: (values: ExpenseFormValues, participantId?: string) => Promise<void>
   onDelete?: (participantId?: string) => Promise<void>
   runtimeFeatureFlags: RuntimeFeatureFlags
@@ -148,6 +156,7 @@ export function ExpenseForm({
   group,
   expense,
   categories,
+  activities,
   onSubmit,
   onDelete,
   runtimeFeatureFlags,
@@ -817,6 +826,28 @@ export function ExpenseForm({
           </Button>
         </div>
       </form>
+
+      {!isCreate && activities && (
+        <Card className="mb-4">
+          <CardHeader>
+            <CardTitle className="flex justify-between">
+              Expense History
+            </CardTitle>
+            <CardDescription>
+              Previous Activity for this expense.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col space-y-4">
+            <ExpenseActivityList
+              {...{
+                group,
+                expense,
+                activities,
+              }}
+            />
+          </CardContent>
+        </Card>
+      )}
     </Form>
   )
 }

src/lib/api.ts

@@ -312,6 +312,13 @@ export async function getActivities(groupId: string) {
   })
 }
 
+export async function getExpenseActivity(expenseId: string) {
+  return prisma.activity.findMany({
+    where: { expenseId: expenseId },
+    orderBy: [{ time: 'desc' }],
+  })
+}
+
 export async function logActivity(
   groupId: string,
   activityType: ActivityType,