esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/event/turnstile_settings.tsx

@@ -0,0 +1,327 @@
+// withHooks
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventToggle } from 'esoftplay/cache/event/toggle/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTurnstile_settingsArgs {
+
+}
+export interface EventTurnstile_settingsProps {
+
+}
+
+export interface Turnstile_settingsItem2 extends EventTurnstile_settingsProps {
+  title: string
+  value: string
+  iconLeft: string
+  isTouchable: boolean
+  isDisable?: boolean
+  onPress: () => void,
+}
+
+function Item(props: Turnstile_settingsItem2) {
+  return (
+    <Pressable onPress={props.onPress} style={{ backgroundColor: props.isDisable ? "#f1f2f3" : "transparent", flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, paddingTop: 7, paddingHorizontal: 10, paddingRight: 5 }}>
+      <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+        <LibIcon name={props.iconLeft} style={{ opacity: props.isDisable ? 0.2 : 1 }} />
+        <View style={{ marginLeft: 8, flex: 2, flexDirection: 'row', opacity: props.isDisable ? 0.2 : 1 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12 }}>{props.title}</Text>
+          <Text allowFontScaling={false} style={{ color: LibStyle.colorRed }}>*</Text>
+        </View>
+      </View>
+      <View style={{ marginLeft: 10, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+        <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='middle' style={{ opacity: props.isDisable ? 0.5 : 1, flex: 1, textAlign: 'right', marginRight: 5, fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorTextPrimary }}>{props.value}</Text>
+        {
+          props.isTouchable &&
+          <LibIcon name='chevron-right' color={LibStyle.colorTextPrimary} style={{ opacity: props.isDisable ? 0.4 : 1 }} />
+        }
+        {/* <LibIcon name='logo' color={LibStyle.colorTextPrimary} /> */}
+      </View>
+    </Pressable>
+  )
+}
+
+export const config = esp.config();
+
+export default function m(props: EventTurnstile_settingsProps): any {
+  const { serial_number } = LibNavigation.getArgsAll<any>(props)
+  const [userScan, setUserScan] = useSafeState<boolean>(false)
+  const [forExhibitor, setForExhibitor] = useSafeState<boolean>(false)
+  const [result, setResult] = useSafeState<any>(undefined)
+  const [selectedEvent, setSelectedEvent] = useSafeState<any>()
+  const [selectedGate, setSelectedGate] = useSafeState<any>()
+  const [selectedTypeGate, setSelectedTypeGate] = useSafeState<any>()
+  const [selectedTypeTicket, setSelectedTypeTicket] = useSafeState<any>()
+
+  const dialogTypeGate = useRef<LibSlidingup>(null)
+
+
+  const typeGate = [
+    {
+      id: 1,
+      title: esp.lang("event/turnstile_settings", "entrance"),
+      icon: 'login'
+    },
+    {
+      id: 0,
+      title: esp.lang("event/turnstile_settings", "exit"),
+      icon: 'logout'
+    }
+  ]
+
+
+  useEffect(() => {
+    checkStatus()
+  }, [])
+
+
+  function checkStatus() {
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile?serial_number=" + serial_number, null, (res, msg) => {
+      setResult(res)
+      LibProgress.hide()
+      // default value
+      let defaultValue = res?.turnstile_data_backup
+      let dataEvent = {
+        event_id: defaultValue.event_id,
+        event_name: defaultValue.event_name
+      }
+      setSelectedEvent(dataEvent)
+
+      let dataGate = {
+        gate_id: defaultValue.gate_id,
+        gate_name: defaultValue.gate_name
+      }
+      setSelectedGate(dataGate)
+
+      let dataTypeGate = {
+        id: defaultValue.gate_type,
+        title: defaultValue.gate_type == 1 ? esp.lang("event/turnstile_settings", "entrance") : esp.lang("event/turnstile_settings", "exit")
+      }
+      setSelectedTypeGate(dataTypeGate)
+
+      let dataTypeTicket = {
+        ids: defaultValue.ticket_types,
+        title: defaultValue.ticket_types.length + esp.lang("event/turnstile_settings", "type_ticket")
+      }
+      setSelectedTypeTicket(dataTypeTicket)
+
+    }, (error) => {
+      LibProgress.hide()
+      registerTurnstile()
+    }, 1)
+  }
+
+  function registerTurnstile() {
+    let post = {
+      serial_number: serial_number
+    }
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile", post, (res, msg) => {
+      LibProgress.hide()
+    }, (error) => {
+      LibProgress.hide()
+    }, 1)
+  }
+
+  function loadDataGate(event_id: any) {
+    LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+    new LibCurl("gate_turnstile_event_ticket?event_id=" + event_id, null, (res, msg) => {
+      const a = res.length > 0 && res.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 1
+        })
+      })
+
+      let _ids = a.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+      let data = {
+        ids: _ids,
+        title: _ids.length + esp.lang("event/turnstile_settings", "type_ticket")
+      }
+      setSelectedTypeTicket(data)
+      LibProgress.hide()
+    }, (err) => {
+      LibProgress.hide()
+      LibDialog.warning(esp.lang("event/turnstile_settings", "err"), err?.message)
+    }, 1)
+  }
+
+  function checkInput() {
+    if (!selectedEvent) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+      return false
+    }
+    if (!selectedGate) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_gate_event"))
+      return false
+    }
+    if (!selectedTypeGate) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_entrance_or_exit"))
+      return false
+    }
+    if (!selectedTypeTicket) {
+      LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_type_ticket"))
+      return false
+    }
+
+    return true
+  }
+
+  function settingTurnstile() {
+    LibDialog.warningConfirm(esp.lang("event/turnstile_settings", "warning"), esp.lang("event/turnstile_settings", "submit_this"), esp.lang("event/turnstile_settings", "yes"), () => {
+      let post = {
+        event_id: selectedEvent?.event_id,
+        gate_id: selectedGate?.gate_id,
+        gate_type: selectedTypeGate?.id,
+        ticket_types: forExhibitor ? "" : selectedTypeTicket?.ids.join('|'),
+        user_scan: userScan ? 1 : 0,
+        serial_number: serial_number,
+        type: forExhibitor ? 2 : 1 //"type":"1=scan tiket, 2 = scan idcard, 3 = scan tiket dan idcard "
+      }
+
+      LibProgress.show(esp.lang("event/turnstile_settings", "please_wait"))
+      new LibCurl("gate_turnstile_setting", post, (res, msg) => {
+        LibProgress.hide()
+        LibNavigation.back()
+        LibNavigation.navigate('event/turnstile_settings_otp', { data: res, serial_number: serial_number })
+      }, (err) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/turnstile_settings", "err1"), err?.message)
+      }, 1)
+
+    }, esp.lang("event/turnstile_settings", "no"), () => {
+
+    })
+  }
+
+  function renderTypeGate(item: any, i: number) {
+    const styleId_Z2dCK0A: any = { backgroundColor: item.id == 1 ? LibStyle.colorGreen : LibStyle.colorRed, padding: 10, borderRadius: 5, ...LibStyle.elevation(2), justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
+    return (
+      <TouchableOpacity onPress={() => {
+        setSelectedTypeGate(item)
+        dialogTypeGate.current!.hide()
+      }} key={i} style={styleId_Z2dCK0A}>
+        <LibIcon name={item.icon} color='#fff' />
+        <Text allowFontScaling={false} style={styleId_QwGnx}>{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      <ScrollView>
+        <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10, ...LibStyle.elevation(2) }}>
+          <Item isTouchable onPress={() => {
+            LibNavigation.navigateForResult('event/turnstile_event_list', { api_key: result?.api_key }).then((item: any) => {
+              setSelectedEvent(item)
+              setSelectedGate(undefined)
+              setSelectedTypeGate(undefined)
+              setSelectedTypeTicket(undefined)
+
+              // set Type ticket
+              loadDataGate(item.event_id)
+            })
+          }} iconLeft='calendar-today' title={esp.lang("event/turnstile_settings", "select_event")} value={selectedEvent?.event_name} />
+          <Item isTouchable iconLeft='door-open' title={esp.lang("event/turnstile_settings", "select_gate")} value={selectedGate?.gate_name} onPress={() => {
+            if (!selectedEvent) {
+              LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+            } else {
+              LibNavigation.navigateForResult('event/turnstile_event_gate', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
+                setSelectedGate(item)
+              })
+            }
+          }} />
+
+
+          <Item isTouchable iconLeft='login' title={esp.lang("event/turnstile_settings", "select_type_gate")} value={selectedTypeGate?.title} onPress={() => {
+            dialogTypeGate.current!.show()
+          }} />
+
+          {/* untuk turnstile khusus exhibitor */}
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon name={"id-card"} />
+              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "id_card")}</Text>
+            </View>
+            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+              <EventToggle value={forExhibitor} onChangeValue={() => {
+                setForExhibitor(forExhibitor == true ? false : true)
+                if (forExhibitor) {
+                  setForExhibitor(false)
+                } else {
+                  let dataTypeTicket = {
+                    ids: '',
+                    title: ''
+                  }
+                  setSelectedTypeTicket(dataTypeTicket)
+
+                  setForExhibitor(true)
+                }
+
+              }} type='success' />
+            </View>
+          </View>
+
+          <Item isDisable={forExhibitor} isTouchable iconLeft='ticket-confirmation' title={esp.lang("event/turnstile_settings", "select_type_ticket")} value={selectedTypeTicket?.title} onPress={() => {
+            if (forExhibitor == false) {
+              if (!selectedEvent) {
+                LibToastProperty.show(esp.lang("event/turnstile_settings", "please_select_event_first"))
+              } else {
+                LibNavigation.navigateForResult('event/turnstile_event_ticket', { api_key: result?.api_key, event_id: selectedEvent?.event_id }).then((item: any) => {
+                  setSelectedTypeTicket(item)
+                })
+              }
+            }
+          }} />
+
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey, paddingBottom: 7, marginTop: 7, paddingHorizontal: 10, }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon name={"magnify-scan"} />
+              <Text allowFontScaling={false} style={{ marginLeft: 8, fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/turnstile_settings", "Enable_User_Scan")}</Text>
+            </View>
+            <View style={{ marginLeft: 10, marginRight: 5, flex: 1, justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', }}>
+              <EventToggle value={userScan} onChangeValue={() => { setUserScan(userScan == true ? false : true) }} type='success' />
+            </View>
+          </View>
+        </View>
+
+      </ScrollView>
+
+      <EventButton label={esp.lang("event/turnstile_settings", "submit")} onPress={() => {
+        if (checkInput()) {
+          settingTurnstile()
+        }
+      }} style={{ margin: 10 }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
+
+
+      <LibSlidingup ref={dialogTypeGate}>
+        <View style={{ backgroundColor: '#f6f6f6', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingBottom: 25, paddingHorizontal: 19, }}>
+          <Text allowFontScaling={false} style={{ marginTop: 15, marginBottom: 23, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/turnstile_settings", "please_select_type_gate")}</Text>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+            {
+              typeGate?.map(renderTypeGate)
+            }
+          </View>
+
+        </View>
+      </LibSlidingup>
+    </View >
+  )
+}
+const styleId_QwGnx: any = { marginTop: 8, fontFamily: 'SFProText', fontSize: 12, color: '#fff' }

package/modules/event/turnstile_settings_otp.tsx

@@ -0,0 +1,58 @@
+// withHooks
+import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventTurnstile_settings_otpArgs {
+
+}
+export interface EventTurnstile_settings_otpProps {
+
+}
+export default function m(props: EventTurnstile_settings_otpProps): any {
+  const { data, serial_number } = LibNavigation.getArgsAll(props)
+
+  useEffect(() => {
+    loadData()
+    LibAutoreload.set(() => {
+      loadData()
+    }, 6000)
+    return () => LibAutoreload.clear()
+  }, [])
+
+  function loadData() {
+    let post = {
+      serial_number: serial_number
+    }
+    new LibCurl('gate_turnstile_setted', post, (res, msg) => {
+      LibAutoreload.clear()
+      LibNavigation.back()
+      LibNavigation.navigate('event/turnstile_settings_status', { msg: msg })
+    }, (error) => {
+    }, 1)
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title={esp.lang("event/turnstile_settings_otp", "header")} />
+
+      <View style={{ backgroundColor: '#fff', borderRadius: 10, margin: 10 }}>
+        <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, alignSelf: 'center', margin: 10, marginBottom: 0 }}>{esp.lang("event/turnstile_settings", "verification_code")}</Text>
+        <Text allowFontScaling={false} style={{ fontFamily: 'DecoNumbers', fontSize: 60, fontWeight: 'bold', alignSelf: 'center', margin: 10, marginTop: 0 }}>{data?.otp_code}</Text>
+        <View style={{ borderTopWidth: 1, borderTopColor: LibStyle.colorBgGrey, padding: 10 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontSize: 12, color: LibStyle.colorRed }}>{esp.lang("event/turnstile_settings_otp", "insert_code")}</Text>
+          <EventCountdown_base expired={moment(data?.otp_expire_time).serverFormat('YYYY-MM-DD HH:mm:ss')} style={{ fontSize: 14, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" }} />
+        </View>
+      </View>
+    </View>
+  )
+}

package/modules/event/turnstile_settings_status.tsx

@@ -0,0 +1,50 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import LottieView from "lottie-react-native";
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventTurnstile_settings_statusArgs {
+
+}
+export interface EventTurnstile_settings_statusProps {
+
+}
+export default function m(props: EventTurnstile_settings_statusProps): any {
+  const { msg } = LibNavigation.getArgsAll(props)
+
+  const animation = useRef<LottieView>(null)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title={esp.lang("event/turnstile_settings", "setting_turnstile")} />
+      {
+        msg &&
+        <>
+          <View style={{ alignItems: 'center', margin: 15, marginBottom: 0, padding: 10, backgroundColor: '#fff', borderRadius: 10, borderColor: LibStyle.colorGrey, borderWidth: 1 }} >
+            <LottieView
+              ref={animation}
+              loop={true}
+              autoPlay
+              style={{
+                width: LibStyle.width - 100,
+                height: LibStyle.width - 100,
+              }}
+              source={esp.assets('success.json')}
+            // OR find more Lottie files @ https://lottiefiles.com/featured
+            // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
+            />
+          </View>
+          <View style={{ margin: 15, padding: 10, backgroundColor: '#fff', borderRadius: 10, borderColor: LibStyle.colorGrey, borderWidth: 1 }}>
+            <Text style={{ alignSelf: 'center', textAlign: 'center', fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 30, color: '#4a4a4a' }} >{msg}</Text>
+          </View>
+        </>
+      }
+    </View>
+  )
+}

package/modules/event/visitor_edit.tsx

@@ -0,0 +1,125 @@
+// withHooks
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
+import { EventLabel_input } from 'esoftplay/cache/event/label_input/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface VisitorEProps {
+  onFilterChange?: (location: any) => void,
+  location?: any,
+  navigation: any
+}
+
+export default function m(props: VisitorEProps): any {
+  const [image, setImage] = useSafeState<string>('')
+  const { data } = LibNavigation.getArgsAll(props)
+
+  let inputName = React.useRef<EventInput_rectangle>(null)
+
+  useEffect(() => {
+    setImage(data.image)
+  }, [])
+
+  function doEdit(): void {
+    let post = {
+      name: encodeURIComponent(inputName.current!.getText()),
+      image: image,
+    }
+
+    if (inputName.current!.getText() == "") {
+      LibToastProperty.show(esp.lang("event/visitor_edit", "alert_input_name"))
+      return
+    }
+    if (image == '') {
+      LibToastProperty.show(esp.lang("event/visitor_edit", "alert_input_photo"))
+      return
+    }
+
+    LibDialog.confirm(esp.lang("event/visitor_edit", "alert_title_confirm"), esp.lang("event/visitor_edit", "alert_confirm"), esp.lang("event/visitor_edit", "button_ok"), () => {
+      LibProgress.show(esp.lang("event/visitor_edit", "alert_waiting"))
+      new LibCurl(data.url_update, post,
+        (res, msg) => {
+          LibProgress.hide();
+          LibNavigation.backToRoot()
+          // BigbangIndexProperty.setTab(0)
+          LibNavigation.navigate('staff/id_card', { data: res })
+        }, (error) => {
+          LibProgress.hide();
+          LibDialog.warning(esp.lang("event/visitor_edit", "err"), error?.message);
+        }, 1)
+    }, esp.lang("event/visitor_edit", "button_cancel"), () => { })
+  }
+
+  const width = LibStyle.width - 20
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
+      <EventHeader title={esp.lang("event/visitor_edit", "title_set_idcard")} />
+      <LibKeyboard_avoid style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={false} >
+          {
+            image == '' &&
+            <Text allowFontScaling={false} style={{ margin: 15, marginBottom: 0, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("event/visitor_edit", "entry_full_data_to_continue")}</Text>
+          }
+          <View style={[{ paddingTop: 0, padding: 15, margin: 15, backgroundColor: '#fff', borderRadius: 5 }, LibStyle.elevation(2)]}>
+            <TouchableOpacity onPress={() => {
+              LibDialog.confirm(esp.lang("event/visitor_edit", "alert_confirm_title_image"), esp.lang("event/visitor_edit", "alert_confirm_image"), esp.lang("event/visitor_edit", "btn_ok_image"), () => {
+                LibImage.fromCamera({ crop: { ratio: "1:1", forceCrop: true } }).then((url) => {
+                  setImage(url)
+                })
+              }, esp.lang("event/visitor_edit", "btn_cancel_image"), () => { })
+            }}>
+              <View style={{ alignContent: 'center', alignItems: 'center', alignSelf: 'center', }}>
+                <LibPicture source={image == '' ? esp.assets('icons/ic_no_pict.png') : { uri: image || data.image }} style={{
+                  marginTop: 15,
+                  height: width * 0.48,
+                  resizeMode: 'cover',
+                  width: width * 0.38,
+                }} />
+                <View style={{ width: 25, height: 25, borderRadius: 14.5, backgroundColor: LibStyle.colorRed, position: 'absolute', right: -10, bottom: -10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                  <LibIcon size={15} name="pencil" color="#fff" />
+                </View>
+              </View>
+            </TouchableOpacity>
+            <EventLabel_input label={esp.lang("event/visitor_edit", "label_input_name")} mandatory={false} />
+            <EventInput_rectangle
+              ref={inputName}
+              style={{ borderColor: '#c4c4c4', height: 35, borderRadius: 5, marginTop: 8 }}
+              defaultValue={data.user_data.name}
+              onSubmitEditing={() => {
+                image == '' ?
+                  LibToastProperty.show(esp.lang("event/visitor_edit", "msg_error_no_photo"))
+                  :
+                  doEdit()
+              }}
+              placeholder={esp.lang("event/visitor_edit", "placeholder_input_name")}
+            />
+            <EventButton label={esp.lang("event/visitor_edit", "btn_save")} style={{ borderRadius: 5, marginTop: 20 }} onPress={() => {
+              image == '' ?
+                LibToastProperty.show(esp.lang("event/visitor_edit", "msg_error_no_photo"))
+                :
+                doEdit()
+            }}
+            />
+          </View>
+        </ScrollView>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}

package/modules/event/visitor_history.tsx

@@ -0,0 +1,61 @@
+// withHooks
+
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { EventVisitor_history_item } from 'esoftplay/cache/event/visitor_history_item/import';
+import esp from 'esoftplay/esp';
+
+import moment from 'esoftplay/moment';
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface EventVisitor_historyProps {
+
+}
+export default function m(): any {
+  moment().locale('id')
+  const url = 'event_history_history'
+
+  function doAction(url: string, type: string, data: any): void {
+    new LibCurl(url, null, (res, msg) => {
+      if (type == '2') {
+        LibNavigation.navigate('event/visitor_input', { data: res })
+      } else if (type == '3') {
+        if (res.image == '') {
+          LibNavigation.navigate('event/visitor_edit', { data: res })
+        } else {
+          LibNavigation.navigate('staff/id_card', { data: res, })
+        }
+      } else {
+        LibNavigation.navigate('event/order_detail', { url: url })
+      }
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/visitor_history", "err"), error?.message)
+    })
+  }
+
+  function renderItem(item: any) {
+    return (
+      <EventVisitor_history_item item={item} doAction={() => doAction(item.url, item.type, item)} />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={/*history_title*/"History Staff/PIC/Exhibitor"} />
+      <LibInfinite
+        errorView={(err: any) => (
+          <EventMessage message={err} />
+        )}
+        url={url}
+
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}