esoftplay-event 0.0.0-a

package/event/exit_list.tsx

@@ -0,0 +1,118 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { TicketItemProperty } from 'esoftplay/cache/ticket/item/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Platform, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventExit_listArgs {
+
+}
+export interface EventExit_listProps {
+
+}
+export default function m(props: EventExit_listProps): any {
+  const { data, scan_type, url_ticket_update, url_ticket_detail, price_type, gate_type, event_id, selectGate, typeScanner, event_title, configPriority }: any = LibNavigation.getArgsAll<any>(props)
+  const [result, setResult] = useSafeState<any>(data)
+  const [useAll, setUseAll] = useSafeState<boolean>(true)
+
+  const transformStyle = Platform.OS == "ios" ? { transform: [{ scaleY: - 1 }] } : { transform: [{ rotateX: '180deg' }] }
+  function renderItem(item: any, i: number) {
+    return (
+      <Pressable onPress={() => {
+        setResult(LibObject.set(result, item?.checked == 0 ? 1 : 0)('list', i, 'checked'))
+        setUseAll(false)
+      }} key={i} style={{ margin: 10, marginBottom: 10, marginTop: 5, padding: 10, borderRadius: 10, backgroundColor: LibStyle.colorPrimary, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 20, fontWeight: 'bold', flexWrap: 'wrap', color: TicketItemProperty.textColor(item?.color), marginRight: 10 }}>{item?.price_name}</Text>
+        <LibIcon.Ionicons name={item?.checked == 1 ? 'checkmark-circle' : 'radio-button-off-outline'} size={26} color={TicketItemProperty.textColor(item?.color)} />
+      </Pressable>
+    )
+  }
+
+  let args = {
+    selectGate: selectGate,
+    fromPage: 'bigbang/gate_info',
+    event_id: event_id,
+    event_title: event_title,
+    typeScanner: typeScanner,
+    gate_type: gate_type,
+    price_type: price_type,
+    url_ticket_detail: url_ticket_detail,
+    url_ticket_update: url_ticket_update,
+    configPriority: configPriority,
+    data: result,
+    scan_type: scan_type
+  }
+
+  function quit(): void {
+    let a = result?.list?.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+    if (a.length == 0) {
+      LibToastProperty.show(esp.lang("event/exit_list", "select_ticket"))
+      return
+    } else {
+      let url = "event_tms_out_confirm"
+      let post = {
+        event_id: event_id,
+        ids: JSON.stringify(a),
+        gate_id: selectGate?.id,
+        trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
+        price_id: result?.list?.filter((item: any) => item.checked == 1).map((it: any) => it.price_id),
+        scanned_out: LibUtils.moment().format('YYYY-MM-DD HH:mm:ss'),
+      }
+
+      LibNavigation.replace('event/exit_success', { ...args, url, post })
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/exit_list", "header_title")} subtitle={esp.lang("event/exit_list", "exit_gate", data?.event_name)} />
+      <ScrollView style={{ marginTop: 20 }}>
+        {
+          result?.list?.map(renderItem)
+        }
+      </ScrollView>
+      <View style={{ padding: 10 }}>
+        <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={'tail'} style={{ fontWeight: 'bold', fontSize: 14, letterSpacing: 1 }}>{result?.list?.filter((item: any) => item.checked == 1).length + " Tiket digunakan"}</Text>
+          <TouchableOpacity onPress={() => {
+            let a = result?.list?.map((item: any, i: number) => {
+              return { ...item, checked: useAll ? 0 : 1 }
+            })
+            let b = {
+              ...result,
+              list: a
+            }
+            setResult(b)
+            setUseAll(useAll ? false : true)
+          }} style={applyStyle({ paddingHorizontal: 15, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 35, borderRadius: 16, backgroundColor: useAll ? LibStyle.colorRed : LibStyle.colorGreen, flexDirection: 'row', alignItems: 'center', alignContent: 'center', justifyContent: 'center' })} >
+            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#fff', marginRight: 15 })} >{useAll ? esp.lang("event/entrance_list", "cancel_use") : esp.lang("event/entrance_list", "use_all")}</Text>
+            <LibIcon.Ionicons size={18} color="#fff" name={useAll ? "close" : "checkmark-done"} />
+          </TouchableOpacity>
+        </View>
+
+        <ComponentButton
+          label={esp.lang("event/exit_list", "exit")}
+          backgroundColor={LibStyle.colorRed}
+          onPress={() => {
+            quit()
+          }}
+          style={{ marginTop: 30 }}
+        />
+
+      </View>
+    </View>
+  )
+}

package/event/exit_log.tsx

@@ -0,0 +1,131 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/import';
+import { EventExit_successProperty } from 'esoftplay/cache/event/exit_success/import';
+import { EventLogProperty } from 'esoftplay/cache/event/log/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/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 { useTimeout } from 'esoftplay/timeout';
+import React from 'react';
+import { Text, View } from 'react-native';
+import Pressable from '../lib/pressable';
+
+
+export interface EventExit_logArgs {
+
+}
+export interface EventExit_logProps {
+  onPress: (type: string, title: string) => void
+}
+
+export interface ExitLogItem {
+  text: string
+  subtitle: string
+  value: string
+  onPress: () => void
+  valuecolor?: string
+}
+
+function Item(props: ExitLogItem) {
+  return (
+    <Pressable
+      onPress={() => {
+        props.onPress()
+      }} style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginHorizontal: 15, paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: LibStyle.colorLightGrey }}>
+      <View>
+        <LibTextstyle text={props.text} textStyle="subhead" />
+        <Text style={{ marginTop: 3, fontSize: 12, color: LibStyle.colorBrown }}>{props.subtitle}</Text>
+      </View>
+      <LibTextstyle text={LibUtils.number(props.value)} style={{ color: props.valuecolor ? props.valuecolor : "#000" }} textStyle="title2" />
+    </Pressable>
+  )
+}
+
+
+export default function m(props: EventExit_logProps): any {
+
+  const logExit = BigbangGate_infoProperty.counterState().useSelector(s => s)
+  const backupExit = EventExit_successProperty.syncTicketExit().useSelector(s => s)
+  const [loading, setLoading] = useSafeState<boolean>(true)
+  const timeout = useTimeout()
+
+  function syncExitData() {
+    BigbangGate_infoProperty.subscribeSyncExit().trigger(EventExit_successProperty.syncTicketExit().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  function forceSyncExitData() {
+    BigbangGate_infoProperty.subscribeSyncExitReset().trigger(EventExit_successProperty.syncTicketExit().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  useEffect(() => {
+    syncExitData()
+  }, [])
+
+
+  if (loading) {
+    return <LibLoading />
+  }
+
+  const sumValue = EventLogProperty.sumValuesPerCategory(logExit)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff', margin: 17, marginTop: 0, paddingBottom: 10, marginBottom: 0, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, ...LibStyle.elevation(2) }}>
+      <Item subtitle={esp.lang("event/exit_log", "ticket_scan_out")} text={esp.lang("event/exit_log", "scan_out")} value={sumValue?.out_scan} onPress={() => {
+        if (sumValue?.out_scan) {
+          props.onPress("out_scan", esp.lang("event/exit_log", "scan_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/exit_log", "qty_scanned_out")} text={esp.lang("event/exit_log", "qty_ticket_scan_out")} value={sumValue?.out_ticket} onPress={() => {
+        if (sumValue?.out_ticket) {
+          props.onPress("out_ticket", esp.lang("event/exit_log", "qty_ticket_scan_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/exit_log", "ticket_scanned_out")} text={esp.lang("event/exit_log", "opengate_out")} value={sumValue?.out_opengate} onPress={() => {
+        if (sumValue?.out_opengate) {
+          props.onPress("out_opengate", esp.lang("event/exit_log", "opengate_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/exit_log", "data_send_to_server")} text={esp.lang("event/exit_log", "data_send")} value={sumValue?.out_send} onPress={() => {
+        if (sumValue?.out_send) {
+          props.onPress("out_send", esp.lang("event/exit_log", "data_send"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/exit_log", "data_not_send_to_server")} text={esp.lang("event/exit_log", "data_not_send")} value={backupExit.length} valuecolor={LibStyle.colorRed} onPress={() => {
+
+      }} />
+
+      <View style={{ marginHorizontal: 15 }} >
+        <UseCondition
+          if={backupExit.length == 0}
+          fallback={
+            <Pressable onPress={() => {
+              setLoading(true)
+              forceSyncExitData()
+            }}>
+              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/exit_log", "waiting")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/exit_log", "click")}</Text> {esp.lang("event/exit_log", "re_try")}</Text>
+            </Pressable>
+          } >
+          <LibTextstyle textStyle='callout'
+            style={{ textAlign: 'center', marginTop: 15 }}
+            text={esp.lang("event/exit_log", "all_data_send")} />
+        </UseCondition>
+      </View>
+    </View >
+  )
+}

package/event/exit_success.tsx

@@ -0,0 +1,143 @@
+// withHooks
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/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 { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useEffect, useRef } from 'react';
+
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+
+
+export interface EventExit_successArgs {
+
+}
+export interface EventExit_successProps {
+
+}
+
+const dataListTicketExit = useGlobalState<any[]>([], { persistKey: 'event_exit_tiket_sync', loadOnInit: true, inFastStorage: true })
+export function syncTicketExit(): useGlobalReturn<any[]> {
+  return dataListTicketExit
+}
+
+
+export default function m(props: EventExit_successProps): any {
+  const { scan_type, data, url, post, url_ticket_update, url_ticket_detail, price_type, gate_type, event_id, selectGate, typeScanner, event_title, configPriority }: any = LibNavigation.getArgsAll<any>(props)
+
+  const [isPaused, setIsPaused] = useSafeState<boolean>(false)
+  const progress = useRef(new Animated.Value(0)).current;
+  const animation = useRef<Animated.CompositeAnimation | null>(null);
+  const [pausedValue, setPausedValue] = useSafeState(0);
+
+  function animateProgressBar() {
+    const duration = 1000; // Ubah durasi animasi sesuai kebutuhan Anda
+
+    if (!isPaused) {
+      animation.current = Animated.timing(progress, {
+        toValue: 1,
+        duration: duration - duration * pausedValue,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      });
+
+      animation.current.start(({ finished }) => {
+        if (finished) {
+          setIsPaused(false);
+          setPausedValue(0);
+
+          // script next nya disini
+          LibNavigation.replace('component/scanner', {
+            selectGate: selectGate,
+            fromPage: 'bigbang/gate_info',
+            event_id: event_id,
+            event_title: event_title,
+            typeScanner: typeScanner,
+            gate_type: gate_type,
+            price_type: price_type,
+            url_ticket_detail: url_ticket_detail,
+            url_ticket_update: url_ticket_update,
+            configPriority: configPriority,
+            scan_type: scan_type
+          })
+        }
+      });
+    } else {
+      if (animation.current) {
+        animation.current.stop(); // Hentikan animasi
+        animation.current = null;
+      }
+      setPausedValue(progress._value);
+    }
+
+    setIsPaused(!isPaused);
+  }
+
+  useEffect(() => {
+    // sementara price_id tak jupuk index 0
+    BigbangGate_infoProperty.addCounterOutOpenGate(1, post?.price_id?.[0])
+    dataListTicketExit?.get()
+    createDataExit()
+    animateProgressBar()
+  }, [])
+
+  function createDataExit() {
+    dataListTicketExit.set(LibObject.push(dataListTicketExit.get(), [url, post])())
+    BigbangGate_infoProperty.subscribeSyncExit().trigger(dataListTicketExit.get())
+  }
+
+  let uniquePrices: any = {};
+
+  data?.list?.filter((entry: any) => {
+    return entry.checked == 1;
+  }).forEach((entry: any) => {
+    uniquePrices[entry.price_name] = true;
+  });
+
+  let uniquePriceNames = Object.keys(uniquePrices);
+
+  const widthInterpolate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View style={{ flex: 1 }}>
+      <LibStatusbar style='light' />
+      <Pressable
+        onPressIn={animateProgressBar}
+        onPressOut={animateProgressBar}
+        style={{ backgroundColor: '#000', height: LibStyle.height }}>
+        <LibPicture source={{ uri: 'https://www.w3schools.com/howto/img_avatar.png' }} style={{ width: LibStyle.width, height: LibStyle.height - (LibStyle.height / 4) }} resizeMode={"cover"} />
+
+        <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT + 5, alignSelf: 'center', height: 5, width: LibStyle.width - 20, backgroundColor: 'rgba(255,255,255,0.3)', borderRadius: 10, position: 'absolute', top: 5, }}>
+          <Animated.View style={{ width: widthInterpolate, height: 5, backgroundColor: LibStyle.colorPrimary, borderRadius: 10, }} />
+        </View>
+
+        <LinearGradient
+          // Background Linear Gradient
+          style={{
+            height: LibStyle.height - (LibStyle.height / 3),
+            width: LibStyle.width,
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+          colors={['rgba(255,255,255,0)', 'rgba(0,0,0,0.55)', 'rgba(0,0,0,1)', 'rgba(0,0,0,1)']}>
+          <View style={{ flex: 1, padding: 15, justifyContent: 'flex-end', paddingBottom: 100, alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', flexWrap: 'wrap', fontSize: 35, letterSpacing: 2, fontWeight: '900', color: '#fff' }}>{uniquePriceNames.join(',')}</Text>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 26, marginTop: 20, color: LibStyle.colorRed }}>{esp.lang("event/exit_success", "exit")}</Text>
+          </View>
+
+        </LinearGradient>
+      </Pressable>
+    </View>
+  )
+}

package/event/exit_temporary.tsx

@@ -0,0 +1,226 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventScan_item } from 'esoftplay/cache/event/scan_item/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/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 { LibObject } from 'esoftplay/cache/lib/object/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 { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface EventExit_temporaryArgs {
+
+}
+export interface EventExit_temporaryProps {
+
+}
+export default function m(props: EventExit_temporaryProps): any {
+  const user_qr = LibNavigation.getArgs(props, 'qr_code')
+  const { scan_type, event_id, selectGate, typeScanner }: any = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>(undefined)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    var post = {
+      event_id: event_id,
+      // event_id: "264",
+      user_qr: encodeURIComponent(user_qr),
+      gate_id: selectGate.id
+      // user_qr: encodeURIComponent("BBO-H6851"),
+    }
+    new LibCurl('event_tms_out_temporary', post, (res) => {
+      let a = res?.list?.length > 0 && res.list.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 0
+        })
+      })
+      let b = res?.staff?.length > 0 && res.staff.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 0
+        })
+      })
+
+      let c = {
+        ...res,
+        list: res?.list?.length == 0 ? [] : a,
+        staff: res?.staff?.length == 0 ? [] : b
+      }
+      esp.log({ res, c });
+      setResult(c)
+
+    }, (error) => {
+      LibDialog.warningConfirm(esp.lang("event/exit_temporary", "fault"), error?.message, esp.lang("event/exit_temporary", "back"), () => LibNavigation.back(), "", () => { })
+    }, 1)
+  }
+
+  function quitTemporary(): void {
+    let list = [...result?.list, ...result.staff]
+    let a = list.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+
+    if (a.length == 0) {
+      LibToastProperty.show(esp.lang("event/exit_temporary", "select_ticket"))
+      return
+    }
+    var post = {
+      event_id: event_id,
+      ids: JSON.stringify(a),
+      gate_id: selectGate.id
+    }
+
+    LibProgress.show(esp.lang("event/exit_temporary", "wait"))
+    new LibCurl('event_tms_out_temporary_confirm', post, (result, msg) => {
+      LibProgress.hide()
+      LibDialog.confirm(esp.lang("event/exit_temporary", "info"), msg, esp.lang("event/exit_temporary", "ok"), () => {
+        LibNavigation.replace('component/scanner', {
+          fromPage: 'bigbang/gate_info',
+          isTemporaryExit: true,
+          event_id: event_id,
+          selectGate: selectGate,
+          typeScanner: typeScanner,
+          scan_type: scan_type
+        })
+      }, "", () => { })
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/exit_temporary", "oops"), error?.message)
+      LibProgress.hide()
+    }, 1)
+  }
+
+  if (!result) return <LibLoading />
+
+  let lastStatusScanned = ''
+  function renderTicketTemporary(item: any, i: number) {
+    const showStatusScanned = lastStatusScanned != item?.status_label
+    lastStatusScanned = item?.status_label
+    return (
+      <View key={i}>
+        {
+          showStatusScanned &&
+          <View style={{ backgroundColor: item?.status == 1 ? '#fff' : "#c5c5c5", padding: 10, borderBottomWidth: 2, borderBottomColor: LibStyle.colorBgGrey }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: item?.status == 1 ? item?.status_background : "#fff" }}>{(item?.status_label).toUpperCase()}</Text>
+          </View>
+        }
+        <EventScan_item
+          key={i}
+          item={item}
+          colorFont={"#fff"}
+          style={{ backgroundColor: item?.status == 1 ? "#fff" : "#c5c5c5" }}
+          event_image={result?.event_image}
+          event_name={result?.event_name}
+          event_ondate={result?.event_ondate}
+          colorText={item?.status == 1 ? "#000" : LibStyle.colorBgGrey}
+          label={
+            item.status == 0 ?
+              esp.lang("event/exit_temporary", "used") :
+              item.checked == 0 ?
+                esp.lang("event/exit_temporary", "use") :
+                esp.lang("event/exit_temporary", "cancel")
+          }
+          onPress={() => {
+            if (item?.status == 1 && item?.is_limit == 0) {
+              let a = LibObject.set(result, item.checked == 1 ? 0 : 1)('list', i, 'checked')
+              setResult(a)
+            }
+          }}
+          colorBackground={(item.status == 0 || item.is_limit == 1) ? LibStyle.colorLightGrey : (item.checked == 0) ? LibStyle.colorGreen : LibStyle.colorRed}
+        />
+      </View>
+    )
+  }
+
+  let lastStatusStaff = ''
+  function renderStaff(item: any, i: number) {
+    const showStatusScanned = lastStatusStaff != item?.status_label
+    lastStatusStaff = item?.status_label
+
+    return (
+      <View key={i}>
+        {
+          showStatusScanned &&
+          <View style={{ backgroundColor: item?.status == 1 ? '#fff' : "#c5c5c5", padding: 10, borderBottomWidth: 2, borderBottomColor: LibStyle.colorBgGrey }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: item?.status == 1 ? item?.status_background : "#fff" }}>{(item?.status_label).toUpperCase()}</Text>
+          </View>
+        }
+        <View style={{ padding: 10, overflow: 'hidden', flex: 1, flexDirection: 'row', backgroundColor: '#fff', borderBottomColor: LibStyle.colorGrey, borderBottomWidth: 1.5 }}>
+          <LibPicture style={applyStyle({ borderRadius: 5, width: LibStyle.width / 4.5, height: LibStyle.width / 4.5, backgroundColor: LibStyle.colorBgGrey })} source={{ uri: item?.image }} />
+          <View style={{ marginLeft: 10, flex: 1 }}>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 18, fontWeight: 'bold' })}>{item.name}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 14 })}>{item.department_name}</Text>
+            <Text allowFontScaling={false} ellipsizeMode={'tail'} numberOfLines={2} style={applyStyle({ color: "#000", marginBottom: 4, fontSize: 16 })}>{item.exhibitor_name}</Text>
+            {
+              item.status == 1 &&
+              <ComponentButton style={applyStyle({ marginTop: 10, alignSelf: 'flex-end', width: LibStyle.width / 3, backgroundColor: (item.status == 0 || item.is_limit == 1) ? LibStyle.colorLightGrey : (item.checked == 0) ? LibStyle.colorGreen : LibStyle.colorRed })} label={
+                item.status == 0 ?
+                  esp.lang("event/exit_temporary", "used") :
+                  item.hasOwnProperty("checked") && item.checked == 0 ?
+                    esp.lang("event/exit_temporary", "use") :
+                    esp.lang("event/exit_temporary", "cancel")
+              } fontColor={"#fff"} onPress={() => {
+                let a = LibObject.set(result, item.checked == 1 ? 0 : 1)('staff', i, 'checked')
+                setResult(a)
+              }} />
+            }
+          </View>
+          <View pointerEvents='none' style={{ position: 'absolute', justifyContent: 'center', transform: [{ rotate: '45deg' }], margin: 1, ...LibStyle.elevation(2), height: 20, width: 170, backgroundColor: LibStyle.colorPrimary, right: -50, top: 25 }} >
+            <Text style={{ color: 'white', alignSelf: 'center', fontWeight: 'bold' }} >ID CARD</Text>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  const sortedData = result?.list?.length > 0 && result?.list.sort((a: any, b: any) => {
+    if (a.is_limit == 0 && b.is_limit != 0) {
+      return -1; // a di atas b
+    } else if (a.is_limit != 0 && b.is_limit == 0) {
+      return 1; // b di atas a
+    } else {
+      return 0; // urutan relatif tidak berubah
+    }
+  });
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/exit_temporary", "temp_out")} />
+
+      <ScrollView>
+        <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            result?.staff?.length > 0 && result?.staff?.map(renderStaff)
+          }
+        </View>
+        <View style={{ margin: 15, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            sortedData?.length > 0 && sortedData?.map(renderTicketTemporary)
+          }
+        </View>
+      </ScrollView>
+      <View style={{ padding: 10, backgroundColor: '#fff' }}>
+        <ComponentButton
+          label={esp.lang("event/exit_temporary", "btn_exit")}
+          backgroundColor={LibStyle.colorRed}
+          onPress={() => {
+            quitTemporary()
+          }}
+        // style={{ marginTop: 20 }}
+        />
+      </View>
+    </View>
+  )
+}