esoftplay-event 0.0.0-a → 0.0.0-c

package/event/tms_out_hall_log.tsx

@@ -0,0 +1,133 @@
+// withHooks
+
+import { useEffect } from 'react';
+
+import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+import { EventTms_out_hall_successProperty } from 'esoftplay/cache/event/tms_out_hall_success/import';
+import { EventTms_logProperty } from 'esoftplay/cache/event/tms_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 { Pressable, Text, View } from 'react-native';
+
+
+export interface EventTms_out_hall_logArgs {
+
+}
+export interface EventTms_out_hall_logProps {
+  onPress: (type: string, title: string) => void
+}
+
+export interface HallOutLogItem {
+  text: string
+  subtitle: string
+  value: string
+  onPress: () => void
+  valuecolor?: string
+}
+
+function Item(props: HallOutLogItem) {
+  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={{ letterSpacing: 0.5, 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: EventTms_out_hall_logProps): any {
+  const logHallOut = EventTms_homeProperty.counterState().useSelector(s => s)
+  const backupHallOut = EventTms_out_hall_successProperty.syncHallOut().useSelector(s => s)
+  const [loading, setLoading] = useSafeState<boolean>(true)
+  const timeout = useTimeout()
+
+  function syncHallOutData() {
+    EventTms_homeProperty.subscribeSyncHallOut().trigger(EventTms_out_hall_successProperty.syncHallOut().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  function forceSyncHallOutData() {
+    EventTms_homeProperty.subscribeSyncHallOutReset().trigger(EventTms_out_hall_successProperty.syncHallOut().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  useEffect(() => {
+    syncHallOutData()
+  }, [])
+
+  if (loading) {
+    return <LibLoading />
+  }
+
+  const sumValue = EventTms_logProperty.sumValuesPerCategory(logHallOut)
+
+  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/tms_out_hall_log", "ticket_scanned_hall_out")} text={esp.lang("event/tms_out_hall_log", "scan_hall_out")} value={sumValue?.hall_out_scan} onPress={() => {
+        if (sumValue?.hall_out_scan) {
+          props.onPress("hall_out_scan", esp.lang("event/tms_out_hall_log", "scan_hall_out"))
+        }
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_hall_log", "scanned_ticket_hall_put")} text={esp.lang("event/tms_out_hall_log", "qty_scan_hall_out")} value={sumValue?.hall_out_ticket} onPress={() => {
+        if (sumValue?.hall_out_ticket) {
+          props.onPress("hall_out_ticket", esp.lang("event/tms_out_hall_log", "qty_scan_hall_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_hall_log", "ticket_success_scanned_hall_out")} text={esp.lang("event/tms_out_hall_log", "opengate_hall_out")} value={sumValue?.hall_out_opengate} onPress={() => {
+        if (sumValue?.hall_out_opengate) {
+          props.onPress("hall_out_opengate", esp.lang("event/tms_out_hall_log", "opengate_hall_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_hall_log", "idcard_scanned_hall_out")} text={esp.lang("event/tms_out_hall_log", "opengate_hall_out_idcard")} value={sumValue?.hall_out_opengate_idcard} onPress={() => {
+        if (sumValue?.hall_out_opengate_idcard) {
+          props.onPress("hall_out_opengate_idcard", esp.lang("event/tms_out_hall_log", "opengate_hall_out_idcard"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_hall_log", "data_send_to_server")} text={esp.lang("event/tms_out_hall_log", "data_send")} value={sumValue?.hall_out_send} onPress={() => {
+        if (sumValue?.hall_out_send) {
+          props.onPress("hall_out_send", esp.lang("event/tms_out_hall_log", "data_send"))
+        }
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_hall_log", "data_not_send_to_server")} text={esp.lang("event/tms_out_hall_log", "data_not_send")} valuecolor={LibStyle.colorRed} value={backupHallOut.length} onPress={() => {
+
+      }} />
+
+      <View style={{ marginHorizontal: 15 }} >
+        <UseCondition
+          if={backupHallOut.length == 0}
+          fallback={
+            <Pressable onPress={() => {
+              setLoading(true)
+              forceSyncHallOutData()
+            }}>
+              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/tms_out_hall_log", "wait")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/tms_out_hall_log", "click")}</Text> {esp.lang("event/tms_out_hall_log", "retry")}</Text>
+            </Pressable>
+          } >
+          <LibTextstyle textStyle='callout'
+            style={{ textAlign: 'center', marginTop: 15 }}
+            text={esp.lang("event/tms_out_hall_log", "all_data_send")} />
+        </UseCondition>
+      </View>
+
+    </View >
+  )
+}

package/event/tms_out_hall_success.tsx

@@ -0,0 +1,130 @@
+// withHooks
+import { useEffect, useRef } from 'react';
+
+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 { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+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 EventTms_out_hall_successArgs {
+
+}
+export interface EventTms_out_hall_successProps {
+
+}
+
+const dataListHallOut = useGlobalState<any[]>([], { persistKey: 'ticket_list_hall_out', loadOnInit: true, inFastStorage: true })
+export function syncHallOut(): useGlobalReturn<any[]> {
+  return dataListHallOut
+}
+
+export default function m(props: EventTms_out_hall_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: 'event/tms_home',
+            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(() => {
+    dataListHallOut.get()
+    EventTms_homeProperty.addCounterHallOutOpenGate(1, "0")
+    createDataHallOut()
+    animateProgressBar()
+  }, [])
+
+  function createDataHallOut() {
+    dataListHallOut.set(LibObject.push(dataListHallOut.get(), [url, post])())
+    EventTms_homeProperty.subscribeSyncHallOut().trigger(dataListHallOut.get())
+  }
+
+  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' }}>{data[0]?.price_name}</Text>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 26, marginTop: 20, color: '#fff' }}>{esp.lang("event/tms_out_hall_success", "exit")}</Text>
+          </View>
+
+        </LinearGradient>
+      </Pressable>
+    </View>
+  )
+}

package/event/tms_out_list.tsx

@@ -0,0 +1,118 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/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 { EventOrder_itemProperty } from 'esoftplay/cache/event/order_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 EventTms_out_listArgs {
+
+}
+export interface EventTms_out_listProps {
+
+}
+export default function m(props: EventTms_out_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: EventOrder_itemProperty.textColor(item?.color), marginRight: 10 }}>{item?.price_name}</Text>
+        <LibIcon.Ionicons name={item?.checked == 1 ? 'checkmark-circle' : 'radio-button-off-outline'} size={26} color={EventOrder_itemProperty.textColor(item?.color)} />
+      </Pressable>
+    )
+  }
+
+  let args = {
+    selectGate: selectGate,
+    fromPage: 'event/tms_home',
+    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/tms_out_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/tms_out_success', { ...args, url, post })
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={esp.lang("event/tms_out_list", "header_title")} subtitle={esp.lang("event/tms_out_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/tms_in_list", "cancel_use") : esp.lang("event/tms_in_list", "use_all")}</Text>
+            <LibIcon.Ionicons size={18} color="#fff" name={useAll ? "close" : "checkmark-done"} />
+          </TouchableOpacity>
+        </View>
+
+        <EventButton
+          label={esp.lang("event/tms_out_list", "exit")}
+          backgroundColor={LibStyle.colorRed}
+          onPress={() => {
+            quit()
+          }}
+          style={{ marginTop: 30 }}
+        />
+
+      </View>
+    </View>
+  )
+}

package/event/tms_out_log.tsx

@@ -0,0 +1,131 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+import { EventTms_out_successProperty } from 'esoftplay/cache/event/tms_out_success/import';
+import { EventTms_logProperty } from 'esoftplay/cache/event/tms_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 EventTms_out_logArgs {
+
+}
+export interface EventTms_out_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: EventTms_out_logProps): any {
+
+  const logExit = EventTms_homeProperty.counterState().useSelector(s => s)
+  const backupExit = EventTms_out_successProperty.syncTicketExit().useSelector(s => s)
+  const [loading, setLoading] = useSafeState<boolean>(true)
+  const timeout = useTimeout()
+
+  function syncExitData() {
+    EventTms_homeProperty.subscribeSyncExit().trigger(EventTms_out_successProperty.syncTicketExit().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  function forceSyncExitData() {
+    EventTms_homeProperty.subscribeSyncExitReset().trigger(EventTms_out_successProperty.syncTicketExit().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  useEffect(() => {
+    syncExitData()
+  }, [])
+
+
+  if (loading) {
+    return <LibLoading />
+  }
+
+  const sumValue = EventTms_logProperty.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/tms_out_log", "ticket_scan_out")} text={esp.lang("event/tms_out_log", "scan_out")} value={sumValue?.out_scan} onPress={() => {
+        if (sumValue?.out_scan) {
+          props.onPress("out_scan", esp.lang("event/tms_out_log", "scan_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_log", "qty_scanned_out")} text={esp.lang("event/tms_out_log", "qty_ticket_scan_out")} value={sumValue?.out_ticket} onPress={() => {
+        if (sumValue?.out_ticket) {
+          props.onPress("out_ticket", esp.lang("event/tms_out_log", "qty_ticket_scan_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_log", "ticket_scanned_out")} text={esp.lang("event/tms_out_log", "opengate_out")} value={sumValue?.out_opengate} onPress={() => {
+        if (sumValue?.out_opengate) {
+          props.onPress("out_opengate", esp.lang("event/tms_out_log", "opengate_out"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_log", "data_send_to_server")} text={esp.lang("event/tms_out_log", "data_send")} value={sumValue?.out_send} onPress={() => {
+        if (sumValue?.out_send) {
+          props.onPress("out_send", esp.lang("event/tms_out_log", "data_send"))
+        }
+
+      }} />
+      <Item subtitle={esp.lang("event/tms_out_log", "data_not_send_to_server")} text={esp.lang("event/tms_out_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/tms_out_log", "waiting")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/tms_out_log", "click")}</Text> {esp.lang("event/tms_out_log", "re_try")}</Text>
+            </Pressable>
+          } >
+          <LibTextstyle textStyle='callout'
+            style={{ textAlign: 'center', marginTop: 15 }}
+            text={esp.lang("event/tms_out_log", "all_data_send")} />
+        </UseCondition>
+      </View>
+    </View >
+  )
+}

package/event/tms_out_success.tsx

@@ -0,0 +1,143 @@
+// withHooks
+import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/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 EventTms_out_successArgs {
+
+}
+export interface EventTms_out_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: EventTms_out_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: 'event/tms_home',
+            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
+    EventTms_homeProperty.addCounterOutOpenGate(1, post?.price_id?.[0])
+    dataListTicketExit?.get()
+    createDataExit()
+    animateProgressBar()
+  }, [])
+
+  function createDataExit() {
+    dataListTicketExit.set(LibObject.push(dataListTicketExit.get(), [url, post])())
+    EventTms_homeProperty.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/tms_out_success", "exit")}</Text>
+          </View>
+
+        </LinearGradient>
+      </Pressable>
+    </View>
+  )
+}