native_convex_CRM/app/features/dashboard/dashboard.screen.tsx

59 lines
1.7 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { ScrollView, View, Text, InteractionManager } from 'react-native';
import { getStyles } from './dashboard.styles';
import { useTheme } from '../../theme';
import { LeadDistribution } from '@components';
import { useAppDispatch, useAppSelector, RootState } from '@store';
import { getDashboardLeadCount } from './thunk';
import { NotificationService } from '@services';
export const DashboardScreen = () => {
const dispatch = useAppDispatch();
const { theme: colors } = useTheme();
const styles = getStyles(colors);
const [selectedAction, setSelectedAction] = useState<string>('year');
const user_data = useAppSelector((state: RootState) => state.auth.user_data);
const { leadCountData, loading, error } = useAppSelector(
(state: RootState) => state.dashboard,
);
useEffect(() => {
const task = InteractionManager.runAfterInteractions(() => {
NotificationService.requestPermission();
});
return () => task.cancel();
}, []);
useEffect(() => {
if (user_data?.staffid) {
dispatch(
getDashboardLeadCount({
action: selectedAction,
staffid: user_data.staffid,
}),
);
}
}, [dispatch, selectedAction, user_data]);
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{error && (
<View style={styles.errorContainer}>
<Text style={styles.errorText}>{error}</Text>
</View>
)}
{/* Lead Distribution Chart Card */}
<LeadDistribution
data={leadCountData}
loading={loading}
activeAction={selectedAction}
onActionChange={setSelectedAction}
/>
</ScrollView>
);
};