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,203 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import { useTheme } from '../../../theme';
+import type { AgentCustomer } from '../types/agentTypes';
+import { formatAgentCurrency, maskPhone } from '../utils/agentFormatters';
+
+interface CustomerCardProps {
+  customer: AgentCustomer;
+  onPress?: () => void;
+  onAction?: () => void;
+  actionIcon?: string;
+  actionColor?: string;
+}
+
+export const CustomerCard = ({
+  customer,
+  onPress,
+  onAction,
+  actionIcon,
+  actionColor,
+}: CustomerCardProps) => {
+  const theme = useTheme();
+
+  const isOverdue = customer.status === 'overdue';
+  const isPaid = customer.dueAmount === 0;
+
+  const statusColor = isPaid 
+    ? theme.colors.success 
+    : isOverdue 
+      ? theme.colors.danger 
+      : theme.colors.warning;
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.card,
+        {
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.cardBorder,
+          opacity: pressed ? 0.9 : 1,
+          transform: [{ scale: pressed ? 0.98 : 1 }],
+        },
+      ]}
+      onPress={onPress}
+    >
+      <View style={styles.header}>
+        <View style={styles.profileInfo}>
+          <View style={[styles.avatar, { backgroundColor: `${theme.colors.primary}15` }]}>
+            <Text style={[styles.avatarText, { color: theme.colors.primary }]}>
+              {customer.name.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+          <View>
+            <Text style={[styles.name, { color: theme.colors.textPrimary }]}>{customer.name}</Text>
+            <View style={styles.phoneRow}>
+              <Ionicons name="call-outline" size={12} color={theme.colors.textMuted} />
+              <Text style={[styles.phone, { color: theme.colors.textMuted }]}>
+                {maskPhone(customer.phone)}
+              </Text>
+            </View>
+          </View>
+        </View>
+        
+        <View style={[styles.statusBadge, { backgroundColor: `${statusColor}15` }]}>
+          <View style={[styles.statusDot, { backgroundColor: statusColor }]} />
+          <Text style={[styles.statusText, { color: statusColor }]}>
+            {isPaid ? 'Paid' : isOverdue ? 'Overdue' : 'Pending'}
+          </Text>
+        </View>
+      </View>
+
+      <View style={[styles.divider, { backgroundColor: theme.colors.cardBorder }]} />
+
+      <View style={styles.detailsRow}>
+        <View style={styles.detailItem}>
+          <Text style={[styles.detailLabel, { color: theme.colors.textMuted }]}>Total Due</Text>
+          <Text style={[styles.detailValue, { color: isOverdue ? theme.colors.danger : theme.colors.textPrimary }]}>
+            {formatAgentCurrency(customer.dueAmount)}
+          </Text>
+        </View>
+        
+        <View style={[styles.vDivider, { backgroundColor: theme.colors.cardBorder }]} />
+        
+        <View style={styles.detailItem}>
+          <Text style={[styles.detailLabel, { color: theme.colors.textMuted }]}>Total Collected</Text>
+          <Text style={[styles.detailValue, { color: theme.colors.textPrimary }]}>
+            {formatAgentCurrency(customer.totalCollected)}
+          </Text>
+        </View>
+
+        {onAction && (
+          <Pressable 
+            style={[styles.actionBtn, { backgroundColor: `${actionColor || theme.colors.primary}15` }]}
+            onPress={onAction}
+          >
+            <Ionicons name={actionIcon || 'chevron-forward'} size={18} color={actionColor || theme.colors.primary} />
+          </Pressable>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    borderWidth: 1,
+    padding: 16,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.03,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  profileInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: '700',
+    marginBottom: 2,
+  },
+  phoneRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  phone: {
+    fontSize: 12,
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+    gap: 4,
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  statusText: {
+    fontSize: 10,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+  },
+  divider: {
+    height: 1,
+    width: '100%',
+    marginVertical: 12,
+  },
+  detailsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  detailItem: {
+    flex: 1,
+  },
+  detailLabel: {
+    fontSize: 11,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  detailValue: {
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  vDivider: {
+    width: 1,
+    height: 30,
+    marginHorizontal: 16,
+  },
+  actionBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 16,
+  },
+});