esoftplay-event 0.0.0-a

package/event/timer.tsx

@@ -0,0 +1,58 @@
+// withHooks
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+
+export interface EventTimerArgs {
+
+}
+export interface EventTimerProps {
+
+}
+
+const formatTime = (time: number) => {
+  const hours = Math.floor(time / 3600);
+  const minutes = Math.floor((time % 3600) / 60);
+  const seconds = time % 60;
+
+  const formattedHours = hours.toString().padStart(2, '0');
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  const formattedSeconds = seconds.toString().padStart(2, '0');
+
+  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+}
+
+
+export default function m(props: EventTimerProps): any {
+  const [elapsedTime, setElapsedTime] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setElapsedTime(prevElapsedTime => prevElapsedTime + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{formatTime(elapsedTime)}</Text>
+    </View>
+  );
+
+}
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+    padding: 10,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/event/tms.tsx

@@ -0,0 +1,103 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/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 { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
+import React, { useRef } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+export interface EventTmsArgs {
+
+}
+export interface EventTmsProps {
+
+}
+const subs = useGlobalSubscriber()
+export function subscribe(): useGlobalSubscriberReturn {
+  return subs
+}
+
+export default function m(props: EventTmsProps): any {
+  const { dataEO } = LibNavigation.getArgsAll<any>(props)
+  const ref = useRef<LibInfinite>(null)
+
+  function deleteTMS(url: string, name: string, index: number) {
+    LibDialog.warningConfirm(esp.lang("event/tms", "del_title"), esp.lang("event/tms", "del_msg", name), esp.lang("cashier/list", "dialog_delete_yes"), () => {
+      new LibCurl(url, null, (res, msg) => {
+        LibToastProperty.show(msg)
+        ref?.current?.loadData?.()
+      }, (msg) => {
+        LibDialog.warning(esp.lang("event/tms", "del_failed"), msg.message)
+      })
+    }, esp.lang("cashier/list", "dialog_delete_cancel"), () => { })
+  }
+
+  function renderItem(item: any, index: number) {
+    return (
+      <TouchableOpacity onPress={() => {
+        let dataEvent = {
+          id: dataEO?.id
+        }
+        LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: item.email.trim() })
+      }} key={index} style={applyStyle({ padding: 10, marginBottom: 4, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen, ...LibStyle.elevation(2) })} >
+        <LibPicture source={{ uri: item.image }} style={applyStyle({ height: 40, width: 40, borderRadius: 20, backgroundColor: LibStyle.colorLightGrey })} />
+        <View style={{ flex: 1 }} >
+          <Text allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={applyStyle({ fontFamily: 'Arial', fontSize: 15, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, marginRight: 10, flex: 1 })} >{item.name}</Text>
+          {
+            (!!item?.email)
+            &&
+            <Text allowFontScaling={false} style={[applyStyle({ marginTop: 3, fontFamily: 'Arial', fontSize: 13, color: "#c5c5c5", marginLeft: 10, marginRight: 10, flex: 1 })]} >{item?.email}</Text>
+          }
+          {
+            item?.access_resetable == 1 &&
+            <View style={{ flexDirection: 'row', marginLeft: 10, marginTop: 7 }}>
+              <View style={{ borderWidth: 1, borderRadius: 10, paddingVertical: 2, borderColor: LibStyle.colorGreen, backgroundColor: LibStyle.colorGreen, padding: 10, }}>
+                <Text allowFontScaling={false} style={{ color: '#fff' }}>{item?.access_resetable == 1 ? esp.lang("event/tms", "reset") : ""}</Text>
+              </View>
+            </View>
+          }
+        </View>
+        {
+          item?.url_delete != '' &&
+          <TouchableOpacity onPress={() => {
+            deleteTMS(item.url_delete, item?.name, index)
+          }} >
+            <View style={applyStyle({ padding: 7, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorRed })} >
+              <LibIcon name='trash-can-outline' color={LibStyle.colorRed} size={16} />
+            </View>
+          </TouchableOpacity>
+        }
+      </TouchableOpacity>
+    )
+  }
+
+  subs.useSubscribe(() => {
+    ref?.current?.loadData?.()
+  })
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/tms", "header")} subtitle={dataEO?.name} />
+      <LibInfinite
+        ref={ref}
+        // isDebug={1}
+        url={'event_tms_list?event_id=' + dataEO?.id}
+        errorView={(error: any) => (<ComponentMessage message={error} />)}
+        renderItem={renderItem}
+      />
+      <Pressable onPress={() => { LibNavigation.navigate('event/tms_add', { dataEvent: dataEO }) }} style={{ ...LibStyle.elevation(2), position: 'absolute', bottom: 15, right: 15, height: 50, width: 50, borderRadius: 25, backgroundColor: LibStyle.colorGreen, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+        <LibIcon name='plus' color='#fff' size={26} />
+      </Pressable>
+    </View>
+  )
+}

package/event/tms_add.tsx

@@ -0,0 +1,94 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibInput_circle2 } from 'esoftplay/cache/lib/input_circle2/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface EventTms_addArgs {
+
+}
+export interface EventTms_addProps {
+
+}
+export default function m(props: EventTms_addProps): any {
+  let inputEmail = React.useRef<LibInput_circle2>(null)
+  const { dataEvent } = LibNavigation.getArgsAll(props)
+  const [email, setEmail] = useSafeState('')
+  const [qrcode, setQrcode] = useSafeState('')
+
+  // function addTMS() {
+  //   let post = {
+  //     email: email.trim(),
+  //     event_id: dataEvent?.id,
+  //     qr: qrcode.trim(),
+  //     resetable: allowReset
+  //   }
+
+  //   new LibCurl('event_tms_add', post,
+  //     (res, msg) => {
+  //       EventTmsProperty.subscribe().trigger()
+  //       dialogUser.current?.hide()
+  //       LibToastProperty.show(msg)
+  //       LibNavigation.back()
+  //     }, (msg) => {
+  //       LibDialog.warning(esp.lang("cashier/list", "text_failed_add"), msg?.message)
+  //     }, 1
+  //   )
+  // }
+
+  return (
+    <LibKeyboard_avoid style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/tms_add", "header")} />
+      <View style={{ flex: 1, margin: 15, backgroundColor: '#fff', borderRadius: 10, ...LibStyle.elevation(2) }}>
+        <ScrollView style={{ flex: 1 }}>
+          <ComponentTouchable onPress={() => {
+            LibNavigation.navigateForResult('component/scanner', { fromPage: "event/tms_add" }).then((value: any) => {
+              LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: value.trim() })
+              // setQrcode(value)
+            })
+          }}>
+            <View style={{ width: LibStyle.width - 30, overflow: 'hidden', borderTopLeftRadius: 10, borderTopRightRadius: 10, height: LibStyle.height * 0.5, backgroundColor: '#b8b7bf', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+              <LibPicture source={esp.assets('icons/ic_barcode_white.png')} style={{ height: 250, width: 250 }} />
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 10, color: '#fff' }}>{esp.lang("transfer/index", "klik_here")}</Text>
+            </View>
+          </ComponentTouchable>
+          <Text allowFontScaling={false} style={{ opacity: 0.7, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 20 }}>{esp.lang("event/tms_add", "scan_qr")}</Text>
+          <Text allowFontScaling={false} style={{ opacity: 0.6, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", marginTop: 17 }}>{esp.lang("transfer/index", "or")}</Text>
+
+          <LibInput_circle2
+            ref={inputEmail}
+            onSubmitEditing={() => {
+              LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: qrcode.trim() })
+            }}
+            onChangeText={(t) => setEmail(t)}
+            blurOnSubmit
+            returnKeyType="done"
+            autoCapitalize='none'
+            // autoFocus
+            style={{ borderColor: '#c4c4c4', height: 35, margin: 15, borderRadius: 5 }}
+            placeholder={esp.lang("event/tms_add", "placeholder_email")}
+          />
+
+        </ScrollView>
+
+        <ComponentTouchable onPress={() => {
+          LibNavigation.navigate('event/tms_add_result', { dataEvent: dataEvent, email: email.trim(), is_add: true, qr_code: qrcode.trim() })
+        }}>
+          <View style={{ margin: 15, marginTop: 20, height: 35, backgroundColor: "#6c432c", justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 13, marginLeft: 10 }} >{esp.lang("visitor/index", "submit")}</Text>
+          </View>
+
+        </ComponentTouchable>
+      </View >
+    </LibKeyboard_avoid>
+  )
+}

package/event/tms_add_result.tsx

@@ -0,0 +1,175 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventTmsProperty } from 'esoftplay/cache/event/tms/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 { LibObject } from 'esoftplay/cache/lib/object/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_add_resultArgs {
+
+}
+export interface EventTms_add_resultProps {
+
+}
+export default function m(props: EventTms_add_resultProps): any {
+  const { dataEvent, email, qr_code, is_add } = LibNavigation.getArgsAll(props)
+  const [allowReset, setAllowReset] = useSafeState<any>(0)
+  const [ticketTypes, setTicketTypes] = useSafeState<any>()
+  const [dataTms, setDataTms] = useSafeState<any>()
+
+  useEffect(() => {
+    loadDataTickets()
+    loadDataTms()
+  }, [])
+
+  function loadDataTms() {
+    let post: any = {
+      // email: "bagus@fisip.net",
+      email: email?.trim(),
+    }
+    if (qr_code)
+      post.qr = qr_code?.trim()
+    new LibCurl('user', post,
+      (res, msg) => {
+        setDataTms(res)
+      },
+      (msg) => {
+        LibDialog.warningConfirm(esp.lang("event/tms_add_result", "oops"), msg?.message, esp.lang("event/tms_add_result", "confirm_back"), () => {
+          LibNavigation.back()
+        }, "", () => { })
+      }
+    )
+  }
+
+  function loadDataTickets() {
+    let post: any = {
+      event_id: dataEvent?.id
+    }
+
+    if (email) {
+      post.email = email
+    }
+
+    if (qr_code) {
+      post.qrcode = qr_code
+    }
+
+    new LibCurl('event_tms_access' + LibUtils.objectToUrlParam(post), null, (res, msg) => {
+      if (is_add) {
+        const updatedPrice = res.price.map((item: any) => {
+          return { ...item, is_selected: "1" };
+        });
+
+        const updatedData = { ...res, price: updatedPrice }; // Menggabungkan kembali data dengan price yang telah diperbarui
+        setTicketTypes(updatedData)
+
+      } else {
+        setTicketTypes(res)
+      }
+
+      setAllowReset(res?.is_resetable)
+
+    }, (err) => {
+    })
+  }
+
+  function addTMS() {
+    let ids = ticketTypes?.price?.filter((item: any) => item.is_selected == 1).map((it: any) => it.id)
+    let post: any = {
+      event_id: dataEvent?.id,
+      resetable: allowReset,
+      access_ticket: JSON.stringify(ids)
+    }
+
+    if (email) {
+      post.email = email.trim()
+    }
+    if (qr_code) {
+      post.qr = qr_code.trim()
+    }
+
+    LibProgress.show(esp.lang("event/tms_add_result", "wait"))
+    new LibCurl('event_tms_add', post,
+      (res, msg) => {
+        LibProgress.hide()
+        EventTmsProperty.subscribe().trigger()
+        LibToastProperty.show(msg)
+        LibNavigation.back()
+        if (is_add) {
+          LibNavigation.back()
+        }
+      }, (msg) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("cashier/list", "text_failed_add"), msg?.message)
+      }
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/tms_add", "header")} />
+      <ScrollView style={{ padding: 15 }}>
+        <View style={{ flexDirection: 'row' }}>
+          <LibPicture
+            source={{ uri: dataTms?.image }}
+            style={{ width: 60, height: 60, borderRadius: 50 }}
+          />
+          <View style={{ marginLeft: 10, justifyContent: 'center' }}>
+            <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: "bold", color: "#4a4a4a" }} >{dataTms?.name}</Text>
+            <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "bold", lineHeight: 22, color: "#b7b7b7" }} >{dataTms?.email}</Text>
+          </View>
+        </View>
+
+        {
+          ticketTypes &&
+          <View style={{ marginTop: 10 }}>
+            <LibTextstyle textStyle='m_overline' text={esp.lang("event/tms_add_result", "ticket_type")} style={{ fontSize: 12, marginTop: 15, marginBottom: 15 }} />
+            {
+              ticketTypes?.price?.map((item: any, i: number) => {
+                return (
+                  <TouchableOpacity key={i} onPress={() => {
+                    setTicketTypes(LibObject.set(ticketTypes, item.is_selected == 1 ? 0 : 1)("price", i, 'is_selected'))
+                  }} style={applyStyle({ marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' })} >
+                    <LibIcon name={item.is_selected == 0 ? "checkbox-blank-outline" : "checkbox-marked"} color={item.is_selected == 0 ? "#000" : LibStyle.colorGreen} />
+                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 8, color: item.is_selected == 0 ? "#000" : LibStyle.colorGreen, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, paddingLeft: 3, paddingRight: 3 })}>{item.name}</Text>
+                  </TouchableOpacity>
+                )
+              })
+            }
+          </View>
+        }
+
+      </ScrollView>
+      <View style={{ padding: 10 }}>
+        <Pressable onPress={() => { setAllowReset(allowReset == 1 ? 0 : 1) }} style={applyStyle({ marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' })} >
+          <LibIcon name={allowReset == 0 ? "checkbox-blank-outline" : "checkbox-marked"} color={allowReset == 0 ? "#000" : LibStyle.colorGreen} />
+          <Text allowFontScaling={false} style={applyStyle({ marginLeft: 8, color: allowReset == 0 ? "#000" : LibStyle.colorGreen, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, paddingLeft: 3, paddingRight: 3 })}>{esp.lang("event/tms_add_result", "reset")}</Text>
+        </Pressable>
+        <ComponentButton
+          label={esp.lang("event/tms_add_result", "save")}
+          backgroundColor={LibStyle.colorGreen}
+          onPress={() => {
+            addTMS()
+          }}
+        />
+      </View>
+    </View>
+  )
+}

package/event/tms_dashboard.tsx

@@ -0,0 +1,89 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_dashboardArgs {
+
+}
+export interface EventTms_dashboardProps {
+
+}
+export default function m(props: EventTms_dashboardProps): any {
+  const [user] = UserClass.state().useState()
+  let menus = [
+    {
+      id: 1,
+      title: esp.lang("user/profile", "tms_scanner"),
+      icon: 'menu/ic_turnstile.png',
+      active: 1,
+      color_accent: '#FFC523',
+      onPress: () => {
+        LibNavigation.navigateForResult('user/profile_tms_list', { data: user?.is_tms }).then((value) => {
+          LibNavigation.navigate('bigbang/gate', { is_scanner: value, typeScanner: 'tms' })
+        })
+      }
+    },
+    {
+      id: 2,
+      title: esp.lang("user/profile", "hall_scanner"),
+      icon: 'menu/ic_hall.png',
+      active: 1,
+      color_accent: '#01D0FB',
+      onPress: () => {
+        LibNavigation.navigateForResult('user/profile_tms_list', { data: user?.is_tms }).then((value) => {
+          LibNavigation.navigate('bigbang/gate', { is_scanner: value, typeScanner: 'hall' })
+        })
+      }
+    },
+    {
+      id: 3,
+      title: esp.lang("user/profile", "exchange"),
+      icon: 'menu/ic_redempt.png',
+      active: 1,
+      color_accent: '#D0004F',
+      onPress: () => {
+        LibNavigation.navigateForResult('user/profile_tms_list', { data: user?.is_tms }).then((value) => {
+          LibNavigation.navigate('event/exchange_ticket', { dataEvent: value })
+        })
+      }
+    },
+  ]
+
+  function renderMenu(item: any, i: number) {
+    return (
+      <TouchableOpacity
+        onPress={item.onPress}
+        key={i} style={{ ...LibStyle.elevation(3), backgroundColor: item.color_accent, paddingBottom: 3, margin: 10, marginBottom: 0 }}>
+        <View style={{ padding: 10, backgroundColor: '#fff', height: 80, }}>
+          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 18, letterSpacing: 1 }}>{item.title}</Text>
+
+          <View style={{ position: 'absolute', bottom: 10, right: 10 }}>
+            <LibPicture source={esp.assets(item.icon)} style={{ height: 50, width: 50 }} />
+          </View>
+
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={'Dashboard TMS'} />
+
+      <ScrollView>
+        {
+          menus?.map(renderMenu)
+        }
+      </ScrollView>
+
+    </View>
+  )
+}

package/event/tms_event_list.tsx

@@ -0,0 +1,66 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_event_listArgs {
+
+}
+export interface EventTms_event_listProps {
+
+}
+export default function m(props: EventTms_event_listProps): any {
+  const { is_eo } = LibNavigation.getArgsAll(props)
+
+  if (is_eo?.length == 1) {
+    LibNavigation.back()
+    LibNavigation.navigate('event/tms', { dataEO: is_eo[0] })
+  }
+
+  function renderItem(item: any, i: number) {
+    return (
+      <TouchableOpacity onPress={() => {
+        LibNavigation.navigate('event/tms', { dataEO: item })
+      }} key={i} >
+        <View style={styleId_8oX1o}>
+          {
+            item.image != "" && item.image != null ?
+              <LibPicture source={{ uri: item.image }} style={styleId_P1YdJ} />
+              :
+              <View style={styleId_Z1FsLgN} />
+          }
+          <View style={styleId_Z1B8TCk}>
+            <Text allowFontScaling={false} style={styleId_Z2mC6aP}>{item.name || ""}</Text>
+            <Text allowFontScaling={false} style={styleId_Z1R4k1n} >{LibUtils.getDateRange(item.start_date, item.end_date, esp.lang("event/tms_event_list", "until"))}</Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("user/profile_tms_list", "title_list_event")} />
+      <ScrollView showsVerticalScrollIndicator={false} >
+        {/* untuk scanner */}
+        {
+          is_eo?.map?.(renderItem)
+        }
+      </ScrollView>
+    </View>
+  )
+}
+
+const styleId_8oX1o: any = { marginTop: 10, backgroundColor: 'white', marginHorizontal: 15, flexDirection: 'row', padding: 10, alignItems: 'center', justifyContent: 'center' }
+const styleId_P1YdJ: any = { borderRadius: 30, width: 60, height: 60 }
+const styleId_Z1FsLgN: any = { borderRadius: 30, width: 60, height: 60, backgroundColor: 'grey' }
+const styleId_Z1B8TCk: any = { paddingLeft: 10, paddingRight: 10, flex: 1 }
+const styleId_Z2mC6aP: any = { fontSize: 16 }
+const styleId_Z1R4k1n: any = { paddingTop: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }

package/event/turnstile_event_gate.tsx

@@ -0,0 +1,74 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTurnstile_event_gateArgs {
+
+}
+export interface EventTurnstile_event_gateProps {
+
+}
+export default function m(props: EventTurnstile_event_gateProps): any {
+  const { api_key, event_id } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>(undefined)
+  const [selectGate, setSelectGate] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+
+  useEffect(() => {
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  useEffect(() => {
+    loadDataGate()
+  }, [])
+
+  function loadDataGate() {
+    new LibCurl("gate_turnstile_event_gate?event_id=" + event_id, null, (res, msg) => {
+      setResult(res)
+    }, (err) => {
+      // setError(err)
+    }, 1)
+  }
+
+
+  function renderGate(item: any, i: number) {
+    let _selectGate = item.gate_id == selectGate?.gate_id
+
+    return (
+      <TouchableOpacity onPress={() => {
+        setSelectGate(item)
+        LibNavigation.sendBackResult(item)
+      }} style={styleId_Z1965m2} >
+        <View style={styleId_ZPIul6} >
+          <LibIcon name={_selectGate ? "radiobox-marked" : "radiobox-blank"} size={18} color={_selectGate ? "#3ea4dc" : "#434343"} />
+          <Text allowFontScaling={false} style={styleId_2eEf4t} >{item.gate_name}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#fff" }}>
+      <ComponentHeader title={esp.lang("event/turnstile_event_gate", "header_title")} />
+      <LibList
+        data={result}
+        onRefresh={loadDataGate}
+        renderItem={renderGate}
+      />
+    </View>
+  )
+}
+const styleId_Z1965m2: any = { borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }
+const styleId_ZPIul6: any = { margin: 15, width: LibStyle.width, flex: 1, flexDirection: 'row' }
+const styleId_2eEf4t: any = { marginLeft: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0/* , color: LibStyle.colorBlue */ }