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,204 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import Animated, { FadeIn, SlideInUp } from 'react-native-reanimated';
+
+import { ScreenShell, Button } from '../../../components';
+import { useTheme } from '../../../theme';
+import type { AgentCollectionsStackParamList } from '../navigation/agentNavigationTypes';
+import { formatFullCurrency, formatDateTime } from '../utils/agentFormatters';
+
+// Since this is a mock receipt screen, we will just simulate receipt data based on the entry ID
+// In a real app, we would fetch the receipt details from the API
+
+type Props = NativeStackScreenProps<AgentCollectionsStackParamList, 'CollectionReceipt'>;
+
+export default function CollectionReceiptScreen({ route, navigation }: Props) {
+  const { entryId } = route.params;
+  const theme = useTheme();
+
+  const receipt = {
+    receiptNo: entryId,
+    customerName: 'Customer',
+    accountNumber: 'CBS00000000',
+    amount: 500,
+    date: new Date().toISOString(),
+    mode: 'cash',
+    agentName: 'Rajesh Kumar',
+    agentCode: 'AGT-2024-0147',
+  };
+
+  const InfoRow = ({ label, value, strong = false }: { label: string, value: string, strong?: boolean }) => (
+    <View style={styles.infoRow}>
+      <Text style={[styles.infoLabel, { color: theme.colors.textMuted }]}>{label}</Text>
+      <Text style={[
+        styles.infoValue, 
+        { 
+          color: strong ? theme.colors.textPrimary : theme.colors.textSecondary,
+          fontWeight: strong ? '700' : '500'
+        }
+      ]}>
+        {value}
+      </Text>
+    </View>
+  );
+
+  return (
+    <ScreenShell title="Receipt" scrollable={false}>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        
+        <Animated.View entering={SlideInUp.springify()} style={[styles.receiptCard, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
+          
+          <View style={styles.successHeader}>
+            <View style={[styles.successIcon, { backgroundColor: `${theme.colors.success}15` }]}>
+              <Ionicons name="checkmark" size={32} color={theme.colors.success} />
+            </View>
+            <Text style={[styles.successTitle, { color: theme.colors.success }]}>Payment Successful</Text>
+            <Text style={[styles.successAmount, { color: theme.colors.textPrimary }]}>{formatFullCurrency(receipt.amount)}</Text>
+          </View>
+
+          <View style={styles.dividerContainer}>
+            <View style={[styles.circleCutout, styles.leftCutout, { backgroundColor: theme.colors.background }]} />
+            <View style={[styles.dashedLine, { borderColor: theme.colors.cardBorder }]} />
+            <View style={[styles.circleCutout, styles.rightCutout, { backgroundColor: theme.colors.background }]} />
+          </View>
+
+          <View style={styles.detailsSection}>
+            <InfoRow label="Receipt No" value={receipt.receiptNo} strong />
+            <InfoRow label="Date & Time" value={formatDateTime(receipt.date)} />
+            <InfoRow label="Customer Name" value={receipt.customerName} strong />
+            <InfoRow label="Account Number" value={receipt.accountNumber} />
+            <InfoRow label="Payment Mode" value={receipt.mode.toUpperCase()} />
+            
+            <View style={[styles.solidDivider, { backgroundColor: theme.colors.cardBorder }]} />
+            
+            <InfoRow label="Agent Name" value={receipt.agentName} />
+            <InfoRow label="Agent Code" value={receipt.agentCode} />
+          </View>
+          
+        </Animated.View>
+
+        <Animated.View entering={FadeIn.delay(300)} style={styles.actionsRow}>
+          <Pressable style={[styles.actionBtn, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
+            <Ionicons name="share-outline" size={20} color={theme.colors.primary} />
+            <Text style={[styles.actionBtnText, { color: theme.colors.primary }]}>Share PDF</Text>
+          </Pressable>
+          
+          <Pressable style={[styles.actionBtn, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
+            <Ionicons name="print-outline" size={20} color={theme.colors.primary} />
+            <Text style={[styles.actionBtnText, { color: theme.colors.primary }]}>Print</Text>
+          </Pressable>
+        </Animated.View>
+
+        <Button 
+          title="Done" 
+          onPress={() => navigation.navigate('DailyCollection')} 
+          style={{ marginTop: 24 }}
+        />
+
+      </ScrollView>
+    </ScreenShell>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 16,
+  },
+  receiptCard: {
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  successHeader: {
+    alignItems: 'center',
+    padding: 24,
+  },
+  successIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  successTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+  successAmount: {
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 24,
+    position: 'relative',
+  },
+  dashedLine: {
+    flex: 1,
+    height: 1,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    marginHorizontal: 12,
+  },
+  circleCutout: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    position: 'absolute',
+    top: 0,
+  },
+  leftCutout: {
+    left: -12,
+  },
+  rightCutout: {
+    right: -12,
+  },
+  detailsSection: {
+    padding: 24,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+  },
+  infoLabel: {
+    fontSize: 13,
+  },
+  infoValue: {
+    fontSize: 14,
+  },
+  solidDivider: {
+    height: 1,
+    width: '100%',
+    marginVertical: 16,
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    gap: 16,
+    marginTop: 24,
+  },
+  actionBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+  },
+  actionBtnText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});