mobile: show settlement reminder history

Author: Arun-kushwaha007

apps/mobile/app/screens/ActivityScreen.tsx

@@ -18,6 +18,7 @@ const iconByType: Record<ActivityType, keyof typeof MaterialCommunityIcons.glyph
   expense_updated: 'file-document-edit',
   expense_deleted: 'delete',
   settlement_created: 'cash',
+  settlement_reminder: 'bell-ring-outline',
   member_joined: 'account-plus',
   member_invited: 'account-arrow-right',
 };
@@ -27,6 +28,7 @@ const colorByType: Record<ActivityType, string> = {
   expense_updated: '#F59E0B',
   expense_deleted: '#EF4444',
   settlement_created: '#22C55E',
+  settlement_reminder: '#8B5CF6',
   member_joined: '#14B8A6',
   member_invited: '#EC4899',
 };
@@ -42,6 +44,11 @@ const actionText = (activity: ActivityDto): string => {
       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 : 'a member';
+      const receiverId = typeof activity.metadata?.receiverId === 'string' ? activity.metadata.receiverId : 'another member';
+      return `${actor} reminded ${payerId} to pay ${receiverId}`;
+    }
     case 'member_joined':
       return `${actor} joined the group`;
     case 'member_invited':
@@ -81,7 +88,7 @@ export function ActivityScreen({ route }: { route?: { params?: { groupId?: strin
 
   const loadFirstPage = React.useCallback(async () => {
     try {
-      const data = groupId 
+      const data = groupId
         ? await groupService.activity(groupId, 0, PAGE_SIZE)
         : await groupService.userActivity(0, PAGE_SIZE);
       setEvents(data.items);
@@ -137,7 +144,7 @@ export function ActivityScreen({ route }: { route?: { params?: { groupId?: strin
             <MaterialCommunityIcons name={iconByType[item.type] || 'information-outline'} size={20} color={iconColor} />
           </View>
           <View style={styles.content}>
-            <Text style={[styles.title, { color: colors.text_primary }]} numberOfLines={1}>
+            <Text style={[styles.title, { color: colors.text_primary }]} numberOfLines={2}>
               {actionText(item)}
             </Text>
             <Text style={[styles.time, { color: colors.text_secondary }]}>
@@ -228,4 +235,4 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '700',
   },
-});
+});

apps/mobile/app/screens/SettleUpScreen.tsx

@@ -1,21 +1,38 @@
 import React from 'react';
 import { Linking, Modal, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
-import type { GroupMemberSummaryDto, SimplifySuggestionDto } from '@fairshare/shared-types';
+import type { ActivityDto, GroupMemberSummaryDto, SimplifySuggestionDto } from '@fairshare/shared-types';
 import LottieView from 'lottie-react-native';
 import { settlementService } from '../services/settlement.service';
 import { groupService } from '../services/group.service';
 import { useToastStore } from '../store/toastStore';
 import { spacing } from '../theme/spacing';
 
+const suggestionKey = (fromUserId: string, toUserId: string, amountCents: string) => `${fromUserId}-${toUserId}-${amountCents}`;
+
+const relativeTime = (iso: string): string => {
+  const now = Date.now();
+  const timestamp = new Date(iso).getTime();
+  const diffSec = Math.max(1, Math.floor((now - timestamp) / 1000));
+
+  if (diffSec < 60) return `${diffSec}s ago`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHour = Math.floor(diffMin / 60);
+  if (diffHour < 24) return `${diffHour}h ago`;
+  const diffDay = Math.floor(diffHour / 24);
+  return `${diffDay}d ago`;
+};
+
 export function SettleUpScreen({ route }: { route: { params: { groupId: string } } }) {
   const [suggestions, setSuggestions] = React.useState<SimplifySuggestionDto[]>([]);
   const [members, setMembers] = React.useState<GroupMemberSummaryDto[]>([]);
+  const [reminderEvents, setReminderEvents] = React.useState<ActivityDto[]>([]);
   const [successOpen, setSuccessOpen] = React.useState(false);
   const [upiReceiver, setUpiReceiver] = React.useState('');
   const [upiName, setUpiName] = React.useState('FairShare Member');
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);
-  const [remindingIndex, setRemindingIndex] = React.useState<number | null>(null);
+  const [remindingKey, setRemindingKey] = React.useState<string | null>(null);
   const [query, setQuery] = React.useState('');
   const [fromUserId, setFromUserId] = React.useState('');
   const [toUserId, setToUserId] = React.useState('');
@@ -24,12 +41,14 @@ export function SettleUpScreen({ route }: { route: { params: { groupId: string }
   React.useEffect(() => {
     const load = async () => {
       try {
-        const [nextSuggestions, nextMembers] = await Promise.all([
+        const [nextSuggestions, nextMembers, activityData] = await Promise.all([
           groupService.simplify(route.params.groupId),
           groupService.members(route.params.groupId),
+          groupService.activity(route.params.groupId, 0, 20),
         ]);
         setSuggestions(nextSuggestions);
         setMembers(nextMembers);
+        setReminderEvents(activityData.items.filter((event) => event.type === 'settlement_reminder'));
       } catch {
         toast('Failed to load suggestions');
       }
@@ -60,6 +79,35 @@ export function SettleUpScreen({ route }: { route: { params: { groupId: string }
     });
   }, [fromUserId, query, suggestions, toUserId, members]);
 
+  const latestReminderBySuggestion = React.useMemo(() => {
+    const entries = new Map<string, ActivityDto>();
+
+    reminderEvents.forEach((event) => {
+      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 = React.useMemo(
+    () =>
+      [...reminderEvents]
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+        .slice(0, 4),
+    [reminderEvents],
+  );
+
   const resetFilters = () => {
     setQuery('');
     setFromUserId('');
@@ -129,93 +177,126 @@ export function SettleUpScreen({ route }: { route: { params: { groupId: string }
           </View>
         </View>
 
+        {recentReminders.length > 0 ? (
+          <View style={styles.historyCard}>
+            <Text style={styles.historyTitle}>Recent reminders</Text>
+            {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 (
+                <View key={event.id} style={styles.historyItem}>
+                  <Text style={styles.historyText}>
+                    {labelForUser(event.actorUserId)} reminded {labelForUser(payerId)} to pay {labelForUser(receiverId)}
+                  </Text>
+                  <Text style={styles.historyMeta}>
+                    ${(Number(amountCents) / 100).toFixed(2)} • {relativeTime(event.createdAt)}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        ) : null}
+
         {filteredSuggestions.length === 0 ? (
           <View style={styles.emptyCard}>
             <Text style={styles.title}>{suggestions.length === 0 ? 'All clear' : 'No matching settlements'}</Text>
             <Text style={styles.amount}>{suggestions.length === 0 ? 'No suggested settlements right now.' : 'Try a different payer, receiver, or search query.'}</Text>
           </View>
         ) : null}
 
-        {filteredSuggestions.map((item, index) => (
-          <View key={`${item.fromUserId}-${item.toUserId}-${index}`} style={styles.card}>
-            <Text style={styles.title}>
-              {labelForUser(item.fromUserId)} pays {labelForUser(item.toUserId)}
-            </Text>
-            <Text style={styles.amount}>${(Number(item.amountCents) / 100).toFixed(2)}</Text>
-            <View style={styles.actionRow}>
-              <Button
-                mode="outlined"
-                style={styles.actionButton}
-                loading={remindingIndex === index}
-                disabled={remindingIndex === index}
-                onPress={async () => {
-                  try {
-                    setRemindingIndex(index);
-                    await groupService.remindSettlement(route.params.groupId, {
-                      payerId: item.fromUserId,
-                      receiverId: item.toUserId,
-                      amountCents: item.amountCents,
-                    });
-                    toast(`Reminder sent to ${labelForUser(item.fromUserId)}`);
-                  } catch {
-                    toast('Failed to send reminder');
-                  } finally {
-                    setRemindingIndex(null);
-                  }
-                }}
-              >
-                Remind
-              </Button>
-              <Button
-                mode="outlined"
-                style={styles.actionButton}
-                onPress={async () => {
-                  if (!upiReceiver.trim()) {
-                    toast('Enter receiver UPI ID first');
-                    return;
-                  }
-                  const amount = (Number(item.amountCents) / 100).toFixed(2);
-                  const upiLink = `upi://pay?pa=${encodeURIComponent(upiReceiver)}&pn=${encodeURIComponent(
-                    upiName || 'FairShare Member',
-                  )}&am=${encodeURIComponent(amount)}&cu=INR`;
-                  const supported = await Linking.canOpenURL(upiLink);
-                  if (!supported) {
-                    toast('No UPI app found on this device');
-                    return;
-                  }
-                  setSelectedIndex(index);
-                  await Linking.openURL(upiLink);
-                }}
-              >
-                Pay via UPI
-              </Button>
+        {filteredSuggestions.map((item, index) => {
+          const key = suggestionKey(item.fromUserId, item.toUserId, item.amountCents);
+          const latestReminder = latestReminderBySuggestion.get(key);
+
+          return (
+            <View key={`${key}-${index}`} style={styles.card}>
+              <Text style={styles.title}>
+                {labelForUser(item.fromUserId)} pays {labelForUser(item.toUserId)}
+              </Text>
+              <Text style={styles.amount}>${(Number(item.amountCents) / 100).toFixed(2)}</Text>
+              {latestReminder ? (
+                <Text style={styles.reminderStatus}>
+                  Last reminded {relativeTime(latestReminder.createdAt)} by {labelForUser(latestReminder.actorUserId)}
+                </Text>
+              ) : null}
+              <View style={styles.actionRow}>
+                <Button
+                  mode="outlined"
+                  style={styles.actionButton}
+                  loading={remindingKey === key}
+                  disabled={remindingKey === key}
+                  onPress={async () => {
+                    try {
+                      setRemindingKey(key);
+                      const result = await groupService.remindSettlement(route.params.groupId, {
+                        payerId: item.fromUserId,
+                        receiverId: item.toUserId,
+                        amountCents: item.amountCents,
+                      });
+                      setReminderEvents((prev) => [result.activity, ...prev.filter((event) => event.id !== result.activity.id)]);
+                      toast(`Reminder sent to ${labelForUser(item.fromUserId)}`);
+                    } catch {
+                      toast('Failed to send reminder');
+                    } finally {
+                      setRemindingKey(null);
+                    }
+                  }}
+                >
+                  Remind
+                </Button>
+                <Button
+                  mode="outlined"
+                  style={styles.actionButton}
+                  onPress={async () => {
+                    if (!upiReceiver.trim()) {
+                      toast('Enter receiver UPI ID first');
+                      return;
+                    }
+                    const amount = (Number(item.amountCents) / 100).toFixed(2);
+                    const upiLink = `upi://pay?pa=${encodeURIComponent(upiReceiver)}&pn=${encodeURIComponent(
+                      upiName || 'FairShare Member',
+                    )}&am=${encodeURIComponent(amount)}&cu=INR`;
+                    const supported = await Linking.canOpenURL(upiLink);
+                    if (!supported) {
+                      toast('No UPI app found on this device');
+                      return;
+                    }
+                    setSelectedIndex(index);
+                    await Linking.openURL(upiLink);
+                  }}
+                >
+                  Pay via UPI
+                </Button>
+              </View>
+              {selectedIndex === index ? (
+                <Button
+                  mode="contained"
+                  style={{ marginTop: 8 }}
+                  onPress={async () => {
+                    try {
+                      await settlementService.create(route.params.groupId, {
+                        payerId: item.fromUserId,
+                        receiverId: item.toUserId,
+                        amountCents: item.amountCents,
+                      });
+                      setSuccessOpen(true);
+                      setTimeout(() => {
+                        setSuccessOpen(false);
+                        toast('Settlement recorded');
+                      }, 700);
+                    } catch {
+                      toast('Failed to mark settlement');
+                    }
+                  }}
+                >
+                  Mark as paid
+                </Button>
+              ) : null}
             </View>
-            {selectedIndex === index ? (
-              <Button
-                mode="contained"
-                style={{ marginTop: 8 }}
-                onPress={async () => {
-                  try {
-                    await settlementService.create(route.params.groupId, {
-                      payerId: item.fromUserId,
-                      receiverId: item.toUserId,
-                      amountCents: item.amountCents,
-                    });
-                    setSuccessOpen(true);
-                    setTimeout(() => {
-                      setSuccessOpen(false);
-                      toast('Settlement recorded');
-                    }, 700);
-                  } catch {
-                    toast('Failed to mark settlement');
-                  }
-                }}
-              >
-                Mark as paid
-              </Button>
-            ) : null}
-          </View>
-        ))}
+          );
+        })}
       </ScrollView>
 
       <Modal visible={successOpen} transparent>
@@ -277,6 +358,31 @@ const styles = StyleSheet.create({
     color: '#6B7280',
     fontWeight: '600',
   },
+  historyCard: {
+    marginBottom: spacing.md,
+    padding: spacing.md,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(148, 163, 184, 0.24)',
+    gap: spacing.sm,
+  },
+  historyTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#111827',
+  },
+  historyItem: {
+    gap: 2,
+  },
+  historyText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  historyMeta: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
   emptyCard: {
     marginBottom: spacing.md,
     padding: spacing.lg,
@@ -301,6 +407,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: '#6B7280',
   },
+  reminderStatus: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontWeight: '600',
+  },
   actionRow: {
     flexDirection: 'row',
     gap: spacing.sm,