esoftplay-event 0.0.0-a

package/event/entrance_again.tsx

@@ -0,0 +1,200 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { 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 { EventScan_item } from 'esoftplay/cache/event/scan_item/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+moment().locale('id')
+
+
+export interface EventEntrance_againArgs {
+
+}
+export interface EventEntrance_againProps {
+
+}
+export default function m(props: EventEntrance_againProps): any {
+  const [result, setResult] = useSafeState<any>(undefined)
+
+  const user_qr = LibNavigation.getArgs(props, 'qr_code')
+  const { scan_type, event_id, event_title, selectGate, typeScanner }: any = LibNavigation.getArgsAll(props)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+
+  function loadData(): void {
+    var post = {
+      // event_id: "264",
+      // user_qr: encodeURIComponent("BBO-H6851"),
+      // gate_id: "182"
+      event_id: event_id,
+      user_qr: encodeURIComponent(user_qr),
+      gate_id: selectGate?.id
+    }
+
+    new LibCurl('event_tms_out_temporary_in', 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/entrance_again", "fault"), error?.message, esp.lang("event/entrance_again", "back"), () => LibNavigation.back(), "", () => { })
+    }, 1)
+  }
+
+  function entrance(): void {
+    let newData = [...result?.staff, ...result?.list]
+    let _ids = newData?.filter((item: any) => item.checked == 1).map((it: any) => it.id)
+    if (_ids.length == 0) {
+      LibToastProperty.show(esp.lang("event/entrance_again", "warning_ticket"))
+      return
+    }
+
+    if (_ids.length == 0) {
+      LibToastProperty.show(esp.lang("event/entrance_again", "warning_ticket"))
+      return
+    }
+    var post = {
+      event_id: event_id,
+      ids: JSON.stringify(_ids),
+      gate_id: selectGate.id
+    }
+
+    LibProgress.show(esp.lang("event/entrance_again", "wait"))
+    new LibCurl('event_tms_out_temporary_in_confirm', post, (result, msg) => {
+      esp.log({ result, msg, post });
+      LibProgress.hide()
+      LibDialog.confirm(esp.lang("event/entrance_again", "info"), result, esp.lang("event/entrance_again", "ok"), () => {
+        LibNavigation.replace('component/scanner', {
+          selectGate: selectGate,
+          fromPage: 'bigbang/gate_info',
+          event_id: event_id,
+          event_title: event_title,
+          typeScanner: typeScanner,
+          scan_type: scan_type
+        })
+      }, "", () => { })
+    }, (error) => {
+      esp.log({ error });
+      LibDialog.warning(esp.lang("event/entrance_again", "oops"), error?.message)
+      LibProgress.hide()
+    })
+  }
+
+  function renderTicket(item: any, i: number) {
+    return (
+      <EventScan_item
+        key={i}
+        item={item}
+        colorFont={"#fff"}
+        event_image={result?.event_image}
+        style={{ backgroundColor: "#fff" }}
+        event_name={result?.event_name}
+        event_ondate={result?.event_ondate}
+        label={item.status == 0 ? esp.lang("event/entrance_again", "used") : item.checked == 0 ? esp.lang("event/entrance_again", "use") : esp.lang("event/entrance_again", "cancel")}
+        onPress={() => {
+          if (item?.status == 1) {
+            let a = LibObject.set(result, item.checked == 1 ? 0 : 1)('list', i, 'checked')
+            setResult(a)
+          }
+        }}
+        colorBackground={item.status == 0 ? LibStyle.colorLightGrey : item.checked == 0 ? LibStyle.colorGreen : LibStyle.colorRed}
+      />
+
+    )
+  }
+
+  function renderStaff(item: any, i: number) {
+    return (
+      <View key={i}>
+
+        <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>
+    )
+  }
+
+  if (!result) return <LibLoading />
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/entrance_again", "entrance_again")} subtitle={selectGate?.name} cart />
+      <ScrollView>
+        <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            result?.staff?.length > 0 && result?.staff?.map(renderStaff)
+          }
+        </View>
+        <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, overflow: 'hidden' }}>
+          {
+            result?.list?.length > 0 && result?.list?.map(renderTicket)
+          }
+        </View>
+      </ScrollView>
+      <ComponentTouchable onPress={() => {
+        entrance()
+      }}>
+        <View style={applyStyle({ margin: 10, height: 35, borderRadius: 17, backgroundColor: LibStyle.colorGreen, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 })} >
+          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 13, marginLeft: 10 })} >{esp.lang("event/entrance_again", "entrance")}</Text>
+        </View>
+      </ComponentTouchable>
+
+    </View >
+  )
+}

package/event/entrance_failed.tsx

@@ -0,0 +1,190 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface EventEntrance_failedArgs {
+
+}
+export interface EventEntrance_failedProps {
+
+}
+export default function m(props: EventEntrance_failedProps): any {
+  const { scan_type, ticketItem, text, url_ticket_update, url_ticket_detail, price_type, gate_type, qr_code, event_id, selectGate, typeScanner, event_title, configPriority }: any = LibNavigation.getArgsAll(props)
+
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+
+  let url = url_ticket_detail + LibUtils.objectToUrlParam({
+    is_turnstile: 0,
+    price_id: ticketItem?.price_id == "staff" ? 0 : ticketItem?.price_id,
+    qr: encodeURIComponent(qr_code),
+    t: new Date().getTime()
+  })
+
+
+  useEffect(() => {
+    BigbangGate_infoProperty.addCounterEntranceScanFailed(1, ticketItem?.price_id)
+    if (ticketItem && url_ticket_detail) {
+      getDetailDataTicket()
+    }
+  }, [])
+
+  function getDetailDataTicket() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (err) => {
+      setError(err)
+    }, 1)
+  }
+
+  function getBack() {
+    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
+    })
+  }
+
+  function sendTelegram() {
+    let data = {
+      '#bbotms': ":",
+      reporter: {
+        email: UserClass.state().get().email,
+        name: UserClass.state().get().name
+      },
+      "event/gate/type": event_id + "/" + selectGate?.id + "/" + (gate_type == 1 ? "in" : "out"),
+      qr: qr_code,
+      type_ticket: ticketItem?.price_id,
+      qty: ticketItem?.qty,
+      qty_used: ticketItem?.qty_used,
+      qty_left: ticketItem?.qty_left,
+      data: {
+        res: result,
+        url: url
+      },
+      error_msg: text,
+    }
+
+    let post = {
+      text: String(JSON.stringify(data || {}, undefined, 2)).replace(/[\[\]\{\}\"]+/g, ''),
+      chat_id: '-1001737180019',
+      disable_web_page_preview: true
+    }
+
+    let _url = "https://api.telegram.org/bot923808407:AAEFBlllQNKCEn8E66fwEzCj5vs9qGwVGT4/sendMessage"
+    new LibCurl().custom(_url, post, (res, msg) => { })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <LibStatusbar style='light' />
+      <View style={{ flex: 1 }}>
+        <LibPicture source={esp.assets('failed.png')} style={{ flex: 1, height: LibStyle.height, width: LibStyle.width }} /* resizeMode={"stretch"} */ />
+      </View>
+
+      <View style={{ flex: 1, position: 'absolute', top: 50, left: 0, right: 0, bottom: 0, alignItems: 'center', alignContent: 'center' }} >
+        <ScrollView>
+          <View style={{ marginBottom: 20, alignSelf: 'center', borderRadius: LibStyle.width / 3, padding: 10, backgroundColor: '#fff' }}>
+            <LibPicture
+              source={esp.assets('failed_icon.png')}
+              style={{ width: LibStyle.width / 3, height: LibStyle.width / 3 }}
+            />
+          </View>
+          <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 25, color: '#fff', marginHorizontal: 20, textAlign: 'center', letterSpacing: 1 }}>{text ? text : esp.lang("event/entrance_failed", "ticket_out")}</Text>
+          {
+            result &&
+            <View style={[applyStyle({ marginTop: 10, padding: 10 }), { width: LibStyle.width }]}>
+              {
+                result?.length > 0 &&
+                <>
+                  <Text allowFontScaling={false} style={{ fontSize: 20, color: '#fff', margin: 10, textAlign: 'center', letterSpacing: 1 }}>{esp.lang("event/entrance_failed", "history")}</Text>
+                  <Text allowFontScaling={false} style={{ marginTop: 0, fontSize: 16, color: '#fff', margin: 10, textAlign: 'center', letterSpacing: 1, fontWeight: 'bold' }}>{result?.[0].price_name}</Text>
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#37c2d0', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
+                    <View style={{ flex: 1.5, justifyContent: 'center', borderRightWidth: 1, borderColor: LibStyle.colorBgGrey, paddingVertical: 5, padding: 5 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', textAlign: 'center', fontSize: 14 }}>{esp.lang("event/entrance_failed", "code")}</Text>
+                    </View>
+                    <View style={{ flex: 1.2, justifyContent: 'center', paddingVertical: 5 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', textAlign: 'center', fontSize: 14 }}>{esp.lang("event/entrance_failed", "used_time")}</Text>
+                    </View>
+                    <View style={{ flex: 2, justifyContent: 'center', borderLeftWidth: 1, borderColor: LibStyle.colorBgGrey, paddingVertical: 5 }}>
+                      <Text allowFontScaling={false} style={{ fontWeight: 'bold', textAlign: 'center', fontSize: 14 }}>{esp.lang("event/entrance_failed", "gate")}</Text>
+                    </View>
+                  </View>
+                </>
+              }
+
+              {
+                result && result?.map?.((item: any, i: number) => {
+                  return (
+                    <View key={i} style={{ backgroundColor: i % 2 ? '#fff' : LibStyle.colorGrey, flexDirection: 'row', justifyContent: 'space-between', borderBottomWidth: 1, borderBottomColor: LibStyle.colorBgGrey }}>
+                      <View style={{ flex: 1.5, justifyContent: 'center', borderRightWidth: 1, borderColor: LibStyle.colorBgGrey, paddingVertical: 5, padding: 5 }}>
+                        <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode="tail" style={{ letterSpacing: 1, textAlign: 'center', fontSize: 12 }}>{item?.code}</Text>
+                      </View>
+                      <View style={{ flex: 1.2, justifyContent: 'center', paddingVertical: 5 }}>
+                        {
+                          item.scanned != "0000-00-00 00:00:00" &&
+                          <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 12 }}>{LibUtils.moment(item.scanned).localeFormat("DD MMM H:mm:ss ")}</Text>
+                        }
+                      </View>
+                      <View style={{ flex: 2, justifyContent: 'center', borderLeftWidth: 1, borderColor: LibStyle.colorBgGrey, paddingVertical: 5 }}>
+                        {
+                          item.gate_name != null &&
+                          <Text allowFontScaling={false} style={{ letterSpacing: 1, textAlign: 'center', fontSize: 12, }}>{item.tms_email + "\n" + item.gate_name + " - " + item.turnstile_id}</Text>
+                        }
+                      </View>
+                    </View>
+                  )
+                })
+              }
+            </View>
+          }
+          {
+            error &&
+            <View style={{ width: LibStyle.width - 40, justifyContent: 'center', alignItems: 'center', padding: 15, borderRadius: 10, marginTop: 100 }}>
+              <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, lineHeight: 20, fontWeight: "bold", marginBottom: 5, color: "#fff", textAlign: "center" }}>{error?.message}</Text>
+            </View>
+          }
+        </ScrollView>
+        <View style={{ flexDirection: 'row', width: LibStyle.width - 40, marginVertical: 10, justifyContent: 'space-between' }}>
+          <Pressable onPress={() => {
+
+            LibDialog.warningConfirm(esp.lang("event/entrance_failed", "warn_title"), esp.lang("event/entrance_failed", "warn_msg"), esp.lang("event/entrance_failed", "warn_ok"), () => {
+              sendTelegram()
+            }, esp.lang("event/entrance_failed", "warn_no"), () => { })
+
+          }} style={{ width: (LibStyle.width - 45) * 0.5, height: 43, borderRadius: 5, backgroundColor: LibStyle.colorRed, borderWidth: 3, borderColor: "#fff", justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }}>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', color: "#fff" }}>{esp.lang("event/entrance_failed", "report")}</Text>
+          </Pressable>
+          <Pressable onPress={getBack} style={{ width: (LibStyle.width - 45) * 0.5, height: 43, borderRadius: 5, backgroundColor: LibStyle.colorGreen, justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }}>
+            <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: 'bold', color: "#fff" }}>{esp.lang("event/entrance_failed", "back")}</Text>
+          </Pressable>
+
+        </View>
+      </View>
+
+    </View>
+  )
+
+}

package/event/entrance_idcard.tsx

@@ -0,0 +1,203 @@
+// withHooks
+
+import { BigbangGate_infoProperty } from 'esoftplay/cache/bigbang/gate_info/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventEntrance_successProperty } from 'esoftplay/cache/event/entrance_success/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketSheet } from 'esoftplay/cache/market/sheet/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventEntrance_idcardArgs {
+
+}
+export interface EventEntrance_idcardProps {
+
+}
+export default function m(props: EventEntrance_idcardProps): any {
+  const width = LibStyle.width
+  const height = 12 / 9 * width
+  const marginTop = 2.7 / 9 * width
+  const photoHeight = 4 / 9 * width
+  const photoWidth = 3 / 9 * width
+  const photoMarginBot = 0.46 / 9 * width
+
+  const menuRef = useRef<MarketSheet>(null)
+
+  const {
+    hall,
+    selectedTicket,
+    event_id,
+    selectGate,
+    url_ticket_update,
+    price_type,
+    gate_type,
+    event_title,
+    typeScanner,
+    url_ticket_detail,
+    configPriority,
+    scan_type
+  } = LibNavigation.getArgsAll(props)
+
+  const [result, setResult] = useSafeState<any>()
+
+  function loadData() {
+    // load data untuk ngambil background id card
+    new LibCurl('event_tms_visitor?event_id=' + event_id, null, (res, message) => {
+      setResult(res)
+    }, (error) => {
+      LibToastProperty?.show(error?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  useEffect(() => {
+    loadData()
+    if (hall && hall == "in") {
+      entranceHall()
+    } else if (hall && hall == "out") {
+      exitHall()
+    } else {
+      entrance()
+    }
+  }, [])
+
+  function entrance() {
+    let url = url_ticket_update + LibUtils.objectToUrlParam({
+      is_turnstile: 0,
+    })
+
+    let post = {
+      "target-url": "https://api.test.bbo.co.id/gate_checkin",
+      price_id: 0,
+      qr: encodeURIComponent(selectedTicket?.key),
+      trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
+      event_id: event_id,
+      gate_id: selectGate?.id,
+      is_tms: 1,
+      qty: selectedTicket?.qty,
+      tms_id: UserClass.state().get()?.id
+    }
+
+    BigbangGate_infoProperty.addCounterEntranceOpenGateIdCard(1, selectedTicket?.price_id)
+    EventEntrance_successProperty.syncUsedTiket().set(LibObject.push(EventEntrance_successProperty.syncUsedTiket().get(), [url, post])())
+    BigbangGate_infoProperty.subscribeSync().trigger(EventEntrance_successProperty.syncUsedTiket().get())
+  }
+
+  function entranceHall() {
+    let post = {
+      event_id: event_id,
+      hall_id: selectGate?.id,
+      staff_id: selectedTicket?.id
+    }
+    new LibCurl('event_tms_hall_confirm_staff', post, (res, message) => {
+      // setResult(res)
+      BigbangGate_infoProperty.addCounterHallInGateIdcard(1, selectedTicket?.price_id)
+    }, (error) => {
+    }, 1)
+  }
+
+  function exitHall() {
+    let post = {
+      event_id: event_id,
+      hall_id: selectGate?.id,
+      id: selectedTicket?.id // ini id stafff
+    }
+    new LibCurl('event_tms_hall_out_confirm_staff', post, (res, message) => {
+      // setResult(res)
+      BigbangGate_infoProperty.addCounterHallOutOpenGateIdCard(1, selectedTicket?.price_id)
+    }, (error) => {
+    }, 1)
+  }
+
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader
+        title={esp.lang("event/entrance_idcard", "header")}
+        notif
+        onPressMore={() => menuRef.current?.show()}
+        more
+      />
+      <View style={{ backgroundColor: '#000', height: LibStyle.height, alignItems: 'center' }}>
+        {/* ini id_card nya */}
+        <LibPicture source={result?.event?.image_idcard == "" ? esp.assets('white_idcard.png') : { uri: result?.event?.image_idcard }} style={{ width: width, height: height, resizeMode: 'contain' }} />
+        <View style={{ position: 'absolute' }}>
+          <LibPicture source={{ uri: selectedTicket?.user_image != '' ? decodeURIComponent(selectedTicket?.user_image) : 'https://www.w3schools.com/howto/img_avatar.png' }} style={{ marginBottom: photoMarginBot, marginTop: marginTop, height: photoHeight, width: photoWidth, alignSelf: 'center', resizeMode: 'cover', }} />
+          <View style={{ padding: 10, marginTop: 5 }} >
+            {/* view nama */}
+            <View style={{ flexDirection: 'row' }} >
+              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 3 }} >{esp.lang("event/entrance_idcard", "name")}</Text>
+              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
+              <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode={"tail"} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{selectedTicket ? decodeURIComponent((selectedTicket?.user_name))?.split("+").join(' ') : esp.lang("event/entrance_idcard", "visitor")}</Text>
+            </View>
+            {/* view company */}
+            <View style={{ flexDirection: 'row' }} >
+              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 3 }} >{esp.lang("event/entrance_idcard", "company")}</Text>
+              <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} > : </Text>
+              <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode={"tail"} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", flex: 5 }} >{selectedTicket?.exhibitor_name?.split('-')[1]}</Text>
+            </View>
+
+            <View style={{ width: width - 20, alignSelf: 'center', backgroundColor: '#4a4a4a', height: 4, marginVertical: 4 }} />
+            <Text allowFontScaling={false} style={{ marginTop: -5, fontSize: 20, fontWeight: "bold", fontStyle: "normal", lineHeight: 32, textAlign: 'center', letterSpacing: 0, color: "#4a4a4a" }} >{selectedTicket?.exhibitor_name?.split('-')[0]}</Text>
+          </View>
+
+        </View>
+        <ComponentButton
+          label={esp.lang("event/entrance_idcard", "btn_back")}
+          backgroundColor={LibStyle.colorPrimary}
+          onPress={() => {
+            // LibNavigation.back()
+            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
+            })
+          }}
+          style={{ marginTop: 20, marginHorizontal: 15 }}
+        />
+      </View>
+      <MarketSheet
+        _ref={menuRef}
+        title={"ID CARD"}
+        options={[
+          {
+            text: "Tahan ID CARD",
+            textStyle: { color: "red" },
+            onPress: () => {
+              LibDialog.warningConfirm(esp.lang("event/tms_dashboard", "block_idcard_title"), esp.lang("event/tms_dashboard", "block_idcard_message"), esp.lang("event/tms_dashboard", "block_idcard_ok"), () => {
+                new LibCurl("event_tms_staff_hold", { qr: encodeURIComponent(selectedTicket?.key) }, (result, message) => {
+                  LibDialog.info("Berhasil!", message)
+                }, (error) => {
+                  LibDialog.warning("Oops!", error?.message)
+                })
+              }, esp.lang("event/tms_dashboard", "block_idcard_no"), () => {
+                LibDialog.hide()
+              })
+            }
+          }
+        ]}
+      />
+    </View>
+  )
+}