web: show settlement reminder history

Author: Arun-kushwaha007

apps/web/app/dashboard/groups/[groupId]/settle/page.tsx

@@ -1,4 +1,4 @@
-import { GroupDto, GroupMemberSummaryDto, SimplifySuggestionDto } from '@fairshare/shared-types';
+import { ActivityDto, GroupDto, GroupMemberSummaryDto, SimplifySuggestionDto } from '@fairshare/shared-types';
 import { notFound } from 'next/navigation';
 import { DashboardLayout } from '../../../../../src/components/layout';
 import { SettlementList } from '../../../../../src/components/groups';
@@ -8,10 +8,11 @@ export default async function SettleGroupPage({ params }: { params: { groupId: s
   const { groupId } = params;
 
   try {
-    const [group, members, suggestions] = await Promise.all([
+    const [group, members, suggestions, activity] = await Promise.all([
       backendFetch<GroupDto>(`/groups/${groupId}`),
       backendFetch<GroupMemberSummaryDto[]>(`/groups/${groupId}/members`),
       backendFetch<SimplifySuggestionDto[]>(`/groups/${groupId}/simplify`),
+      backendFetch<{ items: ActivityDto[]; nextCursor: number | null }>(`/activity/group/${groupId}?cursor=0&limit=20`),
     ]);
 
     const memberLookup = members.reduce<Record<string, { name: string; email: string }>>((acc, member) => {
@@ -35,6 +36,7 @@ export default async function SettleGroupPage({ params }: { params: { groupId: s
             currency={group.currency}
             suggestions={suggestions}
             memberLookup={memberLookup}
+            initialReminderActivity={activity.items.filter((event) => event.type === 'settlement_reminder')}
           />
         </div>
       </DashboardLayout>

apps/web/src/components/activity/ActivityFeed.tsx

@@ -3,7 +3,7 @@
 import type { JSX } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { ActivityDto, GroupDto } from '@fairshare/shared-types';
-import { ActivitySquare, BadgeCheck, Clock3, Mail, Receipt, RefreshCw, UsersRound } from 'lucide-react';
+import { ActivitySquare, BadgeCheck, BellRing, Clock3, Mail, Receipt, RefreshCw, UsersRound } from 'lucide-react';
 import { useToast } from '../ui/Toaster';
 
 type ActivityResponse = { items: ActivityDto[]; nextCursor: number | null };
@@ -13,6 +13,7 @@ const iconByType: Record<ActivityDto['type'], JSX.Element> = {
   expense_updated: <RefreshCw className="w-4 h-4" />,
   expense_deleted: <ActivitySquare className="w-4 h-4" />,
   settlement_created: <BadgeCheck className="w-4 h-4" />,
+  settlement_reminder: <BellRing className="w-4 h-4" />,
   member_joined: <UsersRound className="w-4 h-4" />,
   member_invited: <Mail className="w-4 h-4" />,
 };
@@ -22,6 +23,7 @@ const accentByType: Record<ActivityDto['type'], string> = {
   expense_updated: '#F59E0B',
   expense_deleted: '#EF4444',
   settlement_created: '#22C55E',
+  settlement_reminder: '#8B5CF6',
   member_joined: '#14B8A6',
   member_invited: '#EC4899',
 };
@@ -37,6 +39,13 @@ function labelFor(activity: ActivityDto, userNameMap: Record<string, string>): s
       return `${actor} deleted an expense`;
     case 'settlement_created':
       return `${actor} recorded a settlement`;
+    case 'settlement_reminder': {
+      const payerId = typeof activity.metadata?.payerId === 'string' ? activity.metadata.payerId : '';
+      const receiverId = typeof activity.metadata?.receiverId === 'string' ? activity.metadata.receiverId : '';
+      const payer = userNameMap[payerId] ?? payerId.slice(0, 8);
+      const receiver = userNameMap[receiverId] ?? receiverId.slice(0, 8);
+      return `${actor} reminded ${payer} to pay ${receiver}`;
+    }
     case 'member_joined':
       return `${actor} joined the group`;
     case 'member_invited':
@@ -217,7 +226,7 @@ export function ActivityFeed({
               className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-card)] px-4 py-3 text-sm font-bold text-[var(--fs-text-primary)] hover:border-[var(--fs-primary)] transition-colors"
               disabled={loadingMore}
             >
-              {loadingMore ? 'Loading more…' : 'Load more'}
+              {loadingMore ? 'Loading more...' : 'Load more'}
             </button>
           ) : null}
         </div>

apps/web/src/components/groups/SettlementList.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { SimplifySuggestionDto } from '@fairshare/shared-types';
-import { BellRing, CheckCircle2 } from 'lucide-react';
+import { ActivityDto, SimplifySuggestionDto } from '@fairshare/shared-types';
+import { BellRing, CheckCircle2, Clock3 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { createSettlementAction, remindSettlementAction } from '../../lib/actions';
 import { useToast } from '../ui/Toaster';
@@ -12,14 +12,30 @@ type SettlementListProps = {
   currency: string;
   suggestions: SimplifySuggestionDto[];
   memberLookup: Record<string, { name: string; email: string }>;
+  initialReminderActivity: ActivityDto[];
 };
 
-export function SettlementList({ groupId, currency, suggestions, memberLookup }: SettlementListProps) {
+const suggestionKey = (fromUserId: string, toUserId: string, amountCents: string) => `${fromUserId}-${toUserId}-${amountCents}`;
+
+function timeAgo(iso: string): string {
+  const now = Date.now();
+  const diff = Math.max(1, Math.floor((now - new Date(iso).getTime()) / 1000));
+  if (diff < 60) return `${diff}s ago`;
+  const minutes = Math.floor(diff / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+export function SettlementList({ groupId, currency, suggestions, memberLookup, initialReminderActivity }: SettlementListProps) {
   const [pendingId, setPendingId] = useState<string | null>(null);
   const [reminderId, setReminderId] = useState<string | null>(null);
   const [query, setQuery] = useState('');
   const [fromUserId, setFromUserId] = useState('');
   const [toUserId, setToUserId] = useState('');
+  const [reminderEvents, setReminderEvents] = useState<ActivityDto[]>(initialReminderActivity);
   const { toast } = useToast();
   const router = useRouter();
 
@@ -50,17 +66,47 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
         return true;
       }
 
-      const haystack = [
-        labelForUser(item.fromUserId),
-        labelForUser(item.toUserId),
-        formatAmount(item.amountCents),
-      ]
+      const haystack = [labelForUser(item.fromUserId), labelForUser(item.toUserId), formatAmount(item.amountCents)]
         .join(' ')
         .toLowerCase();
 
       return haystack.includes(normalizedQuery);
     });
-  }, [fromUserId, query, suggestions, toUserId]);
+  }, [fromUserId, query, suggestions, toUserId, memberLookup]);
+
+  const latestReminderBySuggestion = useMemo(() => {
+    const entries = new Map<string, ActivityDto>();
+
+    reminderEvents.forEach((event) => {
+      if (event.type !== 'settlement_reminder') {
+        return;
+      }
+
+      const payerId = typeof event.metadata?.payerId === 'string' ? event.metadata.payerId : null;
+      const receiverId = typeof event.metadata?.receiverId === 'string' ? event.metadata.receiverId : null;
+      const amountCents = typeof event.metadata?.amountCents === 'string' ? event.metadata.amountCents : null;
+      if (!payerId || !receiverId || !amountCents) {
+        return;
+      }
+
+      const key = suggestionKey(payerId, receiverId, amountCents);
+      const existing = entries.get(key);
+      if (!existing || new Date(event.createdAt).getTime() > new Date(existing.createdAt).getTime()) {
+        entries.set(key, event);
+      }
+    });
+
+    return entries;
+  }, [reminderEvents]);
+
+  const recentReminders = useMemo(
+    () =>
+      reminderEvents
+        .filter((event) => event.type === 'settlement_reminder')
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+        .slice(0, 4),
+    [reminderEvents],
+  );
 
   const resetFilters = () => {
     setQuery('');
@@ -69,7 +115,7 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
   };
 
   const markSettled = async (suggestion: SimplifySuggestionDto) => {
-    setPendingId(`${suggestion.fromUserId}-${suggestion.toUserId}-${suggestion.amountCents}`);
+    setPendingId(suggestionKey(suggestion.fromUserId, suggestion.toUserId, suggestion.amountCents));
     const result = await createSettlementAction(groupId, {
       payerId: suggestion.fromUserId,
       receiverId: suggestion.toUserId,
@@ -88,7 +134,7 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
   };
 
   const sendReminder = async (suggestion: SimplifySuggestionDto) => {
-    const key = `${suggestion.fromUserId}-${suggestion.toUserId}-${suggestion.amountCents}`;
+    const key = suggestionKey(suggestion.fromUserId, suggestion.toUserId, suggestion.amountCents);
     setReminderId(key);
     const result = await remindSettlementAction(groupId, {
       payerId: suggestion.fromUserId,
@@ -102,6 +148,9 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
       return;
     }
 
+    if ('activity' in result && result.activity) {
+      setReminderEvents((prev) => [result.activity, ...prev.filter((event) => event.id !== result.activity.id)]);
+    }
     toast(`Reminder sent to ${labelForUser(suggestion.fromUserId)}`);
     setReminderId(null);
   };
@@ -156,6 +205,36 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
         </div>
       </div>
 
+      {recentReminders.length > 0 ? (
+        <div className="rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] p-5 shadow-[var(--fs-shadow-soft)]">
+          <div className="flex items-center gap-2">
+            <BellRing className="h-4 w-4 text-[var(--fs-primary)]" />
+            <h3 className="text-base font-extrabold text-[var(--fs-text-primary)]">Recent reminders</h3>
+          </div>
+          <div className="mt-3 space-y-2">
+            {recentReminders.map((event) => {
+              const payerId = typeof event.metadata?.payerId === 'string' ? event.metadata.payerId : '';
+              const receiverId = typeof event.metadata?.receiverId === 'string' ? event.metadata.receiverId : '';
+              const amountCents = typeof event.metadata?.amountCents === 'string' ? event.metadata.amountCents : '0';
+              return (
+                <div key={event.id} className="rounded-2xl border border-[var(--fs-border)] bg-[var(--fs-background)]/70 px-4 py-3">
+                  <p className="text-sm font-semibold text-[var(--fs-text-primary)]">
+                    {labelForUser(event.actorUserId)} reminded {labelForUser(payerId)} to pay {labelForUser(receiverId)}
+                  </p>
+                  <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] font-medium text-[var(--fs-text-muted)]">
+                    <span>{formatAmount(amountCents)}</span>
+                    <span className="inline-flex items-center gap-1">
+                      <Clock3 className="h-3 w-3" />
+                      {timeAgo(event.createdAt)}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
       {filteredSuggestions.length === 0 ? (
         <div className="rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] p-8 text-center shadow-[var(--fs-shadow-soft)]">
           <p className="text-lg font-bold text-[var(--fs-text-primary)] mb-1">
@@ -167,9 +246,11 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
         </div>
       ) : (
         filteredSuggestions.map((item) => {
-          const key = `${item.fromUserId}-${item.toUserId}-${item.amountCents}`;
+          const key = suggestionKey(item.fromUserId, item.toUserId, item.amountCents);
           const pending = pendingId === key;
           const reminding = reminderId === key;
+          const latestReminder = latestReminderBySuggestion.get(key);
+
           return (
             <div
               key={key}
@@ -181,6 +262,11 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
                   {labelForUser(item.toUserId)}
                 </p>
                 <p className="text-[11px] font-medium text-[var(--fs-text-muted)]">{formatAmount(item.amountCents)}</p>
+                {latestReminder ? (
+                  <p className="mt-1 text-[11px] font-medium text-[var(--fs-text-muted)]">
+                    Last reminded {timeAgo(latestReminder.createdAt)} by {labelForUser(latestReminder.actorUserId)}
+                  </p>
+                ) : null}
               </div>
               <div className="flex w-full sm:w-auto items-center gap-2">
                 <button
@@ -212,3 +298,4 @@ export function SettlementList({ groupId, currency, suggestions, memberLookup }:
     </div>
   );
 }
+

apps/web/src/lib/actions.ts

@@ -9,6 +9,7 @@ import {
   PresignedReceiptUrlResponseDto,
   RecurringExpenseDto,
   RemindSettlementRequestDto,
+  RemindSettlementResponseDto,
   SettlementDto,
   UpdateExpenseRequestDto,
   UpdateGroupDefaultSplitRequestDto,
@@ -190,7 +191,7 @@ export async function remindSettlementAction(groupId: string, payload: RemindSet
     };
   }
 
-  return { success: true };
+  return { ...(data as RemindSettlementResponseDto), success: true };
 }
 
 export async function createReceiptUrlAction(expenseId: string, extension?: string) {
@@ -316,3 +317,7 @@ export async function deleteRecurringExpenseAction(recurringExpenseId: string) {
 
   return { success: true };
 }
+
+
+
+