esoftplay-event 0.0.0-a

package/event/counter_eo.tsx

@@ -0,0 +1,451 @@
+// 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_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_eoArgs {
+
+}
+export interface EventCounter_eoProps {
+
+}
+
+export function checkEmail(email: string) {
+  if (email == '') {
+    LibToastProperty.show(esp.lang("event/counter_eo", "empty_email"))
+    return false
+  }
+
+  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+  if (reg.test(email) === false) {
+    LibToastProperty.show(esp.lang("event/counter_eo", "invalid_email"));
+    return false;
+  }
+  return true
+}
+
+export default function m(props: EventCounter_eoProps): any {
+  const { is_eo } = LibNavigation.getArgsAll(props)
+  const dialogAdd = useRef<ComponentSlidingup>(null)
+  const dialogUser = useRef<ComponentSlidingup>(null)
+  const dialogListLM = useRef<ComponentSlidingup>(null)
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  const [email, setEmail] = useSafeState<string>('')
+  // result
+  const [result, setResult] = useSafeState<any>()
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+
+  const [typeCashier, setTypeCashier] = useSafeState<any>();
+  const [selectedLM, setSelectedLM] = useSafeState<any>();
+  const [selectedTypeAdd, setSelectedTypeAdd] = useSafeState<any>({
+    id: 1,
+    title: esp.lang("event/counter_eo", "loket_manager")
+  });
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_event')
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl('event_eo_home?event_id=' + is_eo?.id, null, (res, msg) => {
+      setResult(res)
+      setRefreshing(false)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/counter_eo", "failed_load"), error?.message)
+      LibNavigation.back()
+      setRefreshing(false)
+    }, 1)
+  }
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+  }
+
+  function addLM() {
+    let post = {
+      event_id: is_eo?.id,
+      email: email.trim()
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_eo", "add_title"), esp.lang("event/counter_eo", "add_msg"), esp.lang("event/counter_eo", "add_confirm"), () => {
+      new LibCurl('event_manager_edit', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_eo", "add_ok"), msg)
+        loadData()
+        dialogUser.current?.hide()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_eo", "add_failed"), error?.message)
+        dialogUser.current?.hide()
+      }, 1)
+    }, esp.lang("event/counter_eo", "add_cancel"), () => { })
+
+  }
+
+  function deleteLM(_email: string) {
+    let post = {
+      event_id: is_eo?.id,
+      email: _email.trim()
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_eo", "delete_title"), esp.lang("event/counter_eo", "delete_msg"), esp.lang("event/counter_eo", "delete_confirm"), () => {
+      new LibCurl('event_manager_delete', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_eo", "delete_ok"), msg)
+        loadData()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_eo", "delete_fail"), error?.message)
+      }, 1)
+    }, esp.lang("event/counter_eo", "delete_cancel"), () => { })
+  }
+
+  function addCashier() {
+    if (selectedTypeAdd.id == 2 && !typeCashier) {
+      LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+      return
+    }
+
+    if (selectedTypeAdd.id == 2 && !selectedLM) {
+      LibToastProperty.show(esp.lang("event/counter_eo", "empty_lm"))
+      return
+    }
+
+
+    let post = {
+      event_id: is_eo?.id,
+      email: email.trim(),
+      manager_id: selectedLM?.user_id,
+      is_digital: typeCashier?.id
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_eo", "cashier_title"), esp.lang("event/counter_eo", "cashier_msg"), esp.lang("event/counter_eo", "cashier_confirm"), () => {
+      new LibCurl('event_seller_edit', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_eo", "cashier_ok"), msg)
+        loadData()
+        dialogUser.current?.hide()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_eo", "cashier_failed"), error?.message)
+        dialogUser.current?.hide()
+      }, 1)
+    }, esp.lang("event/counter_eo", "cashier_cancel"), () => { })
+
+  }
+
+  function deleteCashier(_email: string) {
+    let post = {
+      event_id: is_eo?.id,
+      email: _email.trim()
+    }
+
+    LibDialog.confirm(esp.lang("event/counter_eo", "delete_cashier_title"), esp.lang("event/counter_eo", "delete_cashier_msg"), esp.lang("event/counter_eo", "delete_cashier_confirm"), () => {
+      new LibCurl('event_seller_delete', post, (res, msg) => {
+        LibDialog.info(esp.lang("event/counter_eo", "delete_cashier_ok"), msg)
+        loadData()
+      }, (error) => {
+        LibDialog.warning(esp.lang("event/counter_eo", "delete_cashier_failed"), error?.message)
+      }, 1)
+    }, esp.lang("event/counter_eo", "delete_cashier_cancel"), () => { })
+  }
+
+  let a = [
+    {
+      id: 1,
+      title: esp.lang("event/counter_eo", "id1")
+    },
+    {
+      id: 2,
+      title: esp.lang("event/counter_eo", "id2")
+    },
+  ]
+
+  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: 1 })} />
+      </View>
+    )
+  }
+
+  function renderTicketRequest(item: any, i: number) {
+    return (
+      <View style={styleId_ZEwY6z}>
+        <EventCounter_history_item item={item} is_ticket={true} onPress={() => LibNavigation.navigate('event/counter_request_detail', { url: item.url, status_user: 1 })} />
+      </View>
+    )
+  }
+
+  function renderManager(item: any, i: number) {
+    return (
+      <EventCounter_user_list_item
+        {...item}
+        showDelete={is_eo?.add_tms == 1 ? true : false}
+        onDelete={() => {
+          deleteLM(item.email)
+        }}
+        showSellers
+        showDeleteSellers
+        onDeleteSellers={(email: string) => {
+          deleteCashier(email)
+        }}
+      />
+    )
+  }
+
+  function renderItem(item: any, i: number) {
+    return (
+      <Pressable key={i} onPress={() => {
+        setSelectedTypeAdd(item)
+        setSelectedLM(undefined)
+      }} style={{ flex: 1, padding: 7, backgroundColor: item.id == selectedTypeAdd?.id ? "#009AE4" : "#EEF1F8" }}>
+        <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == selectedTypeAdd?.id ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == selectedTypeAdd?.id ? "#fff" : "#000" }}>{item.title}</Text>
+      </Pressable>
+    )
+  }
+
+  function renderListManage(item: any, i: number) {
+    return (
+      <EventCounter_user_list_item {...item} onSelect={() => {
+        dialogListLM.current?.hide()
+        setSelectedLM(item)
+      }} />
+    )
+  }
+
+  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' }}>
+      <LibFocus onFocus={loadData} />
+      <ComponentHeader title={esp.lang("event/counter_eo", "header_title")} subtitle={is_eo?.name} bgColor={"#009AE4"} titleColor="#fff" notif />
+      {/* status_user 1 EO, 2 LM, 3 Seller */}
+      {/* user_type kenapa 2, karena untuk menambahkan Loket Manager */}
+      <EventCounter_menu colorTheme={"#009AE4"} event_id={is_eo?.id} user_type={2} status_user={1} />
+      <ScrollView style={{ marginTop: -20, backgroundColor: "#EEF1F8", borderTopLeftRadius: 15, borderTopRightRadius: 15 }} refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+
+        {/* active balance */}
+        <EventCounter_info colorTheme={"#009AE4"} amount={result?.money} ticket={result?.ticket} event_id={is_eo?.id} status_user={1} />
+
+        {/* request */}
+
+        {
+          result?.money_request?.length > 0 &&
+          <EventCounter_section icon="chevron-right-circle" onPress={() => { LibNavigation.navigate('event/counter_request', { event_id: is_eo?.id, status_user: 1 }) }} title={esp.lang("event/counter_eo", "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_eo?.id, status_user: 1 }) }} title={esp.lang("event/counter_eo", "recent_ticket")} />
+        }
+        {
+          result?.ticket_request?.length > 0 && result?.ticket_request?.map(renderTicketRequest)
+        }
+
+        {/* loket manager */}
+        <EventCounter_section icon="plus-circle" onPress={() => {
+          dialogAdd.current?.show()
+          // initial state
+          setSelectedTypeAdd({
+            id: 1,
+            title: esp.lang("event/counter_eo", "loket")
+          })
+          setSelectedLM(undefined)
+        }} showIcon={is_eo?.add_tms == 1 ? true : false} title={esp.lang("event/counter_eo", "title_lm")} />
+
+        {
+          result?.manager?.map(renderManager)
+        }
+
+        {
+          result?.manager?.length == 0 &&
+          <View style={{ margin: 15, borderRadius: 15, marginTop: 0, backgroundColor: '#fff', overflow: 'hidden' }}>
+            <ComponentMessage message={esp.lang("event/counter_eo", "empty_lm1")} />
+          </View>
+        }
+
+        {
+          result?.manager?.length > 9 &&
+          <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_user_list', { event_id: is_eo?.id, status_user: 1 }) }} 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_eo", "show_all")}</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 }}>
+
+            <View style={{ flexDirection: 'row', borderRadius: 15, overflow: 'hidden' }}>
+              {
+                a.map(renderItem)
+              }
+            </View>
+
+            <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, }}
+              placeholder={esp.lang("event/counter_eo", "email")}
+              keyboardType="email-address"
+              onSubmitEditing={() => {
+                if (checkEmail(email.trim())) {
+                  if (selectedTypeAdd?.id == 2) {
+                    if (!typeCashier) {
+                      LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+                    } else if (!selectedLM) {
+                      LibToastProperty.show(esp.lang("event/counter_eo", "lm_not_select"))
+                    } else {
+                      dialogAdd.current?.hide()
+                      dialogUser.current?.show()
+                    }
+                  } else {
+                    dialogAdd.current?.hide()
+                    dialogUser.current?.show()
+                  }
+                }
+              }}
+            />
+
+
+            {
+              selectedTypeAdd?.id == 2 &&
+              <View>
+                <ComponentLabel_input label={esp.lang("event/counter_eo", "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>
+                {
+                  selectedLM ?
+                    <EventCounter_user_list_item
+                      email={selectedLM?.email}
+                      image={selectedLM?.image}
+                      name={selectedLM?.name}
+                      user_id={selectedLM?.user_id}
+                      showChange
+                      style={{ ...LibStyle.elevation(2), marginTop: 10, margin: 0 }}
+                      onChange={() => {
+                        dialogListLM.current?.show()
+                      }}
+                    />
+                    :
+                    <TouchableOpacity onPress={() => {
+                      dialogListLM.current?.show()
+                    }} style={{ ...LibStyle.elevation(2), marginTop: 10, backgroundColor: '#fff', padding: 10, borderRadius: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                      <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: 'SFProText', fontWeight: 'bold' }}>{esp.lang("event/counter_eo", "select_lm")}</Text>
+                      <LibIcon name={"chevron-right-circle-outline"} color="#009AE4" />
+                    </TouchableOpacity>
+                }
+              </View>
+            }
+
+            <ComponentButton label={esp.lang("event/counter_eo", "btn_next")} style={{ borderRadius: 15, marginTop: 30 }} backgroundColor={email == "" ? LibStyle.colorGrey : "#009AE4"} onPress={() => {
+              if (checkEmail(email.trim())) {
+                if (selectedTypeAdd?.id == 2) {
+                  if (!typeCashier) {
+                    LibToastProperty.show(esp.lang("event/counter_eo", "select_cashier_first"))
+                  } else if (!selectedLM) {
+                    LibToastProperty.show(esp.lang("event/counter_eo", "lm_not_select"))
+                  } else {
+                    dialogAdd.current?.hide()
+                    dialogUser.current?.show()
+                  }
+                } 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={() => {
+            if (selectedTypeAdd?.id == 2) {
+              addCashier()
+            } else {
+              addLM()
+            }
+          }} cancel={() => {
+            dialogUser.current?.hide()
+          }} />
+        </View>
+      </ComponentSlidingup>
+
+      <ComponentSlidingup ref={dialogListLM}>
+        <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 20, borderTopRightRadius: 20, maxHeight: LibStyle.height / 2 }}>
+          <View style={{ height: 4, width: 32, borderRadius: 2, backgroundColor: "#C6C6C6", marginTop: 10, marginBottom: 10, alignSelf: 'center' }} />
+          <ScrollView>
+            {
+              result?.manager?.map(renderListManage)
+            }
+          </ScrollView>
+        </View>
+      </ComponentSlidingup>
+
+
+
+    </View>
+  )
+}
+const styleId_ZEwY6z: any = { margin: 15, marginTop: 0, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }

package/event/counter_history.tsx

@@ -0,0 +1,74 @@
+// 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_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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventCounter_historyArgs {
+
+}
+export interface EventCounter_historyProps {
+
+}
+export default function m(props: EventCounter_historyProps): any {
+  const { event_id, status_user, tabActive } = LibNavigation.getArgsAll(props)
+
+  const type = EventCounter_type()
+  const [activeTab, setActiveTab] = useSafeState<any>(tabActive ? tabActive : 1)
+
+  let a = status_user == 1 ? 'event_eo_ticket_mutation?event_id=' + event_id : status_user == 2 ? 'event_manager_ticket_mutation?event_id=' + event_id : 'event_seller_ticket_mutation?event_id=' + event_id
+  let b = status_user == 1 ? 'event_eo_money_mutation?event_id=' + event_id : status_user == 2 ? 'event_manager_money_mutation?event_id=' + event_id : 'event_seller_money_mutation?event_id=' + event_id
+  let url = activeTab == 1 ? a : b
+
+  function renderItem(item: any, i: number) {
+    return (
+      <EventCounter_history_item key={i} item={item} show_icon onPress={() => {/* LibNavigation.navigate('event/counter_request_detail') */ }} is_ticket={activeTab == 1 ? true : false} />
+    )
+  }
+
+  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>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/counter_history", "header_title")} subtitle={status_user == 1 ? esp.lang("event/counter_history", "subtitle_eo") : status_user == 2 ? esp.lang("event/counter_history", "subtitle_lm") : esp.lang("event/counter_history", "subtitle_cashier")} />
+      <LibInfinite
+        url={url}
+        key={activeTab}
+        
+        errorView={(error: any) => {
+          return (
+            <View style={{ margin: 15, borderRadius: 15, backgroundColor: '#fff', overflow: 'hidden' }}>
+              <ComponentMessage message={error} />
+            </View>
+          )
+        }}
+        ListHeaderComponent={
+          <View style={{ flexDirection: 'row', borderRadius: 10, padding: 3, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
+            {
+              type.map(renderType)
+            }
+          </View>
+        }
+        style={{ margin: 15, borderRadius: 15, backgroundColor: '#fff' }}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}

package/event/counter_history_item.tsx

@@ -0,0 +1,48 @@
+// withHooks
+// noPage
+import { applyStyle } from 'esoftplay';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+
+export interface EventCounter_history_itemArgs {
+
+}
+export interface EventCounter_history_itemProps {
+  onPress?: () => void,
+  // amount: any,
+  // created?: string,
+  // event_id?: string,
+  // id?: string,
+  // is_credit: any,
+  // ondate?: string,
+  // saldo?: string,
+  // title?: string,
+  // type?: string,
+  // type_id?: string,
+  // user_id?: string,
+
+  is_ticket: boolean,
+  show_icon?: boolean
+
+  item: any
+}
+export default function m(props: EventCounter_history_itemProps): any {
+  let item = props.item
+  return (
+    <Pressable onPress={() => { props.onPress && props.onPress() }} style={applyStyle({ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', borderBottomColor: "#EEF1F8", borderBottomWidth: 1 })}>
+      <View style={applyStyle({ flex: 3 })}>
+        <Text allowFontScaling={false} style={applyStyle({ fontSize: 14 })}>{item?.title}</Text>
+        {
+          item?.hasOwnProperty("price_name") && item?.price_name != "" &&
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, marginTop: 2, marginBottom: 7, })}>{item?.price_name} {item?.ondate != "0000-00-00" && "- " + LibUtils.moment(item?.ondate).localeFormat("D MMM YYYY")}</Text>
+        }
+        <Text allowFontScaling={false} style={applyStyle({ fontSize: 10, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY HH:mm:ss")}</Text>
+      </View>
+      <Text allowFontScaling={false} style={applyStyle({ flex: 1, textAlign: 'right', fontWeight: 'bold', fontSize: 12, color: item?.hasOwnProperty('is_credit') ? (item?.is_credit == 0 ? LibStyle.colorGreen : LibStyle.colorRed) : "#000" })}>{props.show_icon && (item?.hasOwnProperty('is_credit') ? (item?.is_credit == 0 ? "+" : "-") : "")} {props.is_ticket ? LibUtils.number(item?.amount) + " Tiket" : LibUtils.money(item?.amount)}</Text>
+    </Pressable>
+  )
+}

package/event/counter_info.tsx

@@ -0,0 +1,96 @@
+// withHooks
+// noPage
+import { applyStyle } from 'esoftplay';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCounter_infoArgs {
+
+}
+export interface EventCounter_infoProps {
+  colorTheme: string
+  amount?: any
+  ticket?: any
+  event_id: any,
+  status_user?: number
+}
+export default function m(props: EventCounter_infoProps): any {
+  function isEvenNumber(value: number) {
+    if (value % 2 == 0)
+      return true;
+    else
+      return false;
+  }
+
+  function renderTicket(item: any, i: number) {
+    return (
+      <TouchableOpacity onPress={() => {
+        LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 1 })
+      }} style={{ padding: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', paddingVertical: 5, backgroundColor: isEvenNumber(i) ? "#fff" : LibStyle.colorBgGrey }}>
+        <View style={applyStyle({ flex: 3, marginTop: 5, marginBottom: 5 })}>
+          <Text allowFontScaling={false} style={applyStyle({ flexWrap: 'wrap', fontSize: 12 })}>{item.price_name}</Text>
+          {
+            item.ondate != "0000-00-00" &&
+            <Text allowFontScaling={false} style={applyStyle({ flexWrap: 'wrap', fontSize: 12 })}>( {LibUtils.moment(item.ondate).localeFormat("D MMM YYYY")} )</Text>
+          }
+        </View>
+        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{item.debit}</Text>
+        </View>
+        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{item.credit}</Text>
+        </View>
+        <View style={applyStyle({ flex: 1, marginTop: 5, marginBottom: 5 })}>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, textAlign: 'right' })}>{Number(item.debit) - Number(item.credit)}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ margin: 15, marginBottom: 10, marginTop: 25, backgroundColor: '#fff', borderRadius: 15, padding: 10 }}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 2 }) }} style={{ padding: 10, borderRadius: 15, backgroundColor: LibStyle.colorPrimaryDark, width: (LibStyle.width - 60) * 0.5 }}>
+          <Text allowFontScaling={false} style={{ fontSize: 10, color: "#000" }}>{esp.lang("event/counter_info", "debit_detail")}</Text>
+          <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(props.amount?.debit_today)}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 10, textAlign: 'right', fontSize: 8, color: "#000" }}>{esp.lang("event/counter_info", "debit", LibUtils.money(props.amount?.debit))}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => { LibNavigation.navigate('event/counter_history', { event_id: props?.event_id, status_user: props.status_user, tabActive: 2 }) }} style={{ padding: 10, borderRadius: 15, backgroundColor: props.colorTheme, width: (LibStyle.width - 60) * 0.5 }}>
+          <Text allowFontScaling={false} style={{ fontSize: 10, color: "#fff" }}>{esp.lang("event/counter_info", "credit_today")}</Text>
+          <Text allowFontScaling={false} style={{ flex: 1, flexWrap: 'wrap', fontSize: 16, fontWeight: 'bold', color: "#fff" }}>{LibUtils.money(props.amount?.credit_today)}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 10, textAlign: 'right', fontSize: 8, color: "#fff" }}>{esp.lang("event/counter_info", "credit", LibUtils.money(props.amount?.credit))}</Text>
+        </TouchableOpacity>
+      </View>
+
+      {
+        props.ticket?.length > 0 &&
+        <View style={{ flex: 1, marginTop: 10, overflow: 'hidden', borderWidth: 0.5, borderRadius: 15, borderColor: "#717171" }}>
+          <View style={{ padding: 10, borderTopLeftRadius: 15, borderTopRightRadius: 15, flexDirection: 'row', backgroundColor: '#f1f2f3' }}>
+            <View style={{ flex: 3 }}>
+              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14 })}>{esp.lang("event/counter_info", "ticket_type")}</Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_debit")}</Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_credit")}</Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, textAlign: 'right' })}>{esp.lang("event/counter_info", "i_saldo")}</Text>
+            </View>
+          </View>
+          {
+            props.ticket?.sort((a: any, b: any) => a.price_name > b.price_name || a.ondate?.split('-').reverse().join('') > b.ondate?.split('-').reverse().join('') ? 1 : -1).map(renderTicket)
+          }
+        </View>
+      }
+
+    </View>
+  )
+}