CPM
319 lines
9.8 KiB
JavaScript
319 lines
9.8 KiB
JavaScript
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; |