90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { ScreenHeader } from '@components';
|
|
import { ClipboardIcon, ChevronRightIcon } from '@icons';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { getStyles } from './documentsScreen.styles';
|
|
|
|
export const DocumentsScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation();
|
|
|
|
const documentsList = [
|
|
{ id: 'dl', title: 'Driving License', sub: 'Verified', status: 'verified' },
|
|
{ id: 'aadhaar', title: 'Aadhaar Card', sub: 'Verified', status: 'verified' },
|
|
{ id: 'rc', title: 'Vehicle RC', sub: 'Verified', status: 'verified' },
|
|
{ id: 'insurance', title: 'Insurance', sub: 'Expires on 12 May 2026', status: 'expiring' },
|
|
{ id: 'vehicle_photo', title: 'Vehicle Photo', sub: 'Verified', status: 'verified' },
|
|
{ id: 'profile_photo', title: 'Profile Photo', sub: 'Verified', status: 'verified' },
|
|
];
|
|
|
|
const handleDocClick = (title: string) => {
|
|
Alert.alert('Document Preview', `Opening document view for ${title}...`);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Navigation Screen Header */}
|
|
<ScreenHeader
|
|
title="Documents"
|
|
showBack={true}
|
|
onBack={() => navigation.goBack()}
|
|
/>
|
|
|
|
<ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
|
|
{documentsList.map((doc) => (
|
|
<TouchableOpacity
|
|
key={doc.id}
|
|
style={styles.docCard}
|
|
activeOpacity={0.7}
|
|
onPress={() => handleDocClick(doc.title)}
|
|
>
|
|
<View style={styles.docLeft}>
|
|
<View style={styles.iconContainer}>
|
|
<ClipboardIcon size={20} color={colors.primary} />
|
|
</View>
|
|
<View style={styles.docInfo}>
|
|
<Text style={styles.docTitle} numberOfLines={1}>{doc.title}</Text>
|
|
<Text style={styles.docSub}>{doc.sub}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.statusContainer}>
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{
|
|
backgroundColor:
|
|
doc.status === 'verified'
|
|
? colors.primaryLight
|
|
: colors.warningLight,
|
|
},
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.statusText,
|
|
{
|
|
color:
|
|
doc.status === 'verified'
|
|
? colors.primary
|
|
: colors.warning,
|
|
},
|
|
]}
|
|
>
|
|
{doc.status === 'verified' ? 'VERIFIED' : 'ACTIVE'}
|
|
</Text>
|
|
</View>
|
|
<ChevronRightIcon size={20} color={colors.textSecondary} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default DocumentsScreen;
|