esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/mart/dc_account.tsx

@@ -0,0 +1,312 @@
+// withHooks
+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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 { MarketNotice_slider } from 'esoftplay/cache/market/notice_slider/import';
+import { MarketWithdrawArgs } from 'esoftplay/cache/market/withdraw/import';
+import { MartDc_admin_orderArgs } from 'esoftplay/cache/mart/dc_admin_order/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { NotificationDcProperty } from 'esoftplay/cache/notification/dc/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_accountArgs {
+
+}
+export interface MartDc_accountProps {
+
+}
+
+
+interface itemSquare {
+  image: string,
+  title: string,
+  onPress: () => void,
+  badge?: number
+}
+
+const itemWidth = (LibStyle.width - 70) / 4
+
+
+function Section(props: any) {
+  return (
+    <View style={{ marginHorizontal: 20, marginTop: 20 }} >
+      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{props.title}</Text>
+    </View>
+  )
+}
+
+function Items(props: itemSquare) {
+  const _badge = props.badge || 0
+  return (
+    <TouchableOpacity activeOpacity={1} onPress={props?.onPress} style={{ marginRight: 10, marginBottom: 10, maxWidth: itemWidth }} >
+      <View style={{ width: itemWidth, alignItems: "center", padding: 15, borderRadius: 5 }} >
+        <LibPicture source={esp.assets(props.image)} style={{ width: 30, height: 30 }} resizeMode="contain" />
+        {
+          _badge > 0 &&
+          <View style={{ position: 'absolute', top: 0, right: 10, height: 20, width: 20, borderRadius: 10, padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 8, letterSpacing: 0, color: "#fff" }} >{props?.badge || 0}</Text>
+          </View>
+        }
+      </View>
+      <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", textAlign: "center", fontSize: 10, lineHeight: 14 }} >{props?.title}</Text>
+    </TouchableOpacity>
+  )
+}
+
+export default function m(props: MartDc_accountProps): any {
+  const user = UserClass.state().useSelector(s => s)
+  const [data, setData] = useSafeState<any>()
+  const [errorMsg, setErrorMsg] = useSafeState<any>()
+  const [badgeDc, setBadgeDc] = NotificationDcProperty.state().useState()
+  const [hasWarningAlert, setHasWarningAlert] = useSafeState(false)
+  const scrolRef = useRef<LibScroll>(null)
+
+  const [animated, setAnimated] = useSafeState(new Animated.Value(0))
+
+  const notif = animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
+    extrapolate: 'clamp',
+  })
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl('mitra/dc_detail', null,
+      (res, msg) => {
+        setHasWarningAlert(res.alert?.some?.((x: any) => x.type == 'warning' || x.type == 'danger'))
+        setData(res)
+      }, (msg) => {
+        setErrorMsg(msg)
+      }, 1
+    )
+    getBadgeDc()
+  }
+
+  function getBadgeDc() {
+    new LibCurl('mitra/dc_purchasing_notification', null,
+      (res, msg) => {
+        setBadgeDc(res)
+      }
+    )
+  }
+
+  function blink() {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(animated, {
+          toValue: 1,
+          duration: 500,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animated, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: true,
+        })
+      ]), { iterations: 5 }
+    ).start()
+  }
+
+  function Blinkview(props: any) {
+    return (
+      <Animated.View style={{ opacity: notif, backgroundColor: 'white' }}>
+        {props.children}
+      </Animated.View>
+    )
+  }
+
+  const renderSkeleton = (x: any, i: number) => (
+    <View key={i} style={{ width: itemWidth, height: itemWidth, alignItems: 'center', marginRight: 10, marginBottom: 10 }}>
+      <View style={{ width: 40, height: 40, borderRadius: 5, backgroundColor: 'white' }} />
+      <View style={{ width: '80%', height: 15, borderRadius: 10, backgroundColor: 'white', marginTop: 10 }} />
+    </View>
+  )
+
+  if (!data && !errorMsg) {
+    return (
+      <View style={{ flex: 1 }}>
+        <MartHeader title={esp.lang("mart/dc_account", "dc")} subtitle={esp.lang("mart/dc_account", "account_dc")} onlyBack />
+        <LibSkeleton backgroundStyle={{ marginHorizontal: 17 }} >
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }} >
+            <View style={{ height: 40, width: 40, borderRadius: 20, backgroundColor: 'white' }} />
+            <View style={{ flex: 1, marginLeft: 10 }}>
+              <View style={{ width: '40%', height: 20, borderRadius: 10, backgroundColor: 'white' }} />
+              <View style={{ width: '40%', height: 15, borderRadius: 10, backgroundColor: 'white', marginTop: 5 }} />
+            </View>
+          </View>
+          <View style={{ borderWidth: 1, flexDirection: 'row', alignItems: 'center', padding: 5, borderRadius: 5, marginVertical: 15 }}>
+            <LibIcon name="map-marker" size={20} color={LibStyle.colorPrimaryMart} style={{ marginRight: 5 }} />
+            <View style={{ width: '60%', height: 15, borderRadius: 10, backgroundColor: 'white' }} />
+          </View>
+          <View style={{ flexDirection: "row", marginBottom: 15 }} >
+            <View style={{ flex: 1, marginRight: 10, flexDirection: 'row', alignItems: "center", padding: 10, borderRadius: 5, borderWidth: 1 }} >
+              <View style={{ width: 40, height: 40, borderRadius: 5, backgroundColor: 'white' }} />
+              <View style={{ flexDirection: 'column', marginLeft: 5, flex: 1, alignItems: 'center' }}>
+                <View style={{ width: '50%', backgroundColor: 'white', height: 12, borderRadius: 8, marginBottom: 5 }} />
+                <View style={{ width: '80%', backgroundColor: 'white', height: 15, borderRadius: 10 }} />
+              </View>
+            </View>
+            <View style={{ paddingVertical: 10, width: itemWidth, alignItems: "center", marginRight: 10, borderRadius: 5, borderWidth: 1 }}>
+              <View style={{ width: 35, height: 35, borderRadius: 5, backgroundColor: 'white' }} />
+              <View style={{ width: '50%', backgroundColor: 'white', height: 12, borderRadius: 8, marginTop: 5 }} />
+            </View>
+            <View style={{ paddingVertical: 10, width: itemWidth, alignItems: "center", borderRadius: 5, borderWidth: 1 }}>
+              <View style={{ width: 35, height: 35, borderRadius: 5, backgroundColor: 'white' }} />
+              <View style={{ width: '50%', backgroundColor: 'white', height: 12, borderRadius: 8, marginTop: 5 }} />
+            </View>
+          </View>
+          <View style={{ width: '40%', height: 20, backgroundColor: 'white', borderRadius: 10, marginTop: 10 }} />
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 20, marginRight: -20 }}>
+            {
+              new Array(3).fill('').map(renderSkeleton)
+            }
+          </View>
+          <View style={{ width: '40%', height: 20, backgroundColor: 'white', borderRadius: 10, marginTop: 10 }} />
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 20, marginRight: -20 }}>
+            {
+              new Array(3).fill('').map(renderSkeleton)
+            }
+          </View>
+          <View style={{ width: '40%', height: 20, backgroundColor: 'white', borderRadius: 10, marginTop: 10 }} />
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 20, marginRight: -20 }}>
+            {
+              new Array(3).fill('').map(renderSkeleton)
+            }
+          </View>
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }} >
+      <MartHeader title={esp.lang("mart/dc_account", "dc")} subtitle={esp.lang("mart/dc_account", "account_dc")} onlyBack />
+      {
+        (!data && !errorMsg) ? <LibLoading /> : errorMsg ? <MartEmpty message={errorMsg?.message} /> :
+          <LibScroll onRefresh={loadData}>
+            <View style={{ marginTop: 15, flexDirection: 'row', marginHorizontal: 17, marginBottom: 10 }} >
+              <LibPicture source={{ uri: data?.image }} style={{ backgroundColor: '#f1f1f1', height: 40, width: 40, borderRadius: 20 }} />
+              <View style={{ marginLeft: 10, flex: 1 }} >
+                <LibTextstyle textStyle='footnote' text={(data?.name)} />
+                <LibTextstyle textStyle='footnote' text={esp.lang("mart/dc_account", "distribution")} style={{ color: '#888' }} />
+              </View>
+            </View>
+
+            {
+              data?.location_name != '' &&
+              <Pressable onPress={() => LibNavigation.navigate('market/address')} style={{ marginBottom: 5, padding: 10, paddingVertical: 8, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMart, 0.1), borderRadius: 5, marginHorizontal: 17, flexDirection: 'row', alignItems: 'center' }}>
+                <LibIcon name="map-marker" size={20} color={LibStyle.colorPrimaryMart} style={{ marginRight: 5 }} />
+                <LibTextstyle textStyle='footnote' text={data?.location_name} style={{ fontSize: 11 }} />
+              </Pressable>
+            }
+
+            {
+              data?.alert?.length > 0 &&
+              <Blinkview>
+                <MarketNotice_slider data={data?.alert} />
+              </Blinkview>
+            }
+
+            <View style={{ flexDirection: "row", marginHorizontal: 20, marginTop: 10 }} >
+              <View style={{ flex: 1, marginRight: 10, flexDirection: 'row', alignItems: "center", padding: 10, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMart, 0.1) }} >
+                <LibPicture source={esp.assets('mitra/ic_market_merchant_balance.png')} style={{ width: 35, height: 35 }} resizeMode="contain" />
+                <View style={{ marginLeft: 10 }} >
+                  <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "left" }} >{esp.lang("mart/dc_account", "saldo_dc")}</Text>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#707070" }} >{LibUtils.money(user?.saldo_dc)}</Text>
+                </View>
+              </View>
+              <TouchableOpacity onPress={() => { LibNavigation.navigate<MarketWithdrawArgs>('market/withdraw', { from: 'dc' }) }} activeOpacity={1} style={{ paddingVertical: 10, width: itemWidth, alignItems: "center", marginRight: 10, borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMart, 0.1) }} >
+                <LibPicture source={esp.assets('mitra/ic_market_withdraw.png')} style={{ width: 30, height: 30 }} resizeMode="contain" />
+                <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center" }} >{esp.lang("mart/dc_account", "withdraw")}</Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => { LibNavigation.navigate('mart/dc_saldo_history') }} activeOpacity={1} style={{ paddingVertical: 10, width: itemWidth, alignItems: "center", borderRadius: 5, backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMart, 0.1) }} >
+                <LibPicture source={esp.assets('mitra/ic_market_history.png')} style={{ width: 30, height: 30 }} resizeMode="contain" />
+                <Text allowFontScaling={false} style={{ paddingVertical: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center" }} >{esp.lang("mart/dc_account", "history")}</Text>
+              </TouchableOpacity>
+            </View>
+
+            <Section title={esp.lang("mart/dc_account", "my_sales")} />
+            <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
+              <Items title={esp.lang("mart/dc_account", "need_process")} badge={badgeDc?.dc?.[3]} image={"mitra/ic_market_need_process.png"} onPress={() => { LibNavigation.navigate<MartDc_admin_orderArgs>('mart/dc_admin_order', { status: 3 }) }} />
+              <Items title={esp.lang("mart/dc_account", "packaged")} badge={badgeDc?.dc?.[4]} image={"mitra/ic_notification_packed.png"} onPress={() => { LibNavigation.navigate<MartDc_admin_orderArgs>('mart/dc_admin_order', { status: 4 }) }} />
+              <Items title={esp.lang("mart/dc_account", "sending")} badge={badgeDc?.dc?.[5]} image={"mitra/ic_notification_sent.png"} onPress={() => { LibNavigation.navigate<MartDc_admin_orderArgs>('mart/dc_admin_order', { status: 5 }) }} />
+              <Items title={esp.lang("mart/dc_account", "canceled")} image={"mitra/ic_notification_canceled.png"} onPress={() => { LibNavigation.navigate<MartDc_admin_orderArgs>('mart/dc_admin_order', { status: '2,8' }) }} />
+              <Items title={esp.lang("mart/dc_account", "all_status")} image={"mitra/ic_market_all_status.png"} onPress={() => { LibNavigation.navigate<MartDc_admin_orderArgs>('mart/dc_admin_order') }} />
+            </View>
+
+            <Section title={esp.lang("mart/dc_account", "product")} />
+            <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
+              <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
+                <Items title={esp.lang("mart/dc_account", "add_product")} image={"mitra/ic_market_add_product.png"}
+                  onPress={() => {
+                    if (hasWarningAlert) {
+                      blink()
+                      scrolRef?.current?.scrollToIndex(0)
+                    } else {
+                      LibNavigation.navigate('mart/dc_scanner')
+                    }
+                  }} />
+              </View>
+              <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
+                <Items title={esp.lang("mart/dc_account", "add_product_bundle")} image={"mitra/ic_market_add_product.png"}
+                  onPress={() => {
+                    if (hasWarningAlert) {
+                      blink()
+                      scrolRef?.current?.scrollToIndex(0)
+                    } else {
+                      LibNavigation.navigate('mart/dc_bundle_add')
+                    }
+                  }} />
+              </View>
+              <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
+                <Items title={esp.lang("mart/dc_account", "my_product")} image={"mitra/ic_market_archive.png"}
+                  onPress={() => {
+                    if (hasWarningAlert) {
+                      blink()
+                      scrolRef?.current?.scrollToIndex(0)
+                    } else {
+                      LibNavigation.navigate('mart/dc_product_list')
+                    }
+                  }} />
+              </View>
+              <View style={{ opacity: hasWarningAlert ? 0.3 : 1 }} >
+                <Items title={esp.lang("mart/dc_account", "product_draft")} image={"mitra/ic_market_draft.png"}
+                  onPress={() => {
+                    if (hasWarningAlert) {
+                      blink()
+                      scrolRef?.current?.scrollToIndex(0)
+                    } else {
+                      LibNavigation.navigate('mart/dc_product_list', { url: 'mitra/dc_product_draft', title: esp.lang("mart/dc_account", "title") })
+                    }
+                  }} />
+              </View>
+            </View>
+            <Section title={esp.lang("mart/dc_account", "my_dc")} />
+            <View style={{ marginTop: 10, marginLeft: 20, flexDirection: "row", flexWrap: "wrap" }} >
+              <Items title={esp.lang("mart/dc_account", "edit_dc")} image={"mitra/ic_market_edit.png"} onPress={() => { LibNavigation.navigate('mart/dc_edit') }} />
+              <Items title={esp.lang("mart/dc_account", "address")} image={"mitra/ic_market_address.png"} onPress={() => { LibNavigation.navigate('market/address') }} />
+              <Items title={esp.lang("mart/dc_account", "range_location")} image={"mitra/ic_market_address.png"} onPress={() => { LibNavigation.navigate('mart/dc_location_range') }} />
+            </View>
+
+          </LibScroll>
+      }
+    </View>
+  )
+}

package/modules/mart/dc_admin_order.tsx

@@ -0,0 +1,156 @@
+// withHooks
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { MartDc_order_item } from 'esoftplay/cache/mart/dc_order_item/import';
+import { MartEmpty } from 'esoftplay/cache/mart/empty/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { MartSection_menu } from 'esoftplay/cache/mart/section_menu/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+
+import React, { useEffect, useRef } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+
+export interface MartDc_admin_orderArgs {
+  status: number | string
+}
+export interface MartDc_admin_orderProps {
+
+}
+function Status(props: any) {
+  const timeout = useTimeout()
+  const tabRef = useRef<LibScroll>(null)
+  const allStatus = [
+    {
+      code: 1,
+      text: esp.lang("mart/dc_admin_order", "waiting")
+    },
+    {
+      code: 3,
+      text: esp.lang("mart/dc_admin_order", "need_proccess")
+    },
+    {
+      code: 4,
+      text: esp.lang("mart/dc_admin_order", "packaged")
+    },
+    {
+      code: 5,
+      text: esp.lang("mart/dc_admin_order", "sending")
+    },
+    {
+      code: 9,
+      text: esp.lang("mart/dc_admin_order", "Arriving_at_Destination"),
+    },
+    {
+      code: 7,
+      text: esp.lang("mart/dc_admin_order", "complete")
+    },
+    // {
+    //   code: 6,
+    //   text: 'Komplain'
+    // },
+    {
+      code: 0,
+      text: esp.lang("mart/dc_admin_order", "payment_failed")
+    },
+    {
+      code: '2,8',
+      text: esp.lang("mart/dc_admin_order", "cancel")
+    }
+  ]
+
+  useEffect(() => {
+    if (props.status != 1)
+      timeout(() => {
+        tabRef?.current?.scrollToIndex?.(allStatus.map((s) => s.code).indexOf(props.status))
+      }, 500);
+  }, [])
+
+  return (
+    <View style={{ minHeight: 50 }} >
+      <LibScroll
+        ref={tabRef}
+        initialNumToRender={20}
+        horizontal>
+        <View style={{ width: 10 }} />
+        {
+          allStatus.map((status: any, index: number) => (
+            <TouchableOpacity
+              key={index}
+              onPress={() => props.onChangeStatus(status.code)}
+              style={{ height: 32, marginVertical: 10, marginRight: 10, borderRadius: 20, backgroundColor: props.status == status.code ? LibStyle.colorPrimaryMart : 'transparent', borderColor: props.status == status.code ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
+              <LibTextstyle textStyle='footnote' text={status.text} style={{ color: props.status == status.code ? "white" : "#4E4E4E" }} />
+            </TouchableOpacity>
+          ))
+        }
+      </LibScroll>
+      <MartSection_menu size='line' />
+    </View>
+  )
+}
+
+const renderSkeletonItem = (x: any, i: number) => (
+  <View key={i}>
+    <View style={{ marginHorizontal: 15 }}>
+      <View style={{ height: 15, width: '40%', borderRadius: 10, backgroundColor: 'white', marginVertical: 10 }} />
+      <View style={{ height: 1, backgroundColor: 'white' }} />
+      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
+        <View style={{ width: 25, height: 25, borderRadius: 4, backgroundColor: 'white' }} />
+        <View style={{ width: '30%', height: 15, backgroundColor: 'white', borderRadius: 10, marginLeft: 10 }} />
+      </View>
+      <View style={{ flexDirection: 'row', marginTop: 20, borderBottomWidth: 0.5, paddingBottom: 10 }}>
+        <View style={{ height: 55, width: 55, borderRadius: 4, backgroundColor: 'white' }} />
+        <View style={{ marginLeft: 10, flex: 1 }}>
+          <View style={{ width: '40%', height: 18, backgroundColor: 'white', borderRadius: 10, marginBottom: 10 }} />
+          <View style={{ width: '40%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+        </View>
+      </View>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10, borderBottomWidth: 0.5, paddingBottom: 10 }}>
+        <View style={{ width: '30%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+        <View style={{ width: '30%', height: 15, backgroundColor: 'white', borderRadius: 10 }} />
+      </View>
+    </View>
+    <View style={{ height: 17, backgroundColor: 'white', marginTop: 17 }} />
+  </View>
+)
+
+export default function m(props: MartDc_admin_orderProps): any {
+  const statusCode = LibNavigation.getArgs(props, 'status', 1)
+  const [status, setStatus] = useSafeState(statusCode)
+
+  const renderItem = (item: any, index: number) => (<MartDc_order_item {...item} key={index} from="mart/mitra_order" />)
+
+  return (
+    <View style={{ flex: 1 }} >
+      <MartHeader
+        leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
+        title={esp.lang("mart/dc_admin_order", "dc")}
+        subtitle={esp.lang("mart/dc_admin_order", "order_list")}
+      />
+      <Status status={status} onChangeStatus={setStatus} />
+      <LibInfinite
+        key={status}
+
+        keyExtractor={(item, i) => i.toString()}
+        url={'mitra/dc_purchasing?status=' + status}
+        errorView={(e: string) => (
+          <MartEmpty message={e} />
+        )}
+        renderItem={renderItem}
+        LoadingView={
+          <LibSkeleton backgroundStyle={{ height: LibStyle.height }}>
+            {
+              [1, 1, 1].map(renderSkeletonItem)
+            }
+          </LibSkeleton>
+        }
+      />
+    </View>
+  )
+}

package/modules/mart/dc_bundle_add.tsx

@@ -0,0 +1,72 @@
+// withHooks
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { MartDc_bundle_Form } from 'esoftplay/cache/mart/dc_bundle_/import';
+import { MartDc_bundle_input, MartDc_bundle_inputProperty } from 'esoftplay/cache/mart/dc_bundle_input/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { UseForm } from 'esoftplay/cache/use/form/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+
+export interface MartDc_bundle_addArgs {
+
+}
+export interface MartDc_bundle_addProps {
+
+}
+
+export default function m(props: MartDc_bundle_addProps): any {
+  const [form, setForm, reForm] = UseForm<MartDc_bundle_Form>('mart_dc_bundle')
+
+  function bundleAdd() {
+    reForm(form => {
+      if (form) {
+        if (MartDc_bundle_inputProperty.validateInput(form)) {
+          LibProgress.show(esp.lang("mart/dc_bundle_add", "bundling_product"))
+          new LibCurl('mitra/upc_bundling', MartDc_bundle_inputProperty.buildPost(form),
+            (res, msg) => {
+              LibProgress.hide()
+              LibDialog.info(esp.lang("mart/dc_bundle_add", "success"), msg)
+              LibNavigation.back()
+              LibNavigation.navigate('mart/dc_product_list')
+            },
+            (msg) => {
+              LibProgress.hide()
+              LibDialog.warning(esp.lang("mart/dc_bundle_add", "error"), msg?.message)
+            }, 1
+          )
+        }
+      }
+    })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MartHeader title={esp.lang("mart/dc_bundle_add", "dc")} subtitle={esp.lang("mart/dc_bundle_add", "add_product_bundle")}
+        leftIcon={{
+          name: "arrow-left", onPress: () => {
+            LibDialog.warningConfirm(esp.lang("mart/dc_bundle_add", "sure_quit"), esp.lang("mart/dc_bundle_add", "Your_data_will_not_be_saved_if_you_return_to_the_previous_page"), esp.lang("mart/dc_bundle_add", "sure"), () => {
+              LibNavigation.back()
+            }, esp.lang("mart/dc_bundle_add", "cancel"), () => { })
+          }
+        }}
+        rightView={() => (
+          <Pressable
+            onPress={bundleAdd}
+            style={styleId_uMySd} >
+            <LibTextstyle text={esp.lang("mart/dc_bundle_add", "save")} textStyle="footnote" style={styleId_QiQXD} />
+          </Pressable>)}
+      />
+      <MartDc_bundle_input />
+    </View >
+  )
+}
+const styleId_uMySd: any = { paddingRight: 17 }
+const styleId_QiQXD: any = { color: LibStyle.colorPrimaryMart, fontWeight: "bold" }

package/modules/mart/dc_bundle_edit.tsx

@@ -0,0 +1,81 @@
+// withHooks
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { MarketReview } from 'esoftplay/cache/market/review/import';
+import { MartDc_bundle_Form } from 'esoftplay/cache/mart/dc_bundle_/import';
+import { MartDc_bundle_input, MartDc_bundle_inputProperty } from 'esoftplay/cache/mart/dc_bundle_input/import';
+import { MartHeader } from 'esoftplay/cache/mart/header/import';
+import { UseForm } from 'esoftplay/cache/use/form/import';
+import esp from 'esoftplay/esp';
+
+import React, { useRef } from 'react';
+import { Pressable, View } from 'react-native';
+
+
+export interface MartDc_bundle_editArgs {
+  id: string | number,
+  url?: string,
+  reviewing_message?: string
+  reviewing_resubmit?: string
+}
+export interface MartDc_bundle_editProps {
+
+}
+export default function m(props: MartDc_bundle_editProps): any {
+  const [form, setForm, reForm] = UseForm<MartDc_bundle_Form>('mart_dc_bundle')
+  const reviewRef = useRef<MarketReview>(null)
+  const { id } = LibNavigation.getArgsAll(props)
+
+  function bundleEdit() {
+    reForm((form) => {
+      if (form) {
+        if (MartDc_bundle_inputProperty.validateInput(form)) {
+          LibProgress.show(esp.lang("mart/dc_bundle_edit", "Currently_changing_bundle"))
+          new LibCurl('mitra/upc_bundling_edit/' + id, MartDc_bundle_inputProperty.buildPost(form),
+            (res, msg) => {
+              LibProgress.hide()
+              LibDialog.info(esp.lang("mart/dc_bundle_edit", "success"), msg)
+              LibNavigation.back(2)
+              LibNavigation.navigate('mart/dc_product_list')
+            },
+            (msg) => {
+              LibProgress.hide()
+              LibDialog.warning(esp.lang("mart/dc_bundle_edit", "error"), msg?.message)
+            }, 1
+          )
+        }
+      }
+    })
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MartHeader title={esp.lang("mart/dc_bundle_edit", "dc")} subtitle={esp.lang("mart/dc_bundle_edit", "change_product_bundle")}
+        leftIcon={{
+          name: "arrow-left", onPress: () => {
+            LibDialog.warningConfirm(esp.lang("mart/dc_bundle_edit", "sure_quit"), esp.lang("mart/dc_bundle_edit", "Your_data_will_not_be_saved_if_you_return_to_the_previous_page"), esp.lang("mart/dc_bundle_edit", "sure"), () => {
+              LibNavigation.back()
+            }, esp.lang("mart/dc_bundle_edit", "cancel"), () => { })
+          }
+        }}
+        rightView={() => (
+          <Pressable
+            onPress={() => {
+              bundleEdit()
+            }}
+            style={styleId_uMySd} >
+            <LibTextstyle text={esp.lang("mart/dc_bundle_edit", "save")} textStyle="footnote" style={styleId_QiQXD} />
+          </Pressable>
+        )}
+      />
+      <MartDc_bundle_input id={id} />
+      <MarketReview ref={reviewRef} />
+    </View>
+  )
+}
+const styleId_uMySd: any = { paddingRight: 17 }
+const styleId_QiQXD: any = { color: LibStyle.colorPrimaryMart, fontWeight: "bold" }