@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.6

package/src/Screens/CMedications.js

@@ -0,0 +1,528 @@
+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;