esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/bigbang/gate_info.tsx

@@ -0,0 +1,639 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventTms_in_successProperty } from 'esoftplay/cache/event/tms_in_success/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibFocus } from 'esoftplay/cache/lib/focus/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseTasks } from 'esoftplay/cache/use/tasks/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { reportApiError } from 'esoftplay/error';
+import moment from 'esoftplay/moment';
+import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
+
+
+import { applyStyle } from 'esoftplay';
+import { EventTms_out_successProperty } from 'esoftplay/cache/event/tms_out_success/import';
+import { EventTms_in_hall_successProperty } from 'esoftplay/cache/event/tms_in_hall_success/import';
+import { EventTms_out_hall_successProperty } from 'esoftplay/cache/event/tms_out_hall_success/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+import React, { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+import { Image, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+export interface EventTms_homeArgs {
+
+}
+export interface EventTms_homeProps {
+
+}
+
+const stateIsDirect = useGlobalState<boolean>(true)
+
+export function state(): useGlobalReturn<any> {
+  return stateIsDirect
+}
+
+const stateCounter = useGlobalState({}, {
+  persistKey: 'event/tms_home_scan_counter',
+  loadOnInit: true
+})
+
+export function counterState(): useGlobalReturn<any> {
+  return stateCounter
+}
+
+function addCounter(counter: number, type: string, price_id: string) {
+  const cdate = moment().localeFormat('YYYY-MM-DD HH')
+  stateCounter.set((old: any) => {
+    if (!old[type]) { old[type] = {} }
+    if (!old[type][price_id]) { old[type][price_id] = {} }
+    return LibObject.update(old, (c) => (c || 0) + counter)(type, price_id, cdate)
+  })
+}
+
+export function getDataByDate(): any {
+  return stateCounter.get()
+}
+
+// {
+//   scan: {
+//       2219: {
+//        2024-01 - 20: 1
+//       }
+//   }
+// }
+
+// counter entrance
+export function addCounterEntranceScan(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_scan', price_id)
+}
+export function addCounterEntranceScanFailed(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_scan_failed', price_id)
+}
+export function addCounterEntranceOpenGate(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_opengate', price_id)
+}
+export function addCounterEntranceOpenGateIdCard(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_opengate_idcard', price_id)
+}
+export function addCounterEntranceSend(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_send', price_id)
+}
+export function addCounterEntranceOk(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_api_ok', price_id)
+}
+export function addCounterEntranceNo(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_api_no', price_id)
+}
+export function addCounterEntranceTicket(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_ticket', price_id)
+}
+export function addCounterEntranceTimeout(counter: number, price_id: string) {
+  addCounter(counter, 'entrance_timeout', price_id)
+}
+
+// counter exit
+export function addCounterOutScan(counter: number, price_id: string) {
+  addCounter(counter, 'out_scan', price_id)
+}
+export function addCounterOutTicket(counter: number, price_id: string) {
+  addCounter(counter, 'out_ticket', price_id)
+}
+export function addCounterOutScanFailed(counter: number, price_id: string) {
+  addCounter(counter, 'out_scan_failed', price_id)
+}
+export function addCounterOutOpenGate(counter: number, price_id: string) {
+  addCounter(counter, 'out_opengate', price_id)
+}
+export function addCounterOutSend(counter: number, price_id: string) {
+  addCounter(counter, 'out_send', price_id)
+}
+export function addCounterOutOK(counter: number, price_id: string) {
+  addCounter(counter, 'out_api_ok', price_id)
+}
+export function addCounterOutNO(counter: number, price_id: string) {
+  addCounter(counter, 'out_api_no', price_id)
+}
+
+
+// hall in
+export function addCounterHallInScan(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_scan', price_id)
+}
+export function addCounterHallInScanFailed(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_scan_failed', price_id)
+}
+export function addCounterHallInTicket(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_ticket', price_id)
+}
+export function addCounterHallInGate(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_opengate', price_id)
+}
+export function addCounterHallInGateIdcard(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_opengate_idcard', price_id)
+}
+export function addCounterHallInSend(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_send', price_id)
+}
+export function addCounterHallInOK(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_api_ok', price_id)
+}
+export function addCounterHallInNO(counter: number, price_id: string) {
+  addCounter(counter, 'hall_in_api_no', price_id)
+}
+
+
+// hall out
+export function addCounterHallOutScan(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_scan', price_id)
+}
+export function addCounterHallOutScanFailed(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_scan_failed', price_id)
+}
+export function addCounterHallOutTicket(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_ticket', price_id)
+}
+export function addCounterHallOutOpenGate(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_opengate', price_id)
+}
+export function addCounterHallOutOpenGateIdCard(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_opengate_idcard', price_id)
+}
+export function addCounterHallOutSend(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_send', price_id)
+}
+export function addCounterHallOutOK(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_api_ok', price_id)
+}
+export function addCounterHallOutNO(counter: number, price_id: string) {
+  addCounter(counter, 'hall_out_api_no', price_id)
+}
+
+
+const subscriber = useGlobalSubscriber()
+export function subscribeSync(): useGlobalSubscriberReturn {
+  return subscriber
+}
+
+const subscriberReset = useGlobalSubscriber()
+export function subscribeSyncReset(): useGlobalSubscriberReturn {
+  return subscriberReset
+}
+
+const subscriberExit = useGlobalSubscriber()
+export function subscribeSyncExit(): useGlobalSubscriberReturn {
+  return subscriberExit
+}
+
+const subscriberExitReset = useGlobalSubscriber()
+export function subscribeSyncExitReset(): useGlobalSubscriberReturn {
+  return subscriberExitReset
+}
+
+const subscriberHallIn = useGlobalSubscriber()
+export function subscribeSyncHallIn(): useGlobalSubscriberReturn {
+  return subscriberHallIn
+}
+
+const subscriberHallInReset = useGlobalSubscriber()
+export function subscribeSyncHallInReset(): useGlobalSubscriberReturn {
+  return subscriberHallInReset
+}
+
+const subscriberHallOut = useGlobalSubscriber()
+export function subscribeSyncHallOut(): useGlobalSubscriberReturn {
+  return subscriberHallOut
+}
+
+const subscriberHallOutReset = useGlobalSubscriber()
+export function subscribeSyncHallOutReset(): useGlobalSubscriberReturn {
+  return subscriberHallOutReset
+}
+
+const useTasks = UseTasks()
+const useTasksExit = UseTasks()
+const useTasksHallIn = UseTasks()
+const useTasksHallOut = UseTasks()
+export default function m(props: EventTms_homeProps): any {
+  const { is_scanner, selectedGate, typeScanner }: any = LibNavigation.getArgsAll(props)
+
+  // esp.log(counterState().get());
+
+  const timeoutSync = useRef<any>()
+  const timeout = useTimeout()
+  const [syncUseTicket, resetSyncUseTicket] = useTasks((item: any) => new Promise((next) => {
+    const [url, post] = item;
+    let _post = LibObject.assign({}, post)()
+    clearTimeout?.(timeoutSync.current)
+    timeoutSync.current = timeout(() => {
+      addCounterEntranceTimeout(1, _post?.price_id)
+      next()
+    }, 30000);
+    addCounterEntranceSend(1, _post?.price_id)
+    _post["trx_id"] = new Date().getTime() + "" + UserClass.state().get()?.id;
+
+    new LibCurl(url, _post, (res, msg) => {
+      EventTms_in_successProperty.syncUsedTiket().set((old) => old.filter((x) => !isEqual([url, post], x)))
+      addCounterEntranceOk(1, _post?.price_id)
+      addCounterEntranceTicket(post?.qty, _post?.price_id)
+      next()
+    }, (err: any) => {
+      addCounterEntranceNo(1, _post?.price_id)
+      reportApiError(url, JSON.stringify({ post, response: err }))
+      next()
+    }, 1)
+
+  }), () => {
+
+  })
+
+  subscriber.useSubscribe(() => {
+    syncUseTicket(subscriber.getValue())
+  })
+
+  subscriberReset.useSubscribe(() => {
+    resetSyncUseTicket()
+    syncUseTicket(subscriberReset.getValue())
+  })
+
+
+  const [syncTicketExit, resetSyncTicketExit] = useTasksExit((item: any) => new Promise((next) => {
+    const [url, post] = item;
+    let _post = LibObject.assign({}, post)()
+    addCounterOutSend(1, _post?.price_id?.[0])
+    _post["trx_id"] = new Date().getTime() + "" + UserClass.state().get()?.id;
+    new LibCurl(url, _post, (res, msg) => {
+      EventTms_out_successProperty.syncTicketExit().set((old) => old.filter((x) => !isEqual([url, post], x)))
+      _post?.price_id?.map((x: any) => {
+        addCounterOutTicket(1, x)
+      })
+      next()
+      addCounterOutOK(1, _post?.price_id?.[0])
+    }, (err) => {
+      addCounterOutNO(1, _post?.price_id?.[0])
+      reportApiError(url, JSON.stringify({ post, response: err }))
+      next()
+    }, 1)
+  }), () => {
+
+  })
+
+  subscriberExit.useSubscribe(() => {
+    syncTicketExit(subscriberExit.getValue())
+  })
+
+  subscriberExitReset.useSubscribe(() => {
+    resetSyncTicketExit()
+    syncTicketExit(subscriberExitReset.getValue())
+  })
+
+  const [syncTicketHallIn, resetSyncTicketHallIn] = useTasksHallIn((item: any) => new Promise((next) => {
+    const [url, post] = item;
+    let _post = LibObject.assign({}, post)()
+    addCounterHallInSend(1, _post?.price_id?.[0])
+    _post["trx_id"] = new Date().getTime() + "" + UserClass.state().get()?.id;
+    new LibCurl(url, _post, (res, msg) => {
+      EventTms_in_hall_successProperty.syncHallIn().set((old) => old.filter((x) => !isEqual([url, post], x)))
+      _post?.price_id?.map((x: any) => {
+        addCounterHallInTicket(1, x)
+      })
+      next()
+      addCounterHallInOK(1, _post?.price_id?.[0])
+    }, (err) => {
+      addCounterHallInNO(1, _post?.price_id?.[0])
+      reportApiError(url, JSON.stringify({ post, response: err }))
+      next()
+    }, 1)
+  }), () => {
+
+  })
+
+  subscriberHallIn.useSubscribe(() => {
+    syncTicketHallIn(subscriberHallIn.getValue())
+  })
+
+  subscriberHallInReset.useSubscribe(() => {
+    resetSyncTicketHallIn()
+    syncTicketHallIn(subscriberHallInReset.getValue())
+  })
+
+  const [syncTicketHallOut, resetSyncTicketHallOut] = useTasksHallOut((item: any) => new Promise((next) => {
+    const [url, post] = item;
+    let _post = LibObject.assign({}, post)()
+    addCounterHallOutSend(1, _post?.price_id?.[0])
+    _post["trx_id"] = new Date().getTime() + "" + UserClass.state().get()?.id;
+    new LibCurl(url, _post, (res, msg) => {
+      EventTms_out_hall_successProperty.syncHallOut().set((old) => old.filter((x) => !isEqual([url, post], x)))
+      _post?.price_id?.map((x: any) => {
+        addCounterHallOutTicket(1, x)
+      })
+      next()
+      addCounterHallOutOK(1, _post?.price_id?.[0])
+    }, (err) => {
+      addCounterHallOutNO(1, _post?.price_id?.[0])
+      reportApiError(url, JSON.stringify({ post, response: err }))
+      next()
+    }, 1)
+  }), () => {
+
+  })
+
+  subscriberHallOut.useSubscribe(() => {
+    syncTicketHallOut(subscriberHallOut.getValue())
+  })
+
+  subscriberHallOutReset.useSubscribe(() => {
+    resetSyncTicketHallOut()
+    syncTicketHallOut(subscriberHallOutReset.getValue())
+  })
+
+
+  const [result, setResult] = useSafeState<any>(null)
+  const [resultTypeTicket, setResultTypeTicket] = useSafeState<any>(null)
+  const [resultConfigPriority, setResultConfigPriority] = useSafeState<any>(null)
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  const date = LibUtils.moment().localeFormat('YYYY-MM-DD HH:mm:ss')
+
+  useEffect(() => {
+    resetSyncUseTicket()
+    resetSyncTicketExit()
+    resetSyncTicketHallIn()
+    resetSyncTicketHallOut()
+
+    loadData()
+    loadDataTypeTicket()
+    loadDataConfigPriority()
+  }, [])
+
+  function loadDataTypeTicket() {
+    new LibCurl('event_tms_ticket_type?event_id=' + is_scanner?.id, null, (res, msg) => {
+      setRefreshing(false)
+      setResultTypeTicket(res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/tms_home", "warning_load"), error?.message)
+      LibNavigation.back()
+      setRefreshing(false)
+    })
+  }
+
+  function loadData() {
+    subscriber.trigger(EventTms_in_successProperty.syncUsedTiket().get())
+    new LibCurl('event_tms_visitor?event_id=' + is_scanner?.id, null, (res, msg) => {
+      setResult(res)
+      setRefreshing(false)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/tms_home", "warning_load"), error?.message)
+      LibNavigation.back()
+      setRefreshing(false)
+    })
+  }
+
+  function loadDataConfigPriority() {
+    new LibCurl('event_tms_access_price?event_id=' + is_scanner?.id, null, (res, msg) => {
+      setResultConfigPriority(res)
+      setRefreshing(false)
+    }, (error) => {
+      setRefreshing(false)
+    })
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+    loadDataTypeTicket()
+    loadDataConfigPriority()
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  let tmsPercentage = result?.total_quota_visitor == 0 && result?.total_visitor == 0 ? 0 : result?.total_visitor > 0 && result?.total_quota_visitor == 0 ? 5 : (result?.total_visitor / result?.total_quota_visitor) * 100
+  let hallPercentage = result?.total_hall_quota_visitor == 0 && result?.total_hall_visitor == 0 ? 0 : result?.total_hall_visitor > 0 && result?.total_hall_quota_visitor == 0 ? 5 : (result?.total_hall_visitor / result?.total_hall_quota_visitor) * 100
+  let mainPercentage = typeScanner == "tms" ? tmsPercentage : hallPercentage
+  let twentyFive = 100 / 4
+  let fifty = 100 / 2
+  let seventyFive = 100 * 0.75
+
+  let args = {
+    event_title: is_scanner?.name,
+    event_id: is_scanner?.id,
+    selectGate: selectedGate,
+    typeScanner: typeScanner,
+    configPriority: resultConfigPriority
+  }
+
+  function setColorProg(percentage: number) {
+    if (percentage <= 100 && percentage > seventyFive) {
+      return "#3399FF"
+    } else if (percentage <= seventyFive && percentage > fifty) {
+      return "#3399FF"
+    } else if (percentage <= fifty && percentage > twentyFive) {
+      return "#3399FF"
+    } else {
+      return "#3399FF"
+    }
+  }
+
+  function renderViewTms(item: any, i: number) {
+    let percentages = item?.quota_visitor == 0 && item?.visitor == 0 ? 0 : item?.visitor > 0 && item?.quota_visitor == 0 ? 5 : (item?.visitor / item?.quota_visitor) * 100
+    return (
+      <View key={i} style={applyStyle({ marginLeft: 7, marginRight: 7, marginBottom: 10, borderRadius: 10, borderWidth: 2, padding: 10, borderColor: "#f1f1f1" })}>
+        {progressBar(percentages, 'small')}
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8 }} >
+          <Text allowFontScaling={false} style={applyStyle({ textAlign: 'left', fontSize: 14, color: '#000', fontWeight: 'bold', marginRight: 10, flex: 1 })}>{item.type}</Text>
+          <Text allowFontScaling={false} style={applyStyle({ textAlign: 'right', fontSize: 14, fontWeight: 'bold' })}>{item.quota_visitor == "0" ? item?.visitor : item?.visitor + "/" + item.quota_visitor}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  function renderViewHall(item: any, i: number) {
+    let percentages = item?.quota_visitor == 0 && item?.visitor == 0 ? 0 : item?.visitor > 0 && item?.quota_visitor == 0 ? 5 : (item?.visitor / item?.quota_visitor) * 100
+    return (
+      <View key={i} style={applyStyle({ marginLeft: 7, marginRight: 7, marginBottom: 10, borderRadius: 10, borderWidth: 2, padding: 10, borderColor: "#f1f1f1" })}>
+        {/* <ComponentCircural_progress size={60} strokeWidth={7} percentage={percentages} color={setColorProg(percentages)} /> */}
+        {progressBar(percentages, 'small')}
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8 }} >
+          <Text allowFontScaling={false} style={applyStyle({ textAlign: 'left', fontSize: 14, color: '#000', fontWeight: 'bold', marginRight: 10, flex: 1 })}>{item.name}</Text>
+          <Text allowFontScaling={false} style={applyStyle({ textAlign: 'right', fontSize: 14, fontWeight: 'bold' })}>{item.quota_visitor == "0" ? item?.visitor : item?.visitor + "/" + item.quota_visitor}</Text>
+        </View>
+      </View>
+    )
+  }
+
+
+  function progressBar(percentage: number, size: 'small' | 'large') {
+    if (percentage < 0) {
+      percentage = 0
+    }
+    return (
+      <View style={{ width: LibStyle.width - 60, height: size == 'small' ? 10 : 20, borderRadius: 10, backgroundColor: '#f1f2f3' }} >
+        <View style={{ flex: 1, borderRadius: 10, width: (LibStyle.width - 60) * (percentage / 100), backgroundColor: setColorProg(percentage) }} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={applyStyle({ flex: 1, backgroundColor: '#fff' })}>
+      <LibFocus onFocus={loadData} />
+      <ComponentHeader title={esp.lang("event/tms_home", "visitor_info")} subtitle={typeScanner == "tms" ? esp.lang("event/tms_home", "header_title1", is_scanner?.name) : esp.lang("event/tms_home", "header_title2", is_scanner?.name)} />
+      <View style={{ margin: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+        {
+          <TouchableOpacity onPress={() => {
+            LibNavigation.navigate('event/tms_log', {
+              event_id: is_scanner?.id,
+              gate: selectedGate
+            })
+          }} style={{ padding: 10, backgroundColor: "#000", borderRadius: 10, ...LibStyle.elevation(2) }}>
+            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff' })} >{esp.lang("event/tms_home", "tms_close")}</Text>
+          </TouchableOpacity>
+        }
+
+        <View style={{ justifyContent: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center', flex: 1 }}>
+          <TouchableOpacity onPress={() => { LibDialog.info(esp.lang("user/menu_bigbank", "title_info_bbo_wallet"), esp.lang("event/tms_home", "info_msg")) }} style={{ marginRight: 10 }}>
+            <LibIcon name="information-outline" />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => {
+            LibNavigation.navigate('event/tms_check_code', {
+              event_id: is_scanner?.id,
+              gate: selectedGate
+            })
+          }} style={{ padding: 10, marginRight: 0, backgroundColor: LibStyle.colorRed, borderRadius: 10, ...LibStyle.elevation(2) }}>
+            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff' })} >{esp.lang("event/tms_home", "check_code")}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      {/* <UseCondition if={dataScan.length > 0}>
+        <Pressable
+          style={{ flexDirection: 'row', paddingHorizontal: 17, alignItems: 'center' }}
+          onPress={() => syncUseTicket(EventTms_in_successProperty.syncUsedTiket().get())} >
+          <LibIcon name='sync' />
+          <Text>{"Menyinkronkan data, " + dataScan.length + " data tersisa.."}</Text>
+        </Pressable>
+      </UseCondition> */}
+      {
+        result?.event?.config?.jumbotron_app != 0 ?
+          <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
+            <View style={applyStyle({ margin: 15, padding: 5 })}>
+              <View style={applyStyle({ borderRadius: 10, padding: 10, borderColor: "#f1f1f1", backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimary, 0.5) })}>
+                {progressBar(mainPercentage, 'large')}
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }} >
+                  <Text allowFontScaling={false} style={applyStyle({ margin: 10, textAlign: 'center', fontSize: 20, marginBottom: 20, fontWeight: 'bold', color: '#000' })}>{esp.lang("event/tms_home", "title")}</Text>
+                  {
+                    typeScanner == "tms" ?
+                      <Text allowFontScaling={false} style={applyStyle({ marginRight: 10, textAlign: 'center', fontSize: 25, fontWeight: 'bold', color: '#000' })}>{result.total_quota_visitor == 0 ? result?.total_visitor : result?.total_visitor + "/" + result.total_quota_visitor}</Text>
+                      :
+                      <Text allowFontScaling={false} style={applyStyle({ marginRight: 10, textAlign: 'center', fontSize: 25, fontWeight: 'bold', color: '#000' })}>{result.total_hall_quota_visitor == 0 ? result?.total_hall_visitor : result?.total_hall_visitor + "/" + result.total_hall_quota_visitor}</Text>
+                  }
+                </View>
+              </View>
+              <View style={applyStyle({ flexWrap: 'wrap', marginTop: 10, flexDirection: 'row', justifyContent: 'space-evenly' })}>
+                {
+                  typeScanner == "tms" ?
+                    result?.prices?.map(renderViewTms)
+                    :
+                    result?.halls?.map(renderViewHall)
+                }
+              </View>
+            </View>
+          </ScrollView >
+          :
+          <Image source={{ uri: 'https://static.vecteezy.com/system/resources/previews/005/594/108/non_2x/mobile-application-for-scanning-qr-code-hand-holding-smartphone-scan-qr-code-icon-phone-app-barcode-scanner-vector.jpg' }} style={{ flex: 1, opacity: 0.3, resizeMode: 'cover' }} />
+      }
+
+      <View style={applyStyle({ padding: 15, paddingVertical: 5, backgroundColor: '#fff', ...LibStyle.elevation(2) })}>
+        <View style={applyStyle({ flexDirection: 'row', marginBottom: 8, alignContent: 'center', alignItems: 'center' })}>
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' })}>{typeScanner == "tms" ? esp.lang("event/tms_home", "type1") : esp.lang("event/tms_home", "type2")} </Text>
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorPrimary })}>{selectedGate?.name}</Text>
+        </View>
+
+        {
+          LibUtils.moment(result?.event?.start_scan).serverFormat('YYYY-MM-DD HH:mm:ss') <= date ?
+            <>
+              <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', })}>
+                <TouchableOpacity onPress={() => {
+                  LibNavigation.navigate('component/scanner', {
+                    fromPage: 'event/tms_home',
+                    scan_type: typeScanner == "tms" ? 'exit' : 'hall_out',
+                    gate_type: 0, // ini kalo 0 itu out
+                    price_type: resultTypeTicket, // ini digunakan di event/tms_in
+                    ...args
+                  })
+
+                }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: LibStyle.colorRed, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+                  <LibIcon size={18} color="#fff" name="logout" style={applyStyle({ transform: [{ rotate: '180deg' }] })} />
+                  <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff', marginLeft: 15 })} >{esp.lang("event/tms_home", "exit")}</Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity onPress={() => {
+                  if (esp.isDebug("") && UserClass?.state().get().email == "bagus@fisip.net") {
+                    LibNavigation.navigate('tms/gate_in')
+                  } else {
+                    LibNavigation.navigate('component/scanner', {
+                      fromPage: 'event/tms_home',
+                      scan_type: typeScanner == "tms" ? 'entrance' : 'hall_in',
+                      gate_type: 1, // ini kalo 1 itu in
+                      price_type: resultTypeTicket,
+                      url_ticket_detail: result?.url_ticket_detail,
+                      url_ticket_update: result?.url_ticket_update,
+                      ...args
+                    })
+                  }
+                }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: LibStyle.colorGreen, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+                  <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff', marginRight: 15 })} >{esp.lang("event/tms_home", "entrance")}</Text>
+                  <LibIcon size={18} color="#fff" name="login" />
+                </TouchableOpacity>
+              </View>
+              {
+                typeScanner == "tms" && result?.event?.config?.temporary_out == 1 &&
+                <View style={{ marginTop: 10, flexDirection: 'row', justifyContent: 'space-between' }}>
+                  <TouchableOpacity onPress={() => {
+                    LibNavigation.navigate('component/scanner', {
+                      fromPage: 'event/tms_home',
+                      scan_type: 'exit_temporary',
+                      ...args
+                    })
+                  }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 2, borderColor: LibStyle.colorRed, height: 40, borderRadius: 16, backgroundColor: "#fff", flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+                    <LibIcon size={18} color={LibStyle.colorRed} name="logout" style={applyStyle({ fontWeight: 'bold', transform: [{ rotate: '180deg' }] })} />
+                    <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: LibStyle.colorRed, marginLeft: 10 })} >{esp.lang("event/tms_home", "temp_out")}</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity onPress={() => {
+                    // LibNavigation.navigate('event/tms_in_again')
+                    LibNavigation.navigate('component/scanner', {
+                      fromPage: 'event/tms_home',
+                      gate_type: 1,
+                      scan_type: 'entrance_again',
+                      price_type: resultTypeTicket,
+                      url_ticket_detail: result?.url_ticket_detail,
+                      url_ticket_update: result?.url_ticket_update,
+                      ...args
+                    })
+                  }} style={applyStyle({ width: (LibStyle.width - 40) * 0.5, borderWidth: 2, borderColor: LibStyle.colorGreen, height: 40, borderRadius: 16, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center', paddingHorizontal: 9 })} >
+                    <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: LibStyle.colorGreen, marginRight: 15 })} >{esp.lang("event/tms_home", "re_in")}</Text>
+                    <LibIcon size={18} color={LibStyle.colorGreen} name="login" />
+                  </TouchableOpacity>
+                </View>
+              }
+            </>
+            :
+            <View style={{ padding: 10, backgroundColor: "#C3BEBE", borderRadius: 10, borderStyle: 'dashed' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: '#000', marginHorizontal: 10 }} >{esp.lang("event/tms_home", "start_scan", LibUtils.moment(result?.event?.start_scan).serverFormat('DD MMM YYYY HH:mm'))}</Text>
+            </View>
+        }
+
+
+      </View>
+    </View>
+  )
+}