@jescon-technologies/react-native-ui-kit 0.0.5 → 0.0.7

package/src/Screens/CMedications.js

@@ -1,528 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Text, View, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, TextInput, TouchableWithoutFeedback, Dimensions, } from 'react-native';
-import { Global } from '../../../../../src/Common/Global';
-import { normalize } from '../CommonStyle/componentStyle';
-import SCheckBox from '../StaticComponents/SCheckBox';
-import { debounce } from 'lodash';
-import { SwipeRow } from 'react-native-swipe-list-view';
-import NetworkServiceCall from '../Common/NetworkServiceCall';
-import HOCIcons from '../HOC/HOCIcons';
-import CCommentOverlay from '../CustomComponents/CCommentOverlay';
-import { isBNU, isBNUL, isNU } from '../CommonStyle/ComponentFunctions';
-import moment from 'moment';
-import CTextHeader from '../Custom/TableComponent/CTextHeader';
-
-const CMedications = ({ data: initialData, callback }) => {
-
-  const navigation = useNavigation();
-  const [data, setData] = useState(initialData); // Tab state
-  const [medicationData, setMedicationData] = useState([]); // Fetched data
-  const [loading, setLoading] = useState(true); // Loading state
-  const [refresh, setRefresh] = useState(0)
-
-  useEffect(() => {
-
-    const fetchData = async () => {
-
-      setLoading(true);
-      try {
-        const buttonapi = initialData.item.profilecontent[0].prescriptionmedicationurl;
-        console.log('useeffect buttonapi', buttonapi);
-        const response = await NetworkServiceCall('get', buttonapi, '');
-        if (response.httpstatus === 200 && response.data?.medicationdata) {
-          // console.log('response', JSON.stringify(response));
-          setMedicationData(response.data.medicationdata);
-        }
-      } catch (error) {
-        console.error('Error fetching medication data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  const handleCheckboxChange = (checked, sectionIndex, category, itemIndex) => {
-
-    setMedicationData(prevData => {
-      const updatedData = prevData.map((section, secIndex) => {
-        if (secIndex !== sectionIndex) return section;
-
-        return {
-          ...section,
-          [category]: section[category].map((item, idx) =>
-            idx === itemIndex ? { ...item, status: checked } : item,
-          ),
-        };
-      });
-
-      // Group selected items and send back via callback
-      const groupedSelectedItems = updatedData.map(section => {
-        const grouped = {};
-        Object.keys(section).forEach(cat => {
-          if (Array.isArray(section[cat])) {
-            const selectedItems = section[cat].filter(item => item.status);
-            if (selectedItems.length > 0) {
-              grouped[cat] = selectedItems;
-            }
-          }
-        });
-        return grouped;
-      }).filter(group => Object.keys(group).length > 0);
-
-      callback?.({
-        'savetype': category,
-        'array': groupedSelectedItems
-      });
-
-      return updatedData;
-    });
-  };
-
-  const handleRemarkChange = useMemo(() => debounce((remark, sectionIndex, category, itemIndex) => {
-    setMedicationData(prevData =>
-      prevData.map((section, secIndex) => {
-        if (secIndex !== sectionIndex) return section;
-        return {
-          ...section,
-          [category]: section[category].map((item, idx) =>
-            idx === itemIndex ?
-              {
-                ...item,
-                remark
-              }
-              : item,
-          ),
-        };
-      }),
-    );
-  }, 500),
-    [],
-  );
-
-  const handleTabChange = async index => {
-
-    setLoading(true);
-    setData(prevData => {
-      const updatedata = {
-        ...prevData,
-        item: {
-          ...prevData.item,
-          medication: prevData.item.medication.map((val, i) => ({
-            ...val,
-            selected: i === index,
-          })),
-        },
-      };
-      return updatedata
-    });
-    callback?.([]);
-
-    const buttonapi = index == 0 /* PRESCRIPTION */ ? data.item.profilecontent[0].prescriptionmedicationurl : index == 1 /* PATIENT SERVICE */ ? data.item.profilecontent[0].psmedicationurl : index == 2 /* DIET */ ? data.item.profilecontent[0].dietmedicationurl : '';
-    console.log('handleTabChange', index, buttonapi);
-    const response = await NetworkServiceCall('get', buttonapi, '');
-    if (response.httpstatus === 200 && response.data?.medicationdata) {
-      setMedicationData(response.data.medicationdata);
-    }
-    setLoading(false);
-  };
-
-  const renderEachMedication = useCallback(({ item, category, sectionIndex, itemIndex }) => (
-
-    // console.log(' prescription PatientService diet', JSON.stringify(category)),
-
-    <SwipeRow
-      key={`swipe-row-${sectionIndex}-${itemIndex}`}
-      swipeToOpenPercent={1}
-      swipeToClosePercent={1}
-      leftOpenValue={normalize(190)}
-      rightOpenValue={- normalize(100)}
-    >
-
-      {/* Swipe back (hidden) view */}
-      <View style={{
-        borderWidth: 0.5,
-        borderColor: 'lightgrey',
-        flexDirection: 'row',
-        backgroundColor: 'white',
-        justifyContent: 'space-between'
-      }}>
-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100%',
-            backgroundColor: Global.AppTheme.primary_color
-          }}
-          onPress={() => (
-            navigation.navigate('CHistoryScreen', {
-              data: item,
-              screentype: 1,
-              link: item.historyurl
-            }),
-            (Global.PatientDetails = {
-              ...data.item,
-              medication: null
-            })
-          )}>
-          <HOCIcons.Icons
-            icongroup={5}
-            size={normalize(25)}
-            name={'notes-medical'}
-            color={'white'}
-            style={{ paddingHorizontal: normalize(3) }}
-          />
-          <Text style={{ color: 'white', fontWeight: 'normal', fontSize: normalize(8), textAlign: 'center', paddingHorizontal: normalize(4) }}>{category}{" History"}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100%',
-            backgroundColor: Global.AppTheme.primary_color
-          }}
-          onPress={() => {
-            (navigation.navigate('CHistoryScreen', {
-              data: item,
-              screentype: 2,
-              link: item.medicationhistoryurl
-            }),
-              (Global.PatientDetails = {
-                ...data.item,
-                medication: null
-              }))
-          }}
-        >
-          <HOCIcons.Icons
-            icongroup={3}
-            size={normalize(25)}
-            name={'text-box-check-outline'}
-            color={'white'}
-            style={{ paddingHorizontal: normalize(3) }}
-          />
-          <Text style={{ color: 'white', fontWeight: 'normal', fontSize: normalize(8), textAlign: 'center', paddingHorizontal: normalize(4) }}>{"Medication History"}</Text>
-        </TouchableOpacity>
-      </View >
-
-      {/* Visible medication item */}
-      < TouchableWithoutFeedback >
-        <View style={styles.medicationContainer}>
-          <View style={{ flexDirection: 'row', width: '100%', }}>
-            <View style={{ borderWidth: 0.5, borderColor: 'grey', width: '55%', justifyContent: 'center', alignItems: 'flex-start' }}>
-              <View style={{ flexDirection: 'row' }}>
-                <SCheckBox
-                  data={{ value: item.status }}
-                  callBack={value => handleCheckboxChange(value, sectionIndex, category, itemIndex)}
-                />
-                <View style={{ flex: 1, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }}>
-                  <Text adjustsFontSizeToFit numberOfLines={3} style={{ fontSize: normalize(10), textAlign: 'left', fontWeight: 'bold', color: Global.AppTheme.primary_color }}>
-                    {item.product || 'N/A'}
-                  </Text>
-                </View>
-              </View>
-              <View style={{ borderTopWidth: 0, borderColor: 'grey', width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: normalize(5) }}>
-                <HOCIcons.Icons
-                  icongroup={10}
-                  size={normalize(10)}
-                  name={'info'}
-                  color={'grey'}
-                  style={{ paddingHorizontal: normalize(3) }}
-                />
-                <Text adjustsFontSizeToFit numberOfLines={3} style={{ fontSize: normalize(9), color: 'black', fontWeight: 'bold' }}>
-                  {" "}{item.description || 'No description'}
-                </Text>
-              </View>
-            </View>
-            <View style={{ borderWidth: 0.5, borderColor: 'grey', width: '25%', justifyContent: 'center', alignItems: 'flex-start' }}>
-              <Text style={{ fontSize: normalize(10), color: 'black', fontWeight: 'bold', textAlign: 'left', paddingLeft: normalize(5) }}>{" "}{item.medicationdate || ' '}</Text>
-              <Text style={{ fontSize: normalize(10), color: 'black', fontWeight: 'bold', textAlign: 'left', paddingLeft: normalize(5) }}>{" "}{moment(item.medicinetime, 'HH:mm:ss').format('h:mm A') || ' '}</Text>
-            </View>
-            <View style={{ borderWidth: 0.5, borderColor: 'grey', width: '20%', justifyContent: 'center', alignItems: 'center' }}>
-              <View style={{
-                width: '100%',
-                height: 'auto',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderWidth: 0
-              }}>
-                <TouchableOpacity
-                  onPress={() => {
-                    item.remarksoverlay = !item.remarksoverlay;
-                    setRefresh(refresh + 1);
-                  }}
-                  style={{
-                    backgroundColor: 'white',
-                    elevation: 0,
-                    borderWidth: 0,
-                    borderRadius: 0,
-                    borderColor: 'lightgrey',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    width: '100%',
-                    height: 'auto'
-                  }}>
-                  <HOCIcons.MaterialCommunityIcons
-                    name={'comment'}
-                    size={normalize(10)}
-                    color={Global.AppTheme.primary_color}
-                    style={{
-                      paddingHorizontal: normalize(3)
-                    }}
-                  />
-                  <Text adjustsFontSizeToFit numberOfLines={1} style={{ paddingRight: normalize(3), fontSize: normalize(8), color: 'black', fontWeight: 'bold' }}>{isNU(item.remark) ? item.remark : null}</Text>
-                </TouchableOpacity>
-                {item.remarksoverlay ?
-                  <CCommentOverlay
-                    disabled={false}
-                    icon={{
-                      'name': 'badge-account',
-                      'icongroup': 3,
-                      'size': normalize(15),
-                      'style': {
-                        marginHorizontal: normalize(10)
-                      }
-                    }}
-                    footericon={{
-                      'name': 'select1',
-                      'icongroup': 1,
-                      'color': Global.AppTheme.primary_color,
-                      'size': normalize(25),
-                      'style': {
-                        marginHorizontal: normalize(10)
-                      }
-                    }}
-                    footerbuttontext={'Select'}
-                    heading={'REMARKS'}
-                    overlaystyle={{
-                      borderRadius: 10,
-                      height: Dimensions.get('window').height * 0.38,
-                      borderWidth: 0,
-                      borderColor: 'darkblue',
-                      alignSelf: 'center',
-                      width: Dimensions.get('screen').width * 1,
-                      alignItems: 'center',
-                      justifyContent: 'flex-start',
-                      padding: 0,
-                      backgroundColor: 'transparent',
-                      position: 'absolute',
-                      bottom: 0
-
-
-                    }}
-                    data={isNU(item.remark) ? item.remark : null}
-                    callback={val => {
-                      // console.log('callback from overlay');
-                    }}
-                    onsavecallback={val => {
-                      handleRemarkChange(val, sectionIndex, category, itemIndex)
-                      // item.remark = val;
-                      item.remarksoverlay = false;
-                      setRefresh(refresh + 1);
-                    }}
-                    OverlayClose={val => {
-                      item.remarksoverlay = !item.remarksoverlay;
-                      // item.remarksoverlay = false;
-                      setRefresh(refresh + 1);
-                    }}
-                  />
-                  : null}
-              </View>
-            </View>
-          </View>
-        </View>
-      </TouchableWithoutFeedback >
-    </SwipeRow >
-  ),
-    [],
-  );
-
-  const renderMedicationList = useCallback((sectionIndex, category, medications) => (
-
-    <View key={category}>
-      {/* {isBNUL(medicationData) ? */}
-      <View style={{ flexDirection: 'row', width: '100%' }}>
-        <View style={{ width: '55%' }}>
-          <CTextHeader
-            text={'Medication'}
-            widthArr={'100%'}
-            bgColor={"lightgrey"}
-            color={Global.AppTheme.primary_color}
-            borderColor={'lightgrey'}
-            marginHorizontal={normalize(2)}
-            borderRadius={1}
-            elevation={2}
-          />
-        </View>
-        <View style={{ width: '25%' }}>
-          <CTextHeader
-            text={'Date & Time'}
-            widthArr={'100%'}
-            bgColor={"lightgrey"}
-            color={Global.AppTheme.primary_color}
-            borderColor={'lightgrey'}
-            marginHorizontal={normalize(2)}
-            borderRadius={1}
-            elevation={2}
-          />
-        </View>
-        <View style={{ width: '20%' }}>
-          <CTextHeader
-            text={'Remarks'}
-            widthArr={'100%'}
-            bgColor={"lightgrey"}
-            color={Global.AppTheme.primary_color}
-            borderColor={'lightgrey'}
-            marginHorizontal={normalize(2)}
-            borderRadius={1}
-            elevation={2}
-          />
-        </View>
-      </View>
-      {/* : null} */}
-      {medications.map((item, itemIndex) =>
-        renderEachMedication({ item, category, sectionIndex, itemIndex }),
-      )}
-    </View>
-  ),
-    [],
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.card}>
-
-        <View style={styles.tabContainer}>
-          {data?.item?.medication?.map((val, i) => (
-            <TouchableOpacity
-              key={i}
-              onPress={() => handleTabChange(i)}
-              style={[styles.tab, val.selected && styles.selectedTab]}>
-              <Text style={styles.tabText}>{"  "}{val.name}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-
-        {loading ? (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator
-              size="large"
-              color={Global.AppTheme.primary_color}
-            />
-          </View>
-        ) : (
-          <View>
-            {isBNUL(medicationData) ?
-              <FlatList
-                data={medicationData}
-                keyExtractor={(item, index) => `section-${item.id || index}`}
-                contentContainerStyle={styles.contentContainer}
-                showsVerticalScrollIndicator={true}
-                renderItem={({ item, index }) => {
-                  // if (!data?.item?.medication?.[0]?.selected) return null;
-                  return (
-                    <View>
-                      {Object.keys(item).map(category =>
-                        renderMedicationList(index, category, item[category]),
-                      )}
-                    </View>
-                  );
-                }}
-              />
-              : null}
-          </View>
-
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { padding: 5 },
-  card: {
-    backgroundColor: 'white',
-    borderRadius: normalize(5),
-    borderWidth: 1,
-    borderColor: '#ddd',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  tabContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    borderWidth: 0
-  },
-  tab: {
-    borderWidth: 0.5,
-    borderColor: 'lightgrey',
-    flex: 1,
-    paddingVertical: normalize(5),
-    // paddingHorizontal: normalize(15)
-  },
-  selectedTab: {
-    backgroundColor: '#e6f0ff',
-    borderBottomWidth: 3,
-    borderColor: Global.AppTheme.primary_color,
-  },
-  tabText: {
-    fontSize: 10,
-    fontWeight: '600',
-    color: '#444'
-  },
-  contentContainer: { padding: 5 },
-  medicationContainer: {
-    // padding: ,
-    // marginVertical: 1,
-    backgroundColor: '#ffffff',
-    borderWidth: 0,
-    borderColor: 'lightgrey',
-    // margin: normalize(4)
-  },
-  medicationRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 1,
-  },
-  highlightedText: { fontWeight: '600' },
-  highlightedValue: { fontWeight: 'bold', color: Global.AppTheme.primary_color },
-  remarkInput: { borderColor: '#ddd', borderWidth: 1, padding: 5 },
-  swipeRowBack: {
-    borderWidth: 0.5,
-    borderColor: 'lightgrey',
-    // margin: normalize(4),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    backgroundColor: '#f8f8f8',
-    // height: 80,
-    alignItems: 'center',
-    // paddingHorizontal: 15,
-  },
-  swipeButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 75,
-    height: '100%',
-  },
-  completeButton: {
-    backgroundColor: Global.AppTheme.primary_color,
-  },
-  deleteButton: {
-    backgroundColor: Global.AppTheme.primary_color,
-  },
-  swipeButtonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default CMedications;