esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/pos/cashier_invoice_detail.tsx

@@ -0,0 +1,175 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentStep } from 'esoftplay/cache/component/step/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/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 { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface PosCashier_invoice_detailArgs {
+
+}
+export interface PosCashier_invoice_detailProps {
+
+}
+export default function m(props: PosCashier_invoice_detailProps): any {
+  const { url } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+  const animation = useRef<LottieView>(null)
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    loadData()
+    timeout(() => {
+      animation.current?.play()
+    }, 300);
+
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (error) => {
+    }, 1)
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  if (result?.status == 1 || result?.status == 2) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("pos/cashier_invoice_detail", "header")} subtitle={"#" + result?.invoice_code} />
+        <ScrollView>
+          <View style={{ alignItems: 'center', marginVertical: 30 }} >
+            <LottieView
+              ref={animation}
+              loop
+              style={{ width: 100, height: 100, }}
+              source={result?.status == 1 ? esp.assets('market/success.json') : esp.assets('market/canceled.json')}
+            />
+          </View>
+
+          <LibTextstyle textStyle="caption1"
+            style={{ marginVertical: 10, color: "#888", textAlign: "center" }}
+            text={LibUtils.moment(result.created).serverFormat('dddd, DD MMMM YYYY HH:mm')} />
+          <LibTextstyle
+            textStyle={"title1"}
+            style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 40 }}
+            text={LibUtils.money(result.amount)}
+          />
+
+          <MarketSection_menu size="line" />
+          {
+            result.notes != '' &&
+            <>
+              <MarketSection_menu title={esp.lang("market/saldo_detail", "notes")} smooth />
+              <View style={{ marginHorizontal: 17, marginBottom: 10, flexDirection: 'row', alignItems: 'center' }} >
+                <LibTextstyle text={result.notes} textStyle={'body'} style={{ flex: 1 }} />
+              </View>
+              <MarketSection_menu size="line" />
+            </>
+          }
+          <MarketSection_menu title={esp.lang("market/saldo_detail", "transaction_number")} smooth />
+          <View style={{ marginHorizontal: 17, marginVertical: 10, flexDirection: 'row', alignItems: 'center' }} >
+            <LibTextstyle text={result.invoice_code} textStyle={'body'} style={{ flex: 1 }} />
+            <Pressable onPress={() => {
+              LibUtils.copyToClipboard(result.invoice_code).then(() => LibToastProperty.show(esp.lang("market/saldo_detail", "transaction_copied")))
+            }} >
+              <LibIcon.AntDesign name="copy1" />
+            </Pressable>
+          </View>
+        </ScrollView>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/cashier_invoice_detail", "header_title")} subtitle={"#" + result?.invoice_code} />
+      <ScrollView>
+        <View style={{ margin: 15, marginBottom: 0, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{esp.lang("pos/cashier_invoice_detail", "pay_method")}</Text>
+          <LibPicture source={{ uri: result?.payment?.image }} style={{ width: 55.7, height: 40 }} />
+        </View>
+        <View style={{ margin: 15, marginBottom: 0 }}>
+          <Text allowFontScaling={false} style={{ fontSize: 12, color: "#c5c5c5" }}>{esp.lang("pos/cashier_invoice_detail", "va")}</Text>
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{result?.payment.va_no}</Text>
+            <Pressable onPress={() => {
+              LibUtils.copyToClipboard(result && result?.params != null && result?.params.va_no)
+              LibToastProperty.show(esp.lang("event/order_detail", "success_copied") + result && result?.params != null && result?.params.va_no)
+            }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon.Ionicons name='copy' size={16} style={{ color: LibStyle.colorGreen, marginRight: 5 }} />
+              <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorGreen }}>{esp.lang("event/order_detail", "copy")}</Text>
+            </Pressable>
+          </View>
+        </View>
+        <View style={{ margin: 15, marginBottom: 0, paddingBottom: 30, borderBottomWidth: 1, borderBottomColor: "#c5c5c5" }}>
+          <Text allowFontScaling={false} style={{ fontSize: 12, color: "#c5c5c5" }}>{esp.lang("pos/cashier_invoice_detail", "total_pay")}</Text>
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{LibUtils.money(result?.payment?.total)}</Text>
+            <Pressable onPress={() => {
+              LibUtils.copyToClipboard(result && result?.params != null && result?.params.va_no)
+              LibToastProperty.show(esp.lang("event/order_detail", "success_copied") + result && result?.params != null && result?.params.va_no)
+            }} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <LibIcon.Ionicons name='copy' size={16} style={{ color: LibStyle.colorGreen, marginRight: 5 }} />
+              <Text allowFontScaling={false} style={{ fontSize: 12, color: LibStyle.colorGreen }}>{esp.lang("event/order_detail", "copy")}</Text>
+            </Pressable>
+          </View>
+        </View>
+
+
+        {
+          Object.keys(result?.payment?.description).map((key: any, i: number) => {
+            if (result?.payment?.description[key].length > 1) {
+              return (
+                <LibCollaps
+                  key={i}
+                  show={i == 2}
+                  header={(show) => {
+                    return (
+                      <View style={{ borderBottomWidth: 1, borderBottomColor: "#c5c5c5", padding: 15, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{key}</Text>
+                        <LibIcon name={show ? 'chevron-up' : 'chevron-down'} />
+                      </View>
+                    )
+                  }}
+                >
+                  <View style={{ marginHorizontal: 19 }}>
+                    {
+                      result?.payment?.description[key]?.map((item: any, ii: number) => {
+                        return (
+                          <ComponentStep key={ii} text={item} />
+                        )
+                      })
+                    }
+                  </View>
+
+                </LibCollaps>
+
+              )
+            }
+          })
+        }
+
+      </ScrollView>
+    </View>
+  )
+}

package/modules/pos/cashier_invoice_item.tsx

@@ -0,0 +1,63 @@
+// withHooks
+// noPage
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/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 { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import moment from 'esoftplay/moment';
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+export interface PosCashier_invoice_itemProps {
+  amount: string,
+  invoice_code: string,
+  created: string,
+  expired: string,
+  id: string,
+  notes: string,
+  status: number,
+  status_title: string,
+  title: string,
+  url: string,
+  charge: number,
+  ref_id: string,
+  status_alert: any
+  onCancel?: () => void
+}
+
+const statusColor = ["#aaa", LibStyle.colorGreen, LibStyle.colorRed, LibStyle.colorBrown]
+
+export default function m(props: PosCashier_invoice_itemProps): any {
+  return (
+    <TouchableOpacity disabled={props.url == ''} onPress={() => {
+      // LibNavigation.navigate('pos/cashier_invoice_detail', { url: props.url })
+      LibNavigation.navigate("pos/cashier_invoice_detail", { url: props.url })
+    }} >
+      <View style={{ paddingVertical: 10, paddingHorizontal: 17, flexDirection: "row", justifyContent: "space-between" }} >
+        <LibTextstyle textStyle="footnote" text={"#" + props.invoice_code} style={{ fontWeight: 'bold' }} />
+      </View>
+      <MarketSection_menu size={"line"} />
+      <View style={{ paddingVertical: 10, paddingHorizontal: 17, flexDirection: 'row', alignItems: 'center' }} >
+        <View style={{ flex: 1 }} >
+          <LibIcon name="cash-register" color={statusColor[props.status]} size={50} />
+          <LibTextstyle textStyle="title2" text={LibUtils.money(props.amount)} style={{ color: statusColor[props.status] }} />
+        </View>
+        {/* <LibIcon.AntDesign name={"arrowdown"} style={{ marginVertical: 10 }} color={"#eee"} size={40} /> */}
+      </View>
+      <MarketSection_menu size={"line"} />
+      <View style={{ paddingVertical: 10, paddingHorizontal: 17, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }} >
+        <LibTextstyle style={{ color: "#aaa" }} textStyle="footnote" text={LibUtils.moment(props.created).serverFormat("dddd, DD MMMM YY HH:mm")} />
+        {
+          props.status != 1 && props.status != 2 &&
+          <MarketCountdown expired={moment(props.expired).serverFormat('YYYY-MM-DD HH:mm:ss')} containerStyle={{ marginVertical: 0 }} />
+        }
+      </View>
+      <MarketSection_menu size="small" />
+    </TouchableOpacity>
+  )
+}

package/modules/pos/cashier_invoice_list.tsx

@@ -0,0 +1,102 @@
+// 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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { PosCashier_invoice_item } from 'esoftplay/cache/pos/cashier_invoice_item/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+
+export interface PosCashier_invoice_listArgs {
+
+}
+export interface PosCashier_invoice_listProps {
+
+}
+
+function Status(props: any) {
+  const allStatus = [
+    {
+      id: 100,
+      title: esp.lang("pos/cashier_invoice_list", "all")
+    },
+    {
+      id: 0,
+      title: esp.lang("pos/cashier_invoice_list", "wait")
+    },
+    {
+      id: 1,
+      title: esp.lang("pos/cashier_invoice_list", "success")
+    },
+    {
+      id: 2,
+      title: esp.lang("pos/cashier_invoice_list", "failed")
+    },
+    {
+      id: 3,
+      title: esp.lang("pos/cashier_invoice_list", "expired")
+    },
+  ]
+
+  return (
+    <View style={{ backgroundColor: '#f8f9fa', paddingBottom: 3 }} >
+      <ScrollView horizontal >
+        {
+          allStatus.map((item, i) => (
+            <Pressable
+              onPress={() => props.onChangeStatus(item)}
+              key={i} style={{ paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: props.status == item?.id ? LibStyle.colorBlue : 'transparent' }} >
+              <LibTextstyle textStyle="callout" text={item?.title} style={{ color: props.status == item?.id ? LibStyle.colorBlue : '#000' }} />
+            </Pressable>
+          ))
+        }
+      </ScrollView>
+    </View>
+  )
+}
+
+export default function m(props: PosCashier_invoice_listProps): any {
+  const { dataCashier } = LibNavigation.getArgsAll(props)
+  const [status, setStatus] = useSafeState<any>({
+    id: 100,
+    title: esp.lang("pos/cashier_invoice_list", "all")
+  })
+  const [counter, setCounter] = useSafeState(1)
+  const url = status?.id == 100 ? 'partner_invoice' : 'partner_invoice?status=' + status?.id
+  // const url = 'pos_invoice?staff_id=' + dataCashier?.id + '&status=' + status
+
+  function renderItem(item: any, index: number) {
+    return (
+      <PosCashier_invoice_item key={index} {...item} onCancel={() => {
+        // LibDialog.warningConfirm('Batalkan Invoice', 'Batalkan Invoice kepada ' + item?.user_id_to_name + '?',
+        //   'Ya, Batalkan', () => {
+        //     cancelInvoice(item?.id, item?.cashier_id)
+        //   }, 'Tidak', () => { })
+      }} />
+    )
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/cashier_invoice_list", "header")} />
+      <Status status={status?.id} onChangeStatus={(item: any) => {
+        setStatus(item)
+        setCounter(counter + 1)
+      }} />
+      <LibInfinite
+        url={url}
+        key={counter}
+        errorView={(err: any) => (err != '' ? <ComponentMessage message={err} /> : null)}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}

package/modules/pos/cashier_list.tsx

@@ -0,0 +1,84 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PosCashier_listArgs {
+
+}
+export interface PosCashier_listProps {
+
+}
+export default function m(props: PosCashier_listProps): any {
+  const { business_data } = LibNavigation.getArgsAll(props)
+
+  function makeInitials(name: string) {
+    let words = name.trim().split(' ');
+    if (words.length == 0) {
+      return 'UN';
+    }
+
+    if (words.length == 1) {
+      return words[0][0].toUpperCase();
+    }
+
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  }
+
+  function bgColor(r: any) {
+    let o, e, n, f = [-680876936, -389564586, 606105819, -1044525330, -176418897, 1200080426, -1473231341, -45705983, 1770035416, -1958414417, -42063, -1990404162, 1804603682, -40341101, -1502002290, 1236535329, -165796510, -1069501632, 643717713, -373897302, -701558691, 38016083, -660478335, -405537848, 568446438, -1019803690, -187363961, 1163531501, -1444681467, -51403784, 1735328473, -1926607734, -378558, -2022574463, 1839030562, -35309556, -1530992060, 1272893353, -155497632, -1094730640, 681279174, -358537222, -722521979, 76029189, -640364487, -421815835, 530742520, -995338651, -198630844, 1126891415, -1416354905, -57434055, 1700485571, -1894986606, -1051523, -2054922799, 1873313359, -30611744, -1560198380, 1309151649, -145523070, -1120210379, 718787259, -343485551], t = [o = 1732584193, e = 4023233417, ~o, ~e], c = [], a: any = unescape(encodeURI(r)) + "\u0080", d = a.length;
+    for (r = --d / 4 + 2 | 15, c[--r] = 8 * d; ~d;) c[d >> 2] |= a.charCodeAt(d) << 8 * d--;
+    for (let i = a = 0; i < r; i += 16) {
+      for (d = t; 64 > a; d = [n = d[3], o + ((n = d[0] + [o & e | ~o & n, n & o | ~n & e, o ^ e ^ n, e ^ (o | ~n)][d = a >> 4] + f[a] + ~~c[i | 15 & [a, 5 * a + 1, 3 * a + 5, 7 * a][d]]) << (d = [7, 12, 17, 22, 5, 9, 14, 20, 4, 11, 16, 23, 6, 10, 15, 21][4 * d + a++ % 4]) | n >>> -d), o, e]) o = 0 | d[1],
+        e = d[2];
+      for (a = 4; a;) t[--a] += d[a];
+    }
+
+    for (r = ""; 32 > a;) r += (t[a >> 3] >> 4 * (1 ^ a++) & 15).toString(16);
+    return r;
+  }
+
+  return (
+
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("pos/cashier_list", "header")} />
+      <LibInfinite
+        // isDebug={1}
+        url={"partner_staff?business_id=" + business_data?.id}
+        errorView={(error: any) => {
+          return (
+            <ComponentMessage message={error} />
+          )
+        }}
+
+        renderItem={(item, i) => {
+          return (
+            <TouchableOpacity style={applyStyle({ marginBottom: 4 })} onPress={() => { LibNavigation.navigate('pos/cashier', { dataCashier: item }) }} key={i}>
+              <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', alignContent: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, padding: 10, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen, ...LibStyle.elevation(2) })} >
+                <View style={applyStyle({ height: 40, width: 40, borderRadius: 20, backgroundColor: '#' + bgColor(item?.name).toString(16).substr(0, 6), alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+                  <Text allowFontScaling={false} style={{ fontWeight: 'bold', color: '#fff', fontSize: 16 }}>{makeInitials(item?.name)}</Text>
+                </View>
+                <View style={{ flex: 1 }} >
+                  <Text allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={applyStyle({ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, marginRight: 10, flex: 1 })} >{item.name}</Text>
+                  {
+                    (!!item?.email)
+                    &&
+                    <Text allowFontScaling={false} style={[applyStyle({ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, marginRight: 10, flex: 1 }), { fontSize: 10 }]} >{item?.email}</Text>
+                  }
+                </View>
+              </View>
+            </TouchableOpacity>
+          )
+        }}
+      />
+    </View>
+  )
+}

package/modules/pos/cashier_report.tsx

@@ -0,0 +1,158 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { PosCashier_report_item } from 'esoftplay/cache/pos/cashier_report_item/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useRef } from 'react';
+import { Pressable, View } from 'react-native';
+
+export interface PosCashier_reportArgs {
+
+}
+export interface PosCashier_reportProps {
+  headeTitle?: string,
+  url?: string,
+  outletName?: string
+}
+export default function m(props: PosCashier_reportProps): any {
+  const { dataCashier } = LibNavigation.getArgsAll(props)
+
+  const type = [esp.lang("cashier/report", "text_daily"), esp.lang("cashier/report", "text_monthly"), esp.lang("cashier/report", "text_yearly")]
+  const typeId: any[] = ["date", "month", "year"]
+  const typeFormat: any[] = ["DD MMMM YYYY", "MMMM YYYY", "YYYY"]
+
+  const periodeRef = useRef<LibSlidingup>(null)
+  const datePickerRef = useRef<LibSlidingup>(null)
+
+  const [activeType, setActiveType] = useSafeState(1)
+  const [date, setDate] = useSafeState(moment().localeFormat("YYYY-MM-DD"))
+
+  let post: any = {
+    day: date.split('-')[2],
+    month: date.split('-')[1],
+    year: date.split('-')[0],
+  }
+
+  if (activeType > 2) {
+    delete post.day
+    delete post.month
+  }
+  if (activeType > 1) {
+    delete post.day
+  }
+
+  const _url = props?.url || "partner_staff_report?staff_id=" + dataCashier?.id
+  const url = _url + "&type=" + activeType
+  let lastDate = ''
+
+
+  function renderItem(item: any, i: number) {
+    if (lastDate != item.date) {
+      lastDate = item.date
+      return (
+        <View>
+          {i > 0 && <MarketSection_menu size="small" />}
+          <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row', backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimary, 0.2) }} >
+            <View style={{ flex: 1 }} >
+              <LibTextstyle textStyle={"caption2"} text={esp.lang("cashier/report", "text_date")} style={{ color: "#888" }} />
+              <LibTextstyle textStyle={"callout"} text={moment(item.date).localeFormat("dddd, DD MMMM YYYY")} />
+              <LibTextstyle textStyle={"caption2"} text={esp.lang("cashier/report", "text_total")} style={{ color: "#888", marginTop: 10 }} />
+              <LibTextstyle textStyle={"callout"} text={LibUtils.number(item.total_transaction)} />
+            </View>
+            <View style={{ flex: 1, alignItems: "flex-end" }} >
+              <LibTextstyle textStyle={"caption2"} text={esp.lang("cashier/report", "text_saldo")} style={{ color: "#888" }} />
+              <LibTextstyle textStyle={"callout"} text={LibUtils.money(item.amount)} style={{ fontWeight: "bold" }} />
+            </View>
+          </View>
+          <View style={{ backgroundColor: "#f4f4f4", height: 2 }} />
+          <PosCashier_report_item data={item.list} />
+        </View>
+      )
+    } else
+      return (
+        <PosCashier_report_item data={item.list} />
+      )
+  }
+
+  const subtitle = props?.outletName ? String(props?.outletName).length > 35 ? String(props?.outletName).substring(0, 35) + "..." : String(props?.outletName) : undefined
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={props?.headeTitle || esp.lang("pos/cashier_report", "header")} subtitle={subtitle} />
+      <View style={{ flexDirection: "row" }} >
+        <Pressable
+          style={{ flexDirection: "row", paddingLeft: 17, paddingVertical: 10, alignItems: 'center', flex: 1 }}
+          onPress={() => { periodeRef.current?.show() }} >
+          <View style={{ marginRight: 10, flex: 1 }} >
+            <LibTextstyle textStyle="caption2" text={esp.lang("cashier/report", "text_type1")} style={{ color: "#888" }} />
+            <LibTextstyle text={type[activeType - 1]} textStyle="callout" />
+          </View>
+          <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+        </Pressable>
+        <Pressable
+          style={{ flexDirection: "row", paddingHorizontal: 17, paddingVertical: 10, alignItems: 'center', flex: 1 }}
+          onPress={() => { datePickerRef.current?.show() }} >
+          <View style={{ marginRight: 10, flex: 1 }} >
+            <LibTextstyle textStyle="caption2" text={esp.lang("cashier/report", "text_periode")} style={{ color: "#888" }} />
+            <LibTextstyle text={moment(date).localeFormat(typeFormat[activeType - 1])} textStyle="callout" />
+          </View>
+          <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+        </Pressable>
+      </View>
+      <View style={{ height: 10, backgroundColor: LibStyle.colorBgGrey }} />
+
+      {<LibInfinite
+        url={url}
+        post={post}
+        mainIndex={'report'}
+        key={date + '-' + '-' + activeType}
+        errorView={(error: string) => {
+          return (
+            <ComponentMessage message={error} />
+          )
+        }}
+        onDataChange={(x) => {
+          lastDate = ''
+        }}
+        renderItem={renderItem}
+      />}
+
+      <MarketSheet
+        _ref={periodeRef}
+        title={esp.lang("cashier/report", "text_type")}
+        options={[
+          ...type.map((x, i) => ({ text: x, onPress: () => setActiveType(i + 1) }))
+        ]}
+      />
+
+      <LibSlidingup ref={datePickerRef} >
+        <View style={{ backgroundColor: "white", minHeight: 220 }} >
+          <LibDatepicker
+            maxDate={moment().localeFormat("YYYY-MM-DD")}
+            minDate={moment().add(-2, 'years').localeFormat("YYYY-MM-DD")}
+            onDateChange={(x: string) => {
+              datePickerRef.current?.hide()
+              setDate(x)
+            }}
+            type={typeId[activeType - 1]}
+            selectedDate={date}
+          />
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}