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,97 @@
+import React, { memo } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import Ionicons from '@react-native-vector-icons/ionicons';
+import { useTheme } from '../../../theme';
+import { Card } from '../../../components';
+
+const CBS_ACTIONS = [
+  { id: 'transfer', title: 'Transfer', subtitle: 'Send Funds', icon: 'send', color: '#1E40AF', route: 'Payments' },
+  { id: 'payments', title: 'Pay Bills', subtitle: 'Utilities', icon: 'receipt', color: '#10B981', route: 'Payments' },
+  { id: 'airtime', title: 'Airtime', subtitle: 'Recharge', icon: 'phone-portrait', color: '#8B5CF6', route: 'Payments' },
+  { id: 'loans', title: 'Loans', subtitle: 'Manage', icon: 'cash', color: '#F59E0B', route: 'LoanFlow' },
+  { id: 'cards', title: 'Cards', subtitle: 'Security', icon: 'card', color: '#EC4899', route: 'Cards' },
+  { id: 'services', title: 'Stats', subtitle: 'Summary', icon: 'stats-chart', color: '#0EA5E9', route: 'Home' },
+];
+
+interface QuickActionsProps {
+  onPressRoute: (route: string) => void;
+}
+
+const QuickActionsComponent = ({ onPressRoute }: QuickActionsProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.grid}>
+      {CBS_ACTIONS.map((action) => (
+        <Card
+          key={action.id}
+          style={styles.card}
+        >
+          <Pressable
+            onPress={() => onPressRoute(action.route)}
+            style={styles.pressable}
+          >
+            <View style={[styles.iconContainer, { backgroundColor: `${action.color}15` }]}>
+              <Ionicons name={action.icon as any} size={22} color={action.color} />
+            </View>
+            <View>
+              <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{action.title}</Text>
+              <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                {action.subtitle}
+              </Text>
+            </View>
+          </Pressable>
+        </Card>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12,
+  },
+  card: {
+    width: '31%', // Three columns for a more dense, premium feel
+    padding: 0,
+    borderRadius: 20,
+    overflow: 'hidden',
+  },
+  pressable: {
+    padding: 16,
+    gap: 10,
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: '800',
+    textAlign: 'center',
+    letterSpacing: -0.2,
+  },
+  subtitle: {
+    fontSize: 9,
+    marginTop: 2,
+    fontWeight: '600',
+    textAlign: 'center',
+    opacity: 0.6,
+    textTransform: 'uppercase',
+  },
+});
+
+export const QuickActions = memo(QuickActionsComponent);
+