124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, StyleSheet, Text, Pressable, ScrollView } from 'react-native';
|
|
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import Animated, { FadeIn, FadeInRight, FadeInLeft } from 'react-native-reanimated';
|
|
|
|
import { ScreenShell } from '../../../components';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import type { AgentLoansStackParamList } from '../navigation/agentNavigationTypes';
|
|
|
|
import LoanRequestListScreen from './LoanRequestListScreen';
|
|
import CommissionDashboardScreen from './CommissionDashboardScreen';
|
|
import AccountOpeningScreen from './AccountOpeningScreen';
|
|
|
|
type Props = NativeStackScreenProps<AgentLoansStackParamList, 'AgentLoansMain'>;
|
|
|
|
type TabKey = 'loans' | 'commission' | 'account';
|
|
|
|
export default function AgentLoansScreen({ route, navigation }: Props) {
|
|
const theme = useTheme();
|
|
const [activeTab, setActiveTab] = useState<TabKey>(route.params?.initialTab || 'loans');
|
|
|
|
const tabs: { key: TabKey; label: string; icon: string }[] = [
|
|
{ key: 'loans', label: 'Loans', icon: 'document-text-outline' },
|
|
{ key: 'commission', label: 'Commission', icon: 'star-outline' },
|
|
{ key: 'account', label: 'New A/C', icon: 'person-add-outline' },
|
|
];
|
|
|
|
return (
|
|
<ScreenShell scrollable={false} withTabBar={false} keyboardAware={false}>
|
|
<View style={styles.header}>
|
|
<Text style={[styles.headerTitle, { color: theme.colors.textPrimary }]}>Agent Workspace</Text>
|
|
</View>
|
|
|
|
<View style={styles.tabContainer}>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.key;
|
|
return (
|
|
<Pressable
|
|
key={tab.key}
|
|
style={[
|
|
styles.tab,
|
|
{
|
|
backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
|
|
borderColor: isActive ? theme.colors.primary : theme.colors.cardBorder,
|
|
}
|
|
]}
|
|
onPress={() => setActiveTab(tab.key)}
|
|
>
|
|
<Ionicons
|
|
name={tab.icon as any}
|
|
size={16}
|
|
color={isActive ? theme.colors.white : theme.colors.textMuted}
|
|
/>
|
|
<Text style={[
|
|
styles.tabLabel,
|
|
{ color: isActive ? theme.colors.white : theme.colors.textSecondary }
|
|
]}>
|
|
{tab.label}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
<View style={styles.contentArea}>
|
|
{activeTab === 'loans' && (
|
|
<Animated.View entering={FadeInLeft} style={{ flex: 1 }}>
|
|
<LoanRequestListScreen navigation={navigation as any} />
|
|
</Animated.View>
|
|
)}
|
|
|
|
{activeTab === 'commission' && (
|
|
<Animated.View entering={FadeIn} style={{ flex: 1 }}>
|
|
<CommissionDashboardScreen />
|
|
</Animated.View>
|
|
)}
|
|
|
|
{activeTab === 'account' && (
|
|
<Animated.View entering={FadeInRight} style={{ flex: 1 }}>
|
|
<AccountOpeningScreen navigation={navigation as any} />
|
|
</Animated.View>
|
|
)}
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
paddingBottom: 8,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 22,
|
|
fontFamily: fontFamily.bold,
|
|
letterSpacing: -0.5,
|
|
},
|
|
tabContainer: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 16,
|
|
marginBottom: 12,
|
|
gap: 8,
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 10,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
gap: 6,
|
|
},
|
|
tabLabel: {
|
|
fontSize: 12,
|
|
fontFamily: fontFamily.bold,
|
|
},
|
|
contentArea: {
|
|
flex: 1,
|
|
},
|
|
});
|