esoftplay-event 0.0.0-a

package/event/entrance_list.tsx

@@ -0,0 +1,264 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { EventEntrance_list_item } from 'esoftplay/cache/event/entrance_list_item/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventEntrancre_listArgs {
+
+}
+export interface EventEntrancre_listProps {
+
+}
+export default function m(props: EventEntrancre_listProps): any {
+  const {
+    price_type,
+    url_ticket_detail,
+    url_ticket_update,
+    tickets,
+    gate_type,
+    qr_code,
+    event_id,
+    selectGate,
+    typeScanner,
+    event_title,
+    scan_type,
+    configPriority, }: any = LibNavigation.getArgsAll(props)
+
+  const [ticket, setTicket] = useSafeState<any>()
+  const [list, setList] = useSafeState<any>()
+  const [useAll, setUseAll] = useSafeState<boolean>(false)
+  const dialogQty = useRef<ComponentSlidingup>(null)
+
+  let args = {
+    price_type: price_type,
+    gate_type: gate_type,
+    qr_code: qr_code,
+    event_id: event_id,
+    event_title: event_title,
+    selectGate: selectGate,
+    typeScanner: typeScanner,
+    url_ticket_detail: url_ticket_detail,
+    url_ticket_update: url_ticket_update,
+    qty: 1,
+    configPriority: configPriority,
+    scan_type: scan_type
+  }
+
+  useEffect(() => {
+    if (tickets?.length == 1) {
+      let item = tickets?.[0]
+      let a = new Array(Number(item?.qty_left)).fill({
+        ...item,
+        selected: 0
+      })
+
+      let b = a?.map((item: any, i: number) => {
+        return { ...item, selected: i == 0 ? 1 : 0 }
+      })
+
+      setUseAll(false)
+      setList(b)
+      setTicket(item)
+      LibUtils.debounce(() => {
+        if (item.hasOwnProperty("exhibitor_name")) {
+          LibNavigation.replace('event/entrance_idcard', {
+            selectedTicket: item,
+            ...args
+          })
+        } else {
+          dialogQty.current!.show()
+        }
+      }, 100)
+    }
+  }, [])
+
+
+  useEffect(() => {
+    setUseAll(list?.some((x: any) => x.selected == 0) ? false : true)
+  }, [list])
+
+  function useTicket() {
+    // LibNavigation.back()
+    let arg = {
+      ...args,
+      qty: list?.filter((it: any) => it.selected).length
+    }
+
+    if (tickets?.length == 1) {
+      LibNavigation.replace('event/entrance_success', {
+        selectedTicket: ticket,
+        ...arg
+      })
+    } else {
+      if (configPriority) { // ini untuk memunculkan priority
+        if (configPriority?.filter?.((item: any) => item.id == ticket.price_id).length > 0) {
+          LibNavigation.replace('event/entrance_success', {
+            selectedTicket: ticket,
+            ...arg
+          })
+        } else {
+          LibNavigation.replace('event/entrance_warning', {
+            selectedTicket: ticket,
+            is_from_list: 1, // digunakan untuk membedakan navigasi kalau scan QR Member
+            ...arg
+          })
+        }
+      } else {
+        LibNavigation.replace('event/entrance_success', {
+          selectedTicket: ticket,
+          ...arg
+        })
+      }
+    }
+
+  }
+
+  function renderItem(item: any, i?: number) {
+    return (
+      <EventEntrance_list_item
+        key={i}
+        item={item}
+        onPress={() => {
+          if (item.text == "") {
+            if (item.qty_left == 0) {
+              LibNavigation.back()
+              LibNavigation.navigate('event/entrance_failed', {
+                text: esp.lang("event/entrance_list", "ticket_habis"),
+                ticketItem: item,
+                ...args
+              })
+            } else {
+              let a = new Array(Number(item?.qty_left)).fill({
+                ...item,
+                selected: 0
+              })
+
+              let b = a?.map((item: any, i: number) => {
+                return { ...item, selected: i == 0 ? 1 : 0 }
+              })
+
+              setUseAll(false)
+              setList(b)
+              setTicket(item)
+              LibUtils.debounce(() => {
+                if (item.hasOwnProperty("exhibitor_name")) {
+                  LibNavigation.replace('event/entrance_idcard', {
+                    selectedTicket: item,
+                    ...args
+                  })
+                } else {
+                  dialogQty.current!.show()
+                }
+              }, 100)
+            }
+          } else {
+            LibNavigation.back()
+            LibNavigation.navigate('event/entrance_failed', {
+              text: item.text,
+              ...args
+            })
+          }
+        }}
+      />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/entrance_list", "header_title")} subtitle='TMS' />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingTop: 15, paddingBottom: 0 }}>
+        <ScrollView style={{ flex: 1 }}>
+          {
+            tickets?.map(renderItem)
+          }
+        </ScrollView>
+      </View>
+
+      {/* dialog qty */}
+      <ComponentSlidingup ref={dialogQty}>
+        <View style={{ borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 20, paddingBottom: 0, backgroundColor: '#fff', maxHeight: LibStyle.height - (LibStyle.height / 3) }}>
+          <Text allowFontScaling={false} style={applyStyle({ letterSpacing: 1, fontSize: 30, marginTop: 0, fontWeight: 'bold', textAlign: "center", textAlignVertical: 'center', color: '#000', margin: 15 })} >{esp.lang("event/entrance_list", "total_ticket", list?.length)}</Text>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 20 }} >
+            <TouchableOpacity
+              onPress={() => {
+                const index = findLastIndex(list, (x: any) => x.selected == 1)
+                if (index > 0) {
+                  setList(LibObject.set(list, 0)(index, 'selected'))
+                }
+              }}
+              style={{ height: 70, width: 70, borderRadius: 10, backgroundColor: '#c1c2c3', alignItems: 'center', justifyContent: 'center' }} >
+              <LibIcon name='minus' size={50} />
+            </TouchableOpacity>
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
+              <Text style={{ fontSize: 50 }} >{list?.filter?.((x: any) => x.selected == 1).length}</Text>
+            </View>
+            <TouchableOpacity
+              onPress={() => {
+                const index = list?.findIndex?.((x: any) => x.selected == 0)
+                if (index > -1)
+                  setList(LibObject.set(list, 1)(index, 'selected'))
+              }}
+              style={{ height: 70, width: 70, borderRadius: 10, backgroundColor: '#c1c2c3', alignItems: 'center', justifyContent: 'center' }} >
+              <LibIcon name='plus' size={50} />
+            </TouchableOpacity>
+          </View>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10, marginBottom: 20, alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={'tail'} style={{ flex: 1, fontWeight: 'bold', fontSize: 14, letterSpacing: 1 }}>{esp.lang("event/entrance_list", "total_ticket_use", list?.filter((it: any) => it.selected).length)}</Text>
+            <TouchableOpacity onPress={() => {
+              let a = list?.map((item: any, i: number) => {
+                return { ...item, selected: useAll ? 0 : 1 }
+              })
+              setList(a)
+            }} style={applyStyle({ paddingHorizontal: 10, 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/entrance_list", "btn_entrance")}
+            style={{ borderRadius: 10, marginHorizontal: 5, marginBottom: 10 }}
+            backgroundColor={list?.filter((it: any) => it.selected).length == 0 ? LibStyle.colorBgGrey : LibStyle.colorGreen}
+            onPress={() => {
+              if (list?.filter((it: any) => it.selected).length == 0) {
+                LibToastProperty.show(esp.lang("event/entrance_list", "ticket_not_select"))
+              } else {
+                useTicket()
+              }
+            }}
+          />
+        </View>
+
+      </ComponentSlidingup >
+
+
+    </View >
+  )
+}
+
+function findLastIndex(arr: any[], condition: (value: any, index: number, obj: any[]) => unknown) {
+  const reversedArray = arr.slice().reverse();
+  const indexInReversedArray = reversedArray.findIndex(condition);
+
+  if (indexInReversedArray === -1) {
+    return -1; // No matching element found
+  }
+
+  const lastIndex = arr.length - 1 - indexInReversedArray;
+  return lastIndex;
+}

package/event/entrance_list_item.tsx

@@ -0,0 +1,88 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+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 { TicketItemProperty } from 'esoftplay/cache/ticket/item/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+
+export interface EventEntrance_list_itemArgs {
+
+}
+export interface EventEntrance_list_itemProps {
+  item: any,
+  onPress: () => void,
+}
+function debouncer() {
+  let timeout: any
+  return (func: () => any, delay: number): Function => {
+    clearTimeout(timeout)
+    timeout = setTimeout(func, delay);
+    return () => clearTimeout(timeout)
+  }
+}
+const debounce = debouncer()
+
+export default function m(props: EventEntrance_list_itemProps): any {
+  const { item } = props
+  const z = (200 / 500) * (LibStyle.width - 50);
+
+  // let colorBg = item?.qty_left == 0 ? LibStyle.colorBgGrey : item.color == "#FFFFFF" ? LibStyle.colorPrimary : item?.color
+  let colorBg = item?.qty_left <= 0 ? LibStyle.colorBgGrey : item.color?.toUpperCase() == "#FFFFFF" ? LibStyle.colorPrimary : item?.color
+  let colorFg = item?.qty_left <= 0 ? "#aaa" : LibUtils.hexToRgba(item?.color, 0.5)
+  let colorText = item?.qty_left == 0 ? "#979797" : TicketItemProperty.textColor(item.color)
+
+  if (item.price_id == "staff") {
+    return (
+      <Pressable onPress={() => { debounce(() => props.onPress(), 500) }} style={{ width: LibStyle.width - 50, marginBottom: 10, backgroundColor: colorBg, padding: 15, borderRadius: 10, ...LibStyle.elevation(3) }}>
+        <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+          <View style={{ height: 80, width: 80, borderRadius: 10, backgroundColor: LibStyle.colorBgGrey, ...LibStyle.elevation(3) }}>
+            <LibPicture source={{ uri: item?.user_image }} style={{ height: 80, width: 80, borderRadius: 10 }} />
+          </View>
+          <View style={{ marginHorizontal: 10, flex: 1, alignContent: 'center', justifyContent: 'center' }}>
+            <Text allowFontScaling={false} numberOfLines={2} style={applyStyle({ color: colorText, fontSize: 16, fontWeight: 'bold' })} >{item.user_name}</Text>
+            <Text allowFontScaling={false} style={applyStyle({ letterSpacing: 1, color: colorText, fontSize: 20, fontWeight: 'bold' })} >{item?.exhibitor_name?.split('-')[0]}</Text>
+            <Text allowFontScaling={false} numberOfLines={4} style={applyStyle({ letterSpacing: 1, color: colorText, fontSize: 16, fontWeight: 'normal' })} >{item?.exhibitor_name?.split('-')[1]}</Text>
+
+          </View>
+        </View>
+      </Pressable>
+    )
+  }
+
+  return (
+    <Pressable onPress={() => { debounce(() => props.onPress(), 500) }} style={applyStyle({ marginBottom: 10 })}>
+      <Svg width={LibStyle.width - 50} height={z} viewBox="0 0 544 210" fill="none">
+        <Path fill-rule="evenodd" fill={colorBg} clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0H529C537.284 0 544 6.71573 544 15V90C535.716 90 529 96.7157 529 105C529 113.284 535.716 120 544 120V195C544 203.284 537.284 210 529 210H15C6.71573 210 0 203.284 0 195V120C8.28427 120 15 113.284 15 105C15 96.7157 8.28427 90 0 90V15Z" />
+        <Path fill-rule="evenodd" fill={colorFg} clip-rule="evenodd" d="M16 0C7.16345 0 0 7.16344 0 16V91C8.2843 91 15 97.7157 15 106C15 114.284 8.2843 121 0 121V194C0 202.837 7.16345 210 16 210H185.924C187.623 210 189 208.623 189 206.924C189 205.281 187.68 203.974 186.124 203.446C181.981 202.04 179 198.118 179 193.5C179 190.516 180.245 187.823 182.244 185.911C182.407 185.755 182.572 185.597 182.739 185.439C185.671 182.647 189 179.478 189 175.5C189 171.522 185.671 168.353 182.739 165.561C182.572 165.403 182.407 165.245 182.244 165.089C180.245 163.177 179 160.484 179 157.5C179 154.156 180.563 151.178 182.998 149.255C185.858 146.996 189 144.145 189 140.5C189 136.855 185.858 134.004 182.998 131.745C180.563 129.822 179 126.844 179 123.5C179 120.516 180.245 117.823 182.244 115.911C182.407 115.755 182.572 115.597 182.739 115.439C185.671 112.647 189 109.478 189 105.5C189 101.522 185.671 98.3527 182.739 95.5614C182.572 95.4028 182.407 95.2454 182.244 95.0891C180.245 93.1775 179 90.4841 179 87.5C179 84.1564 180.563 81.1778 182.998 79.2549C185.858 76.9962 189 74.1446 189 70.5C189 66.8554 185.858 64.0038 182.998 61.7451C180.563 59.8222 179 56.8436 179 53.5C179 50.5159 180.245 47.8225 182.244 45.9109C182.407 45.7546 182.572 45.5972 182.739 45.4386C185.671 42.6473 189 39.4782 189 35.5C189 31.5218 185.671 28.3527 182.739 25.5614C182.572 25.4028 182.407 25.2454 182.244 25.0891C180.245 23.1775 179 20.4841 179 17.5C179 13.0541 181.763 9.25356 185.666 7.72205C187.45 7.02203 189 5.50424 189 3.58798C189 1.60639 187.394 0 185.412 0H16Z" />
+      </Svg>
+
+      <View style={applyStyle({ position: 'absolute', width: LibStyle.width - 50, height: z, padding: 10, justifyContent: 'space-evenly', alignContent: 'center', alignItems: 'center' })}>
+        {
+          item.price_id == "staff" &&
+          <View style={applyStyle({ position: 'absolute', top: 12, right: 10, padding: 5, paddingHorizontal: 10, borderBottomLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: 'red', margin: -10, marginBottom: 5 })}>
+            <Text allowFontScaling={false} style={applyStyle({ fontWeight: 'bold', color: colorText, fontSize: 12, })}>{item.price_id}</Text>
+          </View>
+        }
+        <View style={applyStyle({ flexDirection: 'row' })} >
+          <View style={applyStyle({ width: '35%', alignItems: 'center', justifyContent: 'center' })} >
+            <Text allowFontScaling={false} style={applyStyle({ color: colorText, fontWeight: 'bold', fontSize: 60, marginRight: '5%', textAlign: 'center' })}>{item.qty_left}</Text>
+            <Text allowFontScaling={false} style={applyStyle({ color: colorText, fontWeight: 'normal', fontSize: 20, marginRight: '5%', textAlign: 'center' })}>
+              <Text style={{ fontSize: 16 }}>{esp.lang("event/entrance_list_item", "total")}</Text>
+              {item.qty}</Text>
+
+          </View>
+          <View style={applyStyle({ flex: 1, justifyContent: 'center', marginRight: '10%' })} >
+            <Text allowFontScaling={false} style={applyStyle({ color: colorText, fontSize: 25, fontWeight: 'bold', textAlign: 'center' })} >{item.title}</Text>
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  )
+}

package/event/entrance_log.tsx

@@ -0,0 +1,130 @@
+// withHooks
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/import';
+import { EventEntrance_successProperty } from 'esoftplay/cache/event/entrance_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, { useEffect } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+export interface EventEntrance_logArgs {
+
+}
+export interface EventEntrance_logProps {
+  onPress: (type: string, title: string) => void
+}
+
+export interface EntranceLogItem {
+  text: string
+  subtitle: string
+  value: string
+  onPress: () => void
+  valuecolor?: string
+}
+
+function Item(props: EntranceLogItem) {
+  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: EventEntrance_logProps): any {
+  const log = BigbangGate_infoProperty.counterState().useSelector(s => s)
+  const backup = EventEntrance_successProperty.syncUsedTiket().useSelector(s => s)
+  const [loading, setLoading] = useSafeState<boolean>(true)
+  const timeout = useTimeout()
+
+  function syncData() {
+    BigbangGate_infoProperty.subscribeSync().trigger(EventEntrance_successProperty.syncUsedTiket().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  function forceSyncData() {
+    BigbangGate_infoProperty.subscribeSyncReset().trigger(EventEntrance_successProperty.syncUsedTiket().get())
+    timeout(() => {
+      setLoading(false)
+    }, 1000)
+  }
+
+  useEffect(() => {
+    syncData()
+  }, [])
+
+  if (loading) {
+    return <LibLoading />
+  }
+
+  const sumValue = EventLogProperty.sumValuesPerCategory(log)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff', margin: 17, marginTop: 0, paddingBottom: 10, marginBottom: 0, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, ...LibStyle.elevation(2) }}>
+      <Item text='Scan' subtitle={esp.lang("event/entrance_log", "ticket_scanned")} value={sumValue?.entrance_scan} onPress={() => {
+        if (sumValue?.entrance_scan) {
+          props.onPress("entrance_scan", esp.lang("event/entrance_log", "scan_gate"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/entrance_log", "qty_ticket_scan")} subtitle={esp.lang("event/entrance_log", "qty_ticket_scanned")} value={sumValue?.entrance_ticket} onPress={() => {
+        if (sumValue?.entrance_ticket) {
+          props.onPress("entrance_ticket", esp.lang("event/entrance_log", "qty_ticket_scan"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/entrance_log", "open_gate")} subtitle={esp.lang("event/entrance_log", "ticket_scanned_id")} value={sumValue?.entrance_opengate} onPress={() => {
+        if (sumValue?.entrance_opengate) {
+          props.onPress("entrance_opengate", esp.lang("event/entrance_log", "open_gate"))
+        }
+      }} />
+      <Item text={esp.lang("event/entrance_log", "opengate_idcard")} subtitle={esp.lang("event/entrance_log", "idcard_scanned_in")} value={sumValue?.entrance_opengate_idcard} onPress={() => {
+        if (sumValue?.entrance_opengate_idcard) {
+          props.onPress("entrance_opengate_idcard", esp.lang("event/entrance_log", "opengate_idcard"))
+        }
+      }} />
+      <Item text={esp.lang("event/entrance_log", "data_send")} subtitle={esp.lang("event/entrance_log", "data_send_to_server")} value={sumValue?.entrance_send} onPress={() => {
+        if (sumValue?.entrance_send) {
+          props.onPress("entrance_send", esp.lang("event/entrance_log", "data_send"))
+        }
+
+      }} />
+      <Item text={esp.lang("event/entrance_log", "data_not_send")} subtitle={esp.lang("event/entrance_log", "data_not_send_to_server")} value={backup.length} valuecolor={LibStyle.colorRed} onPress={() => {
+
+      }} />
+
+      <View style={{ marginHorizontal: 15 }} >
+        <UseCondition
+          if={backup.length == 0}
+          fallback={
+            <Pressable onPress={() => {
+
+              setLoading(true)
+              forceSyncData()
+            }}>
+              <Text allowFontScaling={false} style={{ textAlign: 'center' }}>{esp.lang("event/entrance_log", "please_wait")}<Text style={{ color: LibStyle.colorBlue, textDecorationStyle: 'solid', textDecorationLine: 'underline' }}>{esp.lang("event/entrance_log", "press_here")}</Text> {esp.lang("event/entrance_log", "press_here2")}</Text>
+            </Pressable>
+          } >
+          <LibTextstyle textStyle='callout'
+            style={{ textAlign: 'center', marginTop: 10 }}
+            text={esp.lang("event/entrance_log", "all_data_send")} />
+        </UseCondition>
+      </View>
+    </View >
+  )
+}
+

package/event/entrance_success.tsx

@@ -0,0 +1,155 @@
+// withHooks
+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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { useRef } from 'react';
+
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useEffect } from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+
+
+export interface EventEntrance_successArgs {
+
+}
+export interface EventEntrance_successProps {
+
+}
+
+export const syncUsedTiketState = useGlobalState<any[]>([], { persistKey: 'event_entrance_success_tiket_sync', loadOnInit: true, inFastStorage: true })
+export function syncUsedTiket(): useGlobalReturn<any[]> {
+  return syncUsedTiketState
+}
+
+export default function m(props: EventEntrance_successProps): any {
+  const { scan_type, url_ticket_update, url_ticket_detail, price_type, selectedTicket, gate_type, qr_code, event_id, selectGate, typeScanner, event_title, qty, configPriority } = LibNavigation.getArgsAll<any>(props)
+  // const { set } = useFirebaseSocket()
+  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);
+  }
+
+  let _qty = qty ? qty : 1
+
+  useEffect(() => {
+    entrance()
+    animateProgressBar()
+  }, [])
+
+
+  function entrance() {
+    useTicket()
+  }
+
+  function useTicket() {
+    let url = url_ticket_update + LibUtils.objectToUrlParam({
+      is_turnstile: 0,
+    })
+
+    let post = {
+      "target-url": "https://api.test.bbo.co.id/gate_checkin",
+      price_id: selectedTicket?.price_id,
+      qr: encodeURIComponent(qr_code),
+      trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
+      event_id: event_id,
+      gate_id: selectGate?.id,
+      is_tms: 1,
+      qty: _qty,
+      tms_id: UserClass.state().get()?.id,
+      scanned: LibUtils.moment().format('YYYY-MM-DD HH:mm:ss'),
+    }
+    BigbangGate_infoProperty.addCounterEntranceOpenGate(1, selectedTicket?.price_id)
+    syncUsedTiketState.set(LibObject.push(syncUsedTiketState.get(), [url, post])())
+    BigbangGate_infoProperty.subscribeSync().trigger(syncUsedTiketState.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: selectedTicket && selectedTicket?.user_image != "" ? decodeURIComponent(selectedTicket?.user_image) : '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' }}>{selectedTicket?.title?.split("+").join(' ')}</Text>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, marginTop: 20, color: '#fff' }}>{gate_type == "1" ? esp.lang("event/entrance_success", "in") : esp.lang("event/entrance_success", "out")}</Text>
+          </View>
+
+        </LinearGradient>
+      </Pressable>
+    </View>
+  )
+}