104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { BackHandler } from 'react-native';
|
||
|
|
import { useNavigation, NavigationProp, useFocusEffect } from '@react-navigation/native';
|
||
|
|
import { RootStackParamList } from '@/types';
|
||
|
|
import Html from '@/components/HtmlRender';
|
||
|
|
|
||
|
|
const htmlContent = `
|
||
|
|
<div style="height: 100%; background: #fff;">
|
||
|
|
<div style="
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding:10px;padding-top:35px;font-size: 16px; text-align:center; font-size: 20px; background: #0ea5e9">
|
||
|
|
<div>
|
||
|
|
<svg color="white" width="30" height="30" icon="dashboard" />
|
||
|
|
</div>
|
||
|
|
<div style="color:white; margin-left:10px;">Dashboard</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style="
|
||
|
|
width: 100%;
|
||
|
|
padding: 0px 5px;
|
||
|
|
margin-top: 20px;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
">
|
||
|
|
<div style="
|
||
|
|
flex:1;
|
||
|
|
height: 65px ;
|
||
|
|
width: 75px;
|
||
|
|
border-radius: 10px;
|
||
|
|
justify-content:center;
|
||
|
|
align-items:center;
|
||
|
|
">
|
||
|
|
<p style="padding: 0 10px;">
|
||
|
|
<p style="margin:0;color:#0ea5e9; font-size: 24px; font-weight: 600">200</p>
|
||
|
|
<p style="margin:0; font-size: 14px; font-weight: 400">Sales Today</p>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div style="
|
||
|
|
flex:1;
|
||
|
|
height: 65px ;
|
||
|
|
width: 75px;
|
||
|
|
border-radius: 10px;
|
||
|
|
justify-content:center;
|
||
|
|
align-items:center;
|
||
|
|
">
|
||
|
|
<p style="padding: 0 10px;">
|
||
|
|
<p style="margin:0;color:#0ea5e9; font-size: 24px; font-weight: 600">26.200</p>
|
||
|
|
<p style="margin:0; font-size: 14px; font-weight: 400">Overall Sales</p>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div style="
|
||
|
|
flex:1;
|
||
|
|
height: 65px ;
|
||
|
|
width: 75px;
|
||
|
|
border-radius: 10px;
|
||
|
|
justify-content:center;
|
||
|
|
align-items:center;
|
||
|
|
">
|
||
|
|
<p style="padding: 0 10px;">
|
||
|
|
<p style="margin:0;color:#0ea5e9; font-size: 24px; font-weight: 600">1<sub>st</sub></p>
|
||
|
|
<p style="margin:0; font-size: 14px; font-weight: 400">Ranking</p>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="padding: 0 20px;">
|
||
|
|
<chart/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
const DahsboardScreen = () => {
|
||
|
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
||
|
|
|
||
|
|
useFocusEffect(
|
||
|
|
React.useCallback(() => {
|
||
|
|
const onBackPress = () => {
|
||
|
|
navigation.navigate("home");
|
||
|
|
return true; // Prevent default behavior (exit app)
|
||
|
|
};
|
||
|
|
|
||
|
|
BackHandler.addEventListener('hardwareBackPress', onBackPress);
|
||
|
|
navigation.setOptions({ headerLeft: () => null }); // Remove back button
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
BackHandler.removeEventListener('hardwareBackPress', onBackPress);
|
||
|
|
};
|
||
|
|
}, [navigation])
|
||
|
|
);
|
||
|
|
|
||
|
|
const Action = {
|
||
|
|
openMenuAction: function (prop: any) {
|
||
|
|
const menu: string = prop?.menu;
|
||
|
|
navigation.navigate(menu);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Html action={Action} html={htmlContent} />
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DahsboardScreen;
|