From 81a82d8124acaa8fec5d5655b3e2f5e544342901 Mon Sep 17 00:00:00 2001 From: Anita Date: Thu, 26 Jun 2025 17:45:20 +0530 Subject: [PATCH] store info - done --- src/navigation/Routes.js | 3 + src/screens/AuthScreen/VerifyOTP/index.js | 4 +- .../MainScreen/StoreInfo/index copy.js | 204 +++++++++++++++++ src/screens/MainScreen/StoreInfo/index.js | 210 ++++++++++++++++++ src/screens/MainScreen/StoreInfo/style.js | 111 +++++++++ src/theme/index.js | 4 +- src/theme/theme.js | 20 +- 7 files changed, 547 insertions(+), 9 deletions(-) create mode 100644 src/screens/MainScreen/StoreInfo/index copy.js create mode 100644 src/screens/MainScreen/StoreInfo/index.js create mode 100644 src/screens/MainScreen/StoreInfo/style.js diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js index c915ce8..f2662fb 100644 --- a/src/navigation/Routes.js +++ b/src/navigation/Routes.js @@ -6,6 +6,7 @@ import Splash from '../screens/AuthScreen/Splash'; import Login from '../screens/AuthScreen/Login'; import VerifyOTP from '../screens/AuthScreen/VerifyOTP'; import { ToastComponent } from '../constants/Toast'; +import StoreInfo from '../screens/MainScreen/StoreInfo'; const Stack = createNativeStackNavigator(); @@ -18,6 +19,8 @@ const Routes = () => { + + diff --git a/src/screens/AuthScreen/VerifyOTP/index.js b/src/screens/AuthScreen/VerifyOTP/index.js index e29e71d..db567cc 100644 --- a/src/screens/AuthScreen/VerifyOTP/index.js +++ b/src/screens/AuthScreen/VerifyOTP/index.js @@ -38,10 +38,10 @@ const VerifyOTP = ({ navigation }) => { }; const handle_validate = () => { - toastError('Alert', "Please enter 6 digit PIN"); if (otp.length < 6) { + toastError('Alert', "Please enter 6 digit PIN"); } else { - navigation.navigate(''); + navigation.navigate('StoreInfo'); } } diff --git a/src/screens/MainScreen/StoreInfo/index copy.js b/src/screens/MainScreen/StoreInfo/index copy.js new file mode 100644 index 0000000..8f1dc12 --- /dev/null +++ b/src/screens/MainScreen/StoreInfo/index copy.js @@ -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 ( + + + Brand + + + Name + + {columnCount === 3 && ( + + Date + + )} + + ); +}; + +const RenderItem = ({ item, columnCount }) => { + console.log("columnCount",columnCount) + const dynamicWidth = Screen.screenWidth * 0.95 / columnCount; + + return ( + + + + {item.title || item.brand}: + + + {item.name || item.value} + + {item.date && ( + + {item.date} + + )} + + + + ); +}; + +const SectionListView = ({ listData }) => ( + item.section + index} + contentContainerStyle={{ paddingBottom: 20 }} + ItemSeparatorComponent={() => } + renderItem={({ item }) => { + const columnCount = item.items[0]?.date ? 3 : 2; + + return ( + + {item.section} + + {/* Header Row */} + {item.items.map((subItem, index) => ( + + ))} + + ); + }} + + /> +); + + +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 + case 1: + return + case 2: + return ; + default: + return null; + } + }; + + return ( + + + + + {tabs.map((tab) => ( + setSelectedTab(tab.id)}> + + + {tab.title} + + + + ))} + + + + + {selectedTabTitle} + {renderTabContent()} + + + ); +}; + +export default StoreInfo; diff --git a/src/screens/MainScreen/StoreInfo/index.js b/src/screens/MainScreen/StoreInfo/index.js new file mode 100644 index 0000000..307a6d6 --- /dev/null +++ b/src/screens/MainScreen/StoreInfo/index.js @@ -0,0 +1,210 @@ +import React, { useState , useRef} 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', 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 ( + + {columns.map((col, index) => ( + + {col.toUpperCase()} + + ))} + + ); +}; + + +const RenderItem = ({ item, columns }) => { + const colWidth = Screen.screenWidth * 0.95 / columns?.length; + + return ( + + + {columns.map((key, index) => ( + + {String(item[key] ?? '')} + + ))} + + + + ); +}; + + +const SectionListView = ({ listData }) => { + const scrollRef = useRef(null); // shared horizontal scroll ref + + return ( + item.section + index} + contentContainerStyle={{ paddingBottom: 20 }} + ItemSeparatorComponent={() => } + renderItem={({ item }) => { + const columns = Object.keys(item.items[0] || {}).filter( + key => item.items.some(obj => obj[key] !== undefined && obj[key] !== null) + ); + + return ( + + {item.section} + + + {/* Shared horizontal scroll view for header + rows */} + + + + {item.items.map((subItem, index) => ( + + ))} + + + + ); + }} + /> + ); +}; + + +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 + case 1: + return + case 2: + return ; + default: + return null; + } + }; + + return ( + + + + + {tabs?.map((tab) => ( + setSelectedTab(tab.id)}> + + + {tab.title} + + + + ))} + + + + + {selectedTabTitle} + {renderTabContent()} + + + ); +}; + +export default StoreInfo; diff --git a/src/screens/MainScreen/StoreInfo/style.js b/src/screens/MainScreen/StoreInfo/style.js new file mode 100644 index 0000000..a525f59 --- /dev/null +++ b/src/screens/MainScreen/StoreInfo/style.js @@ -0,0 +1,111 @@ +import { StyleSheet } from 'react-native'; + +import { GlobalTheme, Screen, shadow } from '../../../theme'; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: GlobalTheme.colors.white, + paddingHorizontal: 10 + }, + // tabs + tabview: { + alignItems: 'center', + justifyContent: 'space-between', + marginVertical: 10, + flexDirection: 'row', + }, + tabstyle: { + flexDirection: 'row', + justifyContent: 'space-between', + borderColor: GlobalTheme.colors.lightblue, + borderWidth: 1.5, + borderRadius: GlobalTheme.borderRadius.xxlg, + marginTop: 10, + paddingHorizontal: 10, + }, + tabtext: { + overflow: 'hidden', + }, + selecttabView: { + backgroundColor: GlobalTheme.colors.primary, + paddingVertical: 8, + paddingHorizontal: 15, + borderRadius: GlobalTheme.borderRadius.lgg + }, + selecttabText: { + color: GlobalTheme.colors.white, + fontSize: GlobalTheme.typography.fontSize.small, + fontWeight: GlobalTheme.typography.fontWeight.regular, + textAlign: 'center' + }, + unselecttabView: { + paddingVertical: 8, + paddingHorizontal: 15, + borderRadius: GlobalTheme.borderRadius.md + }, + unselecttabText: { + color: GlobalTheme.colors.lightbluetext, + fontSize: GlobalTheme.typography.fontSize.xsmall, + fontWeight: GlobalTheme.typography.fontWeight.regular, + textAlign: 'center' + }, + // comp + section: { + backgroundColor: GlobalTheme.colors.white, + padding: 12, + marginHorizontal: 5, + borderRadius: 8, + elevation: 2, + width: Screen.screenWidth * 0.92, + marginVertical: 5, + borderWidth: 1, + borderColor: GlobalTheme.colors.lightblueborder, + // ...shadow, + + }, + sectionTitle: { + fontWeight: GlobalTheme.typography.fontWeight.bold, + fontSize: GlobalTheme.typography.fontSize.small, + }, + row: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: 4 + }, + brand: { + fontSize: GlobalTheme.typography.fontSize.xsmall, + color: GlobalTheme.colors.black, + fontWeight: GlobalTheme.typography.fontWeight.medium, + }, + value: { + fontSize: GlobalTheme.typography.fontSize.xsmall, + fontWeight: GlobalTheme.typography.fontWeight.medium, + }, + name: { + fontSize: GlobalTheme.typography.fontSize.xsmall, + fontWeight: GlobalTheme.typography.fontWeight.regular, + flexWrap:'wrap' + }, + date: { + fontSize: GlobalTheme.typography.fontSize.xsmall, + fontWeight: GlobalTheme.typography.fontWeight.regular, + flexWrap:'wrap' + }, + subheaderText:{ + fontSize: GlobalTheme.typography.fontSize.xsmall, + fontWeight: GlobalTheme.typography.fontWeight.regular, + flexWrap:'wrap', + color : GlobalTheme.colors.gray, + textTransform: 'capitalize', + }, + headerText:{ + fontSize: GlobalTheme.typography.fontSize.medium, + fontWeight: GlobalTheme.typography.fontWeight.medium, + flexWrap:'wrap', + color : GlobalTheme.colors.black, + paddingVertical:10, + paddingHorizontal:10 + } + +}); diff --git a/src/theme/index.js b/src/theme/index.js index aa97e5f..b762130 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -1,4 +1,4 @@ import GlobalTheme from './theme'; -import { shadow , Screen } from './theme'; +import { shadow , Screen , horizonalLine } from './theme'; -export {GlobalTheme, Screen , shadow}; +export {GlobalTheme, Screen , shadow, horizonalLine}; diff --git a/src/theme/theme.js b/src/theme/theme.js index a598c7e..85704f9 100644 --- a/src/theme/theme.js +++ b/src/theme/theme.js @@ -14,9 +14,10 @@ const GlobalTheme = { // Primary Colors primary: '#113F8C', // Main color for buttons, headers secondary: '#2357C6', + lightbluetext:'#7F83AB', text: '#333333', // Text color for most content - lightblue:'#EAF1FF', - lightblueborder:'#C6DBFF24', + lightblue:'#E2E7F2', + lightblueborder:'#ECECEC', // Additional Colors success: '#4caf50', // Success or positive action color @@ -27,7 +28,7 @@ const GlobalTheme = { // Grayscale white: '#ffffff', lightGray: '#F1F1F1', - gray: '#cccccc', + gray: '#676767', darkGray: '#555555', black: '#000000', }, @@ -35,7 +36,8 @@ const GlobalTheme = { // Define typography styles here (e.g., font family, sizes, line heights, etc.) fontFamily: 'Regular', fontSize: { - xsmall: 12, + xxsmall: 12, + xsmall :14, small: 16, medium: 18, large: 20, @@ -61,6 +63,8 @@ const GlobalTheme = { lg: 15, lgg: 20, xlg: 25, + xxlg: 35, + }, // Add other global theme properties as needed }; @@ -68,9 +72,15 @@ const GlobalTheme = { export default GlobalTheme; export const shadow = { - shadowColor: '#00000014', + shadowColor: '#00000029', shadowOffset: {width: 5, height: 5}, shadowOpacity: 0.8, shadowRadius: 10, elevation: 20, }; + +export const horizonalLine = { + backgroundColor :'#E2E7F2', + height:1.5, + width: '100%', +};