Fix form keyboard issues and sticky footers in agent screens

2026-05-26 16:34:05 +05:30
commit 9ac5e95d52
410 changed files with 86650 additions and 0 deletions
@@ -0,0 +1,115 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, FlatList, RefreshControl, Text } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+
+import { ScreenShell } from '../../../components';
+import { useTheme } from '../../../theme';
+import { useAppDispatch, useAppSelector } from '../../../app/hooks';
+import type { AgentCollectionsStackParamList } from '../navigation/agentNavigationTypes';
+import { useGetCollectionHistoryQuery } from '../services/agentApi';
+import { agentActions } from '../store/agentSlice';
+import { selectCollectionHistory } from '../store/agentSelectors';
+
+import { CollectionEntryCard } from '../components/CollectionEntryCard';
+import { AgentSkeletonLoader } from '../components/AgentSkeletonLoader';
+import { AgentEmptyState } from '../components/AgentEmptyState';
+import { formatAgentCurrency, formatDate } from '../utils/agentFormatters';
+
+type Props = NativeStackScreenProps<AgentCollectionsStackParamList, 'CollectionHistory'>;
+
+export default function CollectionHistoryScreen({ navigation }: Props) {
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+  
+  const history = useAppSelector(selectCollectionHistory);
+  
+  const { data, isLoading, refetch, isFetching } = useGetCollectionHistoryQuery({});
+
+  useEffect(() => {
+    if (data) {
+      dispatch(agentActions.setCollectionHistory(data));
+    }
+  }, [data, dispatch]);
+
+  const totalCollected = history.reduce((sum, item) => sum + item.collectedAmount, 0);
+
+  return (
+    <ScreenShell title="Collection History" scrollable={false}>
+      {/* Summary Header */}
+      <View style={[styles.summaryHeader, { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.cardBorder }]}>
+        <View style={styles.summaryItem}>
+          <Text style={[styles.summaryLabel, { color: theme.colors.textMuted }]}>Total Entries</Text>
+          <Text style={[styles.summaryValue, { color: theme.colors.textPrimary }]}>{history.length}</Text>
+        </View>
+        <View style={[styles.vDivider, { backgroundColor: theme.colors.cardBorder }]} />
+        <View style={styles.summaryItem}>
+          <Text style={[styles.summaryLabel, { color: theme.colors.textMuted }]}>Amount Collected</Text>
+          <Text style={[styles.summaryValue, { color: theme.colors.primary }]}>{formatAgentCurrency(totalCollected)}</Text>
+        </View>
+      </View>
+
+      <View style={styles.listArea}>
+        {isLoading && history.length === 0 ? (
+          <AgentSkeletonLoader type="list" />
+        ) : (
+          <FlatList
+            data={history}
+            keyExtractor={item => item.id}
+            contentContainerStyle={styles.listContent}
+            showsVerticalScrollIndicator={false}
+            refreshControl={
+              <RefreshControl refreshing={isFetching} onRefresh={refetch} colors={[theme.colors.primary]} />
+            }
+            ListEmptyComponent={() => (
+              <AgentEmptyState
+                title="No history found"
+                description="There are no past collection records."
+              />
+            )}
+            renderItem={({ item, index }) => (
+              <Animated.View entering={FadeInUp.delay(index * 50)}>
+                <CollectionEntryCard 
+                  entry={item}
+                  onPress={() => item.status !== 'pending' && item.receiptId ? navigation.navigate('CollectionReceipt', { entryId: item.receiptId }) : null}
+                />
+              </Animated.View>
+            )}
+          />
+        )}
+      </View>
+    </ScreenShell>
+  );
+}
+
+const styles = StyleSheet.create({
+  summaryHeader: {
+    flexDirection: 'row',
+    padding: 16,
+    borderBottomWidth: 1,
+  },
+  summaryItem: {
+    flex: 1,
+  },
+  summaryLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  summaryValue: {
+    fontSize: 20,
+    fontWeight: '800',
+  },
+  vDivider: {
+    width: 1,
+    height: '100%',
+    marginHorizontal: 16,
+  },
+  listArea: {
+    flex: 1,
+  },
+  listContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+});