PSS Trend Added

This commit is contained in:
CPM
2025-09-17 11:46:32 +05:30
parent 85bb27408e
commit d65979518f
6 changed files with 1064 additions and 190 deletions
+4 -2
View File
@@ -99,7 +99,7 @@ const Details = () => {
</View> </View>
<ScrollView style={{ padding: 20 }}> <ScrollView style={{ padding: 20 }}>
{selectedDetails.map((detail, index) => { {selectedDetails && selectedDetails.length > 0 ? selectedDetails.map((detail, index) => {
const values = modalGraphData[detail.GraphUrl] || []; const values = modalGraphData[detail.GraphUrl] || [];
if (!modalGraphData[detail.GraphUrl]) { if (!modalGraphData[detail.GraphUrl]) {
@@ -321,7 +321,9 @@ const Details = () => {
</View> </View>
); );
} }
})} }) :
<Loader visible={true} />
}
</ScrollView> </ScrollView>
<Modal <Modal
+110 -1
View File
@@ -206,4 +206,113 @@
"GraphOptions": {} "GraphOptions": {}
} }
] ]
} },
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Compliance",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Compliance_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 3,
"GraphId": 3,
"GraphType": "Table",
"GraphTitle": "SOS Compliance - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_sompliance_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 3,
"GraphId": 4,
"GraphType": "BarGraph",
"GraphTitle": "SOS Compliance Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_compliance_trend_perc_mtd",
"GraphBackground": "#fff",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
},
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Compliance",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_compliance_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 3,
"GraphId": 3,
"GraphType": "Table",
"GraphTitle": "SOS Actual - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/sos_compliance_lsv_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 3,
"GraphId": 4,
"GraphType": "BarGraph",
"GraphTitle": "SOS Compliance Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/sos_compliance_trend_lsv_perc",
"GraphBackground": "#fff",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
},
+108 -59
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, Image, TouchableOpacity, Dimensions, TextInput, ScrollView, FlatList, Button, Alert, Modal, TouchableWithoutFeedback, StatusBar, ActivityIndicator, Platform } from 'react-native' import { View, Text, Image, TouchableOpacity, Dimensions, TextInput, ScrollView, FlatList, Alert, Modal, ActivityIndicator, Platform } from 'react-native'
import React, { useCallback, useEffect, useRef, useState } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react'
import RBSheet from 'react-native-raw-bottom-sheet'; import RBSheet from 'react-native-raw-bottom-sheet';
import { styles } from './style'; import { styles } from './style';
@@ -10,12 +10,8 @@ import CustomDropdown from '../../../components/CustomDropdown';
import { GlobalTheme } from '../../../theme'; import { GlobalTheme } from '../../../theme';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { BarChart } from 'react-native-gifted-charts'; import { BarChart } from 'react-native-gifted-charts';
import { PieChart } from 'react-native-chart-kit';
import displayData from './display.json' import db from '../../../constants/database';
import { LineChart, PieChart, StackedBarChart } from 'react-native-chart-kit';
import { getDownloadJson } from '../../../constants/function';
import db, { getAllFromTable } from '../../../constants/database';
import { post } from '../../../api/ApiService';
import { ApiURL } from '../../../api/ApiConstant'; import { ApiURL } from '../../../api/ApiConstant';
import mainDisplayData from './mainDisplay.json' import mainDisplayData from './mainDisplay.json'
import axios from 'axios'; import axios from 'axios';
@@ -200,6 +196,7 @@ const Dashboard = (props) => {
let user_exist_data = useSelector(state => state?.user); let user_exist_data = useSelector(state => state?.user);
const userId = user_exist_data.UserId || ''; const userId = user_exist_data.UserId || '';
const onClickLogout = () => { const onClickLogout = () => {
setLogoutModal(false); setLogoutModal(false);
Alert.alert( Alert.alert(
@@ -373,6 +370,7 @@ const Dashboard = (props) => {
} }
dataMap[url] = responseData; dataMap[url] = responseData;
}); });
setGraphApiData(dataMap); setGraphApiData(dataMap);
setTabCache(prev => ({ ...prev, [tabKey]: dataMap })); setTabCache(prev => ({ ...prev, [tabKey]: dataMap }));
@@ -400,28 +398,6 @@ const Dashboard = (props) => {
return null; // all attempts failed return null; // all attempts failed
}; };
const fetchDetailGraphs = async (detailPages) => {
try {
const resultMap = {};
for (let item of detailPages) {
const response = await post(item.GraphUrl, {
parameters: {
projectid: 41654,
year: year,
monthno: month,
storeid: storeData?.StoreId
},
});
console.log(`Data for ${item.GraphTitle}:`, response?.data); // Add this
resultMap[item.GraphUrl] = response?.data || [];
}
setModalGraphData(resultMap);
} catch (error) {
console.log("❌ Error fetching detail graphs:", error);
}
};
const handleScroll = (event) => { const handleScroll = (event) => {
const offsetY = event.nativeEvent.contentOffset.y; const offsetY = event.nativeEvent.contentOffset.y;
setShowButton(offsetY > 0); // Show button only if not at the top setShowButton(offsetY > 0); // Show button only if not at the top
@@ -525,11 +501,15 @@ const Dashboard = (props) => {
}; };
const renderItem = ({ item }) => { const renderItem = ({ item }) => {
const apiData = graphApiData[item.GraphUrl];
// const values = apiData?.data || [];
const values = apiData?.data?.length ? apiData.data : [];
const scoreValue = values.length > 0 ? Object.values(values[0])[0] : null; // console.log('graphApiData--->', JSON.stringify(graphApiData));
const apiData = graphApiData[item.GraphUrl];
// console.log('apiData--->', JSON.stringify(apiData));
const values = apiData?.data?.length ? apiData.data : [];
// console.log('values--->', JSON.stringify(values));
// const scoreValue = values.length > 0 ? Object.values(values[0])[0] : null;
// <Text>{scoreValue !== undefined ? `${scoreValue.toFixed(1)}%` : "No Data"}</Text> // <Text>{scoreValue !== undefined ? `${scoreValue.toFixed(1)}%` : "No Data"}</Text>
if (apiData?.status === 'error') { if (apiData?.status === 'error') {
@@ -556,43 +536,120 @@ const Dashboard = (props) => {
); );
//GIFTED CHART LIBRARY ----- //GIFTED CHART LIBRARY -----
// case "BarGraph":
// const chartWidth = screenWidth * 0.80;
// const barWidth = 40;
// const barColors = ['#1BF2E0', '#1B7BF2', '#1BC0F2'];
// console.log('BarGraph-valuesvalues=> ', values);
// const barData = values.map((v, idx) => {
// const value = parseFloat(Object.values(v).find(val => typeof val === 'number').toFixed(1));
// return {
// value,
// label: v.CalendarYear_Month,
// frontColor: barColors[idx % barColors.length],
// topLabelComponent: () => (
// <Text style={{ color: '#000', fontSize: 12, fontWeight: '500', marginBottom: 5 }}>{value}%</Text>
// )
// };
// });
// const visibleBars = barData.length;
// const totalSpacing = chartWidth - visibleBars * barWidth;
// const spacing = totalSpacing / (visibleBars + 1);
// if (!values || values == '' || values == undefined || values == null) {
// return null;
// }
// return (
// <View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', padding: 10, borderWidth: 0.5, borderRadius: 25, }}>
// {/* <View style={{ alignSelf: 'center', borderWidth: 0.5,borderRadius:20, paddingBottom: 10 }}> */}
// <Text style={{ color: '#000', fontSize: 16, fontWeight: '600', marginBottom: 10 }}>
// {item.GraphTitle}
// </Text>
// <BarChart
// data={barData}
// barWidth={barWidth}
// spacing={spacing}
// noOfSections={6}
// maxValue={105}
// roundedTop={false}
// disableScroll={true}
// yAxisLabelTexts={['0%', '20%', '40%', '60%', '80%', '100%']}
// // yAxisLabelTexts={['0%', '👉', '👉', '👉', '👉', '100%']} // 👈 only 0% and 100%
// yAxisTextStyle={{ color: '#000', fontSize: 12 }}
// xAxisLabelTextStyle={{ color: '#000', fontSize: 12, fontWeight: '500', marginTop: 5 }}
// isAnimated
// width={chartWidth}
// hideYAxisText={true} //to hide y axis text
// // hideRules={true}
// hideYAxisLine={true}
// yAxisThickness={0}
// xAxisThickness={0}
// rulesLength={chartWidth}
// // xAxisLength={chartWidth}
// hideAxesAndRules={false}
// // xAxisLabelTextStyle={{ color: '#000', fontSize: 10, marginTop: 4 }}
// />
// {/* </View> */}
// <View style={{ height: 10, }} />
// </View>
// );
case "BarGraph": case "BarGraph":
const chartWidth = screenWidth * 0.80; const chartWidth = screenWidth * 0.80;
const barWidth = 40; const barWidth = 40;
const barColors = ['#1BF2E0', '#1B7BF2', '#1BC0F2']; const barColors = ['#1BF2E0', '#1B7BF2', '#1BC0F2'];
// Sample API response (youll replace this with real API data)
let values2 = [
{ "Month_Id": 91, "CalendarYear_Month": "Jul-25", "Share_of_Shelf_Perc": 40.44959 },
{ "Month_Id": 92, "CalendarYear_Month": "Aug-25", "Share_of_Shelf_Perc": 44.60024 },
{ "Month_Id": 90, "CalendarYear_Month": "Jun-25", "Share_of_Shelf_Perc": 47.94166 },
];
// console.log('BarGraph-values2values2=> ', JSON.stringify(values2));
console.log('BarGraph-values=> ', JSON.stringify(values));
if (!values2 || values2 == '' || values2 == undefined || values2 == null) {
return null;
}
// ✅ Step 1: Sort by Month_Id
const sortedValues = values2.sort((a, b) => a.CalendarMonth_ID - b.Month_Id);
// console.log('sortedValues====>',JSON.stringify(sortedValues));
// ✅ Step 2: Prepare chart data
const barData = values.map((v, idx) => { const barData = values.map((v, idx) => {
const value = parseFloat(Object.values(v).find(val => typeof val === 'number').toFixed(1)); // Find the first numeric field dynamically (excluding Month_Id)
const numericKey = Object.keys(v).find(
// console.log('valuevaluevalue--->', value); key => key !== "CalendarMonth_ID" && key !== "CalendarYear_Month" && typeof v[key] === "number"
);
const value = numericKey ? parseFloat(v[numericKey].toFixed(1)) : 0;
return { return {
value, value,
label: v.CalendarYear_Month, label: v.CalendarYear_Month,
frontColor: barColors[idx % barColors.length], frontColor: barColors[idx % barColors.length],
topLabelComponent: () => ( topLabelComponent: () => (
<Text style={{ color: '#000', fontSize: 12, fontWeight: '500', marginBottom: 5 }}>{value}%</Text> <Text style={{ color: '#000', fontSize: 12, fontWeight: '500', marginBottom: 5 }}>
{value}%
</Text>
) )
}; };
}); });
const visibleBars = barData.length; const visibleBars = barData.length;
const totalSpacing = chartWidth - visibleBars * barWidth; const totalSpacing = chartWidth - visibleBars * barWidth;
const spacing = totalSpacing / (visibleBars + 1); const spacing = totalSpacing / (visibleBars + 1);
if (!values || values == '' || values == undefined || values == null) {
return null;
}
return ( return (
<View style={{ width: '100%', alignItems: 'center', justifyContent: 'center', padding: 10, borderWidth: 0.5, borderRadius: 25, }}> <View style={styles.barGraphView}>
{/* <View style={{ alignSelf: 'center', borderWidth: 0.5,borderRadius:20, paddingBottom: 10 }}> */} <Text style={styles.trendTitle}>{item.GraphTitle}</Text>
<Text style={{ color: '#000', fontSize: 16, fontWeight: '600', marginBottom: 10 }}>
{item.GraphTitle}
</Text>
<BarChart <BarChart
data={barData} data={barData}
barWidth={barWidth} barWidth={barWidth}
@@ -602,23 +659,18 @@ const Dashboard = (props) => {
roundedTop={false} roundedTop={false}
disableScroll={true} disableScroll={true}
yAxisLabelTexts={['0%', '20%', '40%', '60%', '80%', '100%']} yAxisLabelTexts={['0%', '20%', '40%', '60%', '80%', '100%']}
// yAxisLabelTexts={['0%', '👉', '👉', '👉', '👉', '100%']} // 👈 only 0% and 100%
yAxisTextStyle={{ color: '#000', fontSize: 12 }} yAxisTextStyle={{ color: '#000', fontSize: 12 }}
xAxisLabelTextStyle={{ color: '#000', fontSize: 12, fontWeight: '500', marginTop: 5 }} xAxisLabelTextStyle={{ color: '#000', fontSize: 12, fontWeight: '500', }}
isAnimated isAnimated
width={chartWidth} width={chartWidth}
hideYAxisText={true} //to hide y axis text hideYAxisText={true}
// hideRules={true}
hideYAxisLine={true} hideYAxisLine={true}
yAxisThickness={0} yAxisThickness={0}
xAxisThickness={0} xAxisThickness={0}
rulesLength={chartWidth} rulesLength={chartWidth}
// xAxisLength={chartWidth}
hideAxesAndRules={false} hideAxesAndRules={false}
// xAxisLabelTextStyle={{ color: '#000', fontSize: 10, marginTop: 4 }}
/> />
{/* </View> */} <View style={{ height: 10 }} />
<View style={{ height: 10, }} />
</View> </View>
); );
@@ -712,9 +764,6 @@ const Dashboard = (props) => {
); );
}); });
// console.log('mainTabIndex----->',mainTabIndex);
return ( return (
<SafeAreaView style={{ flex: 1, backgroundColor: GlobalTheme.colors.primary }}> <SafeAreaView style={{ flex: 1, backgroundColor: GlobalTheme.colors.primary }}>
<View style={{ flex: 1, backgroundColor: '#fff' }}> <View style={{ flex: 1, backgroundColor: '#fff' }}>
@@ -0,0 +1,631 @@
{
"Tabs": [
{
"MainTabId": 1,
"MainTabName": "MTD",
"MainTabData": {
"subTabs": [
{
"TabId": 1,
"TabName": "PSS Score",
"TabRow": 1,
"TabCol": 1
},
{
"TabId": 2,
"TabName": "PSS Trend",
"TabRow": 1,
"TabCol": 2
},
{
"TabId": 3,
"TabName": "SOS Actual",
"TabRow": 1,
"TabCol": 2
},
{
"TabId": 4,
"TabName": "OSA",
"TabRow": 1,
"TabCol": 4
},
{
"TabId": 5,
"TabName": "Asset",
"TabRow": 1,
"TabCol": 5
},
{
"TabId": 6,
"TabName": "Promotion",
"TabRow": 1,
"TabCol": 6
}
],
"graphDetails": [
{
"TabId": 1,
"GraphId": 1,
"GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/pssscore",
"GraphBackground": "#C3D7FF",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 2,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc",
"GraphBackground": "#E2C8FE",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 4,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/OSA_Perc",
"GraphBackground": "#FFF9A1",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 5,
"GraphType": "ScoreCard",
"GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Asset_Perc",
"GraphBackground": "#A2F3DE",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 6,
"GraphType": "ScoreCard",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Promotion_Perc",
"GraphBackground": "#BFC2FF",
"GraphOptions": {}
},
{
"TabId": 2,
"GraphId": 1,
"GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 0,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "PSS - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_actual_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 2,
"GraphId": 2,
"GraphType": "BarGraph",
"GraphTitle": "PSS Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_actual_trend_perc_mtd",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 0,
"gridLinesV": 0
}
},
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "SOS - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_actual_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 3,
"GraphId": 4,
"GraphType": "BarGraph",
"GraphTitle": "SOS Actual Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_actual_trend_perc_mtd",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 0,
"gridLinesV": 0
}
},
{
"TabId": 4,
"GraphId": 5,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/OSA_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 3,
"GraphId": 3,
"GraphType": "Table",
"GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/osa_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 4,
"GraphId": 6,
"GraphType": "BarGraph",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/osa_trend_perc_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 5,
"GraphId": 7,
"GraphType": "ScoreCard",
"GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Asset_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 5,
"GraphId": 5,
"GraphType": "Table",
"GraphTitle": "Visibility",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/asset_availability_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 5,
"GraphId": 5,
"GraphType": "Table",
"GraphTitle": "Additional Visibility",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/additional_visibility_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 5,
"GraphId": 8,
"GraphType": "BarGraph",
"GraphTitle": "Asset Details",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/asset_trend_perc_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 6,
"GraphId": 9,
"GraphType": "ScoreCard",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Promotion_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 6,
"GraphId": 9,
"GraphType": "Table",
"GraphTitle": "Promotion Not Executed",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/promotion_not_executed_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 6,
"GraphId": 10,
"GraphType": "Table",
"GraphTitle": "Promotion executed",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/promotion_executed_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 6,
"GraphId": 11,
"GraphType": "BarGraph",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/promotion_trend_perc_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
}
},
{
"MainTabId": 2,
"MainTabName": "Last Visit",
"MainTabData": {
"subTabs": [
{
"TabId": 1,
"TabName": "PSS Score",
"TabRow": 1,
"TabCol": 1
},
{
"TabId": 2,
"TabName": "SOS Actual",
"TabRow": 1,
"TabCol": 2
},
{
"TabId": 4,
"TabName": "OSA",
"TabRow": 1,
"TabCol": 4
},
{
"TabId": 5,
"TabName": "Asset",
"TabRow": 1,
"TabCol": 5
},
{
"TabId": 6,
"TabName": "Promotion",
"TabRow": 1,
"TabCol": 6
}
],
"graphDetails": [
{
"TabId": 1,
"GraphId": 1,
"GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/PSS_Score_LSV_Perc",
"GraphBackground": "#E2C8FE",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 2,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_actual_lsv_perc",
"GraphBackground": "#E2C8FE",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 4,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/osa_lsv_perc",
"GraphBackground": "#FFF9A1",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 5,
"GraphType": "ScoreCard",
"GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/asset_lsv_perc",
"GraphBackground": "#A2F3DE",
"GraphOptions": {}
},
{
"TabId": 1,
"GraphId": 6,
"GraphType": "ScoreCard",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/promotion_lsv_perc",
"GraphBackground": "#BFC2FF",
"GraphOptions": {}
},
{
"TabId": 2,
"GraphId": 1,
"GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 0,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "PSS - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_actual_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 2,
"GraphId": 2,
"GraphType": "BarGraph",
"GraphTitle": "PSS Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_actual_trend_perc_mtd",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 0,
"gridLinesV": 0
}
},
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_actual_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "SOS Actual - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/sos_actual_lsv_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 3,
"GraphId": 4,
"GraphType": "BarGraph",
"GraphTitle": "SOS Actual Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/sos_actual_trend_lsv_perc",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
},
{
"TabId": 4,
"GraphId": 5,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/osa_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 4,
"GraphId": 7,
"GraphType": "Table",
"GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/osa_lsv_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 4,
"GraphId": 6,
"GraphType": "BarGraph",
"GraphTitle": "OSA Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/osa_trend_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 5,
"GraphId": 7,
"GraphType": "ScoreCard",
"GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/asset_lsv_perc",
"GraphBa ckground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 5,
"GraphId": 5,
"GraphType": "Table",
"GraphTitle": "Visibility",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/asset_availability_lsv",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 5,
"GraphId": 5,
"GraphType": "Table",
"GraphTitle": "Additional Visibility",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/additional_visibility_lsv",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 5,
"GraphId": 8,
"GraphType": "BarGraph",
"GraphTitle": "Asset Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/asset_trend_lsv_perc",
"GraphBackground": "#fff",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
},
{
"TabId": 6,
"GraphId": 9,
"GraphType": "ScoreCard",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/promotion_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 6,
"GraphId": 9,
"GraphType": "Table",
"GraphTitle": "Promotion Not Executed",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/promotion_not_executed_lsv",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 6,
"GraphId": 10,
"GraphType": "Table",
"GraphTitle": "Promotion executed",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/promotion_executed_lsv",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 6,
"GraphId": 11,
"GraphType": "BarGraph",
"GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/promotion_trend_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
}
}
]
}
+196 -127
View File
@@ -13,6 +13,12 @@
}, },
{ {
"TabId": 2, "TabId": 2,
"TabName": "PSS Trend",
"TabRow": 1,
"TabCol": 2
},
{
"TabId": 3,
"TabName": "SOS Actual", "TabName": "SOS Actual",
"TabRow": 1, "TabRow": 1,
"TabCol": 2 "TabCol": 2
@@ -85,10 +91,62 @@
"GraphBackground": "#BFC2FF", "GraphBackground": "#BFC2FF",
"GraphOptions": {} "GraphOptions": {}
}, },
{ {
"TabId": 2, "TabId": 2,
"GraphId": 1, "GraphId": 1,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/pssscore",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 0,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "PSS - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_actual_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 2,
"GraphId": 2,
"GraphType": "BarGraph",
"GraphTitle": "PSS Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/pss_trend_perc_mtd_O",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 0,
"gridLinesV": 0
}
},
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual", "GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Actual_Perc",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
@@ -107,11 +165,11 @@
] ]
}, },
{ {
"TabId": 2, "TabId": 3,
"GraphId": 2, "GraphId": 4,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "SOS Actual Trend", "GraphTitle": "SOS Actual Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_actual_trend_perc_mtd", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_actual_trend_perc_mtd_O",
"GraphBackground": "#F4EAFF", "GraphBackground": "#F4EAFF",
"GraphOptions": { "GraphOptions": {
"axisX": "month", "axisX": "month",
@@ -126,12 +184,17 @@
"gridLinesV": 0 "gridLinesV": 0
} }
}, },
{
"TabId": 3,
"GraphId": 3,
{
"TabId": 4,
"GraphId": 5,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "SOS Compliance", "GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/SOS_Compliance_Perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/OSA_Perc",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {}, "GraphOptions": {},
"clickable": 1, "clickable": 1,
@@ -140,36 +203,29 @@
"TabId": 3, "TabId": 3,
"GraphId": 3, "GraphId": 3,
"GraphType": "Table", "GraphType": "Table",
"GraphTitle": "SOS Compliance - Category", "GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_sompliance_perc_on_category", "GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/osa_perc_on_category",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {} "GraphOptions": {}
} }
] ]
}, },
{ {
"TabId": 3, "TabId": 4,
"GraphId": 4, "GraphId": 6,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "SOS Compliance Trend", "GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/sos_compliance_trend_perc_mtd", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/osa_trend_perc_mtd_O",
"GraphBackground": "#fff", "GraphBackground": "#ECFFFA",
"GraphOptions": { "GraphOptions": {}
"axisX": "month", },
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
},
{ {
"TabId": 5, "TabId": 5,
"GraphId": 5, "GraphId": 7,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "Asset", "GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Asset_Perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/Asset_Perc",
@@ -199,43 +255,14 @@
}, },
{ {
"TabId": 5, "TabId": 5,
"GraphId": 6,
"GraphType": "BarGraph",
"GraphTitle": "Asset Details",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/asset_trend_perc_mtd",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{
"TabId": 4,
"GraphId": 7,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/mtd/OSA_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 3,
"GraphId": 3,
"GraphType": "Table",
"GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/osa_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 4,
"GraphId": 8, "GraphId": 8,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "OSA", "GraphTitle": "Asset Details",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/osa_trend_perc_mtd", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/asset_trend_perc_mtd_O",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {} "GraphOptions": {}
}, },
{ {
"TabId": 6, "TabId": 6,
"GraphId": 9, "GraphId": 9,
@@ -272,13 +299,29 @@
"GraphId": 11, "GraphId": 11,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "Promotion", "GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/promotion_trend_perc_mtd", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpimtd/promotion_trend_perc_mtd_O",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {} "GraphOptions": {}
} }
] ]
} }
}, },
{ {
"MainTabId": 2, "MainTabId": 2,
"MainTabName": "Last Visit", "MainTabName": "Last Visit",
@@ -290,8 +333,15 @@
"TabRow": 1, "TabRow": 1,
"TabCol": 1 "TabCol": 1
}, },
{ {
"TabId": 2, "TabId": 2,
"TabName": "PSS Trend",
"TabRow": 1,
"TabCol": 2
},
{
"TabId": 3,
"TabName": "SOS Actual", "TabName": "SOS Actual",
"TabRow": 1, "TabRow": 1,
"TabCol": 2 "TabCol": 2
@@ -361,10 +411,63 @@
"GraphBackground": "#BFC2FF", "GraphBackground": "#BFC2FF",
"GraphOptions": {} "GraphOptions": {}
}, },
{
{
"TabId": 2, "TabId": 2,
"GraphId": 1, "GraphId": 1,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "PSS Score",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/PSS_Score_LSV_Perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 0,
"DetailsPage": [
{
"TabId": 2,
"GraphId": 1,
"GraphType": "Table",
"GraphTitle": "PSS - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detmtd/sos_actual_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 2,
"GraphId": 2,
"GraphType": "BarGraph",
"GraphTitle": "PSS Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/pss_trend_perc_lsv_O",
"GraphBackground": "#F4EAFF",
"GraphOptions": {
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 0,
"gridLinesV": 0
}
},
{
"TabId": 3,
"GraphId": 3,
"GraphType": "ScoreCard",
"GraphTitle": "SOS Actual", "GraphTitle": "SOS Actual",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_actual_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_actual_lsv_perc",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
@@ -383,11 +486,11 @@
] ]
}, },
{ {
"TabId": 2, "TabId": 3,
"GraphId": 2, "GraphId": 4,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "SOS Actual Trend", "GraphTitle": "SOS Actual Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/sos_actual_trend_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/sos_actual_trend_lsv_perc_O",
"GraphBackground": "#F4EAFF", "GraphBackground": "#F4EAFF",
"GraphOptions": { "GraphOptions": {
"axisX": "month", "axisX": "month",
@@ -402,50 +505,45 @@
"gridLinesV": 1 "gridLinesV": 1
} }
}, },
{ {
"TabId": 3, "TabId": 4,
"GraphId": 3, "GraphId": 5,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "SOS Compliance", "GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/sos_compliance_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/osa_lsv_perc",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {}, "GraphOptions": {},
"clickable": 1, "clickable": 1,
"DetailsPage": [ "DetailsPage": [
{ {
"TabId": 3, "TabId": 4,
"GraphId": 3, "GraphId": 7,
"GraphType": "Table", "GraphType": "Table",
"GraphTitle": "SOS Actual - Category", "GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/sos_compliance_lsv_perc_on_category", "GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/osa_lsv_perc_on_category",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {} "GraphOptions": {}
} }
] ]
}, },
{ {
"TabId": 3, "TabId": 4,
"GraphId": 4, "GraphId": 6,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "SOS Compliance Trend", "GraphTitle": "OSA Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/sos_compliance_trend_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/osa_trend_lsv_perc_O",
"GraphBackground": "#fff", "GraphBackground": "#ECFFFA",
"GraphOptions": { "GraphOptions": {}
"axisX": "month",
"axisY": "score",
"labelShow": 1,
"barColors": [
"#11a4ff",
"#0ea3e3",
"#0b9ddb"
],
"gridLinesH": 1,
"gridLinesV": 1
}
}, },
{ {
"TabId": 5, "TabId": 5,
"GraphId": 5, "GraphId": 7,
"GraphType": "ScoreCard", "GraphType": "ScoreCard",
"GraphTitle": "Asset", "GraphTitle": "Asset",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/asset_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/asset_lsv_perc",
@@ -475,10 +573,10 @@
}, },
{ {
"TabId": 5, "TabId": 5,
"GraphId": 6, "GraphId": 8,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "Asset Details", "GraphTitle": "Asset Trend",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/asset_trend_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/asset_trend_lsv_perc_O",
"GraphBackground": "#fff", "GraphBackground": "#fff",
"GraphOptions": { "GraphOptions": {
"axisX": "month", "axisX": "month",
@@ -493,36 +591,7 @@
"gridLinesV": 1 "gridLinesV": 1
} }
}, },
{
"TabId": 4,
"GraphId": 7,
"GraphType": "ScoreCard",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/lsv/osa_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {},
"clickable": 1,
"DetailsPage": [
{
"TabId": 4,
"GraphId": 7,
"GraphType": "Table",
"GraphTitle": "OSA - Category",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/detlsv/osa_lsv_perc_on_category",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
}
]
},
{
"TabId": 4,
"GraphId": 8,
"GraphType": "BarGraph",
"GraphTitle": "OSA",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/osa_trend_lsv_perc",
"GraphBackground": "#ECFFFA",
"GraphOptions": {}
},
{ {
"TabId": 6, "TabId": 6,
"GraphId": 9, "GraphId": 9,
@@ -558,7 +627,7 @@
"GraphId": 11, "GraphId": 11,
"GraphType": "BarGraph", "GraphType": "BarGraph",
"GraphTitle": "Promotion", "GraphTitle": "Promotion",
"GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/promotion_trend_lsv_perc", "GraphUrl": "https://dax.parinaam.in/execute/dabur/kpilsv/promotion_trend_lsv_perc_O",
"GraphBackground": "#ECFFFA", "GraphBackground": "#ECFFFA",
"GraphOptions": {} "GraphOptions": {}
} }
+15 -1
View File
@@ -363,5 +363,19 @@ export const styles = StyleSheet.create({
marginTop: 10, marginTop: 10,
marginBottom: 10, marginBottom: 10,
} },
barGraphView: {
width: '100%',
alignItems: 'center',
justifyContent: 'center',
padding: 10,
borderWidth: 0.5,
borderRadius: 25,
},
trendTitle: {
color: '#000',
fontSize: 16,
fontWeight: '600',
marginBottom: 10
},
}); });