store dna all done
This commit is contained in:
CPM
@@ -0,0 +1,319 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { View, Text, TouchableOpacity, ScrollView, FlatList } from 'react-native';
|
||||
import { styles } from './style';
|
||||
import GlobalTheme, { horizonalLine, Screen } from '../../../theme/theme';
|
||||
import CustomHeader from '../../../components/CustomHeader';
|
||||
import IMAGES from '../../../constants/Images';
|
||||
import axios from 'axios';
|
||||
import Loader from '../../../constants/Loader';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
const storeinfodata = [
|
||||
{
|
||||
tabId: 0,
|
||||
section: 'Store details',
|
||||
items: [
|
||||
{ brand: 'Store Name', name: 'Reliance Smart' },
|
||||
{ brand: 'Store ID', name: '#98440' },
|
||||
{ brand: 'Address', name: 'Rabindra Nagar, Delhi 110003' },
|
||||
{ brand: 'City', name: 'Okhla' },
|
||||
{ brand: 'Store Size', name: '1500–2000 sq ft' },
|
||||
{ brand: 'Average Footfall', name: '10000' },
|
||||
{ brand: 'Store age', name: '8' },
|
||||
{ brand: 'Store Ranking', name: '24' },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 0,
|
||||
section: 'Dabur Employees',
|
||||
items: [
|
||||
{ brand: 'RKAM', name: 'Rajesh Paal Singh' },
|
||||
{ brand: 'SO', name: 'Soniya Singhal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 0,
|
||||
section: '3P employees',
|
||||
items: [
|
||||
{ brand: 'Promoter Name', name: 'Payal Singh' },
|
||||
{ brand: 'AM Name', name: 'Soniya Singhal' },
|
||||
{ brand: 'Supervisor Name', name: 'Soniya Dhankar' },
|
||||
{ brand: 'City', name: 'Okhla' },
|
||||
{ brand: 'Promoter duration', name: '2 Year 7 months' },
|
||||
{ brand: 'Average incentive', name: '5000' },
|
||||
],
|
||||
},
|
||||
|
||||
// Last Visit Details (tabId: 1)
|
||||
{
|
||||
tabId: 1,
|
||||
section: 'Dabur employee',
|
||||
items: [
|
||||
{ brand: 'SO', name: 'Rajesh Paal Singh', date: '23/05/2025', test: 'gxsjhxbas' },
|
||||
{ brand: 'AH', name: 'Umesh Singh', date: '18/04/2025' },
|
||||
{ brand: 'KAM', name: 'Rahul Tawde', date: '15/05/2025' },
|
||||
{ brand: 'Others', name: 'Singhal Singh', date: '06/05/2025' },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 1,
|
||||
section: '3P team',
|
||||
items: [
|
||||
{ brand: 'Supervisor', name: 'Ashish Talwar', date: '27/05/2025' },
|
||||
{ brand: 'AM', name: 'Soniya Singhal', date: '23/05/2025' },
|
||||
],
|
||||
},
|
||||
|
||||
// Competition (tabId: 2)
|
||||
{
|
||||
tabId: 2,
|
||||
section: 'Competition assets',
|
||||
items: [
|
||||
{ brand: 'Marico', value: 5 },
|
||||
{ brand: 'Colgate', value: 1 },
|
||||
{ brand: 'Godrej', value: 2 },
|
||||
{ brand: 'HUL', value: 1 },
|
||||
{ brand: 'XX', value: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 2,
|
||||
section: 'Promoter details',
|
||||
items: [
|
||||
{ brand: 'Marico', value: 1 },
|
||||
{ brand: 'Colgate', value: 1 },
|
||||
{ brand: 'Godrej', value: 1 },
|
||||
{ brand: 'HUL', value: 1 },
|
||||
{ brand: 'XX', value: 0 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
const tabs = [
|
||||
{ id: 0, title: 'Store Info' },
|
||||
{ id: 1, title: 'Last visit details' },
|
||||
{ id: 2, title: 'Competition' },
|
||||
];
|
||||
|
||||
|
||||
const RenderHeader = ({ columns }) => {
|
||||
const colWidth = Screen.screenWidth * 0.95 / columns?.length;
|
||||
|
||||
return (
|
||||
null
|
||||
// <View style={{ flexDirection: 'row', paddingVertical: 6 }}>
|
||||
// {columns.map((col, index) => (
|
||||
// <View key={index} style={{ width: colWidth }}>
|
||||
// <Text style={styles.subheaderText}>{col.toUpperCase()}</Text>
|
||||
// </View>
|
||||
// ))}
|
||||
// </View>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const RenderItem = ({ item, columns }) => {
|
||||
const colWidth = Screen.screenWidth * 0.95 / columns?.length;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.row}>
|
||||
{columns.map((key, index) => (
|
||||
<View key={index} style={{ width: colWidth }}>
|
||||
<Text style={styles.name}>{String(item[key] ?? '')}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View style={[horizonalLine, { marginVertical: 4 }]} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const SectionListView = ({ listData }) => {
|
||||
const scrollRef = useRef(null); // shared horizontal scroll ref
|
||||
console.log("/-", listData)
|
||||
return (
|
||||
<FlatList
|
||||
data={listData}
|
||||
keyExtractor={(item, index) => item.section + index}
|
||||
contentContainerStyle={{ paddingBottom: 20 }}
|
||||
ItemSeparatorComponent={() => <View style={{ paddingVertical: 5 }} />}
|
||||
renderItem={({ item }) => {
|
||||
const columns = Object.keys(item.items[0] || {}).filter(
|
||||
key => item.items.some(obj => obj[key] !== undefined && obj[key] !== null)
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{item.section}</Text>
|
||||
<View style={[horizonalLine, { marginVertical: 10 }]} />
|
||||
|
||||
{/* Shared horizontal scroll view for header + rows */}
|
||||
<ScrollView
|
||||
horizontal
|
||||
ref={scrollRef}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
scrollEventThrottle={16}
|
||||
>
|
||||
<View>
|
||||
<RenderHeader columns={columns} />
|
||||
{item.items.map((subItem, index) => (
|
||||
<RenderItem key={index} item={subItem} columns={columns} />
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const StoreInfo = ({ navigation, route }) => {
|
||||
|
||||
const { storeData } = route.params || {};
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const [storeInfoData, setStoreInfoData] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
getStoreInfo()
|
||||
}, [])
|
||||
|
||||
const getStoreInfo = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = { StoreId: storeData?.StoreId || "723" };
|
||||
const config = {
|
||||
method: 'post',
|
||||
url: 'https://api1.parinaam.in/api/dabur/StoreDNAstoreInfo',
|
||||
headers: {
|
||||
'api_key': '9a1f056fecb84eaf8eb4152dda22ab0501955c4f9bbe7daa8780740459fdde7a',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: params
|
||||
};
|
||||
|
||||
const response = await axios.request(config);
|
||||
const res = response.data?.StoreDNAstoreInfo || {};
|
||||
|
||||
// Step 1: Flatten API data
|
||||
const tempData = [];
|
||||
|
||||
Object.entries(res).forEach(([sectionTitle, dataArray]) => {
|
||||
if (dataArray?.length > 0) {
|
||||
const tabId = dataArray[0]?.TabId ?? 0;
|
||||
|
||||
dataArray.forEach(item => {
|
||||
const cleanItem = { ...item };
|
||||
delete cleanItem.TabId;
|
||||
delete cleanItem.TabName;
|
||||
console.log("tempData---", item)
|
||||
const formattedItems = Object.entries(cleanItem).map(([key, value]) => ({
|
||||
brand: key,
|
||||
name: String(value)
|
||||
}));
|
||||
|
||||
|
||||
tempData.push({
|
||||
tabId,
|
||||
section: sectionTitle.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
|
||||
items: formattedItems
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Step 2: Group items by tabId and section
|
||||
const groupedData = {};
|
||||
|
||||
tempData.forEach(entry => {
|
||||
const key = `${entry.tabId}-${entry.section}`;
|
||||
if (!groupedData[key]) {
|
||||
groupedData[key] = {
|
||||
tabId: entry.tabId,
|
||||
section: entry.section,
|
||||
items: []
|
||||
};
|
||||
}
|
||||
groupedData[key].items.push(...entry.items);
|
||||
});
|
||||
|
||||
// let objTemp={}
|
||||
// groupedData['0-Dabur Employee']?.items
|
||||
|
||||
|
||||
// Step 3: Set to state
|
||||
setStoreInfoData(Object.values(groupedData));
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.log("❌ store info api error:", error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredData = Array.isArray(storeInfoData)
|
||||
? storeInfoData.filter(item => item.tabId === selectedTab)
|
||||
: [];
|
||||
const selectedTabTitle = tabs?.find(tab => tab.id === selectedTab)?.title ?? 'NA';
|
||||
|
||||
const dynamicTabs = Array.isArray(storeInfoData)
|
||||
? Array.from(new Set(storeInfoData.map(item => item.tabId))).map(id => ({
|
||||
id,
|
||||
title: tabs.find(tab => tab.id === id)?.title || `Tab ${id}`
|
||||
}))
|
||||
: [];
|
||||
|
||||
const renderTabContent = () => {
|
||||
switch (selectedTab) {
|
||||
case 0:
|
||||
return <SectionListView listData={filteredData} />
|
||||
case 1:
|
||||
return <SectionListView listData={filteredData} />
|
||||
case 2:
|
||||
return <SectionListView listData={filteredData} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: GlobalTheme.colors.primary }}>
|
||||
<View style={[styles.container, { paddingHorizontal: 0 }]}>
|
||||
<CustomHeader
|
||||
title={'Store Info'}
|
||||
leftIcon={IMAGES.leftArrowIcon}
|
||||
onLeftPress={() => navigation.goBack()} />
|
||||
<View style={styles.container}>
|
||||
<View style={styles.tabstyle}>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
{/* {tabs?.map((tab) => ( */}
|
||||
{dynamicTabs?.map((tab) => (
|
||||
<TouchableOpacity key={tab.id} style={styles.tabview} activeOpacity={1} onPress={() => setSelectedTab(tab.id)}>
|
||||
<View style={selectedTab === tab.id ? styles.selecttabView : styles.unselecttabView}>
|
||||
<Text style={[styles.tabtext, selectedTab === tab.id ? styles.selecttabText : styles.unselecttabText]}>
|
||||
{tab.title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
<ScrollView horizontal={false} style={{ flex: 1 }}>
|
||||
<Text style={styles.headerText}>{selectedTabTitle} </Text>
|
||||
<View style={{ width: '100%' }}>{renderTabContent()}</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
<Loader visible={loading} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
export default StoreInfo;
|
||||
Reference in New Issue
Block a user