store info - done
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
import React, { useState } from 'react';
|
||||
import {View,Text,TouchableOpacity,ScrollView,FlatList} from 'react-native';
|
||||
import { styles } from './style';
|
||||
import { horizonalLine, Screen } from '../../../theme/theme';
|
||||
|
||||
const storeinfodata = [
|
||||
{
|
||||
tabId: 0,
|
||||
section: 'Store details',
|
||||
items: [
|
||||
{ brand: 'Store Name', value: 'Reliance Smart' },
|
||||
{ brand: 'Store ID', value: '#98440' },
|
||||
{ brand: 'Address', value: 'Rabindra Nagar, Delhi 110003' },
|
||||
{ brand: 'City', value: 'Okhla' },
|
||||
{ brand: 'Store Size', value: '1500–2000 sq ft' },
|
||||
{ brand: 'Average Footfall', value: '10000' },
|
||||
{ brand: 'Store age', value: '8' },
|
||||
{ brand: 'Store Ranking', value: '24' },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 0,
|
||||
section: 'Dabur Employees',
|
||||
items: [
|
||||
{ brand: 'RKAM', value: 'Rajesh Paal Singh' },
|
||||
{ brand: 'SO', value: 'Soniya Singhal' },
|
||||
],
|
||||
},
|
||||
{
|
||||
tabId: 0,
|
||||
section: '3P employees',
|
||||
items: [
|
||||
{ brand: 'Promoter Name', value: 'Payal Singh' },
|
||||
{ brand: 'AM Name', value: 'Soniya Singhal' },
|
||||
{ brand: 'Supervisor Name', value: 'Soniya Dhankar' },
|
||||
{ brand: 'City', value: 'Okhla' },
|
||||
{ brand: 'Promoter duration', value: '2 Year 7 months' },
|
||||
{ brand: 'Average incentive', value: '5000' },
|
||||
],
|
||||
},
|
||||
|
||||
// Last Visit Details (tabId: 1)
|
||||
{
|
||||
tabId: 1,
|
||||
section: 'Dabur employee',
|
||||
items: [
|
||||
{ brand: 'SO', name: 'Rajesh Paal Singh', date: '23/05/2025' },
|
||||
{ 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 = ({ columnCount }) => {
|
||||
const colWidth = Screen.screenWidth * 0.95 / columnCount;
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', paddingVertical: 6 }}>
|
||||
<View style={{ width: colWidth }}>
|
||||
<Text style={styles.subheaderText}>Brand</Text>
|
||||
</View>
|
||||
<View style={{ width: colWidth }}>
|
||||
<Text style={styles.subheaderText}>Name</Text>
|
||||
</View>
|
||||
{columnCount === 3 && (
|
||||
<View style={{ width: colWidth }}>
|
||||
<Text style={styles.subheaderText}>Date</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderItem = ({ item, columnCount }) => {
|
||||
console.log("columnCount",columnCount)
|
||||
const dynamicWidth = Screen.screenWidth * 0.95 / columnCount;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.row}>
|
||||
<View style={{ width: dynamicWidth}}>
|
||||
<Text style={styles.brand}>{item.title || item.brand}:</Text>
|
||||
</View>
|
||||
<View style={{ width: dynamicWidth}}>
|
||||
<Text style={styles.name}>{item.name || item.value}</Text>
|
||||
</View>
|
||||
{item.date && (
|
||||
<View style={{ width: dynamicWidth}}>
|
||||
<Text style={styles.date}>{item.date}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View style={[horizonalLine, { marginVertical: 4 }]} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const SectionListView = ({ listData }) => (
|
||||
<FlatList
|
||||
data={listData}
|
||||
keyExtractor={(item, index) => item.section + index}
|
||||
contentContainerStyle={{ paddingBottom: 20 }}
|
||||
ItemSeparatorComponent={() => <View style={{ paddingVertical: 5 }} />}
|
||||
renderItem={({ item }) => {
|
||||
const columnCount = item.items[0]?.date ? 3 : 2;
|
||||
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{item.section}</Text>
|
||||
<View style={[horizonalLine, { marginVertical: 10 }]} />
|
||||
<RenderHeader columnCount={columnCount} /> {/* Header Row */}
|
||||
{item.items.map((subItem, index) => (
|
||||
<RenderItem key={index} item={subItem} columnCount={columnCount} />
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
const StoreInfo = () => {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const filteredData = storeinfodata?.filter(item => item.tabId === selectedTab);
|
||||
const selectedTabTitle = tabs.find(tab => tab.id === selectedTab)?.title ?? 'NA';
|
||||
|
||||
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 (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.tabstyle}>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
{tabs.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>
|
||||
);
|
||||
};
|
||||
|
||||
export default StoreInfo;
|
||||
Reference in New Issue
Block a user