esoftplay-event 0.0.0-a

package/event/counter_lm.tsx

@@ -0,0 +1,273 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { EventCounter_eoProperty } from 'esoftplay/cache/event/counter_eo/import';
+import { EventCounter_history_item } from 'esoftplay/cache/event/counter_history_item/import';
+import { EventCounter_info } from 'esoftplay/cache/event/counter_info/import';
+import { EventCounter_menu } from 'esoftplay/cache/event/counter_menu/import';
+import { EventCounter_section } from 'esoftplay/cache/event/counter_section/import';
+import { EventCounter_user_list_item } from 'esoftplay/cache/event/counter_user_list_item/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibFocus } from 'esoftplay/cache/lib/focus/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 { UserPopup } from 'esoftplay/cache/user/popup/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import React, { useEffect, useRef } from 'react';
+import { Pressable, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_lmArgs {
+
+}
+export interface EventCounter_lmProps {
+
+}
+export default function m(props: EventCounter_lmProps): any {
+  const { is_manager } = LibNavigation.getArgsAll(props)
+  const dialogAdd = useRef<ComponentSlidingup>(null)
+  const dialogUser = useRef<ComponentSlidingup>(null)
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  const [email, setEmail] = useSafeState<string>('')
+
+  const [result, setResult] = useSafeState<any>()
+  const [typeCashier, setTypeCashier] = useSafeState<any>();
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_event')
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl('event_manager_home?event_id=' + is_manager?.id, null, (res, msg) => {
+      setResult(res)
+      setRefreshing(false)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/counter_lm", "load_failed"), error?.message)
+      LibNavigation.back()
+      setRefreshing(false)
+    }, 1)
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+  }
+
+  function addCashier() {
+    if (!typeCashier) {
+      LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+      return
+    }
+
+    let post = {
+      event_id: is_manager?.id,
+      email: email.trim(),
+      is_digital: typeCashier.id
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_lm", "cashier_title"), esp.lang("event/counter_lm", "cashier_msg"), esp.lang("event/counter_lm", "cashier_confirm"), () => {
+      new LibCurl('event_seller_edit', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_lm", "cashier_ok"), msg)
+        loadData()
+        dialogUser.current?.hide()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_lm", "cashier_failed"), error?.message)
+        dialogUser.current?.hide()
+      }, 1)
+    }, esp.lang("event/counter_lm", "cashier_cancel"), () => { })
+
+  }
+
+  function deleteCashier(_email: string) {
+    let post = {
+      event_id: is_manager?.id,
+      email: _email.trim()
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_lm", "delete_title"), esp.lang("event/counter_lm", "delete_msg"), esp.lang("event/counter_lm", "delete_confirm"), () => {
+      new LibCurl('event_seller_delete', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_lm", "delete_ok"), msg)
+        loadData()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_lm", "delete_failed"), error?.message)
+      }, 1)
+    }, esp.lang("event/counter_lm", "delete_cancel"), () => { })
+  }
+
+  if (!result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  function renderMoneyRequest(item: any, i: number) {
+    return (
+      <View key={i} style={styleId_ZEwY6z}>
+        <EventCounter_history_item item={item} is_ticket={false} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 2 })} />
+      </View>
+    )
+  }
+
+  function renderTicketRequest(item: any, i: number) {
+    return (
+      <View key={i} style={styleId_ZEwY6z}>
+        <EventCounter_history_item item={item} is_ticket={true} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 2 })} />
+      </View>
+    )
+  }
+
+  function renderSeller(item: any, i: number) {
+    return (
+      <EventCounter_user_list_item {...item} key={i} showDelete={is_manager?.add_tms == 1 ? true : false} onDelete={() => { deleteCashier(item.email) }} />
+    )
+  }
+
+  function renderTypeCashier(item: any, i: number) {
+    const styleId_Z23v85x: any = { marginLeft: 5, flexWrap: 'wrap', fontFamily: 'SFProText', color: Number(item.debit) == 0 ? "#717171" : "#000" }
+    const styleId_1eMW7i: any = { marginBottom: 5, marginTop: 5, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }
+    return (
+      <Pressable key={i} onPress={() => {
+        setTypeCashier(item)
+      }} style={styleId_1eMW7i} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
+        <LibIcon name={item.id == typeCashier?.id ? "radiobox-marked" : "radiobox-blank"} color={item.id == typeCashier?.id ? "#009AE4" : "#000"} />
+        <Text allowFontScaling={false} style={styleId_Z23v85x}>{item.title}</Text>
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/counter_lm", "header_title")} subtitle={is_manager?.name} bgColor={"#00AA43"} titleColor="#fff" notif />
+      <LibFocus onFocus={loadData} />
+      {/* status_user 1 EO, 2 LM, 3 Seller */}
+      {/* user_type kenapa 3, karena untuk menambahkan Kasir */}
+      <EventCounter_menu colorTheme={"#00AA43"} event_id={is_manager?.id} user_type={3} status_user={2} />
+      <ScrollView style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+        {/* active balance */}
+        <EventCounter_info colorTheme={"#00AA43"} amount={result?.money} ticket={result?.ticket} event_id={is_manager?.id} status_user={2} />
+
+        {/* request */}
+        {
+          result?.money_request?.length > 0 &&
+          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_manager?.id, status_user: 2 }) }} title={esp.lang("event/counter_lm", "recent_money")} />
+        }
+        {
+          result?.money_request?.length > 0 && result?.money_request?.map(renderMoneyRequest)
+        }
+
+        {
+          result?.ticket_request?.length > 0 &&
+          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_manager?.id, status_user: 2 }) }} title={esp.lang("event/counter_lm", "recent_ticket")} />
+        }
+        {
+          result?.ticket_request?.length > 0 && result?.ticket_request?.map(renderTicketRequest)
+        }
+
+
+        {/* Kasir */}
+        <EventCounter_section icon="plus-circle" showIcon={is_manager?.add_tms == 1 ? true : false} onPress={() => { dialogAdd.current?.show() }} title={esp.lang("event/counter_lm", "cashier")} />
+
+        {
+          result?.seller?.map(renderSeller)
+        }
+
+        {
+          result?.seller?.length == 0 &&
+          <View style={{ margin: 15, marginTop: 0, borderRadius: 15, overflow: 'hidden' }}>
+            <ComponentMessage message={esp.lang("event/counter_lm", "cashier_empty")} />
+          </View>
+        }
+
+        {
+          result?.seller?.length > 9 &&
+          <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_user_list', { event_id: is_manager?.id, status_user: 2 }) }} style={{ marginTop: 15, justifyContent: 'center', alignSelf: 'center', width: 104, height: 23, borderRadius: 11.5, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#e1e1e1" }}>
+            <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("event/counter_lm", "show_adll")}</Text>
+          </TouchableOpacity>
+
+        }
+
+      </ScrollView>
+
+      <ComponentSlidingup ref={dialogAdd}>
+        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
+          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
+          <View style={{ margin: 15 }}>
+            <ComponentLabel_input label={esp.lang("event/counter_eo", "label_email")} />
+
+            <LibInput_rectangle
+              autoCapitalize="none"
+              onChangeText={(t) => {
+                LibUtils.debounce(() => {
+                  setEmail(t)
+                }, 500)
+              }}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 15, }}
+              keyboardType="email-address"
+              placeholder={esp.lang("event/counter_lm", "email")}
+              onSubmitEditing={() => {
+                if (EventCounter_eoProperty.checkEmail(email.trim())) {
+                  if (!typeCashier) {
+                    LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+                  } else {
+                    dialogAdd.current?.hide()
+                    dialogUser.current?.show()
+                  }
+                }
+              }}
+            />
+
+            <ComponentLabel_input label={esp.lang("event/counter_lm", "label_type")} />
+            <View style={{ backgroundColor: '#fff', padding: 10, paddingLeft: 0, borderRadius: 15, marginBottom: 0, flexDirection: 'row', flexWrap: 'wrap' }}>
+
+              {
+                bboConfig?.event?.cashier_type?.map(renderTypeCashier)
+              }
+            </View>
+
+            <ComponentButton label={esp.lang("event/counter_lm", "btn_next")} style={{ borderRadius: 15, marginTop: 20 }} backgroundColor={email == "" ? LibStyle.colorGrey : "#00AA43"} onPress={() => {
+              if (EventCounter_eoProperty.checkEmail(email.trim())) {
+                if (!typeCashier) {
+                  LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+                } else {
+                  dialogAdd.current?.hide()
+                  dialogUser.current?.show()
+                }
+
+              }
+            }} />
+          </View>
+        </View>
+      </ComponentSlidingup>
+
+      <ComponentSlidingup ref={dialogUser}>
+        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
+          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
+          <UserPopup email={email.trim()} redirect={() => {
+            addCashier()
+          }} cancel={() => {
+            dialogUser.current?.hide()
+          }} />
+        </View>
+      </ComponentSlidingup>
+
+    </View >
+  )
+}
+const styleId_ZEwY6z: any = { margin: 15, marginTop: 0, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }

package/event/counter_menu.tsx

@@ -0,0 +1,85 @@
+// withHooks
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_menuArgs {
+
+}
+export interface EventCounter_menuProps {
+  colorTheme: string,
+  event_id: any,
+  user_type?: number,
+  status_user?: number
+}
+export default function m(props: EventCounter_menuProps): any {
+
+  let arrMenu = [
+    {
+      title: esp.lang("event/counter_menu", "menu_send"),
+      icon: "send",
+      show: 1,
+      navigate: "event/counter_send",
+    },
+    {
+      title: esp.lang("event/counter_menu", "menu_approve"),
+      icon: "download-box-outline",
+      show: 1,
+      navigate: 'event/counter_request',
+    },
+    {
+      title: esp.lang("event/counter_menu", "menu_history"),
+      icon: "history",
+      show: 1,
+      navigate: "event/counter_history"
+    },
+    {
+      title: esp.lang("event/counter_menu", "menu_scan"),
+      icon: "qrcode-scan",
+      show: 1,
+      navigate: 'component/scanner'
+    },
+    // {
+    //   title: esp.lang("event/counter_menu", "menu_report"),
+    //   icon: "book-lock",
+    //   show: props.status_user == 2 ? 1 : 0,
+    //   navigate: 'event/counter_report'
+    // },
+  ]
+
+  const styleId_brLTP: any = { paddingBottom: 30, padding: 15, backgroundColor: props.colorTheme, flexDirection: 'row', justifyContent: 'space-between' }
+
+  function renderMenu(item: any, i: number) {
+    return (
+      <TouchableOpacity onPress={() => {
+        LibNavigation.navigate(item.navigate, {
+          event_id: props.event_id,
+          fromPage: 'event/counter_eo',
+          user_type: props?.user_type,
+          status_user: props?.status_user
+        })
+      }} key={i} style={styleId_ZmGELw}>
+        <View style={styleId_86CJp}>
+          <LibIcon name={item.icon} style={styleId_1ovWUw} color="#fff" />
+        </View>
+        <Text allowFontScaling={false} style={styleId_Z1QT107}>{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={styleId_brLTP}>
+      {
+        arrMenu.filter((x: any) => x.show == 1).map(renderMenu)
+      }
+    </View>
+  )
+}
+const styleId_ZmGELw: any = { flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }
+const styleId_86CJp: any = { backgroundColor: 'rgba( 255, 255, 255, 0.40 )', padding: 15, borderRadius: 10 }
+const styleId_1ovWUw: any = { opacity: 1 }
+const styleId_Z1QT107: any = { height: 30, textAlign: 'center', fontFamily: 'SFProText', margin: 10, marginTop: 5, color: '#fff', marginBottom: 0, fontSize: 10 }

package/event/counter_report.tsx

@@ -0,0 +1,105 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/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 { 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 } from 'react';
+import { KeyboardAvoidingView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_reportArgs {
+
+}
+export interface EventCounter_reportProps {
+
+}
+export default function m(props: EventCounter_reportProps): any {
+
+  const { event_id, status_user } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl("event_manager_seller_ticket&event_id=" + event_id, null, (res, msg) => {
+      setResult(res)
+    }, (error) => {
+      setError(error)
+    }, 1)
+  }
+
+  function renderItem(item: any, i: number) {
+    return (
+      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate('event/counter_report_detail', { url: item.url }) }} style={styleId_2eynEH}>
+        <View style={styleId_1AVyQt}>
+          <View style={styleId_1C9dY0}>
+            <LibPicture source={{ uri: item.image }} style={styleId_ZXW56z} resizeMode="cover" />
+          </View>
+          <View style={styleId_Nnnug}>
+            <Text allowFontScaling={false} style={styleId_Z2nlhWI}>{item.name}</Text>
+            <Text allowFontScaling={false} style={styleId_Z15uvuH}>{item.email}</Text>
+          </View>
+
+        </View>
+        <LibIcon name={"chevron-right-circle-outline"} />
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#EEF1F8" }}>
+      <ComponentHeader title={esp.lang("event/counter_report", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_report", "sub_eo") : status_user == 2 ? esp.lang("event/counter_report", "sub_lm") : esp.lang("event/counter_report", "sub_cashier")} />
+      <KeyboardAvoidingView style={{ flex: 1 }}>
+        <LibList
+          data={result}
+          onRefresh={loadData}
+          ListHeaderComponent={() => {
+            return (
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 15, paddingBottom: 0 }}>
+                <View />
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#000" }}>{LibUtils.getCurrentDateTime("DD MMMM YYYY")}</Text>
+              </View>
+            )
+          }}
+          ListEmptyComponent={() => {
+            if (error) {
+              return (
+                <View style={{ margin: 15, borderRadius: 15, marginBottom: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
+                  <ComponentMessage message={error?.message} />
+                </View>
+              )
+            } else {
+              return (
+                <View style={{ flex: 1, height: LibStyle.height - (LibStyle.STATUSBAR_HEIGHT + 60), alignContent: 'center', alignItems: 'center', alignSelf: 'center', justifyContent: 'center' }}>
+                  <LibLoading />
+                </View>
+              )
+            }
+          }}
+          renderItem={renderItem}
+        />
+
+      </KeyboardAvoidingView>
+    </View>
+  )
+}
+
+const styleId_Z2nlhWI: any = { flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }
+const styleId_Z15uvuH: any = { flexWrap: 'wrap', fontWeight: 'normal', fontSize: 10 }
+const styleId_ZXW56z: any = { height: 50, width: 50, borderRadius: 10 }
+const styleId_2eynEH: any = { margin: 15, marginBottom: 2, padding: 10, justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', flexDirection: 'row', borderRadius: 15, backgroundColor: '#fff', ...LibStyle.elevation(2) }
+const styleId_1AVyQt: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center' }
+const styleId_1C9dY0: any = { height: 50, width: 50, borderRadius: 10, backgroundColor: '#fff', ...LibStyle.elevation(10) }
+const styleId_Nnnug: any = { marginLeft: 8 }

package/event/counter_report_breakdown.tsx

@@ -0,0 +1,93 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventCounter_report_detailProperty } from 'esoftplay/cache/event/counter_report_detail/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_report_breakdownArgs {
+
+}
+export interface EventCounter_report_breakdownProps {
+
+}
+
+export interface ReportDetailItem2 extends EventCounter_report_breakdownProps {
+  title: string
+  value: string
+  valueColor?: string
+  colorBg?: string
+  onPress: () => void,
+}
+
+function Item(props: ReportDetailItem2) {
+  return (
+    <View style={{ backgroundColor: props.colorBg ? props.colorBg : "transparant", flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 7 }}>
+      <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{props.title}</Text>
+      <View>
+        <Text allowFontScaling={false} style={{ textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'bold', fontSize: 14, color: props.valueColor ? props.valueColor : "#000" }}>{props.value}</Text>
+        <TouchableOpacity style={{ marginTop: 5 }} onPress={props.onPress}>
+          <Text allowFontScaling={false} style={{ textDecorationLine: 'underline', textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'normal', fontSize: 12, color: LibStyle.colorBlue }}>{esp.lang("event/counter_report_breakdown", "show_detail")}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+export default function m(props: EventCounter_report_breakdownProps): any {
+  const { data, type } = LibNavigation.getArgsAll(props)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("event/counter_report_breakdown", "header_title")} />
+
+      <View style={{ margin: 10, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey }}>
+        <ScrollView style={{ padding: 10 }}>
+          {
+            data.hasOwnProperty("modal") &&
+            <Item
+              title={esp.lang("event/counter_report_breakdown", "modal")}
+              value={EventCounter_report_detailProperty.showValueExtention(type, data?.modal?.total)}
+              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.modal?.url }) }}
+            />
+          }
+          {
+            data?.transaction?.total > 0 &&
+            <Item
+              title={esp.lang("event/counter_report_breakdown", "total_transaction")}
+              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transaction?.total)}
+              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transaction?.url }) }}
+            />
+          }
+          {
+            data?.transaction_edc?.total > 0 &&
+            <Item
+              title={esp.lang("event/counter_report_breakdown", "total_transaction_with_edc")}
+              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transaction_edc?.total)}
+              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transaction_edc?.url }) }}
+            />
+          }
+          {
+            data?.transfer?.total > 0 &&
+            <Item
+              title={esp.lang("event/counter_report_breakdown", "transfer")}
+              value={EventCounter_report_detailProperty.showValueExtention(type, data?.transfer?.total)}
+              onPress={() => { LibNavigation.navigate('event/counter_report_detail_list', { url: data?.transfer?.url }) }}
+            />
+          }
+
+          <View style={{ width: LibStyle.width - 20, height: 1, backgroundColor: LibStyle.colorTextCaption, marginBottom: 10 }} />
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', marginBottom: 7 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: 'SFProText', flex: 2, fontSize: 12 }}>{esp.lang("event/counter_report_breakdown", "total")}</Text>
+            <Text allowFontScaling={false} style={{ textAlign: 'right', marginLeft: 10, fontFamily: 'SFProText', flex: 1, fontWeight: 'bold', fontSize: 14, color: LibStyle.colorGreen }}>{EventCounter_report_detailProperty.showValueExtention(type, data?.total)}</Text>
+          </View>
+        </ScrollView>
+      </View>
+
+    </View>
+  )
+}