esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/event/tms_check_ticket_result.tsx

@@ -0,0 +1,384 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibCurl_view } from 'esoftplay/cache/lib/curl_view/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_check_ticket_resultArgs {
+
+}
+export interface EventTms_check_ticket_resultProps {
+
+}
+export default function m(props: EventTms_check_ticket_resultProps): any {
+  const { qr, event_id, selectGate } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useSafeState<any>()
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    var post = {
+      user_qr: encodeURIComponent(qr),
+      event_id: event_id,
+      gate_id: selectGate?.id
+    }
+    LibProgress.show(esp.lang("event/visitor_index", "waiting_msg"))
+    new LibCurl('event_tms_check', post, (res, msg) => {
+      // esp.log(res);
+      let a = res?.bookings?.map((item: any) => ({
+        ...item,
+        show_history_ticket: false,
+        show_history_hall: false,
+        show_history_share: false,
+        show_additional_info: false
+      }))
+      let b = {
+        ...res,
+        bookings: a
+      }
+      esp.log(b);
+      setData(b)
+      setRefreshing(false)
+      LibProgress.hide();
+    }, (error) => {
+      LibProgress.hide();
+      setRefreshing(false)
+      LibDialog.warningConfirm(esp.lang("event/tms_check_ticket_result", "error"), error?.message, esp.lang("event/tms_check_ticket_result", "back"), () => LibNavigation.back(), "", () => { })
+    }, 1)
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+  }
+
+  function renderTmsIn(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        {
+          item.tms_name != "" &&
+          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name}</Text>
+        }
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_in != "0000-00-00 00:00:00" ? LibUtils.moment(item.scanned_in).serverFormat("DD MMM HH:mm:ss ") : esp.lang("event/tms_check_ticket_result", "not_scan_in")}</Text>
+
+      </View>
+    )
+  }
+
+  function renderTmsOut(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        {
+          item.tms_name_out != null && item.tms_name_out != "" &&
+          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name_out}</Text>
+        }
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_out != "0000-00-00 00:00:00" ? LibUtils.moment(item.scanned_out).serverFormat("DD MMM HH:mm:ss ") : esp.lang("event/tms_check_ticket_result", "not_scan_out")}</Text>
+      </View>
+    )
+  }
+
+  function renderTempOut(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.hasOwnProperty("scanned_out_temporary") && item?.scanned_out_temporary != "0000-00-00 00:00:00" ? LibUtils.moment(item.scanned_out_temporary).serverFormat("DD MMM HH:mm:ss ") : "Belum pernah scan keluar sementara"}</Text>
+      </View>
+    )
+  }
+
+  function renderGate(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.gate_name == "" ? "-" : item.gate_name}</Text>
+      </View>
+    )
+  }
+
+  function renderHallIn(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        {
+          item.tms_name != "" &&
+          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name}</Text>
+        }
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_in != "0000-00-00 00:00:00" ? LibUtils.moment(item.scanned_in).serverFormat("DD MMM HH:mm:ss ") : esp.lang("event/tms_check_ticket_result", "not_scan_in")}</Text>
+
+      </View>
+    )
+  }
+
+  function renderHallOut(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        {
+          item.tms_name_out != "" &&
+          <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item.tms_name_out}</Text>
+        }
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.scanned_out != "0000-00-00 00:00:00" ? LibUtils.moment(item.scanned_out).serverFormat("DD MMM HH:mm:ss ") : esp.lang("event/tms_check_ticket_result", "not_scan_out")}</Text>
+
+      </View>
+    )
+  }
+
+  function renderHall(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        <Text allowFontScaling={false} style={{ paddingHorizontal: 5, fontSize: 14 }}>{item?.hall_name == "" ? "-" : item.hall_name}</Text>
+      </View>
+    )
+  }
+
+  function renderShared(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderRadius: 5, margin: 2, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', padding: 5, backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ flex: 1, paddingHorizontal: 5, fontSize: 14 }}>{item.email}</Text>
+        <View style={{ width: 1, height: 15, backgroundColor: LibStyle.colorBrownLight }} />
+        <Text allowFontScaling={false} style={{ textAlign: 'center', flex: 1, paddingHorizontal: 5, fontSize: 14 }}>{LibUtils.number(item?.qty)}</Text>
+      </View>
+    )
+  }
+
+  function resetTicket(url: string) {
+    LibDialog.confirm(esp.lang("event/tms_check_ticket_result", "title"), esp.lang("event/tms_check_ticket_result", "message"), esp.lang("event/tms_check_ticket_result", "confirm"), () => {
+      LibProgress.show(esp.lang("event/visitor_index", "waiting_msg"))
+      new LibCurl().custom(url + "&t=" + new Date().getTime(), null, (res, msg) => {
+        LibProgress.hide()
+        if (res?.ok == 1) {
+          LibDialog.confirm(esp.lang("event/tms_check_ticket_result", "info"), res?.message, "Ok", () => {
+            LibNavigation.back()
+          }, "", () => { })
+        } else if (res?.ok == 0) {
+          LibDialog.warning(esp.lang("event/tms_check_ticket_result", "error_reset"), res?.message)
+        }
+
+      }, 1)
+    }, esp.lang("event/tms_check_ticket_result", "cancel"), () => { })
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={qr} subtitle={data ? data?.event_name : ''} />
+      <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+        {
+          data?.bookings?.length > 0 && data?.bookings?.map((item: any, i: number) => {
+            return (
+              <View key={i} style={{ margin: 10, marginBottom: 0, backgroundColor: LibStyle.colorBgGrey, borderRadius: 10, padding: 10 }}>
+                {/* header */}
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: 'bold', flex: 1 }}>{item?.tickets?.[0]?.price_name || item?.price_name}</Text>
+                  {
+                    data?.allowed_reset == 1 && item?.qty_used > 0 &&
+                    <Pressable onPress={() => { resetTicket(item?.reset) }} style={{ ...LibStyle.elevation(3), justifyContent: 'center', marginLeft: 10, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: LibStyle.colorRed, borderRadius: 5 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: '#fff' }}>{esp.lang("event/tms_check_ticket_result", "reset")}</Text>
+                    </Pressable>
+                  }
+                </View>
+
+                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10 }}>
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{item?.code}</Text>
+
+                    <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                      <Text allowFontScaling={false} style={{ marginLeft: 20, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{"("}</Text>
+                      <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 30, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{item?.qty}</Text>
+                      <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/tms_check_ticket_result", "ticket")}{")"}</Text>
+                    </View>
+                  </View>
+
+                  <UseCondition if={Boolean(item?.exhibitor?.title)} >
+                    <Text allowFontScaling={false} style={{ fontSize: 12 }}>Exhibitor : {item?.exhibitor?.title}</Text>
+                  </UseCondition>
+                  <UseCondition if={Boolean(item?.exhibitor?.code)} >
+                    <Text allowFontScaling={false} style={{ fontSize: 10 }}>CODE : {item?.exhibitor?.code}</Text>
+                  </UseCondition>
+
+                  <View style={{ flexDirection: 'row', alignItems: 'center', alignContent: 'center', marginTop: 5, marginBottom: 10 }}>
+                    <LibIcon name='calendar-blank' size={18} style={{ marginRight: 5 }} />
+                    {
+                      item?.ondate == "0000-00-00" ?
+                        <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "all_date")}</Text>
+                        :
+                        <Text allowFontScaling={false} style={{ fontSize: 14 }}>{LibUtils.moment(item?.ondate).localeFormat('DD MMMM YYYY')}</Text>
+                    }
+                  </View>
+                  <View style={{ marginBottom: 10, flexDirection: 'row', flexWrap: 'wrap', marginLeft: -10 }}>
+                    {
+                      item?.tickets?.map((x: any, i: number) => {
+                        if (x.seat_name != "") {
+                          return (
+                            <View key={i} style={{ marginLeft: 10, paddingVertical: 5, marginBottom: 7, paddingHorizontal: 7, borderWidth: 1, borderColor: '#000', backgroundColor: '#fff', borderRadius: 5 }}>
+                              <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: '#000' }}>{x.seat_name}</Text>
+                            </View>
+
+                          )
+                        } else {
+                          return null
+                        }
+                      })
+                    }
+                  </View>
+                  <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'bold', color: item.is_available == 0 ? LibStyle.colorRed : LibStyle.colorGreen }}>{item.is_available == 0 ? "Not Available" : "Available"}</Text>
+                  <View style={{ marginBottom: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                      <TouchableOpacity onPress={() => {
+                        setData(LibObject.set(data, item.show_history_ticket ? false : true)("bookings", i, "show_history_ticket"))
+                      }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                        <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: item?.qty_used == 0 ? "#484848" : LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: item?.qty_used == 0 ? "none" : 'underline' }}>{item?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used") : item?.qty_used + " " + esp.lang("event/order_detail", "used")}</Text>
+                      </TouchableOpacity>
+                      {
+                        item?.tickets_share?.length > 0 &&
+                        <TouchableOpacity onPress={() => {
+                          setData(LibObject.set(data, item.show_history_share ? false : true)("bookings", i, "show_history_share"))
+                        }}>
+                          <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{item?.tickets_share.reduce((acc: any, { qty = 0 }: any) => acc + qty, 0) + " Tiket dishare"}</Text>
+                        </TouchableOpacity>
+                      }
+                    </View>
+                  </View>
+
+                </View>
+
+                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
+                  <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_additional_info ? false : true)("bookings", i, "show_additional_info"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{"Additional Info"}</Text>
+                    <LibIcon name={item?.show_additional_info ? 'chevron-up' : 'chevron-down'} />
+                  </TouchableOpacity >
+                  {
+                    item.show_additional_info &&
+                    <LibCurl_view
+                      url='event_tms_check_additional'
+                      post={{
+                        event_id: event_id,
+                        code: item.code
+                      }}
+                      onSuccess={(res, msg) => {
+                        return (
+                          <View>
+                            {
+                              res?.map((item: any, i: number) => {
+                                return (
+                                  <View key={i} style={{ marginTop: 7, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey }}>
+                                    <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 14, color: "#009688", fontWeight: 'bold', letterSpacing: 0.5, marginBottom: 5 }}>{item.question}</Text>
+                                    <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000', marginRight: 6 }}>{item.answer}</Text>
+                                  </View>
+                                )
+                              })
+                            }
+                          </View>
+                        )
+                      }}
+                      onLoading={<LibLoading />}
+                      onError={(err: any) => {
+                        return (
+                          <View style={{ justifyContent: 'center', alignItems: 'center', padding: 10 }}>
+                            <LibPicture source={esp.assets('img_failed_msg.png')} style={{ width: LibStyle.width / 3, height: 100, resizeMode: 'contain' }} />
+                            <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{err?.message}</Text>
+                          </View>
+                          // <EventMessage message={err?.message}  />
+                        )
+                      }}
+                    />
+                  }
+                </View>
+
+                <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
+                  <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_ticket ? false : true)("bookings", i, "show_history_ticket"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_ticket")}</Text>
+                    <LibIcon name={item?.show_history_ticket ? 'chevron-up' : 'chevron-down'} />
+                  </TouchableOpacity >
+                  {
+                    item.show_history_ticket &&
+                    <View style={{ marginTop: 10, }}>
+                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "tms_in")}</Text>
+                        {item?.tickets?.map(renderTmsIn)}
+                      </View>
+                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "tms_out")}</Text>
+                        {item?.tickets?.map(renderTmsOut)}
+                      </View>
+
+                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "scan_temp_out")}</Text>
+                        {item?.tickets?.map(renderTempOut)}
+                      </View>
+                      <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#37c2d0", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                        <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "gate_title")}</Text>
+                        {item?.tickets?.map(renderGate)}
+                      </View>
+                    </View>
+                  }
+                </View>
+
+                {
+                  item.hall_history?.length > 0 &&
+                  <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
+                    <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_hall ? false : true)("bookings", i, "show_history_hall"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                      <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_hall")}</Text>
+                      <LibIcon name={item.show_history_hall ? 'chevron-up' : 'chevron-down'} />
+                    </TouchableOpacity >
+                    {
+                      item.show_history_hall &&
+                      <View style={{ marginTop: 10, }}>
+                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall_in")}</Text>
+                          {item?.hall_history?.map(renderHallIn)}
+                        </View>
+                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall_out")}</Text>
+                          {item?.hall_history?.map(renderHallOut)}
+                        </View>
+                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#FFC523", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                          <Text allowFontScaling={false} style={{ marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "hall")}</Text>
+                          {item?.hall_history?.map(renderHall)}
+                        </View>
+                      </View>
+                    }
+                  </View>
+                }
+                {
+                  item?.tickets_share?.length > 0 &&
+                  <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 10, paddingHorizontal: 10, padding: 10, }}>
+                    <TouchableOpacity onPress={() => setData(LibObject.set(data, item.show_history_share ? false : true)("bookings", i, "show_history_share"))} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                      <Text allowFontScaling={false} style={{ fontSize: 14 }}>{esp.lang("event/tms_check_ticket_result", "history_share_ticket")}</Text>
+                      <LibIcon name={item.show_history_share ? 'chevron-up' : 'chevron-down'} />
+                    </TouchableOpacity >
+                    {
+                      item.show_history_share &&
+                      <View style={{ marginTop: 10, }}>
+                        <View style={{ marginBottom: 5, flex: 1, padding: 10, backgroundColor: "#007BFF", borderWidth: 1, borderColor: LibStyle.colorBgGrey, borderRadius: 10 }}>
+                          <Text allowFontScaling={false} style={{ color: '#fff', marginBottom: 5, fontSize: 13, fontWeight: 'bold' }}>{esp.lang("event/tms_check_ticket_result", "shared_to")}</Text>
+                          {item?.tickets_share?.map(renderShared)}
+                        </View>
+                      </View>
+                    }
+                  </View>
+                }
+
+              </View>
+            )
+          })
+        }
+
+      </ScrollView>
+    </View>
+  )
+}

package/modules/event/tms_dashboard.tsx

@@ -0,0 +1,89 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/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('event/tms_event_list', { data: user?.is_tms }).then((value) => {
+          LibNavigation.navigate('event/tms_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('event/tms_event_list', { data: user?.is_tms }).then((value) => {
+          LibNavigation.navigate('event/tms_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('event/tms_event_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 }}>
+      <EventHeader title={'Dashboard TMS'} />
+
+      <ScrollView>
+        {
+          menus?.map(renderMenu)
+        }
+      </ScrollView>
+
+    </View>
+  )
+}

package/modules/event/tms_event_list.tsx

@@ -0,0 +1,69 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import { useEffect } from 'react';
+
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_event_listProps {
+
+}
+export default function m(props: EventTms_event_listProps): any {
+  const { data } = LibNavigation.getArgsAll(props)
+
+  useEffect(() => {
+    if (data?.length == 1) {
+      LibNavigation.sendBackResult(data[0])
+    }
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function renderItem(item: any, i: number) {
+    const widthImg = LibStyle?.width - 20
+    const sliderHeight = widthImg / 1920 * 1080
+
+    return (
+      <TouchableOpacity onPress={() => {
+        LibNavigation.sendBackResult(item)
+      }} key={i} style={{ margin: 10, marginBottom: 0, backgroundColor: '#fff', borderRadius: 10 }}>
+        <View style={{ ...LibStyle.elevation(2), backgroundColor: '#fff', borderRadius: 10 }}>
+          <LibPicture source={{ uri: item.image }} style={{ width: widthImg, height: sliderHeight, borderRadius: 10 }} />
+        </View>
+        <View style={{ padding: 10 }}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={applyStyle({ fontSize: 18 })}>{item.name || ""}</Text>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#f39c12" })} >{LibUtils.getDateRange(item.start_date, item.end_date, esp.lang("event/tms_event_list", "until"))}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  if (data?.length == 0) {
+    LibDialog.warning("Oops", "Daftar event kosong.")
+    LibNavigation.back()
+  } else if (data?.length == 1) {
+    return (
+      <LibLoading />
+    )
+  } else {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <EventHeader title={esp.lang("event/tms_event_list", "title_list_event")} />
+        <ScrollView showsVerticalScrollIndicator={false} >
+          {/* untuk scanner */}
+          {
+            data?.map(renderItem)
+          }
+        </ScrollView>
+      </View>
+    )
+  }
+}

package/modules/event/tms_gate.tsx

@@ -0,0 +1,96 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/header/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 { LibLoading } from 'esoftplay/cache/lib/loading/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 { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface EventTms_gateArgs {
+
+}
+export interface EventTms_gateProps {
+
+}
+export default function m(props: EventTms_gateProps): any {
+  const { is_scanner, typeScanner } = LibNavigation.getArgsAll(props)
+
+  const [selectGate, setSelectGate] = useSafeState<any>()
+  const [gates, setGates] = useSafeState<any>()
+
+  useEffect(() => {
+    if (typeScanner == "tms") {
+      loadDataGates()
+    } else {
+      loadDataHall()
+    }
+  }, [])
+
+  function loadDataGates() {
+    let post = {
+      event_id: is_scanner?.id
+    }
+    new LibCurl('event_gate', post, (res, msg) => {
+      setGates(res)
+      if (res.length == 1) {
+        LibNavigation.back()
+        LibNavigation.navigate('event/tms_home', { is_scanner: is_scanner, selectedGate: res[0], typeScanner: typeScanner })
+      }
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/tms_gate", "warning_load"), error?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function loadDataHall() {
+    let post = {
+      event_id: is_scanner?.id
+    }
+    new LibCurl('event_hall', post, (res, msg) => {
+      setGates(res)
+      if (res.length == 1) {
+        LibNavigation.back()
+        LibNavigation.navigate('event/tms_home', { is_scanner: is_scanner, selectedGate: res[0], typeScanner: typeScanner })
+      }
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/tms_gate", "warning_loadhall"), error?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function renderGates(item: any, i: number) {
+    let _selectGate = item.id == selectGate?.id
+    return (
+      <Pressable key={i} onPress={() => {
+        setSelectGate(item)
+        LibNavigation.navigate('event/tms_home', { is_scanner: is_scanner, selectedGate: item, typeScanner: typeScanner })
+      }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', backgroundColor: _selectGate ? LibStyle.colorGrey : '#fff', ...LibStyle.elevation(2), padding: 16, marginBottom: 10, marginHorizontal: 15, borderRadius: 5, flex: 1 }}>
+        <LibIcon name={_selectGate ? "radiobox-marked" : "radiobox-blank"} size={18} color={_selectGate ? "#3ea4dc" : "#434343"} />
+        <Text allowFontScaling={false} style={{ marginLeft: 10, fontSize: 17, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#9e9e9e', paddingLeft: 3, paddingRight: 3 }}>{item.name}</Text>
+      </Pressable>
+    )
+  }
+
+  if (!gates) {
+    return <LibLoading />
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EventHeader title={typeScanner == "tms" ? esp.lang("event/tms_gate", "header_title1") : esp.lang("event/tms_gate", "header_title2")} subtitle={esp.lang("event/tms_gate", "gate_sub")} />
+      <ScrollView style={{}}>
+        <Text allowFontScaling={false} style={{ margin: 20, marginBottom: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, paddingLeft: 3, paddingRight: 3 }}>{esp.lang("event/tms_gate", "text_select", typeScanner == "tms" ? esp.lang("event/tms_gate", "gate") : esp.lang("event/tms_gate", "hall"))}</Text>
+        {
+          gates?.length > 1 && gates?.map(renderGates)
+        }
+      </ScrollView>
+    </View>
+  )
+}