125 lines
4.5 KiB
TypeScript
125 lines
4.5 KiB
TypeScript
/* eslint-disable react-native/no-inline-styles */
|
|
import React from 'react';
|
|
import { Text, View, ScrollView, TouchableOpacity } from 'react-native';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { getStyles } from './dashboard.styles';
|
|
import { statCards } from '../../mock-data/dashboard';
|
|
import { useTheme } from '../../theme';
|
|
|
|
export const DashboardScreen = () => {
|
|
const navigation = useNavigation<any>();
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await AsyncStorage.removeItem('userToken');
|
|
await AsyncStorage.removeItem('tenancyName');
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
navigation.reset({
|
|
index: 0,
|
|
routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
|
|
});
|
|
};
|
|
|
|
return (
|
|
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
|
{/* Hero Welcome banner */}
|
|
<View style={styles.heroCard}>
|
|
<View>
|
|
<Text style={styles.heroGreeting}>Welcome Back,</Text>
|
|
<Text style={styles.heroName}>Workspace Admin</Text>
|
|
<Text style={styles.heroInfo}>Convex CRM • Active session</Text>
|
|
</View>
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Icon name="log-out-outline" size={22} color="#EF4444" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Grid of Stats */}
|
|
<Text style={styles.sectionTitle}>Overview Metrics</Text>
|
|
<View style={styles.statsGrid}>
|
|
{statCards.map((stat, idx) => (
|
|
<View key={idx} style={styles.statCard}>
|
|
<View style={styles.statHeader}>
|
|
<View
|
|
style={[
|
|
styles.statIconContainer,
|
|
{ backgroundColor: `${stat.color}15` },
|
|
]}
|
|
>
|
|
<Icon name={stat.icon} size={20} color={stat.color} />
|
|
</View>
|
|
<Text
|
|
style={[
|
|
styles.statChange,
|
|
{
|
|
color: stat.change.startsWith('+') ? '#10B981' : '#EF4444',
|
|
},
|
|
]}
|
|
>
|
|
{stat.change}
|
|
</Text>
|
|
</View>
|
|
<Text style={styles.statCount}>{stat.count}</Text>
|
|
<Text style={styles.statTitle}>{stat.title}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Recent Activity Section */}
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>Recent Activity</Text>
|
|
<TouchableOpacity>
|
|
<Text style={styles.seeAllLink}>See All</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.activityList}>
|
|
<View style={styles.activityItem}>
|
|
<View style={[styles.activityBadge, { backgroundColor: '#10B981' }]}>
|
|
<Icon name="person-add" size={14} color="#FFF" />
|
|
</View>
|
|
<View style={styles.activityDetails}>
|
|
<Text style={styles.activityTitle}>New Lead Created</Text>
|
|
<Text style={styles.activityDesc}>
|
|
Sarah Jenkins added by System Import
|
|
</Text>
|
|
<Text style={styles.activityTime}>2 minutes ago</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.activityItem}>
|
|
<View style={[styles.activityBadge, { backgroundColor: '#3B82F6' }]}>
|
|
<Icon name="document-text" size={14} color="#FFF" />
|
|
</View>
|
|
<View style={styles.activityDetails}>
|
|
<Text style={styles.activityTitle}>Invoice #1042 Sent</Text>
|
|
<Text style={styles.activityDesc}>
|
|
Sent to Acme Corp for $1,250.00
|
|
</Text>
|
|
<Text style={styles.activityTime}>1 hour ago</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.activityItem}>
|
|
<View style={[styles.activityBadge, { backgroundColor: '#F59E0B' }]}>
|
|
<Icon name="chatbubble-ellipses" size={14} color="#FFF" />
|
|
</View>
|
|
<View style={styles.activityDetails}>
|
|
<Text style={styles.activityTitle}>Ticket #2045 Replied</Text>
|
|
<Text style={styles.activityDesc}>
|
|
Support agent responded to email query
|
|
</Text>
|
|
<Text style={styles.activityTime}>3 hours ago</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|