esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/pos/register_business.tsx

@@ -0,0 +1,333 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+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 { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibInput_rectangle2 } from 'esoftplay/cache/lib/input_rectangle2/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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 { MarketButton } from 'esoftplay/cache/market/button/import';
+import { UseForm } from 'esoftplay/cache/use/form/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Keyboard, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PosRegister_businessArgs {
+
+}
+export interface PosRegister_businessProps {
+
+}
+
+
+export default function m(props: PosRegister_businessProps): any {
+  const { post, dataPricing }: any = LibNavigation.getArgsAll(props)
+  const [ktp, setKtp] = useSafeState<string>("")
+  const [typeIdentity, setTypeIdentity] = useSafeState<any>()
+  const [loc, setLoc] = useSafeState<any>('')
+  const [imageBisnis, setImageBisnis] = useSafeState<any>('')
+
+  const dialogType = React.useRef<LibSlidingup>(null)
+  const showKtp = React.useRef<LibSlidingup>(null)
+
+  let inputNameBisnis = useRef<LibInput_rectangle2>(null)
+  let inputAddressBisnis = useRef<LibInput_rectangle2>(null)
+  let inputZipcode = useRef<LibInput_rectangle2>(null)
+  let inputName = useRef<LibInput_rectangle2>(null)
+  let inputNoId = useRef<LibInput_rectangle2>(null)
+  let inputBankName = useRef<LibInput_rectangle2>(null)
+  let inputBankAccount = useRef<LibInput_rectangle2>(null)
+
+  const [formRegister, setFormRegister] = UseForm<any>("pos/register")
+
+  let _type_identity = [
+    {
+      id: 1,
+      title: esp.lang("withdraw/upgrade1", "ktp")
+    },
+    {
+      id: 2,
+      title: esp.lang("withdraw/upgrade1", "kitas")
+    }
+  ]
+
+  useEffect(() => {
+    setImageBisnis(formRegister?.business_image)
+    setLoc(formRegister?.business_location)
+    setTypeIdentity(formRegister?.id_card_type)
+    setKtp(formRegister?.id_card_photo)
+  }, [])
+
+  function renderTypeIdentity(item: any, i: number) {
+    return (
+      <TouchableOpacity key={i} onPress={() => {
+        setTypeIdentity(item)
+        dialogType.current!.hide()
+        setFormRegister('id_card_type')(item)
+      }}
+        style={applyStyle({ marginBottom: 10, alignItems: 'center', paddingLeft: 10, padding: 10, borderRadius: 5, alignContent: 'center', justifyContent: 'center', backgroundColor: '#f6f6f6' })} >
+        <Text allowFontScaling={false} style={applyStyle({ fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" })}>{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+
+  function register() {
+
+    if (inputNameBisnis?.current?.getText() == '') {
+      inputNameBisnis?.current?.setError(esp.lang("pos/register_business", "name_empty"))
+      return false
+    }
+
+    if (!imageBisnis) {
+      LibToastProperty.show(esp.lang("pos/register_business", "logo_empty"))
+      return false
+    }
+
+    if (!loc) {
+      LibToastProperty.show(esp.lang("pos/register_business", "province_empty"))
+      return false
+    }
+
+    if (inputAddressBisnis?.current?.getText() == '') {
+      inputAddressBisnis?.current?.setError(esp.lang("pos/register_business", "address_empty"))
+      return false
+    }
+
+    if (inputZipcode?.current?.getText() == '') {
+      inputZipcode?.current?.setError("Silahkan masukkan kode pos bisnis anda")
+      return false
+    }
+
+    let _post = {
+      ...post,
+      business_name: formRegister?.business_name,
+      business_image: formRegister?.business_image,
+      business_address: formRegister?.business_address,
+      business_location: formRegister?.business_location?.id,
+      postcode: formRegister?.postcode
+    }
+
+    if (formRegister?.hasOwnProperty('bank_account_name')) {
+      post.bank_account_name = formRegister?.bank_account_name
+    }
+    if (formRegister?.hasOwnProperty('bank_account_number')) {
+      post.bank_account_number = formRegister?.bank_account_number
+    }
+    if (formRegister?.hasOwnProperty('id_card_photo')) {
+      post.id_card_photo = formRegister?.id_card_photo
+    }
+    if (formRegister?.hasOwnProperty('id_card_type')) {
+      post.id_card_type = formRegister?.id_card_type
+    }
+    if (formRegister?.hasOwnProperty('id_card_number')) {
+      post.id_card_number = formRegister?.id_card_number
+    }
+    if (formRegister?.hasOwnProperty('id_card_name')) {
+      post.id_card_name = formRegister?.id_card_name
+    }
+
+    LibNavigation.navigate('pos/pricing_payment', { post: _post, dataPricing: dataPricing })
+
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <LibKeyboard_avoid style={{ flex: 1 }}>
+        <ComponentHeader title={esp.lang("pos/register_business", "header")} subtitle={esp.lang("pos/register_business", "header_sub")} />
+        <ScrollView>
+          <View style={{ margin: 15, backgroundColor: '#fff', marginTop: 5 }}>
+            <ComponentLabel_input label={esp.lang("pos/register_business", "bisnis_name")} mandatory />
+            <LibInput_rectangle2
+              ref={inputNameBisnis}
+              defaultValue={formRegister?.business_name}
+              onChangeText={(t) => setFormRegister('business_name')(t)}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={esp.lang("pos/register_business", "placeholder_name_bisnis")} />
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "logo")} mandatory />
+            <View style={{ flexDirection: "row", marginTop: 12 }} >
+              <LibPicture
+                source={{ uri: imageBisnis }}
+                style={{ height: 100, width: 100, borderRadius: 10, backgroundColor: "#f1f2f3", borderColor: "#ddd", borderWidth: 1 }}
+              />
+              <View style={{ marginLeft: 20 }} >
+                <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888" }}>{esp.lang("market/merchant_input", "max_file")}</Text>
+                <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("market/merchant_input", "max_size")}</Text>
+                <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#888", marginTop: 6 }}>{esp.lang("market/merchant_input", "files_allow")}</Text>
+                <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#000", marginTop: 4 }}>{esp.lang("market/merchant_input", "file_type")}</Text>
+                <MarketButton
+                  text={esp.lang("market/merchant_input", "btn_browse")}
+                  buttonStyle={{ marginTop: 10 }}
+                  colorBackground={"white"}
+                  colorBorder={LibStyle.colorBlue}
+                  color={LibStyle.colorBlue}
+                  textStyle={{ fontSize: 13 }}
+                  onPress={() => {
+                    LibImage.fromGallery().then((image) => {
+                      setImageBisnis(image)
+                      setFormRegister('business_image')(image)
+                    })
+                  }} />
+              </View>
+            </View>
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "business_location")} mandatory />
+            <TouchableOpacity
+              onPress={() => {
+                Keyboard.dismiss()
+                LibUtils.debounce(() => {
+                  LibNavigation.navigateForResult('user/location').then((location) => {
+                    setLoc(location);
+                    setFormRegister('business_location')(location)
+                  })
+                }, 100)
+              }}
+            >
+              <View style={{ height: 35, borderRadius: 5, marginTop: 8, backgroundColor: "#fff", borderWidth: 1, borderColor: "#c4c4c4", flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ color: loc ? "#000" : '#c5c5c5', fontFamily: "SFProText", fontSize: 12, marginRight: 15, marginLeft: 8 }}>{loc ? loc?.title : esp.lang("pos/register_business", "select_location")}</Text>
+                <LibIcon name="chevron-down" style={{ marginRight: 5 }} color="#4b4b4b" size={16} />
+              </View>
+            </TouchableOpacity>
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "address")} mandatory />
+            <LibInput_rectangle2
+              ref={inputAddressBisnis}
+              defaultValue={formRegister?.business_address}
+              style={{ borderColor: '#c4c4c4', marginTop: 8, borderRadius: 5, height: 100, justifyContent: 'flex-start' }}
+              inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 100 }}
+              onChangeText={(t) => setFormRegister('business_address')(t)}
+              multiline
+              placeholder={esp.lang("pos/register_business", "placeholder_address")} />
+
+            <ComponentLabel_input label={"Masukkan Kode Pos Bisnis"} mandatory />
+            <LibInput_rectangle2
+              ref={inputZipcode}
+              defaultValue={formRegister?.postcode}
+              onChangeText={(t) => setFormRegister('postcode')(t)}
+              keyboardType='numeric'
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={"Masukkan Kode Pos Bisnis Anda"} />
+
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginTop: 15 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("pos/register_business", "identity")}</Text>
+              <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginRight: 7 }} />
+            </View>
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "id_type")} />
+            <TouchableOpacity
+              onPress={() => {
+                Keyboard.dismiss()
+                dialogType?.current?.show()
+              }} >
+              <View style={{ height: 35, borderRadius: 5, marginTop: 8, backgroundColor: "#fff", borderWidth: 1, borderColor: "#c4c4c4", flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ color: typeIdentity ? "#000" : '#c5c5c5', fontFamily: "SFProText", fontSize: 12, marginRight: 15, marginLeft: 8 }}>{typeIdentity ? typeIdentity?.title : esp.lang("pos/register_business", "type_identity")}</Text>
+                <LibIcon name="chevron-down" style={{ marginRight: 5 }} color="#4b4b4b" size={16} />
+              </View>
+            </TouchableOpacity>
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "name")} />
+            <LibInput_rectangle2
+              ref={inputName}
+              defaultValue={formRegister?.id_card_name}
+              onChangeText={(t) => setFormRegister('id_card_name')(t)}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={esp.lang("pos/register_business", "placeholder_name")} />
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "id")} />
+            <LibInput_rectangle2
+              keyboardType='phone-pad'
+              defaultValue={formRegister?.id_card_number}
+              ref={inputNoId}
+              onChangeText={(t) => setFormRegister('id_card_number')(t)}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={esp.lang("pos/register_business", "placeholder_id")} />
+
+            <ComponentLabel_input label={esp.lang("withdraw/upgrade1", "title_upload_ktp/kitas")} />
+            <View style={{ flexDirection: 'row', marginTop: 15 }}>
+              {
+                ktp ?
+                  <TouchableOpacity onPress={() => showKtp.current!.show()}>
+                    <LibPicture style={{ width: LibStyle.width * 0.5, height: (LibStyle.width * 0.5) / 2 }} resizeMode="contain" source={{ uri: ktp }} />
+                  </TouchableOpacity>
+                  :
+                  <TouchableOpacity onPress={() => {
+                    LibNavigation.navigateForResult('component/camera', { cameraType: "back" }).then((item) => {
+                      setKtp(item)
+                      setFormRegister('id_card_photo')(item)
+                    })
+                  }} style={{ borderWidth: 1, borderColor: '#FFCC29', borderStyle: 'dashed', width: LibStyle.width * 0.5, height: (LibStyle.width * 0.5) / 2, backgroundColor: '#FDFAEA', alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderRadius: 4 }}>
+                    <LibPicture source={esp.assets('icons/ic_camera.png')} style={{ height: 40, width: 50 }} resizeMode="contain" />
+                    <Text allowFontScaling={false} style={{ marginTop: 10, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{esp.lang("withdraw/upgrade1", "take_photo")}</Text>
+                  </TouchableOpacity>
+              }
+              <View>
+                <LibPicture style={{ height: 75, width: 150 }} resizeMode="contain" source={esp.assets('ktp.png')} />
+                <View style={{ flex: 1, margin: 6, marginBottom: 0, borderBottomLeftRadius: 4, borderBottomRightRadius: 4, marginTop: 0, padding: 5, backgroundColor: '#8E9189' }} />
+              </View>
+            </View>
+            <Text allowFontScaling={false} style={{ marginBottom: 10, marginTop: 7, fontStyle: "normal", fontWeight: "normal", fontSize: 12, color: LibStyle.colorRed }}>{esp.lang("withdraw/upgrade1", "description_photo_ktp/kitas")}</Text>
+
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginTop: 15 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("pos/register_business", "bank_account")}</Text>
+              <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginRight: 7 }} />
+            </View>
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "name_bank")} />
+            <LibInput_rectangle2
+              ref={inputBankName}
+              defaultValue={formRegister?.bank_account_name}
+              onChangeText={(t) => setFormRegister('bank_account_name')(t)}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={esp.lang("pos/register_business", "bank_name")} />
+
+            <ComponentLabel_input label={esp.lang("pos/register_business", "number_bank")} />
+            <LibInput_rectangle2
+              ref={inputBankAccount}
+              defaultValue={formRegister?.bank_account_number}
+              onChangeText={(t) => setFormRegister('bank_account_number')(t)}
+              style={{ borderColor: '#c4c4c4', height: 35, marginTop: 8, borderRadius: 5 }} placeholder={esp.lang("pos/register_business", "bank_number")} />
+
+          </View>
+        </ScrollView>
+        <ComponentButton
+          style={{ margin: 10 }}
+          label={esp.lang("pos/register_business", "btn_next")}
+          onPress={() => {
+            register()
+          }}
+          backgroundColor={LibStyle.colorBlue}
+          fontColor={"#fff"}
+        />
+
+        <LibSlidingup ref={dialogType}>
+          <View style={{ backgroundColor: '#fff', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingBottom: 35, paddingHorizontal: 19, }}>
+            <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("withdraw/upgrade1", "title_dialog_type_identity")}</Text>
+            {
+              _type_identity.map(renderTypeIdentity)
+            }
+          </View>
+        </LibSlidingup>
+
+        <LibSlidingup ref={showKtp}>
+          <View style={{ backgroundColor: '#fff', maxHeight: LibStyle.height / 2, justifyContent: 'space-between' }}>
+            <LibPicture style={{ marginTop: 30, width: LibStyle.width - 100, height: LibStyle.width / 2, alignSelf: 'center' }} resizeMode="contain" source={{ uri: ktp }} />
+            <TouchableOpacity onPress={() => {
+              showKtp.current!.hide()
+              LibNavigation.navigateForResult('component/camera', undefined).then((item) => {
+                setKtp(item)
+              })
+            }} style={{ alignSelf: 'center', margin: 20, borderColor: "#45C9AF", padding: 7, borderWidth: 1, paddingLeft: 15, paddingRight: 15, borderRadius: 15, width: LibStyle.width / 2, alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#45C9AF" }} >{esp.lang("withdraw/upgrade1", "change_picture")}</Text>
+            </TouchableOpacity>
+          </View>
+        </LibSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}

package/modules/pos/transaction.tsx

@@ -0,0 +1,338 @@
+// 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 { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/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 { MarketSheet } from 'esoftplay/cache/market/sheet/import';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface PosTransactionArgs {
+  business_data: any
+}
+export interface PosTransactionProps {
+
+}
+export default function m(props: PosTransactionProps): any {
+  const { business_data } = LibNavigation.getArgsAll(props)
+  var date = new Date()
+  date.setDate(1);
+  const [periodePerformAds, setPeriodePerformAds] = useSafeState<any>()
+  const [dateRange, setDateRange] = useSafeState<any>({ date_start: '', date_end: '' })
+  const [outlet, setOutlet] = useSafeState()
+  const [_outlet, set_Outlet] = useSafeState()
+  const [cashier, setCashier] = useSafeState()
+  const [_cashier, set_Cashier] = useSafeState()
+
+  const datePickerRef = useRef<LibSlidingup>(null)
+  const outletRef = useRef<LibSlidingup>(null)
+  const cashierRef = useRef<LibSlidingup>(null)
+
+  let periodePerform = [
+    {
+      id: 1,
+      title: "Hari ini",
+      date: moment().localeFormat('DD MMM YYYY'),
+      date_start: moment().localeFormat('YYYY-MM-DD'),
+      date_end: moment().localeFormat('YYYY-MM-DD'),
+    },
+    {
+      id: 2,
+      title: "Kemarin",
+      date: moment().subtract(1, "days").localeFormat("DD MMM YYYY"),
+      date_start: moment().subtract(1, "days").localeFormat('YYYY-MM-DD'),
+      date_end: moment().subtract(1, "days").localeFormat('YYYY-MM-DD'),
+    },
+    {
+      id: 3,
+      title: "7 hari terakhir",
+      date: moment().add(-6, 'days').localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
+      date_start: moment().add(-6, 'days').localeFormat('YYYY-MM-DD'),
+      date_end: moment().localeFormat('YYYY-MM-DD'),
+    },
+    {
+      id: 4,
+      title: "30 hari terakhir",
+      date: moment().add(-29, 'days').localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
+      date_start: moment().add(-29, 'days').localeFormat('YYYY-MM-DD'),
+      date_end: moment().localeFormat('YYYY-MM-DD'),
+    },
+    {
+      id: 5,
+      title: "Bulan ini",
+      date: moment(date).localeFormat('DD MMM YYYY') + '-' + moment().localeFormat('DD MMM YYYY'),
+      date_start: moment(date).localeFormat('YYYY-MM-DD'),
+      date_end: moment().localeFormat('YYYY-MM-DD'),
+    },
+    {
+      id: 6,
+      title: "Custom",
+      date: "Pilih Tanggal",
+      module: 'market/ads_calendar'
+    }
+  ]
+
+  const _url = "https://api.test.pos.bbo.co.id/open_api/transaction?business_id=7"
+  // const _url = "https://api.test.pos.bbo.co.id/open_api/transaction"
+
+  useEffect(() => {
+    getOutlets()
+    getEmployee()
+  }, [])
+
+  const header = {
+    "partner-key": "KFWl9cgwO2uj8ZpDY46i"
+  }
+
+  function getB() {
+    const b = "https://api.test.pos.bbo.co.id/open_api/business"
+    new LibCurl().withHeader(header)(b, null, (res, msg) => {
+      
+    }, (err) => {
+    }, 1)
+  }
+  
+  function getOutlets() {
+    const url = "https://api.test.pos.bbo.co.id/open_api/outlets"
+    new LibCurl().withHeader(header)(url, null, (res, msg) => {
+      setOutlet(res?.list)
+    }, (err) => {
+    }, 1)
+  }
+  
+  function getEmployee() {
+    const url = "https://api.test.pos.bbo.co.id/open_api/employees"
+    new LibCurl().withHeader(header)(url, null, (res, msg) => {
+      setCashier(res?.list)
+    }, (err) => {
+    }, 1)
+  }
+
+  function buildUrl(url: string) {
+    if (_outlet) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'outlet_id=' + _outlet?.id
+    }
+    if (_cashier) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'employee_id=' + _cashier?.id
+    }
+    if (dateRange?.date_start != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'date=' + dateRange?.date_start + "," + dateRange?.date_end
+    }
+    return url
+  }
+
+  const color: any = {
+    0: "#FFC800", /* "menunggu pembayaran" */
+    1: "#00BF63", /* "transaksi berhasil" */
+    2: "#FF0300" /* "transaksi dibatalkan" */
+  }
+
+  const colorRefund: any = {
+    1: "#FFC800",
+    2: "#FF0300"
+  }
+
+  // 0 = waiting payment 1 = success, 2 = canceled
+  // 0 = no refund, 1 = partial refund, 2 = full refund
+
+  function renderItem(item: any, i: number) {
+    return (
+      <ItemTrx {...item} />
+    )
+  }
+
+  function ItemTrx(props: any) {
+    return (
+      <Pressable onPress={() => {
+        LibNavigation.navigate('pos/transaction_detail', { data: props })
+      }} style={{ backgroundColor: LibUtils.hexToRgba(color?.[props?.status], 0.2) }}>
+        {
+          props?.refunded > 0 &&
+          <View style={{ marginHorizontal: 17, marginTop: 10, flexDirection: 'row' }}>
+            <View style={{ backgroundColor: LibUtils.hexToRgba(colorRefund?.[props?.refunded], 0.4), padding: 5, borderRadius: 5 }}>
+              <LibTextstyle textStyle={"caption2"} text={props?.refunded == 1 ? "Partial Refund" : "Full Refund"} />
+            </View>
+          </View>
+        }
+        <View style={{ paddingHorizontal: 17, paddingVertical: 10, flexDirection: 'row' }} >
+          <View style={{ flex: 1 }} >
+            <LibTextstyle textStyle={"caption2"} text={"Tanggal"} style={{ color: "#888" }} />
+            <LibTextstyle textStyle={"callout"} text={moment(props?.created).localeFormat("dddd, DD MMMM YYYY")} />
+            <LibTextstyle textStyle={"caption2"} text={"Invoice"} style={{ color: "#888", marginTop: 10 }} />
+            <LibTextstyle textStyle={"callout"} text={props?.invoice} />
+            <LibTextstyle textStyle={"caption2"} text={"Status"} style={{ color: "#888", marginTop: 10 }} />
+            <LibTextstyle textStyle={"callout"} text={props?.status_name} />
+            <LibTextstyle textStyle={"caption2"} text={"Kasir"} style={{ color: "#888", marginTop: 10 }} />
+            <LibTextstyle textStyle={"callout"} text={props?.cashier_name} />
+          </View>
+          <View style={{ flex: 1, alignItems: "flex-end" }} >
+            <LibTextstyle textStyle={"caption2"} text={"Total"} style={{ color: "#888" }} />
+            <LibTextstyle textStyle={"callout"} text={LibUtils.money(props?.total)} style={{ fontWeight: "bold" }} />
+            <LibTextstyle textStyle={"caption2"} text={"Order Code"} style={{ color: "#888", marginTop: 10 }} />
+            <LibTextstyle textStyle={"callout"} text={props?.order_code} />
+            <LibTextstyle textStyle={"caption2"} text={"Metode Pembayaran"} style={{ color: "#888", marginTop: 10 }} />
+            <LibTextstyle textStyle={"callout"} text={props?.payment_title} />
+            {
+              props?.customer_name != null &&
+              <>
+                <LibTextstyle textStyle={"caption2"} text={"Pembeli"} style={{ color: "#888", marginTop: 10 }} />
+                <LibTextstyle textStyle={"callout"} text={props?.customer_name} />
+              </>
+            }
+          </View>
+        </View>
+        <View style={{ backgroundColor: "#f4f4f4", height: 2 }} />
+      </Pressable>
+    )
+  }
+
+  function renderPeriodePerform(item: any, i: number) {
+    return (
+      <TouchableOpacity onPress={() => {
+        if (item.hasOwnProperty("module")) {
+          LibNavigation.navigateForResult(item.module, undefined, 1648).then((value) => {
+            setDateRange({ date_start: value.date_start, date_end: value.date_end })
+            setPeriodePerformAds(item)
+          })
+          datePickerRef.current?.hide()
+        } else {
+          setDateRange({ date_start: item.date_start, date_end: item.date_end })
+          setPeriodePerformAds(item)
+          datePickerRef.current?.hide()
+        }
+      }} key={i} style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View>
+          <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }} >{item.title}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#707070" }} >{item.date}</Text>
+        </View>
+        <TouchableOpacity onPress={() => {
+          if (item.hasOwnProperty("module")) {
+            LibNavigation.navigateForResult(item.module, undefined, 1648).then((value) => {
+              setDateRange({ date_start: value.date_start, date_end: value.date_end })
+              setPeriodePerformAds(item)
+            })
+            datePickerRef.current?.hide()
+          } else {
+            setDateRange({ date_start: item.date_start, date_end: item.date_end })
+            setPeriodePerformAds(item)
+            datePickerRef.current?.hide()
+          }
+        }}>
+          <LibIcon name={periodePerformAds?.id == item.id ? "radiobox-marked" : "radiobox-blank"} />
+        </TouchableOpacity>
+      </TouchableOpacity>
+    )
+  }
+
+  if (!outlet) {
+    return <LibLoading />
+  }
+  if (!cashier) {
+    return <LibLoading />
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={"Transaksi"} />
+      <View style={{ flexDirection: "row" }} >
+        <Pressable
+          style={{ flexDirection: "row", paddingLeft: 17, paddingVertical: 10, alignItems: 'center', flex: 1 }}
+          onPress={() => { outletRef.current?.show() }} >
+          <View style={{ marginRight: 10, flex: 1 }} >
+            <LibTextstyle textStyle="caption2" text={"Outlet"} style={{ color: "#888" }} />
+            <LibTextstyle numberOfLines={1} text={_outlet?.name || "Pilih Outlet"} textStyle="callout" />
+          </View>
+          <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+        </Pressable>
+        <Pressable
+          style={{ flexDirection: "row", paddingHorizontal: 17, paddingVertical: 10, alignItems: 'center', flex: 1 }}
+          onPress={() => { cashierRef.current?.show() }} >
+          <View style={{ marginRight: 10, flex: 1 }} >
+            <LibTextstyle textStyle="caption2" text={"Kasir"} style={{ color: "#888" }} />
+            <LibTextstyle numberOfLines={1} text={_cashier?.name || "Pilih Kasir"} textStyle="callout" />
+          </View>
+          <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+        </Pressable>
+      </View>
+      <View style={{ flexDirection: "row" }} >
+        <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={"Periode Transaksi"} style={{ color: "#888" }} />
+            {
+              !periodePerformAds ?
+                <LibTextstyle text={"Pilih Periode"} textStyle="callout" />
+                : periodePerformAds?.id == 6 ?
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Text allowFontScaling={false} style={{}} >{moment(dateRange.date_start).localeFormat('DD MMM YYYY')} - </Text>
+                    <Text allowFontScaling={false} style={{}} >{moment(dateRange.date_end).localeFormat('DD MMM YYYY')}</Text>
+                  </View>
+                  :
+                  <LibTextstyle text={periodePerformAds?.title} textStyle="callout" />
+            }
+          </View>
+          <LibIcon.SimpleLineIcons name="arrow-down" size={15} />
+        </Pressable>
+      </View>
+
+      <LibInfinite
+        url={buildUrl(_url)}
+        customHeader={header}
+        key={buildUrl(_url)}
+        ListHeaderComponent={
+          <View style={{ height: 10, backgroundColor: LibStyle.colorBgGrey }} />
+        }
+        errorView={(error: string) => {
+          return (
+            <ComponentMessage message={error} />
+          )
+        }}
+        renderItem={renderItem}
+      />
+
+      <LibSlidingup ref={datePickerRef}>
+        <View style={{ backgroundColor: 'white' }}>
+          <ScrollView>
+            {periodePerform?.map(renderPeriodePerform)}
+          </ScrollView>
+        </View>
+      </LibSlidingup>
+
+      {
+        outlet &&
+        <MarketSheet
+          _ref={outletRef}
+          title={"Pilih Outlet"}
+          options={[
+            ...outlet?.map?.((x, i) => ({ text: x?.name, onPress: () => set_Outlet(x) }))
+          ]}
+        />
+      }
+      {
+        cashier &&
+        <MarketSheet
+          _ref={cashierRef}
+          title={"Pilih Kasir"}
+          options={[
+            ...cashier?.map?.((x, i) => ({ text: x?.name, onPress: () => set_Cashier(x) }))
+          ]}
+        />
+      }
+    </View>
+  )
+}