Graph and search store updated

src/screens/MainScreen/Dashboard/index.js

@@ -191,6 +191,7 @@ const Dashboard = (props) => {
    const restItems = filteredGraphs?.slice(1);
    const graphDetails = mainDisplayJson?.graphDetails || [];
    const [visitedStoreData1, setVisitedStoreData] = useState([]);
+   const [searchQuery, setSearchQuery] = useState('');
 
    // 🧠 Initialize tabCache state at the top of your component
    const [tabCache, setTabCache] = useState({});
@@ -592,7 +593,7 @@ const Dashboard = (props) => {
          setStoreList(resData)
          setLoading(false)
 
-         console.log('storeSearchApi====>', resData);
+         console.log('storeSearchApi====>', JSON.stringify(resData));
 
       } catch (error) {
          setLoading(false)
@@ -700,22 +701,22 @@ const Dashboard = (props) => {
                      // hideRules={true}
                      hideYAxisLine={true}
                      yAxisThickness={0}
-                     xAxisThickness={1}
+                     xAxisThickness={0}
                      rulesLength={chartWidth}
                      // xAxisLength={chartWidth}
-                     hideAxesAndRules={true}
-                     // backgroundColor={'red'}
+                     hideAxesAndRules={false}
+                  // backgroundColor={'red'}
 
-                     backgroundColor={'yellow'}
+                  // backgroundColor={'yellow'}
 
                   // xAxisLabelTextStyle={{ color: '#000', fontSize: 10, marginTop: 4 }}
                   />
                   {/* </View> */}
-                  <View style={{height:10}} />
+                  <View style={{ height: 10 }} />
                </View>
             );
 
-            
+
 
          case "Table":
             return (
@@ -800,6 +801,14 @@ const Dashboard = (props) => {
 
    const feedbackCount = visitedStoreData1?.filter(item => item?.UPLOAD_STATUS == 'U')?.length;
 
+   const filteredStores = storeList.filter((store) => {
+      const query = searchQuery.toLowerCase();
+      return (
+         store.StoreName.toLowerCase().includes(query) ||
+         store.StoreId.toString().includes(query)
+      );
+   });
+
    return (
       <SafeAreaView style={{ flex: 1, backgroundColor: GlobalTheme.colors.primary }}>
          <View style={{ flex: 1, backgroundColor: '#fff' }}>
@@ -1004,7 +1013,7 @@ const Dashboard = (props) => {
                   </View>
 
                   {/* Score Card */}
-                  <View style={{ margin:5  }}>
+                  <View style={{ margin: 5 }}>
 
                      <View style={{ marginHorizontal: 5 }}>
                         {firstItem && (
@@ -1055,15 +1064,15 @@ const Dashboard = (props) => {
                         )}
                      </View>
                      <View style={{ marginHorizontal: 10 }}>
-                     <FlatList
-                        data={restItems}
-                        keyExtractor={(item, index) => `${item.GraphId}-${index}`}
-                        renderItem={renderItem}
-                        numColumns={2}
-                        columnWrapperStyle={{ justifyContent: 'space-between', marginTop: 10 }}
-                        contentContainerStyle={{ paddingHorizontal: 2, paddingVertical: 2 }}
-                        showsVerticalScrollIndicator={false}
-                     />
+                        <FlatList
+                           data={restItems}
+                           keyExtractor={(item, index) => `${item.GraphId}-${index}`}
+                           renderItem={renderItem}
+                           numColumns={2}
+                           columnWrapperStyle={{ justifyContent: 'space-between', marginTop: 10 }}
+                           contentContainerStyle={{ paddingHorizontal: 2, paddingVertical: 2 }}
+                           showsVerticalScrollIndicator={false}
+                        />
                      </View>
                   </View>
                   <Loader visible={loading} />
@@ -1376,10 +1385,22 @@ const Dashboard = (props) => {
                         {searchResult ?
                            <View style={{ marginBottom: 70 }}>
                               <View style={{ marginTop: 20 }}>
-                                 <Text style={{ color: '#000', fontSize: 14 }}>{storeList ? storeList.length : 0} Store</Text>
+                                 {/* <Text style={{ color: '#000', fontSize: 14 }}>{storeList ? storeList.length : 0} Store</Text> */}
+                                 <Text style={{ color: '#000', fontSize: 14 }}>{filteredStores.length} Store{filteredStores.length !== 1 ? 's' : ''}</Text>
                               </View>
 
-                              {storeList && storeList.length > 0 ? storeList.map((store) => (
+                              <View style={styles.searchByID}>
+                                 <Image source={IMAGES.searchIcon} style={{ height: 15, width: 15 }} />
+                                 <TextInput
+                                    placeholder="Search by Store Name or Store ID"
+                                    placeholderTextColor={'gray'}
+                                    value={searchQuery}
+                                    onChangeText={setSearchQuery}
+                                    style={{ color: '#000', marginLeft: 5, height: 38, width: '95%' }}
+                                 />
+                              </View>
+
+                              {filteredStores && filteredStores.length > 0 ? filteredStores.map((store) => (
                                  <TouchableOpacity onPress={() => onSelectStore(store)}
                                     key={store.StoreId} style={styles.storeCard}>
                                     <Text style={styles.cardTextBold}>{store.StoreName}</Text>

src/screens/MainScreen/Dashboard/style.js

@@ -340,4 +340,17 @@ export const styles = StyleSheet.create({
         shadowRadius: 5,
         shadowOffset: { width: 0, height: 2 },
     },
+    searchByID: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 40,
+        width: '100%',
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 10,
+        paddingHorizontal: 10,
+        marginTop: 10,
+        marginBottom: 10,
+
+    }
 });