esoftplay-event 0.0.2 → 0.0.3

package/event/tms_in_hall_failed.tsx

@@ -2,6 +2,7 @@
 import { useEffect } from 'react';
 
 import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
@@ -33,7 +34,7 @@ export default function m(props: EventTms_in_hall_failedProps): any {
 
   const [, setData, getData] = useSafeState()
   const [qty, setQty, getQty] = useSafeState(1)
-
+  const { get } = EventFirebase_socket()
   const qtyRef = React.useRef<LibSlidingup>(null)
 
   useEffect(() => {
@@ -56,6 +57,24 @@ export default function m(props: EventTms_in_hall_failedProps): any {
     })
   }
 
+  function mainPath(qr: string) {
+    let a = ['event', event_id, '1', qr]
+    return a.join('/')
+  }
+
+
+  function isGateCheckValid(onValid: Function) {
+    get(mainPath(encodeURIComponent(encodeURIComponent(postGetData.user_qr))), getData()?.gate?.id, (res) => {
+      const errorMessage = Object.values(res)?.[0]?.[4]
+      if (Boolean(errorMessage)) {
+        Alert.alert("Oops!", errorMessage)
+      } else {
+        onValid()
+      }
+    })
+  }
+
+
   function forceEntrance() {
     let dataEntranceIn = []
     let dataEntranceBackIn = []
@@ -77,7 +96,7 @@ export default function m(props: EventTms_in_hall_failedProps): any {
         qr: encodeURIComponent(postGetData.user_qr),
         trx_id: new Date().getTime() + "" + UserClass.state().get()?.id,
         event_id: event_id,
-        gate_id: getData().gate.id,
+        gate_id: getData()?.gate?.id,
         is_tms: 1,
         qty: getQty(),
         tms_id: UserClass.state().get()?.id,
@@ -180,10 +199,10 @@ export default function m(props: EventTms_in_hall_failedProps): any {
               {
                 msgError?.result?.length > 0 && msgError?.result?.map((item: any, i: number) => {
                   return (
-                    <View key={i} style={{ marginBottom: 5, backgroundColor: "#fff", borderRadius: 10, overflow: 'hidden' }}>
+                    <View key={i} style={{ marginHorizontal: 10, marginBottom: 5, backgroundColor: "#fff", borderRadius: 10, overflow: 'hidden' }}>
                       {
                         item.hasOwnProperty("status_label") && item?.status_label != "" &&
-                        <View style={{ backgroundColor: '#37c2d0', padding: 10, }} >
+                        <View style={{ backgroundColor: item?.status_scanned == 1 ? '#37c2d0' : '#ffcb3dff', padding: 10, }} >
                           <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: item?.status == 1 ? item?.status_background : "#fff" }}>{(item?.status_label)?.toUpperCase()}</Text>
                         </View>
                       }
@@ -195,7 +214,7 @@ export default function m(props: EventTms_in_hall_failedProps): any {
                         <View style={{ flex: 2 }}>
                           <Text allowFontScaling={false} style={{ marginBottom: 5, fontWeight: 'bold', textAlign: 'center', fontSize: 14 }}>{esp.lang("event/tms_in_hall_failed", "time")}</Text>
                           {
-                            item?.hall_scanned != "0000-00-00 00:00:00" &&
+                            item.hasOwnProperty("hall_scanned") && item?.hall_scanned != "0000-00-00 00:00:00" &&
                             <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 12 }}>{LibUtils.moment(item?.hall_scanned).localeFormat("DD MMM H:mm:ss ")}</Text>
                           }
                         </View>
@@ -226,7 +245,7 @@ export default function m(props: EventTms_in_hall_failedProps): any {
                   qtyRef.current?.show()
                 } else if (validDataLength == 1) {
                   setQty(1)
-                  forceEntrance()
+                  isGateCheckValid(forceEntrance)
                 }
               })
             }} style={{ marginHorizontal: 20, flex: 1, height: 40, borderRadius: 5, backgroundColor: LibStyle.colorPrimary, justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }} >
@@ -235,16 +254,14 @@ export default function m(props: EventTms_in_hall_failedProps): any {
           </View>
         </UseCondition>
         <View style={{ flexDirection: 'row', width: LibStyle.width - 40, alignItems: 'center', marginVertical: 10, justifyContent: 'space-between' }}>
-          <UseCondition if={msgError?.status_code != 'EV043'}>
-            <Pressable onPress={() => {
-              LibDialog.warningConfirm(esp.lang("event/tms_in_failed", "warn_title"), esp.lang("event/tms_in_failed", "warn_msg"), esp.lang("event/tms_in_failed", "warn_ok"), () => {
-                sendTelegram()
-              }, esp.lang("event/tms_in_failed", "warn_no"), () => { })
+          <Pressable onPress={() => {
+            LibDialog.warningConfirm(esp.lang("event/tms_in_failed", "warn_title"), esp.lang("event/tms_in_failed", "warn_msg"), esp.lang("event/tms_in_failed", "warn_ok"), () => {
+              sendTelegram()
+            }, esp.lang("event/tms_in_failed", "warn_no"), () => { })
 
-            }} style={{ width: (LibStyle.width - 45) * 0.5, height: 40, borderRadius: 5, backgroundColor: LibStyle.colorRed, borderWidth: 3, borderColor: "#fff", justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }}>
-              <Text allowFontScaling={false} style={{ textAlign: 'center', fontWeight: 'bold', color: "#fff" }}>{esp.lang("event/tms_in_hall_failed", "report_error")}</Text>
-            </Pressable>
-          </UseCondition>
+          }} style={{ width: (LibStyle.width - 45) * 0.5, height: 40, borderRadius: 5, backgroundColor: LibStyle.colorRed, borderWidth: 3, borderColor: "#fff", justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }}>
+            <Text allowFontScaling={false} style={{ textAlign: 'center', fontWeight: 'bold', color: "#fff" }}>{esp.lang("event/tms_in_hall_failed", "report_error")}</Text>
+          </Pressable>
           <Pressable onPress={getBack} style={{ width: (LibStyle.width - 45) * 0.5, backgroundColor: LibStyle.colorGreen, height: 40, borderRadius: 5, borderWidth: 5, borderColor: LibStyle.colorGreen, justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...LibStyle.elevation(10) }}>
             <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: "#fff" }}>{esp.lang("event/tms_in_hall_failed", "back")}</Text>
           </Pressable>
@@ -262,7 +279,10 @@ export default function m(props: EventTms_in_hall_failedProps): any {
               <LibIcon.SimpleLineIcons size={40} name='plus' />
             </Pressable>
           </View>
-          <EventButton label='Force Entrance' onPress={() => { forceEntrance() }} />
+          <EventButton label='Force Entrance' onPress={() => {
+            qtyRef.current?.hide()
+            isGateCheckValid(forceEntrance)
+          }} />
         </View>
       </LibSlidingup >
     </View >

package/event/tms_in_log.tsx

@@ -1,12 +1,10 @@
 // withHooks
 import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
-import { EventTms_in_successProperty } from 'esoftplay/cache/event/tms_in_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';
@@ -45,21 +43,21 @@ function Item(props: EntranceLogItem) {
 
 export default function m(props: EventTms_in_logProps): any {
   const log = EventTms_homeProperty.counterState().useSelector(s => s)
-  const backup = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
+  // const backup = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
   const [loading, setLoading] = useSafeState<boolean>(true)
   const timeout = useTimeout()
 
   esp.log({ log });
 
   function syncData() {
-    EventTms_homeProperty.subscribeSync().trigger(EventTms_in_successProperty.syncUsedTiket().get())
+    // EventTms_homeProperty.subscribeSync().trigger(EventTms_in_successProperty.syncUsedTiket().get())
     timeout(() => {
       setLoading(false)
     }, 1000)
   }
 
   function forceSyncData() {
-    EventTms_homeProperty.subscribeSyncReset().trigger(EventTms_in_successProperty.syncUsedTiket().get())
+    // EventTms_homeProperty.subscribeSyncReset().trigger(EventTms_in_successProperty.syncUsedTiket().get())
     timeout(() => {
       setLoading(false)
     }, 1000)
@@ -105,12 +103,12 @@ export default function m(props: EventTms_in_logProps): any {
         }
 
       }} />
-      <Item text={esp.lang("event/tms_in_log", "data_not_send")} subtitle={esp.lang("event/tms_in_log", "data_not_send_to_server")} value={backup.length} valuecolor={LibStyle.colorRed} onPress={() => {
+      <Item text={esp.lang("event/tms_in_log", "data_not_send")} subtitle={esp.lang("event/tms_in_log", "data_not_send_to_server")} value={"0"} valuecolor={LibStyle.colorRed} onPress={() => {
 
       }} />
 
-      <View style={{ marginHorizontal: 15 }} >
-        <UseCondition
+      {/* <View style={{ marginHorizontal: 15 }} > */}
+        {/* <UseCondition
           if={backup.length == 0}
           fallback={
             <Pressable onPress={() => {
@@ -124,9 +122,9 @@ export default function m(props: EventTms_in_logProps): any {
           <LibTextstyle textStyle='callout'
             style={{ textAlign: 'center', marginTop: 10 }}
             text={esp.lang("event/tms_in_log", "all_data_send")} />
-        </UseCondition>
-      </View>
-    </View >
+        </UseCondition> */}
+      {/* </View> */}
+    </View>
   )
 }
 

package/event/tms_in_success.tsx

@@ -1,6 +1,5 @@
 // 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';
@@ -9,8 +8,9 @@ import { UserClass } from 'esoftplay/cache/user/class/import';
 import { useRef } from 'react';
 
 import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { reportApiError } from 'esoftplay/error';
 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';
@@ -24,10 +24,10 @@ export interface EventTms_in_successProps {
 
 }
 
-export const syncUsedTiketState = useGlobalState<any[]>([], { persistKey: 'event_entrance_success_tiket_sync', loadOnInit: true, inFastStorage: true })
-export function syncUsedTiket(): useGlobalReturn<any[]> {
-  return syncUsedTiketState
-}
+// 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: EventTms_in_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)
@@ -108,8 +108,13 @@ export default function m(props: EventTms_in_successProps): any {
       scanned: LibUtils.moment().localeFormat('YYYY-MM-DD HH:mm:ss'),
     }
     EventTms_homeProperty.addCounterEntranceOpenGate(1, selectedTicket?.price_id)
-    syncUsedTiketState.set(LibObject.push(syncUsedTiketState.get(), [url, post])())
-    EventTms_homeProperty.subscribeSync().trigger(syncUsedTiketState.get())
+    new LibCurl(url, post, (res, msg) => {
+      // console.log("SUCCESS CUY", res, msg)
+      // syncUsedTiketState.set(LibObject.push(syncUsedTiketState.get(), [url, post])())
+      // EventTms_homeProperty.subscribeSync().trigger(syncUsedTiketState.get())
+    }, (err) => {
+      reportApiError(url, JSON.stringify({ post, response: err }))
+    })
   }
 
   const widthInterpolate = progress.interpolate({

package/event/tms_log.tsx

@@ -8,7 +8,6 @@ import { EventTms_homeProperty } from 'esoftplay/cache/event/tms_home/import';
 import { EventTms_in_hall_log } from 'esoftplay/cache/event/tms_in_hall_log/import';
 import { EventTms_in_hall_successProperty } from 'esoftplay/cache/event/tms_in_hall_success/import';
 import { EventTms_in_log } from 'esoftplay/cache/event/tms_in_log/import';
-import { EventTms_in_successProperty } from 'esoftplay/cache/event/tms_in_success/import';
 import { EventTms_out_hall_log } from 'esoftplay/cache/event/tms_out_hall_log/import';
 import { EventTms_out_hall_successProperty } from 'esoftplay/cache/event/tms_out_hall_success/import';
 import { EventTms_out_log } from 'esoftplay/cache/event/tms_out_log/import';
@@ -104,8 +103,8 @@ export default function m(props: EventTms_logProps): any {
   const event_id = EventTms_dashboardProperty?.closingDataState()?.get().event_id
   const gate_id = EventTms_dashboardProperty?.closingDataState()?.get().gate_id
 
-  const backupEntrance = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
-  const isStuckEntrance = useDetectStateChange(backupEntrance, 10000)
+  // const backupEntrance = EventTms_in_successProperty.syncUsedTiket().useSelector(s => s)
+  // const useDetectStateChange(backupEntrance, 10000)
 
   const backupExit = EventTms_out_successProperty.syncTicketExit().useSelector(s => s)
   const isStuckExit = useDetectStateChange(backupExit, 10000)
@@ -154,7 +153,7 @@ export default function m(props: EventTms_logProps): any {
 
         // reset counter
         EventTms_homeProperty.counterState().reset()
-        EventTms_in_successProperty.syncUsedTiket().reset()
+        // EventTms_in_successProperty.syncUsedTiket().reset()
         EventTms_out_successProperty.syncTicketExit().reset()
         EventTms_in_hall_successProperty.syncHallIn().reset()
         EventTms_out_hall_successProperty.syncHallOut().reset()
@@ -262,8 +261,8 @@ export default function m(props: EventTms_logProps): any {
         </LibCollaps>
 
       </ScrollView>
-      <UseCondition if={backupExit.length == 0 && backupEntrance.length == 0 && backupHall.length == 0 && backupHall_out.length == 0} fallback={
-        <UseCondition if={isStuckEntrance || isStuckExit || isStuckHall || isStuckHall_out} >
+      <UseCondition if={backupExit.length == 0 && backupHall.length == 0 && backupHall_out.length == 0} fallback={
+        <UseCondition if={isStuckExit || isStuckHall || isStuckHall_out} >
           <View style={{ padding: 10 }}>
             <LibTextstyle textStyle='caption2' text={esp.lang("event/tms_log", "alert")} />
             <EventButton
@@ -272,17 +271,17 @@ export default function m(props: EventTms_logProps): any {
               backgroundColor='#000'
               onPress={() => {
                 LibDialog.confirm(esp.lang("event/tms_log", "send_title"), esp.lang("event/tms_log", "send_msg"), esp.lang("event/tms_log", "send_ok"), () => {
-                  if (backupEntrance.length > 0) {
-                    counter = counter + 1
-                    Storage.setItem('event/tms_in_log_copy_scanned', JSON.stringify(backupEntrance)).then(() => {
-                      sendFileTelegram('event/tms_in_log_copy_scanned', () => {
-                        counterDone = counterDone + 1
-                        if (counter == counterDone) {
-                          closing()
-                        }
-                      })
-                    })
-                  }
+                  // if (backupEntrance.length > 0) {
+                  //   counter = counter + 1
+                  //   Storage.setItem('event/tms_in_log_copy_scanned', JSON.stringify(backupEntrance)).then(() => {
+                  //     sendFileTelegram('event/tms_in_log_copy_scanned', () => {
+                  //       counterDone = counterDone + 1
+                  //       if (counter == counterDone) {
+                  //         closing()
+                  //       }
+                  //     })
+                  //   })
+                  // }
 
                   if (backupExit.length > 0) {
                     counter = counter + 1

package/event/tms_out_hall_failed.tsx

@@ -101,7 +101,7 @@ export default function m(props: EventTms_out_hall_failedProps): any {
                   </View>
                   <View style={{ flex: 1, justifyContent: 'center', paddingVertical: 5 }}>
                     {
-                      item?.scanned != "0000-00-00 00:00:00" &&
+                      item?.hasOwnProperty("scanned") && item?.scanned != "0000-00-00 00:00:00" &&
                       <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 12 }}>{LibUtils.moment(item.hall_scanned).localeFormat("DD MMM H:mm:ss ")}</Text>
                     }
                   </View>

package/event/tms_out_temporary.tsx

@@ -12,12 +12,11 @@ import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
 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 { 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, TouchableOpacity, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 
 
 export interface EventTms_out_temporaryArgs {
@@ -231,7 +230,7 @@ export default function m(props: EventTms_out_temporaryProps): any {
         </View>
       </ScrollView>
       <View style={{ padding: 10, backgroundColor: '#fff' }}>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10, alignContent: 'center', alignItems: 'center' }}>
+        {/* <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 10, alignContent: 'center', alignItems: 'center' }}>
           <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode={'tail'} style={{ flex: 1, fontWeight: 'bold', fontSize: 14, letterSpacing: 1 }}>{esp.lang("event/tms_in_list", "total_ticket_use", result?.list?.filter((it: any) => it.checked == 1).length)}</Text>
           <TouchableOpacity onPress={() => {
             toggleCheckedAll()
@@ -239,7 +238,7 @@ export default function m(props: EventTms_out_temporaryProps): any {
             <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>
+        </View> */}
 
         <EventButton
           label={esp.lang("event/tms_out_temporary", "btn_exit")}

package/event/token_order.tsx

@@ -0,0 +1,103 @@
+// withHooks
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import { useRef } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
+import { EventSection_menu } from 'esoftplay/cache/event/section_menu/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface EventToken_orderArgs {
+
+}
+export interface EventToken_orderProps {
+
+}
+export default function m(props: EventToken_orderProps): any {
+
+  const allStatus = EventOrder_status()
+  const statusCode = LibNavigation.getArgs(props, 'status', esp.isDebug("filter") ? '0,1,2,3,4,5,6,7,10' : '1')
+  const [status, setStatus] = useSafeState(statusCode)
+  const [code, setCode] = useSafeState(statusCode)
+  const [selectedDate, setSelectedDate] = useSafeState({ date_start: '', date_end: '', id: 1, title: esp.lang("event/order", "all_date") })
+  const [selectedDateRange, setSelectedDateRange] = useSafeState({ date_start: LibUtils.moment().localeFormat("YYYY-MM-DD"), date_end: LibUtils.moment().localeFormat("YYYY-MM-DD") })
+
+  const statusRef = useRef<LibSlidingup>(null)
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title='Riwayar Transaksi Token' />
+      <View style={{ minHeight: 50, }} >
+        <LibScroll
+          initialNumToRender={20}
+          horizontal
+        >
+          <View style={{ width: 10 }} />
+          <Pressable
+            onPress={() => { statusRef.current?.show() }}
+            style={applyStyle({ height: 30, marginVertical: 10, marginRight: 10, borderRadius: 12, backgroundColor: 'white', borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' })} >
+            <LibTextstyle textStyle='footnote' text={allStatus[allStatus.findIndex((x) => String(x.code) == status)]?.text || esp.lang("event/order", "all_statis")} style={applyStyle({ fontSize: 11, color: "#4E4E4E", marginRight: 5 })} />
+            <LibIcon name='chevron-down' style={applyStyle({ color: "#4E4E4E" })} />
+          </Pressable>
+        </LibScroll>
+        <EventSection_menu size='line' />
+      </View>
+      <ScrollView>
+        <Pressable onPress={() => {
+
+        }} style={{ padding: 7, margin: 15, marginTop: 10, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{esp.lang("event/order", "wawit")}</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {/* {
+              badge != 0 &&
+              <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{badge > 99 ? "99+" : LibUtils.number(badge)}</Text>
+              </View>
+            } */}
+            <LibIcon name='chevron-right' />
+          </View>
+        </Pressable>
+      </ScrollView>
+      <LibSlidingup ref={statusRef} onChangeShow={(s) => { if (!s) setCode(status) }} >
+        <View style={applyStyle({ backgroundColor: 'white', paddingHorizontal: 17, borderTopLeftRadius: 10, borderTopRightRadius: 10, maxHeight: LibStyle.height * 0.9 })}>
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 15 })}>
+            <Pressable onPress={() => { statusRef.current?.hide() }} style={applyStyle({ marginRight: 10 })} >
+              <LibIcon name='close' />
+            </Pressable>
+            <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "Transaction_Status")} style={applyStyle({ fontWeight: 'bold', fontSize: 14, color: "#4E4E4E" })} />
+          </View>
+          <ScrollView>
+            <Pressable onPress={() => { setCode('0,1,2,3,4,5,6,7,10') }} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+              <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "All_Transaction_Status")} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+              <LibIcon.Ionicons name={code == '0,1,2,3,4,5,6,7,10' ? 'radio-button-on' : 'radio-button-off'} color={code == '0,1,2,3,4,5,6,7,10' ? LibStyle.colorPrimary : '#4E4E4E'} />
+            </Pressable>
+            {
+              allStatus?.filter((item: any) => item.publish == 1).map((it: any, i: number) => {
+                return (
+                  <Pressable key={i} onPress={() => setCode(it.code)} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+                    <LibTextstyle textStyle='footnote' text={it.text} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+                    <LibIcon.Ionicons name={it.code == code ? 'radio-button-on' : 'radio-button-off'} color={it.code == code ? LibStyle.colorPrimary : '#4E4E4E'} />
+                  </Pressable>
+                )
+              })
+            }
+          </ScrollView>
+          <EventButton label={esp.lang("event/order", "apply")} style={applyStyle({ fontSize: 14, marginVertical: 15 })} backgroundColor={LibStyle.colorPrimary} onPress={() => { setStatus(code); statusRef.current?.hide() }} />
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}

package/event/token_payment.tsx

@@ -0,0 +1,79 @@
+// withHooks
+import { BigbangPayment_list } from 'esoftplay/cache/bigbang/payment_list/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventToken_paymentArgs {
+
+}
+export interface EventToken_paymentProps {
+
+}
+export default function m(props: EventToken_paymentProps): any {
+
+  let items = [
+    {
+      id: 1,
+      title: 'ID Card + Token',
+      price: 20000,
+      qty: 1
+    },
+    {
+      id: 2,
+      title: 'Token',
+      price: 7500,
+      qty: 1
+    }
+  ]
+
+  return (
+    <View style={{ flex: 1 }}>
+      <EventHeader title='Beli IDCard/Token' />
+      <ScrollView>
+
+        {
+          items?.map((item: any, i: number) => {
+            return (
+              <View key={i} style={{ ...LibStyle.elevation(3), backgroundColor: '#fff', margin: 15, paddingHorizontal: 10, borderRadius: 5, marginBottom: 0, flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                <View style={{ flex: 2 }}>
+                  <Text allowFontScaling={false}>{item?.title}</Text>
+                  <Text allowFontScaling={false}>{LibUtils.money(item?.price)}</Text>
+                </View>
+                <View style={{ flex: 1 }}>
+                  <View style={{ flexDirection: 'row', marginVertical: 10, alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
+                    <TouchableOpacity onPress={() => { /* min() */ }}>
+                      <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                        <LibIcon name="minus" color="#e74c3c" />
+                      </View>
+                    </TouchableOpacity>
+                    <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 15, marginRight: 15 }}>{item?.qty}</Text>
+                    <TouchableOpacity onPress={() => { /* add(item?.quota, item?.quota_used) */ }}>
+                      <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
+                        <LibIcon name="plus" color="#16a085" />
+                      </View>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+            )
+          })
+        }
+
+        <BigbangPayment_list
+          priceTotal={100000}
+          order_type={1}
+          paymentId={2}
+          onPressPayment={() => {
+
+          }}
+        />
+      </ScrollView>
+    </View>
+  )
+}