esoftplay-event 0.0.0-a

package/event/counter_report_detail.tsx

@@ -0,0 +1,238 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput_rectangle2 } from 'esoftplay/cache/lib/input_rectangle2/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/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 EventCounter_report_detailArgs {
+
+}
+export interface EventCounter_report_detailProps {
+
+}
+
+export interface ReportDetailRenderDetail extends EventCounter_report_detailProps {
+  data: any
+  type: number
+  date_end?: string
+  date_start?: string
+  onPressIncome: () => void
+  onPressExpenditure: () => void
+
+}
+
+export function showValueExtention(type: number, value: any) {
+  if (type == 1) {
+    return LibUtils.number(value)
+  } else {
+    return LibUtils.money(value)
+  }
+}
+
+function RenderDetail(props: ReportDetailRenderDetail) {
+  const { data, type, date_end, date_start } = props
+  let dateRange = LibUtils.moment(date_start).localeFormat("DD-MM-YYYY") == LibUtils.moment(date_end).localeFormat("DD-MM-YYYY") ? esp.lang("event/counter_report_detail", "today") : esp.lang("event/counter_report_detail", "date_start", LibUtils.moment(date_start).localeFormat("DD MMMM YYYY"))
+  return (
+    <View style={{ padding: 10, backgroundColor: LibStyle.colorBgGrey, borderRadius: 10, borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
+
+      <View style={{ backgroundColor: "#fff", marginBottom: 10, borderRadius: 10, padding: 10, flex: 1, justifyContent: 'space-between' }}>
+        <Text allowFontScaling={false} style={{ textAlign: 'left', flexWrap: 'wrap', fontSize: 12 }}>{esp.lang("event/counter_report_detail", "sell", dateRange)}</Text>
+        <Text allowFontScaling={false} style={{ textAlign: 'left', marginTop: 10, fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 18, color: LibStyle.colorGreen }}>{showValueExtention(type, type == 1 ? data?.credit?.transaction?.total : data?.debit?.transaction?.total)}</Text>
+      </View>
+
+      <View style={{ backgroundColor: "#fff", borderRadius: 10, padding: 10, marginBottom: 10 }}>
+        <Text allowFontScaling={false} style={{ textAlign: 'center', flexWrap: 'wrap', fontSize: 12 }}>{esp.lang("event/counter_report_detail", "total_withdraw")}</Text>
+        <Text allowFontScaling={false} style={{ textAlign: 'center', marginTop: 10, fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 24, color: LibStyle.colorBrown }}>{showValueExtention(type, data?.total_withdrawal)}</Text>
+      </View>
+
+      <View style={{ flexDirection: 'row' }}>
+        <View style={{ flex: 1, marginRight: 5, backgroundColor: "#fff", borderRadius: 10, padding: 10 }}>
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 10 }}>
+            <Text allowFontScaling={false} style={{ flex: 1, color: LibStyle.colorGreen, fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 14 }}>{type == 2 ? esp.lang("event/counter_report_detail", "income") : esp.lang("event/counter_report_detail", "ticket_add")}</Text>
+            <TouchableOpacity onPress={props.onPressIncome} style={{ marginLeft: 10 }} >
+              <LibIcon name='arrow-right-circle' color={LibStyle.colorBlue} size={18} />
+            </TouchableOpacity>
+          </View>
+
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 16, color: "#000" }}>{showValueExtention(type, data?.debit?.total)}</Text>
+
+        </View>
+
+        <View style={{ flex: 1, marginLeft: 5, backgroundColor: "#fff", borderRadius: 10, padding: 10 }}>
+          <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 10 }}>
+            <Text allowFontScaling={false} style={{ flex: 1, color: LibStyle.colorRed, fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 14 }}>{type == 2 ? esp.lang("event/counter_report_detail", "outcome") : esp.lang("event/counter_report_detail", "ticket_min")}</Text>
+            <TouchableOpacity onPress={props.onPressExpenditure} style={{ marginLeft: 10 }}>
+              <LibIcon name='arrow-right-circle' color={LibStyle.colorBlue} size={18} />
+            </TouchableOpacity>
+          </View>
+          <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 16, color: "#000" }}>{showValueExtention(type, data?.credit?.total)}</Text>
+        </View>
+      </View>
+
+    </View>
+  )
+}
+
+export default function m(props: EventCounter_report_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const dialogNotes = useRef<ComponentSlidingup>(null)
+  const inputNotes = useRef<LibInput_rectangle2>(null)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (error) => {
+      setError(error)
+    }, 1)
+  }
+  
+  function confirmReport(url: string, event_id: any, user_id: any) {
+    LibDialog.confirm(esp.lang("event/counter_report_detail", "report_title"), esp.lang("event/counter_report_detail", "report_msg"), esp.lang("event/counter_report_detail", "report_confirm"), () => {
+      LibProgress.show(esp.lang("event/counter_report_detail", "report_wait"))
+      let post = {
+        event_id: event_id,
+        user_id: user_id,
+        notes: inputNotes.current?.getText()
+      }
+      new LibCurl(url, post, (res, msg) => {
+        LibProgress.hide()
+        LibNavigation.back()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_report_detail", "report_failed"), error?.message)
+        LibProgress.hide()
+      }, 1)
+    }, esp.lang("event/counter_report_detail", "report_cancel"), () => {
+
+    })
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  if (error) {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <ComponentHeader title={esp.lang("event/counter_report_detail", "header_error")} />
+        <ComponentMessage message={error?.message} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/counter_report_detail", "header_title")} subtitle={esp.lang("event/counter_report_detail", "header_subtitle", result?.user?.name)} />
+      <ScrollView>
+        <View style={{ backgroundColor: '#fff', padding: 10, margin: 15, borderRadius: 10, ...LibStyle.elevation(2) }}>
+          <View style={{ flexDirection: 'row', marginBottom: 10, justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <View style={{ height: 50, width: 50, borderRadius: 10, backgroundColor: '#fff', ...LibStyle.elevation(10) }}>
+                <LibPicture source={{ uri: result?.user?.image }} style={{ height: 50, width: 50, borderRadius: 10 }} />
+              </View>
+              <View style={{ marginLeft: 10, marginRight: 15, }}>
+                <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 16, flexWrap: 'wrap' }}>{result?.user?.name}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', fontWeight: 'normal', color: '#CECED3', fontSize: 12, flexWrap: 'wrap' }}>{result?.user?.email}</Text>
+              </View>
+            </View>
+          </View>
+
+          <View style={{ flexDirection: 'row', borderRadius: 5, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, padding: 10, paddingBottom: 5, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
+            <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000" }}>{esp.lang("event/counter_report_detail", "money")}</Text>
+          </View>
+
+          <RenderDetail
+            data={result?.money}
+            date_end={result?.date_end}
+            date_start={result?.date_start}
+            type={2}
+            onPressExpenditure={() => {
+              LibNavigation.navigate('event/counter_report_breakdown', { data: result?.money?.credit, type: 2 })
+            }}
+            onPressIncome={() => {
+              LibNavigation.navigate('event/counter_report_breakdown', { data: result?.money?.debit, type: 2 })
+            }}
+          />
+
+          {
+            result?.tickets?.length > 0 && result?.tickets?.map((item: any, i: number) => {
+              return (
+                <>
+                  <View style={{ marginTop: 15, flexDirection: 'row', borderRadius: 5, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, padding: 10, paddingBottom: 5, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
+                    <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000" }}>{item.title}</Text>
+                  </View>
+                  <RenderDetail
+                    data={item}
+                    date_end={result?.date_end}
+                    date_start={result?.date_start}
+                    type={1}
+                    onPressExpenditure={() => {
+                      LibNavigation.navigate('event/counter_report_breakdown', { data: item?.credit, type: 1 })
+                    }}
+                    onPressIncome={() => {
+                      LibNavigation.navigate('event/counter_report_breakdown', { data: item?.debit, type: 1 })
+                    }}
+                  />
+                </>
+              )
+            })
+          }
+
+        </View>
+
+      </ScrollView>
+      <View style={{ padding: 10 }}>
+        <ComponentButton label={esp.lang("event/counter_report_detail", "send_daily_report")} onPress={() => {
+          // confirmReport(result?.url_confirm, result?.event_id, result?.user_id)
+          dialogNotes.current?.show()
+        }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' />
+      </View>
+
+      {/* dialog notes */}
+      <ComponentSlidingup ref={dialogNotes}>
+        <View style={{ backgroundColor: '#f6f6f6', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingHorizontal: 19, }}>
+          <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("event/counter_report_detail", "notes")}</Text>
+
+          <LibInput_rectangle2
+            ref={inputNotes}
+            keyboardType="default"
+            returnKeyType="go"
+            placeholder={esp.lang("cashier/invoice", "label_note")}
+            maxLength={150}
+            onSubmitEditing={() => {
+              // inputNotes.current?.blur()
+              // dialogUser.current?.show()
+            }}
+            inputStyle={{ marginTop: 10, height: 70, textAlignVertical: 'top' }} style={{ height: 70, textAlignVertical: 'top', borderRadius: 4 }} multiline />
+
+          <ComponentButton label={esp.lang("event/counter_report_detail", "send")} onPress={() => {
+            confirmReport(result?.url_confirm, result?.event_id, result?.user_id)
+          }} backgroundColor={LibStyle.colorPrimary} fontColor='#000' style={{ marginTop: 25, marginBottom: 20 }} />
+
+        </View>
+      </ComponentSlidingup>
+
+    </View>
+  )
+}

package/event/counter_report_detail_list.tsx

@@ -0,0 +1,56 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventCounter_report_detail_listArgs {
+
+}
+export interface EventCounter_report_detail_listProps {
+
+}
+export default function m(props: EventCounter_report_detail_listProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/counter_report_detail_list", "header_title")} />
+      <LibInfinite
+        url={url}
+
+        errorView={(error: any) => {
+          return (
+            <ComponentMessage message={error} />
+          )
+        }}
+        renderItem={(item) => {
+          return (
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10, borderBottomWidth: 0.3, borderBottomColor: '#717171' }}>
+              <View style={{ flex: 3 }}>
+                <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 12, color: "#000" }}>{item.title}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: 'SFProText', fontSize: 10 }}>{LibUtils.moment(item.created).serverFormat("DD MMM YYYY HH:mm")}</Text>
+              </View>
+              <View style={{ flex: 1, marginLeft: 10, }}>
+                <Text allowFontScaling={false} style={{ textAlign: 'right', fontFamily: 'SFProText', fontWeight: 'bold', fontSize: 12, color: "#000" }}>{LibUtils.money(item.hasOwnProperty('amount') ? item.amount : item.price)}</Text>
+                {
+                  item.hasOwnProperty('qty') &&
+                  <>
+                    <Text allowFontScaling={false} style={{ textAlign: 'right', fontFamily: 'SFProText', fontSize: 10 }}>{esp.lang("event/counter_report_detail_list", "qty", LibUtils.number(item.qty))}</Text>
+                    <Text allowFontScaling={false} style={{ textAlign: 'right', marginTop: 4, fontFamily: 'SFProText', fontSize: 14 }}>{LibUtils.money(item.total)}</Text>
+                  </>
+                }
+              </View>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}

package/event/counter_request.tsx

@@ -0,0 +1,136 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
+import { EventCounter_status } from 'esoftplay/cache/event/counter_status/import';
+import { EventCounter_type } from 'esoftplay/cache/event/counter_type/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
+import { useTimeout } from 'esoftplay/timeout';
+
+import React, { useEffect, useRef } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_requestArgs {
+
+}
+export interface EventCounter_requestProps {
+
+}
+
+function Status(props: any) {
+  const tabRef = useRef<LibScroll>(null)
+  const allStatus = EventCounter_status()
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    if (props.status != 1)
+      timeout(() => {
+        tabRef?.current?.scrollToIndex?.(allStatus.map((s) => s.code).indexOf(props.status) - 1)
+      }, 500);
+  }, [])
+
+  function renderStatus(status: any, index: number) {
+    return (
+      <TouchableOpacity
+        key={index}
+        onPress={() => props.onChangeStatus(status.code)}
+        style={{ height: 32, marginVertical: 10, marginRight: 10, borderRadius: 20, backgroundColor: props.status == status.code ? props.colorTheme : 'transparent', borderColor: props.status == status.code ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
+        <LibTextstyle textStyle='footnote' text={status.text} style={{ color: props.status == status.code ? "white" : "#4E4E4E" }} />
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ minHeight: 50 }} >
+      <LibScroll
+        ref={tabRef}
+        initialNumToRender={20}
+        horizontal>
+        <View style={{ width: 10 }} />
+        {
+          allStatus.map(renderStatus)
+        }
+      </LibScroll>
+      {/* <MarketSection_menu size='line' /> */}
+    </View>
+  )
+}
+
+const subs = useGlobalSubscriber()
+export function subscribe(): UseSubscribeReturn {
+  return subs
+}
+export default function m(props: EventCounter_requestProps): any {
+  const { event_id, status_user } = LibNavigation.getArgsAll(props)
+  const active_tab = LibNavigation.getArgs(props, 'active_tab', 1)
+  const [activeTab, setActiveTab] = useSafeState<any>(active_tab)
+  const type = EventCounter_type()
+  const ref = useRef<LibInfinite>(null)
+
+  const statusCode = LibNavigation.getArgs(props, 'status', 1)
+  const [status, setStatus] = useSafeState(statusCode)
+
+  let a = status_user == 1 ? 'event_eo_ticket_request?event_id=' + event_id + '&status=' + status : status_user == 2 ? 'event_manager_ticket_request?event_id=' + event_id + '&status=' + status : 'event_seller_ticket_request?event_id=' + event_id + '&status=' + status
+
+  let b = status_user == 1 ? 'event_eo_money_request?event_id=' + event_id + '&status=' + status : status_user == 2 ? 'event_manager_money_request?event_id=' + event_id + '&status=' + status : 'event_seller_money_request?event_id=' + event_id + '&status=' + status
+
+  let url = activeTab == 1 ? a : b
+  let colorTheme = status_user == 1 ? "#009AE4" : status_user == 2 ? "#00AA43" : "#6A0740"
+
+  function renderType(item: any, i: number) {
+    return (
+      <Pressable key={i} onPress={() => {
+        setActiveTab(item.id)
+      }} style={{ ...LibStyle.elevation(item.id == activeTab ? 3 : 0), flex: 1, padding: 7, backgroundColor: item.id == activeTab ? "#fff" : "#EEF1F8", borderRadius: 10 }}>
+        <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == activeTab ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == activeTab ? "#000" : "#aab0b7" }}>{item.title}</Text>
+      </Pressable>
+    )
+  }
+
+  function renderItem(item: any, i: number) {
+    return (
+      <EventCounter_history_item key={i} item={item} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: status_user })} is_ticket={activeTab == 1 ? true : false} />
+    )
+  }
+
+  subs.useSubscribe(() => {
+    ref.current?.loadData?.()
+  })
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/counter_request", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_request", "sub_eo") : status_user == 2 ? esp.lang("event/counter_request", "sub_lm") : esp.lang("event/counter_request", "sub_cashier")} />
+      <Status status={status} onChangeStatus={setStatus} colorTheme={colorTheme} />
+
+      <LibInfinite
+        ref={ref}
+        url={url}
+        key={activeTab + " " + status}
+        errorView={(error: any) => {
+          return (
+            <View style={{ margin: 15, borderRadius: 15, marginBottom: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
+              <ComponentMessage message={error} />
+            </View>
+          )
+        }}
+        style={{ margin: 15, marginTop: 10, borderRadius: 15, backgroundColor: '#fff', }}
+        ListHeaderComponent={
+          <View style={{ flexDirection: 'row', borderRadius: 10, padding: 3, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
+            {
+              type.map(renderType)
+            }
+          </View>
+        }
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}

package/event/counter_request_detail.tsx

@@ -0,0 +1,211 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentQr_bg } from 'esoftplay/cache/component/qr_bg/import';
+import { EventCounter_requestProperty } from 'esoftplay/cache/event/counter_request/import';
+import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+
+import LottieView from "lottie-react-native";
+import React, { useEffect, useRef } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+
+export interface EventCounter_request_detailArgs {
+
+}
+export interface EventCounter_request_detailProps {
+
+}
+export default function m(props: EventCounter_request_detailProps): any {
+  let { url, status_user } = LibNavigation.getArgsAll(props)
+  const user = UserClass.state().get()
+  const [result, setResult] = useSafeState<any>()
+  const animation = useRef<LottieView>(null)
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    loadData()
+    LibAutoreload.set(() => {
+      loadData()
+    })
+    return () => LibAutoreload.clear()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+      timeout(() => {
+        animation.current?.play()
+      }, 300);
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/counter_request_detail", "load_failed"), error?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function acceptRequest(url: string) {
+    LibDialog.confirm(esp.lang("event/counter_request_detail", "acc_title"), esp.lang("event/counter_request_detail", "acc_msg"), esp.lang("event/counter_request_detail", "acc_confirm"), () => {
+      LibProgress.show(esp.lang("event/counter_request_detail", "acc_wait"))
+      new LibCurl(url, null, (res, msg) => {
+        EventCounter_requestProperty.subscribe().trigger()
+        LibProgress.hide()
+        LibDialog.info(esp.lang("event/counter_request_detail", "acc_ok"), msg)
+        LibNavigation.back()
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/counter_request_detail", "acc_no"), error?.message)
+      }, 1)
+    }, esp.lang("event/counter_request_detail", "acc_cancel"), () => {
+
+    })
+  }
+
+  function cancelRequest(url: string) {
+    LibDialog.confirm(esp.lang("event/counter_request_detail", "cancel_title"), esp.lang("event/counter_request_detail", "cancel_msg"), esp.lang("event/counter_request_detail", "cancel_confirm"), () => {
+      LibProgress.show(esp.lang("event/counter_request_detail", "cancel_wait"))
+      new LibCurl(url, null, (res, msg) => {
+        EventCounter_requestProperty.subscribe().trigger()
+        LibProgress.hide()
+        LibDialog.info(esp.lang("event/counter_request_detail", "cancel_ok"), msg)
+        LibNavigation.back()
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/counter_request_detail", "cancel_no"), error?.message)
+      }, 1)
+    }, esp.lang("event/counter_request_detail", "cancel_cancel"), () => {
+
+    })
+  }
+
+  if (!result) {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <ComponentHeader title={esp.lang("event/counter_request_detail", "header_loading")} />
+        <LibLoading />
+      </View>
+    )
+  }
+
+  let isCoEo = user?.is_eo?.length > 0 && user?.is_eo?.find((item: any, i: number) => item.id == result?.event_id)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/counter_request_detail", "header_title")} />
+
+      <LibScroll onRefresh={loadData}>
+        <View style={{ margin: 15, padding: 15, ...LibStyle.elevation(2), borderRadius: 5, backgroundColor: '#fff', }}>
+          <View style={{ alignItems: 'center' }} >
+            <Text allowFontScaling={false} style={{ marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: result?.status == 1 ? '#e99222' : result?.status == 2 ? '#57d24e' : result?.status == 3 ? '#c53030' : '#091440' }}>{
+              result?.status == 1 ? esp.lang("event/counter_request_detail", "status_1") : result?.status == 2 ? esp.lang("event/counter_request_detail", "status_2") : result?.status == 3 ? esp.lang("event/counter_request_detail", "status_3") : esp.lang("event/counter_request_detail", "status_expired")
+            }</Text>
+
+            <LottieView
+              ref={animation}
+              loop={false}
+              style={{
+                width: 150,
+                height: 150,
+              }}
+              source={esp.assets(result?.status == 1 ? 'pending.json' : result?.status == 2 ? 'success.json' : result?.status == 3 ? 'canceled.json' : 'expired.json')}
+            // OR find more Lottie files @ https://lottiefiles.com/featured
+            // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
+            />
+          </View>
+          <Text style={{ alignSelf: 'center', textAlign: 'center', fontFamily: 'ArialBold', fontSize: 17, marginTop: 10, color: '#4a4a4a' }} >{result?.title}</Text>
+          <Text style={{ alignSelf: 'center', textAlign: 'center', fontFamily: 'Arial', fontSize: 13, marginTop: 15, color: '#999' }} >{LibUtils.moment(result?.created).serverFormat('dddd, DD MMMM YYYY HH:mm')}</Text>
+          {
+            result?.amount != 0 &&
+            <Text style={{ alignSelf: 'center', textAlign: 'center', fontFamily: 'ArialBold', fontSize: 25, marginTop: 10, color: LibStyle.colorPrimary }} >{esp.lang("event/counter_request_detail", "all_ticket", result?.hasOwnProperty("saldo") ? LibUtils.money(result?.amount) : LibUtils.number(result?.amount))}</Text>
+          }
+
+          <LibTextstyle text={esp.lang("event/counter_request_detail", "text_from")} textStyle="m_overline" style={{ color: '#999', marginTop: 20 }} />
+          <View style={{ flexDirection: 'row', marginTop: 5, alignItems: 'center' }} >
+            <LibPicture style={{ height: 40, width: 40, borderRadius: 20, backgroundColor: '#f1f2f3', marginRight: 20 }} source={result?.sender_image == "" ? esp.assets('icons/ic_no_image_merchant.png') : { uri: result?.sender_image }} />
+            <View style={{ flex: 1 }} >
+              <LibTextstyle text={result?.sender_name} textStyle={'body'} />
+            </View>
+          </View>
+          <LibTextstyle text={esp.lang("event/counter_request_detail", "text_receiver")} textStyle="m_overline" style={{ color: '#999', marginTop: 15 }} />
+          <View style={{ flexDirection: 'row', marginTop: 5, alignItems: 'center' }} >
+            <LibPicture style={{ height: 40, width: 40, borderRadius: 20, backgroundColor: '#f1f2f3', marginRight: 20 }} source={result?.receiver_image == "" ? esp.assets('icons/ic_no_image_merchant.png') : { uri: result?.receiver_image }} />
+            <View style={{ flex: 1 }} >
+              <LibTextstyle text={result?.receiver_name} textStyle={'body'} />
+              {
+                LibUtils.checkUndefined(result, 'receiver_account') &&
+                <LibTextstyle text={result?.receiver_account} textStyle={'footnote'} style={{ color: "#888" }} />
+              }
+            </View>
+          </View>
+          {
+            result.notes != '' &&
+            <>
+              <LibTextstyle text={esp.lang("event/counter_request_detail", "message")} textStyle="m_overline" style={{ color: '#999', marginTop: 30, marginBottom: 5, }} />
+              <LibTextstyle text={result.notes} textStyle={'body'} style={{}} />
+            </>
+          }
+          {
+            result?.hasOwnProperty("info") && result?.info != '' &&
+            <View style={{ flexDirection: 'row', borderRadius: 10, backgroundColor: '#FEFBEB', borderColor: "#FFCC29", borderWidth: 1, borderStyle: 'dashed', alignContent: 'center', alignItems: 'center', flex: 1, marginTop: 15, padding: 10 }} >
+              <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }} >{result?.info}</Text>
+
+            </View>
+          }
+
+          {
+            (result?.sender_id == user?.id || isCoEo?.eo_id == result?.sender_id) && (result?.sender_type == status_user) && result?.status == 1 &&
+            <>
+              <View style={{ borderRadius: 10, backgroundColor: '#FEFBEB', borderColor: "#FFCC29", borderWidth: 1, borderStyle: 'dashed', alignContent: 'center', alignItems: 'center', flex: 1, marginTop: 15, padding: 10 }}>
+                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }} >{esp.lang("event/counter_request_detail", "msg_scan", result?.title)}</Text>
+              </View>
+              <ComponentQr_bg>
+                <View style={{ margin: 15, alignSelf: 'center' }}>
+                  <QRCode ecl="H" size={LibStyle.width - 60} value={result?.url_receiver} />
+                </View>
+              </ComponentQr_bg>
+            </>
+          }
+        </View>
+        <View />
+      </LibScroll>
+
+      <View style={{ padding: 10 }}>
+
+        {
+          (result?.receiver_id == user?.id || isCoEo?.eo_id == result?.receiver_id) && (!status_user || result?.receiver_type == status_user) && result?.status == 1 ?
+            <TouchableOpacity onPress={() => {
+              acceptRequest(result?.url_accept)
+            }} >
+              <View style={{ width: LibStyle.width - 20, backgroundColor: LibStyle.colorGreen, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' }} >
+                <Text style={{ color: 'white', fontFamily: 'ArialBold', fontSize: 13 }} >{esp.lang("event/counter_request_detail", "btn_accept")}</Text>
+              </View>
+            </TouchableOpacity>
+            :
+            (result?.sender_id == user?.id || isCoEo?.eo_id == result?.sender_id) && (result?.sender_type == status_user) && result?.status == 1 &&
+            <TouchableOpacity onPress={() => {
+              cancelRequest(result?.url_cancel)
+            }} >
+              <View style={{ width: LibStyle.width - 20, backgroundColor: LibStyle.colorRed, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' }} >
+                <Text style={{ color: 'white', fontFamily: 'ArialBold', fontSize: 13 }} >{esp.lang("event/counter_request_detail", "btn_cancel")}</Text>
+              </View>
+            </TouchableOpacity>
+        }
+
+      </View>
+
+    </View>
+  )
+}