esoftplay-event 0.0.0-a

package/event/coupon_claim_history.tsx

@@ -0,0 +1,279 @@
+// 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 { useRef } from 'react';
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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 { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import { MarketSheet } from 'esoftplay/cache/market/sheet/import';
+import { UseCondition } from 'esoftplay/cache/use/condition/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventCoupon_claim_historyArgs {
+
+}
+export interface EventCoupon_claim_historyProps {
+  hideHeader?: boolean, config: any, event_id: string
+}
+export default function m(props: EventCoupon_claim_historyProps): any {
+  const { event_id, config } = esp.mod("lib/navigation").getArgsAll(props)
+  let lastDate = useRef('')
+
+  const usedConfig = props?.config || config
+  const usedEventId = props?.event_id || event_id
+
+  const baseURL = "event_coupon_tenant_redeemed_staff?event_id=" + usedEventId + "&tenant_id=" + usedConfig?.tenant_id
+
+  const date_start = moment().localeFormat("YYYY-MM-DD")
+  const date_end = moment().localeFormat("YYYY-MM-DD")
+  const [selectedDate, setSelectedDate] = useSafeState<any>({ date_start, date_end })
+  const [state, setState] = useSafeState<any>()
+  const [query, setQuery] = useSafeState<string>("")
+  const [staff, setStaff] = useLazyState<any>(usedConfig?.is_parent == 1 ? undefined : { staff_id: usedConfig?.staff_id })
+  const [typeIndex, setTypeIndex] = useLazyState<any>(usedConfig?.is_parent == 1 ? 0 : 1)
+  const headerShow = props?.hideHeader ? !props?.hideHeader : true
+  const slidingRef = useRef<LibSlidingup>(null)
+  const slidingDataRef = useRef<LibSlidingup>(null)
+  const inputRef = useRef<LibInput>(null)
+
+  const type = [esp.lang("event/coupon_claim_history", "all_data"), esp.lang("event/coupon_claim_history", "only_me")]
+
+  function buildUrl(url: string): string {
+    if (selectedDate?.date_start != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'date_start=' + selectedDate?.date_start
+    }
+    if (selectedDate?.date_end != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'date_end=' + selectedDate?.date_end
+    }
+    if (staff?.staff_id) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'staff_id=' + staff?.staff_id
+    }
+    return url
+  }
+
+  function buildSearchUrl(url: string): string {
+    if (query != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'keyword=' + query
+    }
+    return url
+  }
+
+  function doSearch() {
+    if (inputRef.current?.getText?.() && inputRef.current?.getText?.() != "") {
+      const email = inputRef.current?.getText?.()
+      setQuery(email)
+    }
+  }
+
+  const HeaderItem = (props: any) => {
+    return (
+      <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row', backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimary, 0.2), ...props?.containerStyle }} >
+        <View style={{ flex: 1 }} >
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "date")} style={{ color: "#888" }} />
+          <LibTextstyle textStyle={"callout"} text={props?.date} />
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "total_claim")} style={{ color: "#888", marginTop: 10 }} />
+          <LibTextstyle textStyle={"callout"} text={props?.qty} />
+        </View>
+        <View style={{ flex: 1, alignItems: "flex-end" }} >
+          <LibTextstyle textStyle={"caption2"} text={esp.lang("event/coupon_claim_history", "total")} style={{ color: "#888" }} />
+          <LibTextstyle textStyle={"callout"} text={props?.amount} style={{ fontWeight: "bold" }} />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {
+        headerShow &&
+        <ComponentHeader title={esp.lang("event/coupon_claim_history", "header")} />
+      }
+      <View>
+        <Pressable onPress={() => {
+          LibNavigation.navigateForResult('feed/talent_date', { minDate: moment().add(-5, 'years').localeFormat('YYYY-MM-DD'), maxDate: moment().add(1, 'years').localeFormat('YYYY-MM-DD') }).then((item) => {
+            setSelectedDate(item)
+          })
+        }} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "date_start")}</Text>
+            <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDate?.date_start).localeFormat("DD MMM YYYY")}</Text>
+          </View>
+          <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "date_end")}</Text>
+            <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDate?.date_end).localeFormat("DD MMM YYYY")}</Text>
+          </View>
+        </Pressable>
+        {
+          usedConfig?.is_parent == 1 &&
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Pressable onPress={() => {
+              slidingRef?.current?.show()
+            }} style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', flexDirection: "row", alignItems: "center" }}>
+              <View style={{ flex: 1 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "scan_staff")}</Text>
+                <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='middle' style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{staff?.email || esp.lang("event/coupon_claim_history", "staff")}</Text>
+              </View>
+              <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+            </Pressable>
+            <Pressable onPress={() => {
+              slidingDataRef.current?.show()
+            }} style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', flexDirection: "row", alignItems: "center" }}>
+              <View style={{ flex: 1 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/coupon_claim_history", "show_data")}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{type[typeIndex]}</Text>
+              </View>
+              <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+            </Pressable>
+          </View>
+        }
+      </View>
+      <LibInfinite
+        isDebug={1}
+        key={buildUrl(baseURL)}
+        url={buildUrl(baseURL)}
+        onRefresh={() => lastDate.current = ""}
+        errorView={(e: string) =>
+          <ComponentMessage message={e} />
+        }
+        onResponseEdit={(res) => {
+          let out = res.report
+          setState(out)
+          if (res?.report?.list.length > 0) {
+            out = esp.mod("lib/object").update(res?.report, (list) => list.map((item: any) => {
+              const used_at = moment(item.used_at).format("DD MMMM YYYY")
+              const showDate = lastDate.current != used_at
+              lastDate.current = used_at
+              return { ...item, showDate: showDate }
+            }))('list')
+          }
+          return out
+        }}
+        renderItem={(item: any, idx: number) => {
+          return (
+            <View key={idx}>
+              <UseCondition if={idx === 0} >
+                <HeaderItem
+                  date={state?.date_end == state?.date_start ? moment(state?.date_start).localeFormat("dddd, DD MMMM YYYY") : LibUtils.getDateRange(state?.date_start, state?.date_end, " - ")}
+                  qty={LibUtils.number(state?.qty)}
+                  amount={LibUtils.money(state?.amount)} />
+              </UseCondition>
+              <UseCondition if={item?.showDate} >
+                <MarketSection_menu title={moment(item?.used_at).format("dddd, DD MMMM YYYY")} />
+              </UseCondition>
+              <View style={{ backgroundColor: "#f4f4f4", height: 2 }} />
+              <TouchableOpacity
+                onPress={() => { }}
+                style={{ flexDirection: "row", paddingHorizontal: 17, paddingTop: 10, paddingBottom: 8 }} >
+                <View style={{ flex: 1 }} >
+                  <View style={{ flexDirection: "row", alignItems: "center" }} >
+                    <LibIcon.Ionicons name="ticket" size={12} color="#888" />
+                    <LibTextstyle textStyle="caption1" text={item?.title + " (" + item?.event_name + ")"} style={{ color: "#888", marginLeft: 5 }} />
+                  </View>
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }} >
+                    <LibTextstyle textStyle="caption1" text={item?.code} style={{ color: LibStyle.colorBlue }} />
+                  </View>
+                  <LibTextstyle textStyle="caption1" text={"QTY " + item?.qty} style={{ color: "#888" }} />
+                  <LibTextstyle textStyle="caption1" text={LibUtils.moment(item?.used_at).serverFormat("DD MMMM YYYY H:mm:ss")} style={{ color: "#888" }} />
+                </View>
+                <View>
+                  <LibTextstyle textStyle="caption1" text={item?.email_tenant} style={{ color: "#888", textAlign: "right" }} />
+                  <LibTextstyle textStyle="footnote" text={LibUtils.money(item?.amount_total)} style={{ textAlign: "right" }} />
+                </View>
+              </TouchableOpacity>
+            </View>
+          )
+        }}
+      />
+
+      <MarketSheet
+        _ref={slidingDataRef}
+        title={esp.lang("event/coupon_claim_history", "show_data")}
+        options={[
+          ...type.map((x, i) => ({
+            text: x, onPress: () => {
+              setTypeIndex(i)()
+              setStaff(() => i == 1 ? { staff_id: usedConfig?.staff_id } : undefined)
+            }
+          }))
+        ]}
+      />
+
+      <LibSlidingup ref={slidingRef}>
+        <View style={{ minHeight: LibStyle.height * 0.3, maxHeight: LibStyle.height * 0.6, backgroundColor: "white", paddingTop: 10 }}>
+          <View style={{ marginHorizontal: 15, marginTop: 10, flexDirection: 'row', alignItems: 'center' }}>
+            <LibInput
+              ref={inputRef}
+              base
+              defaultValue={query}
+              placeholder={esp.lang("event/coupon_claim_history", "search_email")}
+              onChangeText={(t) => { }}
+              onSubmitEditing={() => doSearch()}
+              style={{ flex: 1, borderColor: '#E6E6E6', color: '#B8B8B8', borderWidth: 1, padding: 4, paddingLeft: 40, borderRadius: 10, backgroundColor: 'white', height: 40 }}
+            />
+            <View style={{ position: "absolute", top: 9, bottom: 0, left: 9 }}>
+              <LibIcon name="magnify" color="#E6E6E6" />
+            </View>
+            {
+              query != "" &&
+              <Pressable onPress={() => {
+                setQuery("")
+                inputRef.current?.setText("")
+              }} style={{ position: "absolute", top: 9, bottom: 0, right: 9 }}>
+                <LibIcon name="close" color={LibStyle.colorRed} />
+              </Pressable>
+            }
+          </View>
+
+          <LibInfinite
+            key={buildSearchUrl("event_coupon_tenant_list_history?tenant_id=" + usedConfig?.tenant_id)}
+            url={buildSearchUrl("event_coupon_tenant_list_history?tenant_id=" + usedConfig?.tenant_id)}
+            errorView={(e: string) => <ComponentMessage message={e} />}
+            isDebug={1}
+            ListHeaderComponent={
+              <>
+                {
+                  !query &&
+                  <Pressable onPress={() => {
+                    setStaff(undefined)
+                    slidingRef.current?.hide()
+                  }} style={[{ backgroundColor: "white", marginHorizontal: 15, marginBottom: 5, marginTop: 10, padding: 10, borderRadius: 10, flexDirection: "row", alignItems: "center" }, LibStyle.elevation(3)]}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }}>{esp.lang("event/coupon_claim_history", "all_staff")}</Text>
+                  </Pressable>
+                }
+              </>
+            }
+            renderItem={(item, index) => (
+              <Pressable onPress={() => {
+                setStaff(item)()
+                slidingRef.current?.hide()
+              }} key={index} style={[{ backgroundColor: "white", marginHorizontal: 15, marginBottom: 5, marginTop: 10, padding: 10, borderRadius: 10 }, LibStyle.elevation(3)]}>
+                {
+                  item?.name && item?.name != "" &&
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, marginBottom: 3 }}>{esp.mod("lib/utils").ucwords(item?.name)}</Text>
+                }
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }}>{String(item?.email).toLowerCase()}</Text>
+              </Pressable>
+            )}
+          />
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}

package/event/coupon_claim_reimburse.tsx

@@ -0,0 +1,111 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventCoupon_claim_reimburseArgs {
+
+}
+export interface EventCoupon_claim_reimburseProps {
+
+}
+export default function m(props: EventCoupon_claim_reimburseProps): any {
+  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
+  const [reimburse, setReimburse] = useLazyState<any>()
+
+  useEffect(() => {
+    loadReimburse()
+  }, [])
+
+  function loadReimburse() {
+    setReimburse(undefined)
+    const curl = esp.mod("lib/curl")
+    new curl("event_coupon_tenant_reimburse?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result, message) => {
+      setReimburse(result)()
+    }, (error) => {
+
+    }, 1)
+  }
+
+  function submitReimburse() {
+    const doSubmit = () => {
+      const curl = esp.mod("lib/curl")
+      esp.mod("lib/progress").show(esp.lang("event/coupon_claim_reimburse", "please_wait"))
+      new curl("event_coupon_tenant_reimburse_submit", { tenant_id, event_id }, (result, message) => {
+        loadReimburse()
+        esp.modProp("lib/toast").show(message)
+        esp.mod("lib/progress").hide()
+        esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: result?.url })
+      }, (error) => {
+        esp.mod("lib/progress").hide()
+        esp.mod("lib/dialog").warning(esp.lang("event/coupon_claim", "warning_reimburse"), error?.message)
+      }, 1)
+    }
+
+    esp.mod('lib/dialog').warningConfirm(esp.lang("event/coupon_claim", "reimburse_title"),
+      esp.lang("event/coupon_claim", "reimburse_msg"),
+      esp.lang("event/coupon_claim", "reimburse_ok"), () => {
+        doSubmit()
+      },
+      esp.lang("event/coupon_claim", "reimburse_cancel"), () => { })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/coupon_claim_reimburse", "reimburse")} subtitle={esp.lang("event/coupon_claim_reimburse", "reimburse_subtitle")} />
+      <LibScroll onRefresh={loadReimburse}>
+        <View style={{ margin: 5, marginBottom: 5, marginTop: 10, borderRadius: 10, padding: 10 }}>
+          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "total")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(reimburse?.qty)}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
+            </View>
+            <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", marginBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "amount")}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, flexWrap: 'wrap', fontSize: 20, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(reimburse?.amount)}</Text>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, color: LibStyle.colorBrown, marginTop: 5, textAlign: "right" }}>{esp.lang("event/coupon_claim_reimburse", "can_cashout")}</Text>
+            </View>
+          </View>
+        </View>
+        <ComponentTouchable onPress={() => {
+          esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history", { event_id, tenant_id })
+        }} style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", flexDirection: "row", alignItems: "center", marginHorizontal: 15 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", flex: 1, fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse", "history_cashout")}</Text>
+          <LibIcon name='chevron-right' />
+        </ComponentTouchable>
+
+        <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#fff3cd", borderWidth: 1, borderColor: "#FDE68A", marginHorizontal: 15, marginTop: 15 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, color: "#000", textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info1")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", paddingBottom: 5 }}>{esp.lang("event/coupon_claim_reimburse", "info2")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: "#000", lineHeight: 17, textAlign: "justify", }}>{esp.lang("event/coupon_claim_reimburse", "info3")}</Text>
+        </View>
+
+      </LibScroll>
+      <ComponentButton
+        label={esp.lang("event/coupon_claim_reimburse", "doReimburse")}
+        backgroundColor={reimburse?.qty == 0 ? "#f1f1f1" : undefined}
+        onPress={() => {
+          if (reimburse?.qty > 0) {
+            submitReimburse()
+          } else {
+            esp.modProp("lib/toast").show(esp.lang("event/coupon_claim", "coupon_scan_empty"))
+          }
+        }}
+        style={{ margin: 15 }}
+      />
+    </View>
+  )
+}

package/event/coupon_claim_reimburse_history.tsx

@@ -0,0 +1,72 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import esp from 'esoftplay/esp';
+import { useEffect } from 'react';
+
+import { applyStyle } from 'esoftplay';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Text, View } from 'react-native';
+import Pressable from '../lib/pressable';
+
+
+export interface EventCoupon_claim_reimburse_historyArgs {
+
+}
+export interface EventCoupon_claim_reimburse_historyProps {
+
+}
+export default function m(props: EventCoupon_claim_reimburse_historyProps): any {
+  const { event_id, tenant_id } = esp.mod("lib/navigation").getArgsAll(props)
+  const [datas, setDatas] = useSafeState<any>()
+  const [error, setError] = useSafeState<string>("")
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl("event_coupon_tenant_reimburse_list?event_id=" + event_id + "&tenant_id=" + tenant_id, null, (result) => {
+      esp.log({ result });
+      setDatas(result)
+    }, (error) => {
+      setError(error?.message)
+    })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/coupon_claim_reimburse_history", "reimburse_history")} />
+      {
+        <LibList
+          onRefresh={loadData}
+          data={datas}
+          ListEmptyComponent={
+            (!datas && error == "") ? <LibLoading /> :
+              error != "" ? <ComponentMessage message={error} style={{ marginTop: 50 }} /> : null
+          }
+          renderItem={(item: any, index: number) => (
+            <Pressable key={index} onPress={() => {
+              esp.mod("lib/navigation").navigate("event/coupon_claim_reimburse_history_detail", { url: item?.url })
+            }} 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: 16, marginBottom: 5 })}>{item?.status_text}</Text>
+                <Text allowFontScaling={false} style={applyStyle({ fontSize: 12, color: "#797979" })}>{LibUtils.moment(item?.created).serverFormat("DD MMMM YYYY HH:mm:ss")}</Text>
+              </View>
+              <View>
+                <Text allowFontScaling={false} style={applyStyle({ marginBottom: 5, textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorGreen })}>{esp.lang("event/coupon_claim_reimburse_history", "qty", LibUtils.number(item?.qty))}</Text>
+                <Text allowFontScaling={false} style={applyStyle({ textAlign: 'right', fontWeight: 'bold', fontSize: 14, color: LibStyle.colorRed })}>{LibUtils.money(item?.amount)}</Text>
+              </View>
+            </Pressable>
+          )}
+        />
+      }
+    </View>
+  )
+}

package/event/coupon_claim_reimburse_history_detail.tsx

@@ -0,0 +1,117 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+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 moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import { useEffect, useRef } from 'react';
+
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibWebview } from 'esoftplay/cache/lib/webview/import';
+import { useTimeout } from 'esoftplay/timeout';
+import LottieView from "lottie-react-native";
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface EventCoupon_claim_reimburse_history_detailArgs {
+
+}
+export interface EventCoupon_claim_reimburse_history_detailProps {
+
+}
+export default function m(props: EventCoupon_claim_reimburse_history_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [data, setData] = useSafeState<any>()
+  const [error, setError] = useSafeState<string>("")
+  const animation = useRef<LottieView>(null)
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    if (data) {
+      timeout(() => {
+        animation.current?.play()
+      }, 300);
+    }
+  }, [data])
+
+  useEffect(getData, [])
+
+  function getData() {
+    const curl = esp.mod("lib/curl")
+    new curl(url, null, (result, message) => {
+      esp.log(result)
+      setData(result)
+    }, (error) => {
+      setError(error?.message)
+    }, 1)
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("event/coupon_claim_reimburse_history_detail", "header")} />
+      <LibScroll onRefresh={getData}>
+        {
+          (!data && error == "") ? <LibLoading /> : error != "" ? <ComponentMessage message={error} />
+            :
+            <>
+              <View style={{ alignItems: 'center', marginTop: 20 }} >
+                {
+                  <LottieView
+                    ref={animation}
+                    loop={false}
+                    style={{
+                      width: 200,
+                      height: 200,
+                    }}
+                    source={esp.assets(data?.lottie)}
+                  // 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>
+
+              <View style={{ marginHorizontal: 15, marginTop: 20, marginBottom: 15 }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 16, color: '#4a4a4a', textAlign: "center" }}>{LibUtils.ucwords(data?.status_text)}</Text>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, color: '#4a4a4a', textAlign: "center", marginTop: 10 }}>{moment(data?.created).localeFormat("dddd, DD MMMM YYYY HH:mm:ss")}</Text>
+                <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 30 }}>
+                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse_history_detail", "nominal")}</Text>
+                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{LibUtils.money(data?.amount)}</Text>
+                  </View>
+                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", width: (LibStyle.width - 45) * 0.5 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{esp.lang("event/coupon_claim_reimburse_history_detail", "qty")}</Text>
+                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{LibUtils.number(data?.qty)}</Text>
+                  </View>
+                </View>
+                {
+                  data?.notes && data?.notes != "" &&
+                  <View style={{ padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1", marginTop: 15 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 14, color: "#000" }}>{"Alasan Penolakan"}</Text>
+                    <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 18, fontWeight: 'bold', color: "#000" }}>{data?.notes}</Text>
+                  </View>
+                }
+              </View>
+
+              {
+                data?.info && data?.info != "" && data?.info != null &&
+                <View style={{ marginHorizontal: 15, padding: 15, borderRadius: 10, backgroundColor: "#f1f1f1" }}>
+                  <ScrollView>
+                    <LibWebview source={{
+                      html: `<style>body{background-color:#f1f1f1;}</style>${data?.info}`
+                    }} onFinishLoad={() => { }} style={{ marginHorizontal: -20 }}
+                    />
+                  </ScrollView>
+                </View>
+              }
+            </>
+        }
+        <View />
+      </LibScroll>
+    </View>
+  )
+}