{"version":3,"sources":["views/FPX/invoice/Invoice.module.scss","views/FPX/invoice/LineItem.module.scss","helpers/chartjs.js","theme/palette.js","theme/typography.js","theme/overrides/index.js","theme/overrides/MuiButton.js","theme/overrides/MuiIconButton.js","theme/overrides/MuiPaper.js","theme/overrides/MuiTableCell.js","theme/overrides/MuiTableHead.js","theme/overrides/MuiTypography.js","theme/index.js","common/validators.js","components/SearchInput/SearchInput.js","components/StatusBullet/StatusBullet.js","components/RouteWithLayout/RouteWithLayout.js","layouts/Main/components/Footer/Footer.js","layouts/Main/components/Sidebar/components/Profile/Profile.js","layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js","layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav_TellerAdmin.js","layouts/Main/components/Sidebar/Sidebar.js","layouts/Minimal/components/Topbar/Topbar.js","layouts/Main/components/Topbar/Topbar.js","layouts/Main/Main.js","layouts/Minimal/Minimal.js","contexts/HttpServiceContext.tsx","views/Account/components/AccountDetails/AccountDetails.js","contexts/SessionContext.tsx","views/Account/components/AccountProfile/AccountProfile.js","views/Account/Account.js","constants.tsx","views/NewAccount/components/NewAccountForm.tsx","views/NewAccount/NewAccount.tsx","views/Dashboard/components/NetworthBalance/NetworthBalance.js","views/Order/components/OrderListTable/OrdersTable.tsx","views/Order/OrderList.tsx","views/NotFound/NotFound.js","views/Dashboard/components/LatestOrders/data.js","views/Dashboard/components/LatestOrders/LatestOrders.js","views/Dashboard/components/LatestProducts/data.js","views/Dashboard/components/LatestProducts/LatestProducts.js","views/Dashboard/components/LatestSales/chart.js","views/Dashboard/components/LatestSales/LatestSales.js","views/Dashboard/components/TasksProgress/TasksProgress.js","views/Dashboard/components/TotalProfit/TotalProfit.js","views/Dashboard/components/TotalDownlines/TotalDownlines.js","views/Dashboard/components/UsersByDevice/UsersByDevice.js","views/Dashboard/Dashboard.js","views/Icons/Icons.js","views/ProductList/components/ProductCard/ProductCard.js","views/ProductList/components/ProductsToolbar/ProductsToolbar.js","components/SimpleModal/SimpleModal.js","views/ProductList/components/SetProduct/SetProduct.js","views/ProductList/ProductList.js","views/Settings/components/Notifications/Notifications.js","views/Settings/components/Password/Password.js","views/Settings/Settings.js","services/HttpPostService.tsx","services/GetService.tsx","history.js","components/Login.tsx","HOC/HocLogin.tsx","views/SignIn/LoginMain.tsx","views/SignUp/SignUp.js","views/Typography/Typography.js","views/UserList/components/UsersTable/UsersTable.js","views/UserList/components/UsersToolbar/UsersToolbar.js","views/UserList/data.js","views/UserList/UserList.js","views/UserTreeAdmin/components/UserTree/UserTree.js","views/Networth/components/SearchUserforNetworth.js","views/FPX/pay.js","views/FPX/invoice/LineItem.js","views/FPX/invoice/LineItems.js","views/FPX/invoice/Invoice.js","views/Order/components/OrderEx/OrderEx.tsx","views/Order/components/ProductInfo/ProductInfo.tsx","views/Order/Order.tsx","views/Order/components/OrderListTable/TellerOrdersTable.js","views/Order/TellerOrderPendingList.tsx","views/Order/TellerOrderInProcessList.tsx","views/ProductList/components/DownlineRate/DownlineRate.js","Routes.js","App.tsx","serviceWorker.ts","index.tsx","views/FPX/invoice/LineItems.module.scss"],"names":["module","exports","draw","left","right","top","bottom","signX","signY","borderSkipped","radius","ctx","this","_chart","vm","_view","borderWidth","cornerRadius","config","options","horizontal","base","x","y","height","width","barSize","Math","min","abs","halfStroke","borderLeft","borderRight","borderTop","borderBottom","beginPath","fillStyle","backgroundColor","strokeStyle","borderColor","lineWidth","corners","startCorner","indexOf","cornerAt","index","corner","moveTo","i","nextCornerId","floor","xTl","xTr","yTl","yTr","xBl","xBr","yBl","yBr","lineTo","quadraticCurveTo","fill","stroke","white","black","primary","contrastText","dark","colors","indigo","main","light","secondary","blue","success","green","info","warning","orange","error","red","text","blueGrey","link","background","default","paper","icon","divider","grey","h1","color","palette","fontWeight","fontSize","letterSpacing","lineHeight","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","button","caption","overline","textTransform","MuiButton","contained","boxShadow","MuiIconButton","root","MuiPaper","elevation1","MuiTableCell","typography","MuiTableHead","MuiTypography","gutterBottom","marginBottom","theme","createMuiTheme","overrides","zIndex","appBar","drawer","checked","value","message","makeStyles","borderRadius","alignItems","padding","spacing","display","flexBasis","marginRight","input","flexGrow","useStyles","flexShrink","sm","md","lg","neutral","danger","StatusBullet","props","className","size","rest","classes","clsx","defaultProps","RouteWithLayout","Layout","layout","Component","component","render","matchProps","flexDirection","minHeight","avatar","name","marginTop","withStyles","border","margin","expanded","MuiExpansionPanel","content","minWidth","MuiExpansionPanelSummary","MuiExpansionPanelDetails","item","paddingTop","paddingBottom","justifyContent","fontWeightMedium","active","forwardRef","ref","style","breakpoints","up","nav","signOutButton","marginLeft","shiftContent","paddingLeft","Topbar","logo","AppBar","position","Toolbar","to","alt","src","Minimal","children","httpPostVar","React","httpGetVar","HttpPostServiceContextProvider","Provider","HttpPostServiceContextConsumer","Consumer","HttpGetServiceContextProvider","HttpGetServiceContextConsumer","SessionContext","details","progress","uploadButton","createContext","SessionContextProvider","useState","isLoggedIn","authorizationToken","state1","setContextState","payDomain","title","difference","differenceIcon","differenceValue","inner","nameContainer","actions","shadows","uuid","statusContainer","status","moment","subtract","image","chartContainer","stats","device","textAlign","deviceIcon","iframe","maxWidth","NotFound","Grid","container","justify","xs","variant","imageContainer","overflow","statsItem","statsIcon","row","spacer","importButton","exportButton","searchInput","pagination","HttpPostService","setHttpContext","httpServiceContext","setState","state","postToServer","postToServerWithHeader","queryStr","handleRetrievedData","url","baseURL","subURL","post","then","response","catch","console","log","auth","params","axios","post3","data","alert","header","method","headers","postWithHeader","httpPostContext","setHttpPostContext","get2","get","HttpGetService","setHttpGetContext","httpGetServiceContext","setBaseUrl","genericGetHttp","genericGetHttp2","genericGetHttpBinary","page","pageSize","sorted","filtered","parameterizedString","resType","responseType","getBuffer","searchTxt","appId","appCode","Response","customHistory","createBrowserHistory","createStyles","flexWrap","loginBtn","card","Login","username","setUsername","password","setPassword","captcha","setCap","isButtonDisabled","setIsButtonDisabled","helperText","showOnce","setShowOnce","getServ","useContext","useEffect","trim","push","asyncFunction","immediate","pending","setPending","b64Captcha","setCaptcha","captchaData","setCaptchaData","error2","setError","execute","useCallback","captchaImage","finally","useAsync","handleLogin","query","handleResponse","undefined","authorization","localStorage","setItem","type","handleKeyPress","e","keyCode","which","Fragment","noValidate","autoComplete","Card","onLoadStart","CardHeader","disableTypography","CardContent","TextField","fullWidth","id","label","placeholder","onChange","target","onKeyPress","CardMedia","onClick","cursor","CardActions","Button","disabled","HocLogin","LoginMain","schema","firstName","presence","allowEmpty","length","maximum","lastName","email","policy","grid","quoteContainer","down","quote","backgroundImage","backgroundSize","backgroundRepeat","backgroundPosition","quoteInner","quoteText","bio","contentContainer","contentHeader","paddingBototm","paddingRight","logoImage","contentBody","form","textField","policyCheckbox","signUpButton","withRouter","history","isValid","values","touched","errors","formState","setFormState","validate","handleChange","event","persist","hasError","field","person","IconButton","goBack","onSubmit","preventDefault","Checkbox","policyText","Link","RouterLink","underline","FormHelperText","TransitionComponent","useSpring","from","opacity","transform","in","div","Collapse","iconContainer","group","fade","TreeItem","imageSrc","backdrop","formControl","selectEmpty","CircularProgressWithLabel","Box","CircularProgress","round","getUrlParameter","replace","RegExp","window","location","search","s1","URLSearchParams","results","decodeURIComponent","token","paymentAmount","paymentDesc","mid","getBody","thisquery","variables","OperationName","Variables","RenderSelect","arr","bankBanner","banner","FormControl","InputLabel","shrink","Select","labelId","bank","handleBankChange","displayEmpty","MenuItem","FPXPay","posttoserverwithheader","setProgress","parseFloat","totalAmount","setTotalAmount","exchangeNo","setExchangeNo","sellerID","setSellerID","merchantOrderId","fpxTransactionID","fpxTransTime","setFpxTransactionTime","fpxTransCur","setFpxTransactionCurrency","buyer_email","setBuyerEmail","setARQueryString","checkSum","setCheckSum","AECheckSum","setAECheckSum","setBCCheckSum","setBank","prodDesc","openBackdrop","setOpenBackdrop","openIBackdrop","setOpenIBackdrop","checkedTerms","setCheckTerms","btnEnabled","setBtnEnabled","startQuery","setStartQuery","activeBankList","setActiveBankList","setAllBankList","inactiveBankList","setInActiveBankList","setBankBanner","renderedBank","setRenderedBank","retailbankList","retailbankListName","fillInBankList","handleQueryAE","query2","JSON","stringify","a","handleVerifyResponse","fd","queryBESign","verifytransaction","transTime","sellerTransTime","dt","Date","transactionAmount","dtFormat","getFullYear","getMonth","slice","getDate","getHours","getMinutes","getSeconds","join","sellID","transactionCurrency","sxid","sellerExchangeId","handleBCResponse","getbankchecksum","queryFPXBC","bcchecksum","dat","qs","fpx_msgType","fpx_msgToken","fpx_sellerExId","fpx_version","fpx_checkSum","qsObj","parse","banks","fpx_bankList","split","activeB","allBank","inactiveB","map","bb","handleSigned","_headers","updatetransactioninfo","checksum","datStr","queryAEChecksum","handleSignedResponse","checkSum2","fpx_sellerExOrderNo","fpx_sellerTxnTime","fpx_sellerOrderNo","fpx_sellerId","fpx_sellerBankCode","fpx_txnCurrency","fpx_txnAmount","toFixed","fpx_buyerEmail","fpx_buyerName","fpx_buyerBankId","fpx_buyerBankBranch","fpx_buyerAccNo","fpx_buyerId","fpx_makerName","fpx_buyerIban","fpx_productDesc","checkSum_String","winRef","open","document","write","close","merchantName","onFinish","handleReturnAEChecksum","getaechecksum","handleACResponse","aeres","verifyac","encodeURIComponent","handleAEResponse","urlParams","queryACSign","timer","setInterval","prevProgress","timer2","clearInterval","renderSelectObj","obj","inactiveObj","inactArr","sortedList","Object","assign","sort","b","aa","toUpperCase","newBankList","renderMenuItems","inactive","l","alignContent","Backdrop","Input","required","InputProps","startAdornment","InputAdornment","aria-hidden","FormControlLabel","control","href","data-toggle","data-placement","data-original-title","HOCFpxPay","HOCFpxMain","LineItem","description","quantity","price","styles","lineItem","step","currency","currencyFormatter","LineItems","handleDragEnd","result","destination","lineItems","list","startIndex","endIndex","Array","splice","removed","reorder","items","source","reorderHandler","addHandler","gridTable","onDragEnd","droppableId","provided","snapshot","innerRef","isDraggingOver","listDraggingOver","key","draggableId","draggableProps","dragHandleProps","isDragging","listItemDragging","tid","sellerOrderID","total","today","Invoice","locale","taxRate","transId","receiptDate","bankBranch","handleReceiptResponse","getreceipt","ret","li","count","it","unitprice","fpxId","handleInvoiceChange","handleLineItemChange","elementIndex","handleAddLineItem","concat","uuidv4","handleRemoveLineItem","filter","handleReorderLineItems","newLineItems","handleFocusSelect","select","handlePayButtonClick","formatCurrency","amount","Intl","NumberFormat","minimumFractionDigits","maximumFractionDigits","format","calcTaxAmount","c","calcLineItemsTotal","reduce","prev","cur","calcTaxTotal","calcGrandTotal","invoice","brand","addresses","valueTable","date","totalContainer","pay","payNow","footer","comments","closing","that","HOCInvoice","HOCReceiptMain","indeterminate","defaultRef","useRef","resolvedRef","current","Routes","exact","SignUpView","MinimalLayout","path","FPXView","ReceiptView","SignInView","NotFoundView","Chart","require","helpers","extend","elements","Rectangle","prototype","chartjs","validators","App","ThemeProvider","Boolean","hostname","match","ReactDOM","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"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","file":"static/js/main.05470517.chunk.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"valueTable\":\"Invoice_valueTable__3x81i\",\"row\":\"Invoice_row__3cP5e\",\"label\":\"Invoice_label__fzEN1\",\"currency\":\"Invoice_currency__1LBw9\",\"invoice\":\"Invoice_invoice__1xF-W\",\"brand\":\"Invoice_brand__24-X1\",\"logo\":\"Invoice_logo__1ZE35\",\"addresses\":\"Invoice_addresses__lqOVA\",\"from\":\"Invoice_from__2qqP_\",\"to\":\"Invoice_to__1MhVd\",\"value\":\"Invoice_value__1I8en\",\"address\":\"Invoice_address__3vYSj\",\"totalContainer\":\"Invoice_totalContainer__3XdJm\",\"pay\":\"Invoice_pay__26GhY\",\"payNow\":\"Invoice_payNow__1aWfj\",\"footer\":\"Invoice_footer__3eXlC\",\"comments\":\"Invoice_comments__4w0UC\",\"closing\":\"Invoice_closing__1hlFZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"lineItem\":\"LineItem_lineItem__37_w4\",\"deleteItem\":\"LineItem_deleteItem__14KXX\",\"currency\":\"LineItem_currency__2KMxC\"};","// ChartJS extension rounded bar chart\r\n// https://codepen.io/jedtrow/full/ygRYgo\r\nfunction draw() {\r\n  const { ctx } = this._chart;\r\n  const vm = this._view;\r\n  let { borderWidth } = vm;\r\n\r\n  let left;\r\n  let right;\r\n  let top;\r\n  let bottom;\r\n  let signX;\r\n  let signY;\r\n  let borderSkipped;\r\n  let radius;\r\n\r\n  // If radius is less than 0 or is large enough to cause drawing errors a max\r\n  //      radius is imposed. If cornerRadius is not defined set it to 0.\r\n  let { cornerRadius } = this._chart.config.options;\r\n  if (cornerRadius < 0) {\r\n    cornerRadius = 0;\r\n  }\r\n\r\n  if (typeof cornerRadius === 'undefined') {\r\n    cornerRadius = 0;\r\n  }\r\n\r\n  if (!vm.horizontal) {\r\n    // bar\r\n    left = vm.x - vm.width / 2;\r\n    right = vm.x + vm.width / 2;\r\n    top = vm.y;\r\n    bottom = vm.base;\r\n    signX = 1;\r\n    signY = bottom > top ? 1 : -1;\r\n    borderSkipped = vm.borderSkipped || 'bottom';\r\n  } else {\r\n    // horizontal bar\r\n    left = vm.base;\r\n    right = vm.x;\r\n    top = vm.y - vm.height / 2;\r\n    bottom = vm.y + vm.height / 2;\r\n    signX = right > left ? 1 : -1;\r\n    signY = 1;\r\n    borderSkipped = vm.borderSkipped || 'left';\r\n  }\r\n\r\n  // Canvas doesn't allow us to stroke inside the width so we can\r\n  // adjust the sizes to fit if we're setting a stroke on the line\r\n  if (borderWidth) {\r\n    // borderWidth shold be less than bar width and bar height.\r\n    const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));\r\n    borderWidth = borderWidth > barSize ? barSize : borderWidth;\r\n    const halfStroke = borderWidth / 2;\r\n    // Adjust borderWidth when bar top position is near vm.base(zero).\r\n    const borderLeft =\r\n      left + (borderSkipped !== 'left' ? halfStroke * signX : 0);\r\n    const borderRight =\r\n      right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);\r\n    const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);\r\n    const borderBottom =\r\n      bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);\r\n    // not become a vertical line?\r\n    if (borderLeft !== borderRight) {\r\n      top = borderTop;\r\n      bottom = borderBottom;\r\n    }\r\n    // not become a horizontal line?\r\n    if (borderTop !== borderBottom) {\r\n      left = borderLeft;\r\n      right = borderRight;\r\n    }\r\n  }\r\n\r\n  ctx.beginPath();\r\n  ctx.fillStyle = vm.backgroundColor;\r\n  ctx.strokeStyle = vm.borderColor;\r\n  ctx.lineWidth = borderWidth;\r\n\r\n  // Corner points, from bottom-left to bottom-right clockwise\r\n  // | 1 2 |\r\n  // | 0 3 |\r\n  const corners = [[left, bottom], [left, top], [right, top], [right, bottom]];\r\n\r\n  // Find first (starting) corner with fallback to 'bottom'\r\n  const borders = ['bottom', 'left', 'top', 'right'];\r\n  let startCorner = borders.indexOf(borderSkipped, 0);\r\n  if (startCorner === -1) {\r\n    startCorner = 0;\r\n  }\r\n\r\n  function cornerAt(index) {\r\n    return corners[(startCorner + index) % 4];\r\n  }\r\n\r\n  // Draw rectangle from 'startCorner'\r\n  let corner = cornerAt(0);\r\n  ctx.moveTo(corner[0], corner[1]);\r\n\r\n  for (let i = 1; i < 4; i += 1) {\r\n    corner = cornerAt(i);\r\n    let nextCornerId = i + 1;\r\n    if (nextCornerId === 4) {\r\n      nextCornerId = 0;\r\n    }\r\n\r\n    const width = corners[2][0] - corners[1][0];\r\n    const height = corners[0][1] - corners[1][1];\r\n    const x = corners[1][0];\r\n    const y = corners[1][1];\r\n\r\n    radius = cornerRadius;\r\n    // Fix radius being too large\r\n    if (radius > Math.abs(height) / 2) {\r\n      radius = Math.floor(Math.abs(height) / 2);\r\n    }\r\n    if (radius > Math.abs(width) / 2) {\r\n      radius = Math.floor(Math.abs(width) / 2);\r\n    }\r\n\r\n    if (height < 0) {\r\n      // Negative values in a standard bar chart\r\n      const xTl = x;\r\n      const xTr = x + width;\r\n      const yTl = y + height;\r\n      const yTr = y + height;\r\n\r\n      const xBl = x;\r\n      const xBr = x + width;\r\n      const yBl = y;\r\n      const yBr = y;\r\n\r\n      // Draw\r\n      ctx.moveTo(xBl + radius, yBl);\r\n      ctx.lineTo(xBr - radius, yBr);\r\n      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);\r\n      ctx.lineTo(xTr, yTr + radius);\r\n      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);\r\n      ctx.lineTo(xTl + radius, yTl);\r\n      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);\r\n      ctx.lineTo(xBl, yBl - radius);\r\n      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);\r\n    } else if (width < 0) {\r\n      // Negative values in a horizontal bar chart\r\n      const xTl = x + width;\r\n      const xTr = x;\r\n      const yTl = y;\r\n      const yTr = y;\r\n\r\n      const xBl = x + width;\r\n      const xBr = x;\r\n      const yBl = y + height;\r\n      const yBr = y + height;\r\n\r\n      // Draw\r\n      ctx.moveTo(xBl + radius, yBl);\r\n      ctx.lineTo(xBr - radius, yBr);\r\n      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);\r\n      ctx.lineTo(xTr, yTr + radius);\r\n      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);\r\n      ctx.lineTo(xTl + radius, yTl);\r\n      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);\r\n      ctx.lineTo(xBl, yBl - radius);\r\n      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);\r\n    } else {\r\n      // Positive Value\r\n      ctx.moveTo(x + radius, y);\r\n      ctx.lineTo(x + width - radius, y);\r\n      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\r\n      ctx.lineTo(x + width, y + height - radius);\r\n      ctx.quadraticCurveTo(\r\n        x + width,\r\n        y + height,\r\n        x + width - radius,\r\n        y + height\r\n      );\r\n      ctx.lineTo(x + radius, y + height);\r\n      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\r\n      ctx.lineTo(x, y + radius);\r\n      ctx.quadraticCurveTo(x, y, x + radius, y);\r\n    }\r\n  }\r\n\r\n  ctx.fill();\r\n  if (borderWidth) {\r\n    ctx.stroke();\r\n  }\r\n}\r\n\r\nexport default {\r\n  draw\r\n};\r\n","import { colors } from '@material-ui/core';\r\n\r\nconst white = '#FFFFFF';\r\nconst black = '#000000';\r\n\r\nexport default {\r\n  black,\r\n  white,\r\n  primary: {\r\n    contrastText: white,\r\n    dark: colors.indigo[900],\r\n    main: colors.indigo[500],\r\n    light: colors.indigo[100]\r\n  },\r\n  secondary: {\r\n    contrastText: white,\r\n    dark: colors.blue[900],\r\n    main: colors.blue['A400'],\r\n    light: colors.blue['A400']\r\n  },\r\n  success: {\r\n    contrastText: white,\r\n    dark: colors.green[900],\r\n    main: colors.green[600],\r\n    light: colors.green[400]\r\n  },\r\n  info: {\r\n    contrastText: white,\r\n    dark: colors.blue[900],\r\n    main: colors.blue[600],\r\n    light: colors.blue[400]\r\n  },\r\n  warning: {\r\n    contrastText: white,\r\n    dark: colors.orange[900],\r\n    main: colors.orange[600],\r\n    light: colors.orange[400]\r\n  },\r\n  error: {\r\n    contrastText: white,\r\n    dark: colors.red[900],\r\n    main: colors.red[600],\r\n    light: colors.red[400]\r\n  },\r\n  text: {\r\n    primary: colors.blueGrey[900],\r\n    secondary: colors.blueGrey[600],\r\n    link: colors.blue[600]\r\n  },\r\n  background: {\r\n    default: '#F4F6F8',\r\n    paper: white\r\n  },\r\n  icon: colors.blueGrey[600],\r\n  divider: colors.grey[200]\r\n};\r\n","import palette from './palette';\r\n\r\nexport default {\r\n  h1: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '35px',\r\n    letterSpacing: '-0.24px',\r\n    lineHeight: '40px'\r\n  },\r\n  h2: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '29px',\r\n    letterSpacing: '-0.24px',\r\n    lineHeight: '32px'\r\n  },\r\n  h3: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '24px',\r\n    letterSpacing: '-0.06px',\r\n    lineHeight: '28px'\r\n  },\r\n  h4: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '20px',\r\n    letterSpacing: '-0.06px',\r\n    lineHeight: '24px'\r\n  },\r\n  h5: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '16px',\r\n    letterSpacing: '-0.05px',\r\n    lineHeight: '20px'\r\n  },\r\n  h6: {\r\n    color: palette.text.primary,\r\n    fontWeight: 500,\r\n    fontSize: '14px',\r\n    letterSpacing: '-0.05px',\r\n    lineHeight: '20px'\r\n  },\r\n  subtitle1: {\r\n    color: palette.text.primary,\r\n    fontSize: '16px',\r\n    letterSpacing: '-0.05px',\r\n    lineHeight: '25px'\r\n  },\r\n  subtitle2: {\r\n    color: palette.text.secondary,\r\n    fontWeight: 400,\r\n    fontSize: '14px',\r\n    letterSpacing: '-0.05px',\r\n    lineHeight: '21px'\r\n  },\r\n  body1: {\r\n    color: palette.text.primary,\r\n    fontSize: '14px',\r\n    letterSpacing: '-0.05px',\r\n    lineHeight: '21px'\r\n  },\r\n  body2: {\r\n    color: palette.text.secondary,\r\n    fontSize: '12px',\r\n    letterSpacing: '-0.04px',\r\n    lineHeight: '18px'\r\n  },\r\n  button: {\r\n    color: palette.text.primary,\r\n    fontSize: '14px'\r\n  },\r\n  caption: {\r\n    color: palette.text.secondary,\r\n    fontSize: '11px',\r\n    letterSpacing: '0.33px',\r\n    lineHeight: '13px'\r\n  },\r\n  overline: {\r\n    color: palette.text.secondary,\r\n    fontSize: '11px',\r\n    fontWeight: 500,\r\n    letterSpacing: '0.33px',\r\n    lineHeight: '13px',\r\n    textTransform: 'uppercase'\r\n  }\r\n};\r\n","import MuiButton from './MuiButton';\r\nimport MuiIconButton from './MuiIconButton';\r\nimport MuiPaper from './MuiPaper';\r\nimport MuiTableCell from './MuiTableCell';\r\nimport MuiTableHead from './MuiTableHead';\r\nimport MuiTypography from './MuiTypography';\r\n\r\nexport default {\r\n  MuiButton,\r\n  MuiIconButton,\r\n  MuiPaper,\r\n  MuiTableCell,\r\n  MuiTableHead,\r\n  MuiTypography\r\n};\r\n","export default {\r\n  contained: {\r\n    boxShadow:\r\n      '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)',\r\n    backgroundColor: '#FFFFFF'\r\n  }\r\n};\r\n","import palette from '../palette';\r\n\r\nexport default {\r\n  root: {\r\n    color: palette.icon,\r\n    '&:hover': {\r\n      backgroundColor: 'rgba(0, 0, 0, 0.03)'\r\n    }\r\n  }\r\n};\r\n","export default {\r\n  elevation1: {\r\n    boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'\r\n  }\r\n};\r\n","import palette from '../palette';\r\nimport typography from '../typography';\r\n\r\nexport default {\r\n  root: {\r\n    ...typography.body1,\r\n    borderBottom: `1px solid ${palette.divider}`\r\n  }\r\n};\r\n","import { colors } from '@material-ui/core';\r\n\r\nexport default {\r\n  root: {\r\n    backgroundColor: colors.grey[50]\r\n  }\r\n};\r\n","export default {\r\n  gutterBottom: {\r\n    marginBottom: 8\r\n  }\r\n};\r\n","import { createMuiTheme } from '@material-ui/core';\r\n\r\nimport palette from './palette';\r\nimport typography from './typography';\r\nimport overrides from './overrides';\r\n\r\nconst theme = createMuiTheme({\r\n  palette,\r\n  typography,\r\n  overrides,\r\n  zIndex: {\r\n    appBar: 1200,\r\n    drawer: 1100\r\n  }\r\n});\r\n\r\nexport default theme;\r\n","const checked = (value, options) => {\r\n  if (value !== true) {\r\n    return options.message || 'must be checked';\r\n  }\r\n};\r\n\r\nexport default {\r\n  checked\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Paper, Input } from '@material-ui/core';\r\nimport SearchIcon from '@material-ui/icons/Search';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    borderRadius: '4px',\r\n    alignItems: 'center',\r\n    padding: theme.spacing(1),\r\n    display: 'flex',\r\n    flexBasis: 420\r\n  },\r\n  icon: {\r\n    marginRight: theme.spacing(1),\r\n    color: theme.palette.text.secondary\r\n  },\r\n  input: {\r\n    flexGrow: 1,\r\n    fontSize: '14px',\r\n    lineHeight: '16px',\r\n    letterSpacing: '-0.05px'\r\n  }\r\n}));\r\n\r\nconst SearchInput = props => {\r\n  const { className, onChange, style, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Paper\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n      style={style}\r\n    >\r\n      <SearchIcon className={classes.icon} />\r\n      <Input\r\n        {...rest}\r\n        className={classes.input}\r\n        disableUnderline\r\n        onChange={onChange}\r\n      />\r\n    </Paper>\r\n  );\r\n};\r\n\r\nSearchInput.propTypes = {\r\n  className: PropTypes.string,\r\n  onChange: PropTypes.func,\r\n  style: PropTypes.object\r\n};\r\n\r\nexport default SearchInput;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    display: 'inline-block',\r\n    borderRadius: '50%',\r\n    flexGrow: 0,\r\n    flexShrink: 0\r\n  },\r\n  sm: {\r\n    height: theme.spacing(1),\r\n    width: theme.spacing(1)\r\n  },\r\n  md: {\r\n    height: theme.spacing(2),\r\n    width: theme.spacing(2)\r\n  },\r\n  lg: {\r\n    height: theme.spacing(3),\r\n    width: theme.spacing(3)\r\n  },\r\n  neutral: {\r\n    backgroundColor: theme.palette.neutral\r\n  },\r\n  primary: {\r\n    backgroundColor: theme.palette.primary.main\r\n  },\r\n  info: {\r\n    backgroundColor: theme.palette.info.main\r\n  },\r\n  warning: {\r\n    backgroundColor: theme.palette.warning.main\r\n  },\r\n  danger: {\r\n    backgroundColor: theme.palette.error.main\r\n  },\r\n  success: {\r\n    backgroundColor: theme.palette.success.main\r\n  }\r\n}));\r\n\r\nconst StatusBullet = props => {\r\n  const { className, size, color, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <span\r\n      {...rest}\r\n      className={clsx(\r\n        {\r\n          [classes.root]: true,\r\n          [classes[size]]: size,\r\n          [classes[color]]: color\r\n        },\r\n        className\r\n      )}\r\n    />\r\n  );\r\n};\r\n\r\nStatusBullet.propTypes = {\r\n  className: PropTypes.string,\r\n  color: PropTypes.oneOf([\r\n    'neutral',\r\n    'primary',\r\n    'info',\r\n    'success',\r\n    'warning',\r\n    'danger'\r\n  ]),\r\n  size: PropTypes.oneOf(['sm', 'md', 'lg'])\r\n};\r\n\r\nStatusBullet.defaultProps = {\r\n  size: 'md',\r\n  color: 'default'\r\n};\r\n\r\nexport default StatusBullet;\r\n","import React from 'react';\r\nimport { Route } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst RouteWithLayout = props => {\r\n  const { layout: Layout, component: Component, ...rest } = props;\r\n\r\n  return (\r\n    <Route\r\n      {...rest}\r\n      render={matchProps => (\r\n        <Layout>\r\n          <Component {...matchProps} />\r\n        </Layout>\r\n      )}\r\n    />\r\n  );\r\n};\r\n\r\nRouteWithLayout.propTypes = {\r\n  component: PropTypes.any.isRequired,\r\n  layout: PropTypes.any.isRequired,\r\n  path: PropTypes.string\r\n};\r\n\r\nexport default RouteWithLayout;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Typography, Link } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst Footer = props => {\r\n  const { className,footerLinkText,footerLink,copyrightYear, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <Typography variant=\"body1\">\r\n        &copy;{' '}\r\n        <Link\r\n          component=\"a\"\r\n          href={footerLink}\r\n          target=\"_blank\"\r\n        >\r\n          {footerLinkText}\r\n        </Link>\r\n       &nbsp;. &nbsp;{copyrightYear}\r\n      </Typography>\r\n      <Typography variant=\"caption\">\r\n        Created for extensible and fun!\r\n      </Typography>\r\n    </div>\r\n  );\r\n};\r\n\r\nFooter.propTypes = {\r\n  className: PropTypes.string,\r\n  footerLink: PropTypes.string,\r\n  footerLinkText: PropTypes.string,\r\n  copyrightYear: PropTypes.number,\r\n\r\n};\r\n\r\nexport default Footer;\r\n","import React from 'react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Avatar, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    minHeight: 'fit-content'\r\n  },\r\n  avatar: {\r\n    width: 60,\r\n    height: 60\r\n  },\r\n  name: {\r\n    marginTop: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst Profile = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const user = {\r\n    name: 'My Account Name',\r\n    avatar: '/images/avatars/avatar_11.png',\r\n    bio: 'My Position / Role'\r\n  };\r\n\r\n  return (\r\n    <div\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <Avatar\r\n        alt=\"Person\"\r\n        className={classes.avatar}\r\n        component={RouterLink}\r\n        src={user.avatar}\r\n        to=\"/settings\"\r\n      />\r\n      <Typography\r\n        className={classes.name}\r\n        variant=\"h4\"\r\n      >\r\n        {user.name}\r\n      </Typography>\r\n      <Typography variant=\"body2\">{user.bio}</Typography>\r\n    </div>\r\n  );\r\n};\r\n\r\nProfile.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default Profile;\r\n","/* eslint-disable react/no-multi-comp */\r\n/* eslint-disable react/display-name */\r\nimport React, { forwardRef } from 'react';\r\nimport { NavLink as RouterLink } from 'react-router-dom';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { List, ListItem, Button, colors } from '@material-ui/core';\r\nimport MuiExpansionPanel from '@material-ui/core/ExpansionPanel';\r\nimport MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\r\nimport MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst ExpansionPanel = withStyles({\r\n  root: {\r\n    border: '0px solid rgba(0, 0, 0, .125)',\r\n    boxShadow: 'none',\r\n    '&:not(:last-child)': {\r\n      borderBottom: 0,\r\n    },\r\n    '&:before': {\r\n      display: 'none',\r\n    },\r\n    '&$expanded': {\r\n      margin: 'auto',\r\n    },\r\n  },\r\n  expanded: {},\r\n})(MuiExpansionPanel);\r\n\r\nconst ExpansionPanelSummary = withStyles({\r\n  root: {\r\n    borderBottom: '0px solid rgba(0, 0, 0, .125)',\r\n    marginBottom: -1,\r\n    display:'flex',\r\n    minHeight: 56,\r\n\r\n    '&$expanded': {\r\n      minHeight: 56,\r\n    },\r\n  },\r\n  content: {\r\n    '&$expanded': {\r\n      margin: '12px 0',\r\n      minWidth:120\r\n    },\r\n  },\r\n  expanded: {},\r\n})(MuiExpansionPanelSummary);\r\n\r\nconst ExpansionPanelDetails = withStyles((theme) => ({\r\n  root: {\r\n    padding: theme.spacing(2),\r\n  },\r\n}))(MuiExpansionPanelDetails);\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  item: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0\r\n  },\r\n  button: {\r\n    color: colors.blueGrey[800],\r\n    padding: '10px 8px',\r\n    justifyContent: 'flex-start',\r\n    textTransform: 'none',\r\n    letterSpacing: 0,\r\n    width: '100%',\r\n    fontWeight: theme.typography.fontWeightMedium\r\n  },\r\n  icon: {\r\n    color: theme.palette.icon,\r\n    width: 24,\r\n    height: 24,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  active: {\r\n    color: theme.palette.primary.main,\r\n    fontWeight: theme.typography.fontWeightMedium,\r\n    '& $icon': {\r\n      color: theme.palette.primary.main\r\n    }\r\n  }\r\n}));\r\n\r\nconst CustomRouterLink = forwardRef((props, ref) => (\r\n  <div\r\n    ref={ref}\r\n    style={{ flexGrow: 1 }}\r\n  >\r\n    <RouterLink {...props} />\r\n  </div>\r\n));\r\n\r\nconst SidebarNav = props => {\r\n  const { pages, className, ...rest } = props; \r\n  \r\nconst uType = localStorage.getItem('type');\r\n  const [expanded, setExpanded] = React.useState('');\r\n\r\n  const classes = useStyles();\r\n\r\n  const handleChange = (panel) => (event, newExpanded) => {\r\n    setExpanded(newExpanded ? panel : false);\r\n  };\r\n  return (\r\n    <List\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      {pages.map(page => (\r\n       (page.title === 'Order') ? \r\n         uType == '2' ? <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')} key={'panel1'} >\r\n        <ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n         <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n         <Typography>\r\n           {page.title}\r\n           </Typography>\r\n        </ExpansionPanelSummary>\r\n        <ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_placeorder'} \r\n          style={{minWidth:120}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                to={page.href}\r\n                \r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'Place Order'}\r\n              </Typography>\r\n            </Button>\r\n        </ListItem>\r\n            \r\n          \r\n          \r\n        </ExpansionPanelDetails>\r\n        \r\n        <ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_orderlist'}\r\n          style={{paddingTop:0,marginTop:0}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                style={{paddingTop:0,marginTop:0}}\r\n                to={'/orderlist'}\r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'Order List'}\r\n              </Typography>\r\n            </Button> \r\n        </ListItem>\r\n            \r\n        </ExpansionPanelDetails>\r\n      </ExpansionPanel>\r\n      : \r\n      \r\n      uType == '0' ? <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')} key={'panel1'} >\r\n      <ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n       <Typography>\r\n         {page.title}\r\n         </Typography>\r\n      </ExpansionPanelSummary> \r\n      \r\n      <ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n        <ListItem\r\n        className={classes.item}\r\n        disableGutters\r\n        key={pages.indexOf(page)+'_orderlist'}\r\n        style={{paddingTop:0,marginTop:0}}\r\n      >\r\n          <Button\r\n              activeClassName={classes.active}\r\n              className={classes.button}\r\n              component={CustomRouterLink}\r\n              style={{paddingTop:0,marginTop:0}}\r\n              to={'/tellerorderlist'}\r\n            >\r\n              <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n              <Typography>\r\n              \r\n              {'Teller Order List'}\r\n            </Typography>\r\n          </Button> \r\n      </ListItem>\r\n          \r\n      </ExpansionPanelDetails>\r\n    </ExpansionPanel>\r\n       :null\r\n       :\r\n       \r\n        (page.title === 'Products')? \r\n        <ExpansionPanel square expanded={expanded === 'panel2'}  key={'panel2'}  onChange={handleChange('panel2')}>\r\n        <ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n        <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n        <Typography>{page.title}</Typography>\r\n        </ExpansionPanelSummary>\r\n        {(uType == '1')?<ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_product'} \r\n          style={{minWidth:120}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                to={page.href}\r\n                \r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'The Product'}\r\n              </Typography>\r\n            </Button>\r\n        </ListItem>\r\n            \r\n          \r\n          \r\n        </ExpansionPanelDetails>\r\n        : null }\r\n        {(uType == '1' || uType == '0')?<ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_setproductrate'}\r\n          style={{paddingTop:0,marginTop:0}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                style={{paddingTop:0,marginTop:0}}\r\n                to={'/setproduct'}\r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'Set Product Rate'}\r\n              </Typography>\r\n            </Button> \r\n        </ListItem>\r\n            \r\n        </ExpansionPanelDetails>\r\n        : <ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n        <ListItem\r\n        className={classes.item}\r\n        disableGutters\r\n        key={pages.indexOf(page)+'_setdownlinerate'}\r\n        style={{paddingTop:0,marginTop:0}}\r\n      >\r\n          <Button\r\n              activeClassName={classes.active}\r\n              className={classes.button}\r\n              component={CustomRouterLink}\r\n              style={{paddingTop:0,marginTop:0}}\r\n              to={'/setrate'}\r\n            >\r\n              <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n              <Typography>\r\n              \r\n              {'Set Downline Rate'}\r\n            </Typography>\r\n          </Button> \r\n      </ListItem>\r\n          \r\n      </ExpansionPanelDetails>}\r\n       \r\n      </ExpansionPanel>\r\n          :\r\n          (page.title === 'Users' && uType !== '0')? \r\n            <ExpansionPanel square expanded={expanded === 'panel3'} key={'panel3'} onChange={handleChange('panel3')}>\r\n              <ExpansionPanelSummary aria-controls=\"panel3d-content\" id=\"panel3d-header\">\r\n              <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n               <Typography>{page.title}</Typography>\r\n              </ExpansionPanelSummary>\r\n              <ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n                <ListItem\r\n                className={classes.item}\r\n                disableGutters\r\n                key={pages.indexOf(page)+'_userlist'} \r\n                style={{minWidth:120}}\r\n              >\r\n                  <Button\r\n                      activeClassName={classes.active}\r\n                      className={classes.button}\r\n                      component={CustomRouterLink}\r\n                      to={'/users/list'}\r\n                      \r\n                    >\r\n                       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                       <Typography>\r\n                     \r\n                      {'User List'}\r\n                    </Typography>\r\n                  </Button>\r\n              </ListItem>\r\n                  \r\n                \r\n                \r\n              </ExpansionPanelDetails>\r\n            \r\n              <ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n                \r\n              <ListItem\r\n                className={classes.item}\r\n                disableGutters\r\n                key={pages.indexOf(page)+'_usertree'}\r\n                style={{paddingTop:0,marginTop:0}}\r\n              >\r\n                  <Button\r\n                      activeClassName={classes.active}\r\n                      className={classes.button}\r\n                      component={CustomRouterLink}\r\n                      style={{paddingTop:0,marginTop:0}}\r\n                      to={'/users/tree'}\r\n                    >\r\n                      <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                      <Typography>\r\n                      \r\n                      {'User Tree'}\r\n                    </Typography>\r\n                  </Button> \r\n              </ListItem>\r\n                  \r\n              </ExpansionPanelDetails>\r\n              \r\n              <ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n                <ListItem\r\n                className={classes.item}\r\n                disableGutters\r\n                key={pages.indexOf(page)+'_usernetworth'} \r\n                style={{minWidth:120}}\r\n              >\r\n                  <Button\r\n                      activeClassName={classes.active}\r\n                      className={classes.button}\r\n                      component={CustomRouterLink}\r\n                      to={'/users/usernetworth'}\r\n                      \r\n                    >\r\n                       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                       <Typography>\r\n                     \r\n                      {'User Networth'}\r\n                    </Typography>\r\n                  </Button>\r\n              </ListItem>\r\n                  \r\n                \r\n                \r\n              </ExpansionPanelDetails>\r\n\r\n            </ExpansionPanel>\r\n            :\r\n            <ListItem\r\n            className={classes.item}\r\n            disableGutters\r\n            key={pages.indexOf(page)+'_router'}\r\n            >\r\n            <Button\r\n              activeClassName={classes.active}\r\n              className={classes.button}\r\n              component={CustomRouterLink}\r\n              to={page.href}\r\n            >\r\n              <div className={classes.icon}>{page.icon}</div>\r\n              {page.title}\r\n            </Button>\r\n          </ListItem>\r\n      \r\n      ))}\r\n    </List>\r\n  );\r\n};\r\n\r\nSidebarNav.propTypes = {\r\n  className: PropTypes.string,\r\n  pages: PropTypes.array.isRequired\r\n};\r\n\r\nexport default SidebarNav;\r\n","/* eslint-disable react/no-multi-comp */\r\n/* eslint-disable react/display-name */\r\nimport React, { forwardRef } from 'react';\r\nimport { NavLink as RouterLink } from 'react-router-dom';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport { List, ListItem, Button, colors } from '@material-ui/core';\r\nimport MuiExpansionPanel from '@material-ui/core/ExpansionPanel';\r\nimport MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\r\nimport MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\nconst ExpansionPanel = withStyles({\r\n  root: {\r\n    border: '0px solid rgba(0, 0, 0, .125)',\r\n    boxShadow: 'none',\r\n    '&:not(:last-child)': {\r\n      borderBottom: 0,\r\n    },\r\n    '&:before': {\r\n      display: 'none',\r\n    },\r\n    '&$expanded': {\r\n      margin: 'auto',\r\n    },\r\n  },\r\n  expanded: {},\r\n})(MuiExpansionPanel);\r\n\r\nconst ExpansionPanelSummary = withStyles({\r\n  root: {\r\n    borderBottom: '0px solid rgba(0, 0, 0, .125)',\r\n    marginBottom: -1,\r\n    display:'flex',\r\n    minHeight: 56,\r\n\r\n    '&$expanded': {\r\n      minHeight: 56,\r\n    },\r\n  },\r\n  content: {\r\n    '&$expanded': {\r\n      margin: '12px 0',\r\n      minWidth:120\r\n    },\r\n  },\r\n  expanded: {},\r\n})(MuiExpansionPanelSummary);\r\n\r\nconst ExpansionPanelDetails = withStyles((theme) => ({\r\n  root: {\r\n    padding: theme.spacing(2),\r\n  },\r\n}))(MuiExpansionPanelDetails);\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  item: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0\r\n  },\r\n  button: {\r\n    color: colors.blueGrey[800],\r\n    padding: '10px 8px',\r\n    justifyContent: 'flex-start',\r\n    textTransform: 'none',\r\n    letterSpacing: 0,\r\n    width: '100%',\r\n    fontWeight: theme.typography.fontWeightMedium\r\n  },\r\n  icon: {\r\n    color: theme.palette.icon,\r\n    width: 24,\r\n    height: 24,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  active: {\r\n    color: theme.palette.primary.main,\r\n    fontWeight: theme.typography.fontWeightMedium,\r\n    '& $icon': {\r\n      color: theme.palette.primary.main\r\n    }\r\n  }\r\n}));\r\n\r\nconst CustomRouterLink = forwardRef((props, ref) => (\r\n  <div\r\n    ref={ref}\r\n    style={{ flexGrow: 1 }}\r\n  >\r\n    <RouterLink {...props} />\r\n  </div>\r\n));\r\n\r\nconst SidebarNav_TellerAdmin = props => {\r\n  const { pages, className, ...rest } = props; \r\n  \r\nconst uType = localStorage.getItem('type');\r\n  const [expanded, setExpanded] = React.useState('');\r\n\r\n  const classes = useStyles();\r\n\r\n  const handleChange = (panel) => (event, newExpanded) => {\r\n    setExpanded(newExpanded ? panel : false);\r\n  };\r\n  return (\r\n    <List\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      {\r\n      pages.map(page => (\r\n\r\nuType === '0'?  \r\n           \r\n(page.title === 'Order') ? \r\n<ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')} key={'panel1'} >\r\n<ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n<div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n<Typography>\r\n  {page.title}\r\n  </Typography>\r\n</ExpansionPanelSummary> \r\n\r\n<ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n <ListItem\r\n className={classes.item}\r\n disableGutters\r\n key={pages.indexOf(page)+'_orderlist'}\r\n style={{paddingTop:0,marginTop:0}}\r\n>\r\n   <Button\r\n       activeClassName={classes.active}\r\n       className={classes.button}\r\n       component={CustomRouterLink}\r\n       style={{paddingTop:0,marginTop:0}}\r\n       to={'/tellerorderpendinglist'}\r\n     >\r\n       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n       <Typography>\r\n       \r\n       {'Pending Order List'}\r\n     </Typography>\r\n   </Button> \r\n</ListItem>\r\n   \r\n</ExpansionPanelDetails>\r\n<ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n <ListItem\r\n className={classes.item}\r\n disableGutters\r\n key={pages.indexOf(page)+'_orderlist'}\r\n style={{paddingTop:0,marginTop:0}}\r\n>\r\n   <Button\r\n       activeClassName={classes.active}\r\n       className={classes.button}\r\n       component={CustomRouterLink}\r\n       style={{paddingTop:0,marginTop:0}}\r\n       to={'/tellerorderinprocesslist'}\r\n     >\r\n       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n       <Typography>\r\n       \r\n       {'In Process Order List'}\r\n     </Typography>\r\n   </Button> \r\n</ListItem>\r\n   \r\n</ExpansionPanelDetails>\r\n</ExpansionPanel>\r\n:  \r\n\r\n(page.title === 'Products')? \r\n<ExpansionPanel square expanded={expanded === 'panel2'}  key={'panel2'}  onChange={handleChange('panel2')}>\r\n<ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n<div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n<Typography>{page.title}</Typography>\r\n</ExpansionPanelSummary> \r\n<ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n  <ListItem\r\n  className={classes.item}\r\n  disableGutters\r\n  key={pages.indexOf(page)+'_product'} \r\n  style={{minWidth:120}}\r\n>\r\n    <Button\r\n        activeClassName={classes.active}\r\n        className={classes.button}\r\n        component={CustomRouterLink}\r\n        to={page.href}\r\n        \r\n      >\r\n        <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n        <Typography>\r\n        \r\n        {'The Product'}\r\n      </Typography>\r\n    </Button>\r\n</ListItem>\r\n    \r\n</ExpansionPanelDetails>\r\n  \r\n<ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n   \r\n<ListItem\r\nclassName={classes.item}\r\ndisableGutters\r\nkey={pages.indexOf(page)+'_setproductrate'}\r\nstyle={{paddingTop:0,marginTop:0}}\r\n>\r\n  <Button\r\n      activeClassName={classes.active}\r\n      className={classes.button}\r\n      component={CustomRouterLink}\r\n      style={{paddingTop:0,marginTop:0}}\r\n      to={'/setproduct'}\r\n    >\r\n      <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n      <Typography>\r\n      \r\n      {'Set Product Rate'}\r\n    </Typography>\r\n  </Button> \r\n</ListItem>\r\n  \r\n</ExpansionPanelDetails>\r\n</ExpansionPanel>\r\n:  \r\n  \r\n  page.title === 'Users' ? \r\n   null\r\n    \r\n    :\r\n    \r\n  page.title === 'New User' ? \r\n  null\r\n   :\r\n\r\n    <ListItem\r\n    className={classes.item}\r\n    disableGutters\r\n    key={pages.indexOf(page)+'_router'}\r\n    >\r\n    <Button\r\n      activeClassName={classes.active}\r\n      className={classes.button}\r\n      component={CustomRouterLink}\r\n      to={page.href}\r\n    >\r\n      <div className={classes.icon}>{page.icon}</div>\r\n      {page.title}\r\n    </Button>\r\n  </ListItem>\r\n               : \r\n        uType ==='1' ? \r\n         (page.title === 'Order') ? \r\n        <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')} key={'panel1'} >\r\n        <ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n         <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n         <Typography>\r\n           {page.title}\r\n           </Typography>\r\n        </ExpansionPanelSummary> \r\n        \r\n        <ExpansionPanelDetails  style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_orderlist'}\r\n          style={{paddingTop:0,marginTop:0}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                style={{paddingTop:0,marginTop:0}}\r\n                to={'/orderlist'}\r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'Order List'}\r\n              </Typography>\r\n            </Button> \r\n        </ListItem>\r\n            \r\n        </ExpansionPanelDetails>\r\n        </ExpansionPanel>\r\n        : \r\n        \r\n        \r\n        (page.title === 'Products')? \r\n        <ExpansionPanel square expanded={expanded === 'panel2'}  key={'panel2'}  onChange={handleChange('panel2')}>\r\n        <ExpansionPanelSummary aria-controls=\"panel1d-content\" id=\"panel1d-header\">\r\n        <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n        <Typography>{page.title}</Typography>\r\n        </ExpansionPanelSummary>\r\n        (uType == '1')?<ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n          <ListItem\r\n          className={classes.item}\r\n          disableGutters\r\n          key={pages.indexOf(page)+'_product'} \r\n          style={{minWidth:120}}\r\n        >\r\n            <Button\r\n                activeClassName={classes.active}\r\n                className={classes.button}\r\n                component={CustomRouterLink}\r\n                to={page.href}\r\n                \r\n              >\r\n                <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                <Typography>\r\n                \r\n                {'The Product'}\r\n              </Typography>\r\n            </Button>\r\n        </ListItem>\r\n            \r\n          \r\n</ExpansionPanelDetails>\r\n  \r\n  <ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n           \r\n        <ListItem\r\n        className={classes.item}\r\n        disableGutters\r\n        key={pages.indexOf(page)+'_setproductrate'}\r\n        style={{paddingTop:0,marginTop:0}}\r\n        >\r\n          <Button\r\n              activeClassName={classes.active}\r\n              className={classes.button}\r\n              component={CustomRouterLink}\r\n              style={{paddingTop:0,marginTop:0}}\r\n              to={'/setproduct'}\r\n            >\r\n              <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n              <Typography>\r\n              \r\n              {'Set Product Rate'}\r\n            </Typography>\r\n          </Button> \r\n        </ListItem>\r\n          \r\n        </ExpansionPanelDetails>\r\n        </ExpansionPanel>\r\n        :  \r\n          \r\n          page.title === 'Users' && uType !== '0'? \r\n            <ExpansionPanel square expanded={expanded === 'panel3'} key={'panel3'} onChange={handleChange('panel3')}>\r\n              <ExpansionPanelSummary aria-controls=\"panel3d-content\" id=\"panel3d-header\">\r\n              <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n               <Typography>{page.title}</Typography>\r\n              </ExpansionPanelSummary>\r\n              <ExpansionPanelDetails style={{paddingTop:0,marginTop:0}}> \r\n                <ListItem\r\n                className={classes.item}\r\n                disableGutters\r\n                key={pages.indexOf(page)+'_userlist'} \r\n                style={{minWidth:120}}\r\n              >\r\n                  <Button\r\n                      activeClassName={classes.active}\r\n                      className={classes.button}\r\n                      component={CustomRouterLink}\r\n                      to={'/users/list'}\r\n                      \r\n                    >\r\n                       <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                       <Typography>\r\n                     \r\n                      {'User List'}\r\n                    </Typography>\r\n                  </Button>\r\n              </ListItem>\r\n                  \r\n                 \r\n              <ListItem\r\n                className={classes.item}\r\n                disableGutters\r\n                key={pages.indexOf(page)+'_usertree'}\r\n                style={{paddingTop:0,marginTop:0}}\r\n              >\r\n                  <Button\r\n                      activeClassName={classes.active}\r\n                      className={classes.button}\r\n                      component={CustomRouterLink}\r\n                      style={{paddingTop:0,marginTop:0}}\r\n                      to={'/users/tree'}\r\n                    >\r\n                      <div className={classes.icon} style={{ display: 'flex',float:'left' }}>{page.icon}</div>\r\n                      <Typography>\r\n                      \r\n                      {'User Tree'}\r\n                    </Typography>\r\n                  </Button> \r\n              </ListItem>\r\n                  \r\n              </ExpansionPanelDetails>\r\n            </ExpansionPanel>\r\n            \r\n            :\r\n            <ListItem\r\n            className={classes.item}\r\n            disableGutters\r\n            key={pages.indexOf(page)+'_router'}\r\n            >\r\n            <Button\r\n              activeClassName={classes.active}\r\n              className={classes.button}\r\n              component={CustomRouterLink}\r\n              to={page.href}\r\n            >\r\n              <div className={classes.icon}>{page.icon}</div>\r\n              {page.title}\r\n            </Button>\r\n          </ListItem>\r\n         \r\n         :null\r\n        \r\n      ))}\r\n    </List>\r\n  );\r\n};\r\n\r\nSidebarNav_TellerAdmin.propTypes = {\r\n  className: PropTypes.string,\r\n  pages: PropTypes.array.isRequired\r\n};\r\n\r\nexport default SidebarNav_TellerAdmin;\r\n","import React from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Divider, Drawer } from '@material-ui/core';\r\nimport DashboardIcon from '@material-ui/icons/Dashboard';\r\nimport PeopleIcon from '@material-ui/icons/People';\r\nimport ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';\r\nimport TextFieldsIcon from '@material-ui/icons/TextFields';\r\nimport ImageIcon from '@material-ui/icons/Image';\r\nimport AccountBoxIcon from '@material-ui/icons/AccountBox';\r\nimport SettingsIcon from '@material-ui/icons/Settings';\r\nimport LockOpenIcon from '@material-ui/icons/LockOpen';\r\nimport PersonAddIcon from '@material-ui/icons/PersonAdd';\r\nimport MonetizationOnIcon from '@material-ui/icons/MonetizationOn';\r\n\r\nimport { Profile, SidebarNav,SidebarNav_TellerAdmin } from './components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  drawer: {\r\n    width: 240,\r\n    [theme.breakpoints.up('lg')]: {\r\n      marginTop: 64,\r\n      height: 'calc(100% - 64px)'\r\n    }\r\n  },\r\n  root: {\r\n    backgroundColor: theme.palette.white,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    height: '100%',\r\n    padding: theme.spacing(2)\r\n  },\r\n  divider: {\r\n    margin: theme.spacing(2, 0)\r\n  },\r\n  nav: {\r\n    marginBottom: theme.spacing(2)\r\n  }\r\n}));\r\n\r\nconst Sidebar = props => {\r\n  const { open, variant, onClose, className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const pages = [\r\n    {\r\n      title: 'Dashboard',\r\n      href: '/dashboard',\r\n      icon: <DashboardIcon />\r\n    },\r\n    {\r\n      title: 'Users',\r\n      href: '/users',\r\n      icon: <PeopleIcon />\r\n    },\r\n    {\r\n      title: 'Products',\r\n      href: '/products',\r\n      icon: <ShoppingBasketIcon />\r\n    },\r\n    {\r\n      title: 'Order',\r\n      href: '/order',\r\n      icon: <MonetizationOnIcon />\r\n    },\r\n    \r\n    {\r\n      title: 'New User',\r\n      href: '/newuser',\r\n      icon: <PersonAddIcon />\r\n    },\r\n    {\r\n      title: 'My Profile',\r\n      href: '/account',\r\n      icon: <SettingsIcon />\r\n    }, \r\n  ];\r\n\r\n  const uType = localStorage.getItem('type');\r\n  return (\r\n    <Drawer\r\n      anchor=\"left\"\r\n      classes={{ paper: classes.drawer }}\r\n      onClose={onClose}\r\n      open={open}\r\n      variant={variant}\r\n    >\r\n      <div\r\n        {...rest}\r\n        className={clsx(classes.root, className)}\r\n      >\r\n        <Profile />\r\n        <Divider className={classes.divider} />\r\n        {uType !== '0' && uType !== '1' ?\r\n        <SidebarNav\r\n          className={classes.nav}\r\n          pages={pages}\r\n        /> \r\n        : \r\n        <SidebarNav_TellerAdmin\r\n          className={classes.nav}\r\n          pages={pages}\r\n        /> \r\n      }\r\n      </div>\r\n    </Drawer>\r\n  );\r\n};\r\n\r\nSidebar.propTypes = {\r\n  className: PropTypes.string,\r\n  onClose: PropTypes.func,\r\n  open: PropTypes.bool.isRequired,\r\n  variant: PropTypes.string.isRequired\r\n};\r\n\r\nexport default Sidebar;\r\n\r\n\r\n/*\r\n\r\n    {\r\n      title: 'Authentication',\r\n      href: '/sign-in',\r\n      icon: <LockOpenIcon />\r\n    },\r\n    {\r\n      title: 'Typography',\r\n      href: '/typography',\r\n      icon: <TextFieldsIcon />\r\n    },\r\n    {\r\n      title: 'Icons',\r\n      href: '/icons',\r\n      icon: <ImageIcon />\r\n    },\r\n*/","import React from 'react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { AppBar, Toolbar } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {\r\n    boxShadow: 'none'\r\n  }\r\n}));\r\n\r\nconst Topbar = props => {\r\n  const { className,logo, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <AppBar\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n      color=\"primary\"\r\n      position=\"fixed\"\r\n    >\r\n      <Toolbar>\r\n        <RouterLink to=\"/\">\r\n          <img\r\n            alt=\"Logo\"\r\n            src={logo}\r\n            width=\"120\"\r\n          />\r\n        </RouterLink>\r\n      </Toolbar>\r\n    </AppBar>\r\n  );\r\n};\r\n\r\nTopbar.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default Topbar;\r\n","import React, { useState } from 'react';\r\nimport { Link as RouterLink } from 'react-router-dom';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { AppBar, Toolbar, Badge, Hidden, IconButton } from '@material-ui/core';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport NotificationsIcon from '@material-ui/icons/NotificationsOutlined';\r\nimport InputIcon from '@material-ui/icons/Input';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    boxShadow: 'none'\r\n  },\r\n  flexGrow: {\r\n    flexGrow: 1\r\n  },\r\n  signOutButton: {\r\n    marginLeft: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst Topbar = props => {\r\n  const { className, onSidebarOpen, logo, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [notifications] = useState([]);\r\n  \r\n  return (\r\n    <AppBar\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <Toolbar>\r\n        <RouterLink to=\"/\">\r\n          <img\r\n            alt=\"Logo\"\r\n            src={logo}\r\n            width=\"60\"\r\n          />\r\n        </RouterLink>\r\n\r\n        \r\n        <div className={classes.flexGrow} />\r\n        <Hidden mdDown>\r\n          <IconButton color=\"inherit\">\r\n            <Badge\r\n              badgeContent={notifications.length}\r\n              color=\"primary\"\r\n              variant=\"dot\"\r\n            >\r\n              <NotificationsIcon />\r\n            </Badge>\r\n          </IconButton>\r\n          <IconButton\r\n            className={classes.signOutButton}\r\n            color=\"inherit\" \r\n          >\r\n          <RouterLink to=\"/sign-out\">\r\n            <InputIcon />\r\n          </RouterLink>\r\n          </IconButton>\r\n        </Hidden>\r\n        <Hidden lgUp>\r\n          <IconButton\r\n            color=\"inherit\"\r\n            onClick={onSidebarOpen}\r\n          >\r\n            <MenuIcon />\r\n          </IconButton>\r\n        </Hidden>\r\n      </Toolbar>\r\n    </AppBar>\r\n  );\r\n};\r\n\r\nTopbar.propTypes = {\r\n  className: PropTypes.string,\r\n  onSidebarOpen: PropTypes.func\r\n};\r\n\r\nexport default Topbar;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles, useTheme } from '@material-ui/styles';\r\nimport { useMediaQuery } from '@material-ui/core';\r\n\r\nimport { Sidebar, Topbar, Footer } from './components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    paddingTop: 56,\r\n    height: '100%',\r\n    [theme.breakpoints.up('sm')]: {\r\n      paddingTop: 64\r\n    }\r\n  },\r\n  shiftContent: {\r\n    paddingLeft: 240\r\n  },\r\n  content: {\r\n    height: '100%'\r\n  }\r\n}));\r\n\r\nconst Main = props => {\r\n  const { children } = props;\r\n\r\n  const classes = useStyles();\r\n  const theme = useTheme();\r\n  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {\r\n    defaultMatches: true\r\n  });\r\n\r\n  const [openSidebar, setOpenSidebar] = useState(false);\r\n\r\n  const handleSidebarOpen = () => {\r\n    setOpenSidebar(true);\r\n  };\r\n\r\n  const handleSidebarClose = () => {\r\n    setOpenSidebar(false);\r\n  };\r\n\r\n  const shouldOpenSidebar = isDesktop ? true : openSidebar;\r\n\r\n  return (\r\n    <div\r\n      className={clsx({\r\n        [classes.root]: true,\r\n        [classes.shiftContent]: isDesktop\r\n      })}\r\n    >\r\n      <Topbar onSidebarOpen={handleSidebarOpen} logo={'/images/logos/MEPS_logo.png'} />\r\n      <Sidebar\r\n        onClose={handleSidebarClose}\r\n        open={shouldOpenSidebar}\r\n        variant={isDesktop ? 'persistent' : 'temporary'}\r\n      />\r\n      <main className={classes.content}>\r\n        {children}\r\n        <Footer footerLink={'https://'} footerLinkText={'OMNIPay Copyrighted'} copyrightYear={2020}/>\r\n      </main>\r\n    </div>\r\n  );\r\n};\r\n\r\nMain.propTypes = {\r\n  children: PropTypes.node\r\n};\r\n\r\nexport default Main;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nimport { Topbar } from './components';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {\r\n    paddingTop: 64,\r\n    height: '100%'\r\n  },\r\n  content: {\r\n    height: '100%'\r\n  }\r\n}));\r\n\r\nconst Minimal = props => {\r\n  const { children } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Topbar logo={'/images/logos/MEPS_logo.png'} />\r\n      <main className={classes.content}>{children}</main>\r\n    </div>\r\n  );\r\n};\r\n\r\nMinimal.propTypes = {\r\n  children: PropTypes.node,\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default Minimal;\r\n","import * as React from 'react';\r\n\r\nexport interface HttpPostStoreInterface {\r\n \r\n  httpPostContext:{ },\r\n  setHttpPostContext: () => {}; \r\n  \r\n  postToServer :   (url:any,  queryStr:any,auth:any,  handleRetrievedData:any)   => Promise<boolean>;\r\n  postToServerWithHeader :   (url:any, queryStr:any, header:any,handleRetrievedData:any)   => Promise<boolean>;\r\n}\r\n\r\nexport interface HttpGetStoreInterface { \r\n  httpGetServiceContext:{},\r\n  setHttpGetContext: () => {}; \r\n // genericGetHttp :   (url:any, parameterizedString:any, auth:any, params:any,  handleRetrievedData:any)   => {};\r\n  genericGetHttp :   (url:any, parameterizedString:any, auth:any, params:any )  =>Promise< any>;\r\n  genericGetHttpBinary:(url:any, parameterizedString:any,auth:any, resType:any, params:any,handleRetrievedData:any) =>Promise<boolean>\r\n}\r\n\r\n\r\nexport const httpPostVar = React.createContext<HttpPostStoreInterface>(null);\r\nexport const httpGetVar = React.createContext<HttpGetStoreInterface>( null);\r\n\r\n\r\nexport const HttpPostServiceContextProvider = httpPostVar.Provider;\r\n\r\nexport const HttpPostServiceContextConsumer = httpPostVar.Consumer;\r\n\r\nexport const HttpGetServiceContextProvider = httpGetVar.Provider;\r\n\r\nexport const HttpGetServiceContextConsumer = httpGetVar.Consumer;\r\n\r\n/*\r\ntype Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;\r\n\r\nexport function withHttpStoreContext<\r\n  P extends { HttpStoreContext?: HttpStoreInterface },\r\n  R = Omit<P, \"HttpStoreContext\">\r\n>(\r\n  Component: React.ComponentClass<P,any> | React.StatelessComponent<P>\r\n): React.SFC<R> {\r\n  return function BoundComponent(props: R) {\r\n    return (\r\n      <HttpServiceContextConsumer>\r\n        {value => <React.Component {...props} appContext={value} />}\r\n      </HttpServiceContextConsumer>\r\n    );\r\n  };\r\n}*/\r\n\r\n","import React, { useState } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Divider,\r\n  Grid,\r\n  Button,\r\n  TextField\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {}\r\n}));\r\n\r\nconst AccountDetails = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [values, setValues] = useState({\r\n    nickName: 'Shen', \r\n    email: 'shen.zhi@devias.io',\r\n    phone: '',\r\n    parent: '',\r\n  });\r\n\r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n  };\r\n\r\n  const language = [{\r\n    label: 'English',\r\n    value: 'en',\r\n\r\n  },\r\n  {\r\n    label: '中文',\r\n    value: 'cn',\r\n\r\n  }];\r\n \r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form\r\n        autoComplete=\"off\"\r\n        noValidate\r\n      >\r\n        <CardHeader\r\n          subheader=\"The information can be edited\"\r\n          title=\"Profile\"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n          <Grid\r\n            container\r\n            spacing={3}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify the nick name\"\r\n                label=\"Nick Name\"\r\n                margin=\"dense\"\r\n                name=\"nickName\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.nickName}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Select language\"\r\n                margin=\"dense\"\r\n                name=\"language\"\r\n                onChange={handleChange}\r\n                required\r\n                select\r\n                // eslint-disable-next-line react/jsx-sort-props\r\n                SelectProps={{ native: true }}\r\n                value={values.state}\r\n                variant=\"outlined\"\r\n              >\r\n                {language.map(option => (\r\n                  <option\r\n                    key={option.value}\r\n                    value={option.value}\r\n                  >\r\n                    {option.label}\r\n                  </option>\r\n                ))}\r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Email Address\"\r\n                margin=\"dense\"\r\n                name=\"email\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.email}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n           \r\n          </Grid>\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n          >\r\n            Save details\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n  );\r\n};\r\n\r\nAccountDetails.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default AccountDetails;\r\n\r\n\r\n/*\r\n\r\n <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Phone Number\"\r\n                margin=\"dense\"\r\n                name=\"phone\"\r\n                onChange={handleChange}\r\n                type=\"number\"\r\n                value={values.phone}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            \r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Country\"\r\n                margin=\"dense\"\r\n                name=\"country\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.country}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n\r\n            */","import React,{  useState } from 'react';\r\n\r\n const SessionContext =React.createContext([]);\r\n\r\n\r\nconst SessionContextProvider = (props) => {\r\n    const [state1, setContextState] = useState({\r\n        isLoggedIn:false,\r\n        authorizationToken:'',\r\n    });\r\n    return (\r\n      <SessionContext.Provider value={[state1, setContextState]}>\r\n        {props.children}\r\n      </SessionContext.Provider>\r\n    );\r\n  }\r\n  \r\n  export { SessionContext, SessionContextProvider };","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport moment from 'moment';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Typography,\r\n  Divider,\r\n  Button,\r\n  LinearProgress\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  details: {\r\n    display: 'flex'\r\n  },\r\n  avatar: {\r\n    marginLeft: 'auto',\r\n    height: 110,\r\n    width: 100,\r\n    flexShrink: 0,\r\n    flexGrow: 0\r\n  },\r\n  progress: {\r\n    marginTop: theme.spacing(2)\r\n  },\r\n  uploadButton: {\r\n    marginRight: theme.spacing(2)\r\n  }\r\n}));\r\n\r\nconst AccountProfile = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const user = {\r\n    nickname: 'My Nickname',\r\n    username: 'My Username',\r\n    lastlogin: '',\r\n    balance: '0.00', \r\n    avatar: ''\r\n  };\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <div className={classes.details}>\r\n          <div>\r\n            <Typography\r\n              gutterBottom\r\n              variant=\"h2\"\r\n            >\r\n              {user.nickname}\r\n            </Typography>\r\n            <Typography\r\n              className={classes.locationText}\r\n              color=\"textSecondary\"\r\n              variant=\"body1\"\r\n            >\r\n              \r\n              {user.username}\r\n            </Typography>\r\n            <Typography\r\n              className={classes.dateText}\r\n              color=\"textSecondary\"\r\n              variant=\"body1\"\r\n            >\r\n              {moment().format('hh:mm A')} ({user.lastlogin})\r\n            </Typography>\r\n          </div>\r\n          <Avatar\r\n            className={classes.avatar}\r\n            src={user.avatar}\r\n          />\r\n        </div>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nAccountProfile.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default AccountProfile;\r\n\r\n/*\r\n        <div className={classes.progress}>\r\n          <Typography variant=\"body1\">Profile Completeness: 70%</Typography>\r\n          <LinearProgress\r\n            value={70}\r\n            variant=\"determinate\"\r\n          />\r\n        </div>\r\n\r\n        <Button\r\n          className={classes.uploadButton}\r\n          color=\"primary\"\r\n          variant=\"text\"\r\n        >\r\n          Upload picture\r\n        </Button>\r\n        <Button variant=\"text\">Remove picture</Button>\r\n        */\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport { AccountProfile, AccountDetails } from './components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst Account = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        spacing={4}\r\n      >\r\n        <Grid\r\n          item\r\n          lg={4}\r\n          md={6}\r\n          xl={4}\r\n          xs={12}\r\n        >\r\n          <AccountProfile />\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          lg={8}\r\n          md={6}\r\n          xl={8}\r\n          xs={12}\r\n        >\r\n          <AccountDetails />\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Account;\r\n","export const domainUrl= 'http://localhost:5000/';\r\n\r\nexport const payDomain = 'https://pay.infinityss.com.my/'; // http://pay.infinityss.com.my/   localhost:65387\r\nexport const receiptUrl = payDomain+'receipt';\r\n","import React, { useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport moment from 'moment';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Typography,\r\n  Divider,\r\n  Button,\r\n  LinearProgress,\r\n  CardHeader,\r\n  Grid,\r\n  TextField\r\n} from '@material-ui/core';\r\nimport { SessionContext } from '../../../contexts/SessionContext';\r\nimport ReactPasswordStrength from 'react-password-strength';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {},\r\n  details: {\r\n    display: 'flex'\r\n  },\r\n  avatar: {\r\n    marginLeft: 'auto',\r\n    height: 110,\r\n    width: 100,\r\n    flexShrink: 0,\r\n    flexGrow: 0\r\n  },\r\n  progress: {\r\n    marginTop: theme.spacing(2)\r\n  },\r\n  uploadButton: {\r\n    marginRight: theme.spacing(2)\r\n  }\r\n}));\r\nconst purl = 'http://localhost:5000/Users/CreateUser';\r\n\r\nconst NewAccountForm = props => {\r\n  const { className,postToServer, ...rest } = props;\r\n\r\n  const [state1, setContextState] = useContext(SessionContext); \r\n  const classes:any = useStyles();\r\n\r\n  const [values, setValues] = useState({\r\n    Nickname: '', \r\n    Username:'',\r\n    Email: 'shen.zhi@devias.io',\r\n    ContactNo: '',\r\n    Password: '',\r\n    //parent: '',\r\n    Language:'English',\r\n  });\r\n\r\n  const Language = [{\r\n    label: 'English',\r\n    value: 'English',\r\n\r\n  },\r\n  {\r\n    label: '中文',\r\n    value: 'Chinese',\r\n\r\n  }];\r\n\r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n  };\r\n  \r\n  const handleCreateUser =()=>{\r\n    var query = JSON.stringify(values);\r\n    props.postToServer(purl,query, {'Content-Type':'application/json', 'Authorization': state1.authorizationToken},handleResponse );    \r\n  }\r\n\r\n  const handleResponse =(data) =>{\r\n    if(data.statusText === \"OK\"){\r\n      console.log(\"User Registered\")\r\n      \r\n    }\r\n  }\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form\r\n        autoComplete=\"off\"\r\n        noValidate\r\n      >\r\n        <CardHeader\r\n          subheader=\"New user account information\"\r\n          title=\"New user\"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n          <Grid\r\n            container\r\n            spacing={3}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify the user name\"\r\n                label=\"Username\"\r\n                margin=\"dense\"\r\n                name=\"Username\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.Username}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify the password\"\r\n                type=\"password\"\r\n                label=\"Password\"\r\n                margin=\"dense\"\r\n                name=\"Password\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.Password}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify the nick name\"\r\n                label=\"Nick Name\"\r\n                margin=\"dense\"\r\n                name=\"Nickname\"\r\n                onChange={handleChange} \r\n                value={values.Nickname}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Contact\"\r\n                label=\"Contact\"\r\n                margin=\"dense\"\r\n                name=\"ContactNo\"\r\n                onChange={handleChange} \r\n                value={values.ContactNo}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Select language\"\r\n                margin=\"dense\"\r\n                name=\"Language\"\r\n                onChange={handleChange}\r\n                required\r\n                select\r\n                // eslint-disable-next-line react/jsx-sort-props\r\n                SelectProps={{ native: true }}\r\n                value={values.Language}\r\n                variant=\"outlined\"\r\n              >\r\n                {Language.map(option => (\r\n                  <option\r\n                    key={option.value}\r\n                    value={option.value}\r\n                  >\r\n                    {option.label}\r\n                  </option>\r\n                ))}\r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Email Address\"\r\n                margin=\"dense\"\r\n                name=\"Email\"\r\n                onChange={handleChange} \r\n                value={values.Email}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n           \r\n          </Grid>\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n            onClick={ handleCreateUser}\r\n          >\r\n            Create new user account\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n  );\r\n};\r\n\r\nNewAccountForm.propTypes = {\r\n  className: PropTypes.string,\r\n  postToServer: PropTypes.func,\r\n  sethttppostcontext:  PropTypes.func,\r\n  httppostcontext:  PropTypes.any,\r\n};\r\n\r\nexport default NewAccountForm;\r\n\r\n/*\r\n        <div className={classes.progress}>\r\n          <Typography variant=\"body1\">Profile Completeness: 70%</Typography>\r\n          <LinearProgress\r\n            value={70}\r\n            variant=\"determinate\"\r\n          />\r\n        </div>\r\n\r\n        <Button\r\n          className={classes.uploadButton}\r\n          color=\"primary\"\r\n          variant=\"text\"\r\n        >\r\n          Upload picture\r\n        </Button>\r\n        <Button variant=\"text\">Remove picture</Button>\r\n        */\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport  NewAccountForm   from './components';\r\nimport { HttpPostServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst NewAccount = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServerWithHeader  })=>\r\n    (\r\n      <React.Fragment>\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        spacing={4}\r\n      >\r\n        <Grid\r\n          item\r\n          lg={8}\r\n          md={6}\r\n          xl={8}\r\n          xs={12}\r\n        >\r\n          <NewAccountForm postToServer={postToServerWithHeader} sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}/>\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n    </React.Fragment>  \r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n};\r\n\r\nexport default NewAccount;\r\n","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';\r\nimport ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';\r\nimport MoneyIcon from '@material-ui/icons/Money';\r\nimport {domainUrl} from '../../../../constants';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    height: '100%'\r\n  },\r\n  content: {\r\n    alignItems: 'center',\r\n    display: 'flex'\r\n  },\r\n  title: {\r\n    fontWeight: 700\r\n  },\r\n  avatar: {\r\n    backgroundColor: theme.palette.error.main,\r\n    height: 56,\r\n    width: 56\r\n  },\r\n  icon: {\r\n    height: 32,\r\n    width: 32\r\n  },\r\n  difference: {\r\n    marginTop: theme.spacing(2),\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    display:'none'\r\n  },\r\n  differenceIcon: {\r\n    color: theme.palette.error.dark\r\n  },\r\n  differenceValue: {\r\n    color: theme.palette.error.dark,\r\n    marginRight: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst NetworthBalance = props => {\r\n  const { className,posttoserverwithheader, ...rest } = props;\r\n  const [mybalance, setMyBalance] = useState(0.0);\r\n  const classes = useStyles();\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  const handleSubmitGetOwnNetworth = ()=>{\r\n    const url = domainUrl + 'UserNetworths/GetNetworth';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n    //  \"Username\": values.username, \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n    //console.log(query2)\r\n    posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},  x=> renderResponseModal(x, 'User Networth',x.data !== undefined && x.data !== \"\"? 'Search user '+x.data+' successfully' : 'Search Failed', false)  );  \r\n    }\r\n\r\n    useEffect(() => { \r\n      handleSubmitGetOwnNetworth();\r\n  },[]);\r\n\r\n    \r\n    const renderResponseModal = (data, title, message, isOpen)=>{ \r\n       setResponseTitle(title);\r\n       setResponseMessage(message); \r\n       setOpen(isOpen); \r\n       setMyBalance(data.data.networth);\r\n    }\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <Grid\r\n          container\r\n          justify=\"space-between\"\r\n        >\r\n          <Grid item>\r\n            <Typography\r\n              className={classes.title}\r\n              color=\"textSecondary\"\r\n              gutterBottom\r\n              variant=\"body2\"\r\n            >\r\n               Balance\r\n            </Typography>\r\n            <Typography variant=\"h3\">MYR {mybalance.toFixed(2)}</Typography>\r\n          </Grid>\r\n          <Grid item>\r\n            <Avatar className={classes.avatar}>\r\n              <MoneyIcon className={classes.icon} />\r\n            </Avatar>\r\n          </Grid>\r\n        </Grid>\r\n        <div className={classes.difference}>\r\n          <ArrowDownwardIcon className={classes.differenceIcon} />\r\n          <Typography\r\n            className={classes.differenceValue}\r\n            variant=\"body2\"\r\n          >\r\n            12%\r\n          </Typography>\r\n          <Typography\r\n            className={classes.caption}\r\n            variant=\"caption\"\r\n          >\r\n            Since last month\r\n          </Typography>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n};\r\n\r\nNetworthBalance.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default NetworthBalance;\r\n","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport { makeStyles } from '@material-ui/styles'; \r\nimport 'react-perfect-scrollbar/dist/css/styles.css';\r\nimport {domainUrl} from '../../../../constants';\r\nimport {\r\n  useTable,\r\n  useGroupBy,\r\n  useFilters,\r\n  useSortBy,\r\n  useExpanded,\r\n  usePagination,\r\n} from 'react-table';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Modal ,\r\n  Button,\r\n  CardHeader,\r\n  Divider,\r\n  Avatar,\r\n  Checkbox,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableRow,\r\n  Typography,\r\n  TablePagination,\r\n  Grid,\r\n  TextField,\r\n  FormGroup,\r\n  FormControlLabel,\r\n  Switch,\r\n} from '@material-ui/core';\r\n\r\nimport { getInitials } from '../../../../helpers';\r\n\r\nfunction rand() {\r\n  return Math.round(Math.random() * 20) - 10;\r\n}\r\n\r\nfunction getModalStyle() {\r\n  const top = 50 + rand();\r\n  const left = 50 + rand();\r\n\r\n  return {\r\n    top: `${top}%`,\r\n    left: `${left}%`,\r\n    transform: `translate(-${top}%, -${left}%)`,\r\n    overflow:'auto'\r\n  };\r\n}\r\nconst useStyles = makeStyles((theme :any)=> ({\r\n  root: {},\r\n  content: {\r\n    padding: 0\r\n  },\r\n  inner: {\r\n    minWidth: 1050\r\n  },\r\n  nameContainer: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  avatar: {\r\n    marginRight: theme.spacing(2)\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  },\r\n  paper: {\r\n    position: 'absolute',\r\n    width: 400,\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '2px solid #000',\r\n    boxShadow: theme.shadows[5],\r\n    padding: theme.spacing(2, 4, 3),\r\n  }\r\n}));\r\n\r\nfunction TTable({ classes, columns,className, data,...rest }) {\r\n  \r\n  const {\r\n    getTableProps,\r\n    getTableBodyProps,\r\n    headerGroups,\r\n    rows,\r\n    prepareRow,\r\n    page, // Instead of using 'rows', we'll use page,\r\n    // which has only the rows for the active page\r\n\r\n    // The rest of these things are super handy, too ;)\r\n    canPreviousPage,\r\n    canNextPage,\r\n    pageOptions,\r\n    pageCount,\r\n    gotoPage,\r\n    nextPage,\r\n    previousPage,\r\n    setPageSize,\r\n    state: { pageIndex, pageSize },\r\n  } = useTable(\r\n    {\r\n      columns,\r\n      data,\r\n      initialState: { pageIndex: 0 },\r\n    },\r\n    useSortBy,\r\n    usePagination,\r\n  )\r\n\r\n\r\n    return (\r\n      <Card\r\n           {...rest}\r\n           className={clsx(classes.root, className)}\r\n         >\r\n           <CardContent className={classes.content}>\r\n             <PerfectScrollbar>\r\n               <div className={classes.inner}>\r\n               \r\n               <Table {...getTableProps()}>\r\n                   <TableHead>\r\n                         {headerGroups.map(headerGroup => (\r\n                     <TableRow {...headerGroup.getHeaderGroupProps()}>\r\n                       {headerGroup.headers.map(column => ( \r\n                         <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>\r\n                           {column.render('Header')}\r\n                           <span>\r\n                             {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}\r\n                           </span>\r\n                         </TableCell>\r\n                       ))}\r\n                     </TableRow>\r\n                   ))}\r\n                      \r\n                   </TableHead>\r\n                   <TableBody  {...getTableBodyProps()}>\r\n                     {page.map((row, i) => {\r\n                       prepareRow(row)\r\n                       return (\r\n                         <TableRow \r\n                         className={classes.tableRow}\r\n                         hover\r\n                          {...row.getRowProps()}>\r\n                           {row.cells.map(cell => {\r\n                             return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>\r\n                           })}\r\n                         </TableRow>\r\n                       )\r\n                     })}\r\n                   \r\n                   </TableBody>\r\n                 </Table>\r\n     \r\n               </div>\r\n             </PerfectScrollbar>\r\n           </CardContent>\r\n           <CardActions className={classes.actions}>\r\n             <div className=\"pagination\">\r\n               <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>\r\n                 {'<<'}\r\n               </button>{' '}\r\n               <button onClick={() => previousPage()} disabled={!canPreviousPage}>\r\n                 {'<'}\r\n               </button>{' '}\r\n               <button onClick={() => nextPage()} disabled={!canNextPage}>\r\n                 {'>'}\r\n               </button>{' '}\r\n               <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>\r\n                 {'>>'}\r\n               </button>{' '}\r\n               <span>\r\n                 Page{' '}\r\n                 <strong>\r\n                   {pageIndex + 1} of {pageOptions.length}\r\n                 </strong>{' '}\r\n               </span>\r\n               <span>\r\n                 | Go to page:{' '}\r\n                 <input\r\n                   type=\"number\"\r\n                   defaultValue={pageIndex + 1}\r\n                   onChange={e => {\r\n                     const page = e.target.value ? Number(e.target.value) - 1 : 0\r\n                     gotoPage(page)\r\n                   }}\r\n                   style={{ width: '100px' }}\r\n                 />\r\n               </span>{' '}\r\n               <select\r\n                 value={pageSize}\r\n                 onChange={e => {\r\n                   setPageSize(Number(e.target.value))\r\n                 }}\r\n               >\r\n                 {[10, 20, 30, 40, 50].map(pageSize => (\r\n                   <option key={pageSize} value={pageSize}>\r\n                     Show {pageSize}\r\n                   </option>\r\n                 ))}\r\n               </select>\r\n             </div>\r\n           </CardActions>\r\n         </Card>\r\n         )\r\n}\r\n\r\nconst OrdersTable = props => {\r\n  const { className, orders,handleSubmitOrder, \r\n    downlines, statusCallBack, handleRetractOrder, handleGetBanks,handleGetRates,obtainRate,banks,  ...rest } = props;\r\n  const [modalStyle] = React.useState(getModalStyle);\r\n\r\n  const [values, setValues] = useState({\r\n    recipient_contact: '010', \r\n    bank_name: 0,\r\n    bank_account: '12345',\r\n    bank_fee_idr:  6000,\r\n    my_fee_myr: 5,\r\n    my_amount:0,\r\n    my_rate_idr: 2300,\r\n    my_obtainedrate_idr: 2300,\r\n    my_obtainedexpress: 2300,\r\n    is_express: false, \r\n    sender_phone: '',\r\n    rate_earning: 0,\r\n    fee_earning: 0,\r\n    my_total:0,\r\n    my_total_idr:0,\r\n  });\r\n \r\n  const classes = useStyles();\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [editCode,setEditCode]= useState('');\r\n\r\n  const [dialogOpen, setDialogOpen] = React.useState(false);\r\n  const [open, setOpen] = React.useState(false);\r\n  const [openModal, setModalOpen] = React.useState(false);\r\n  const [selectedUsers, setSelectedUsers] = useState([]);\r\n  const [theBanks, setBanks] = useState([]);\r\n  const [rowsPerPage, setRowsPerPage] = useState(10);\r\n  const [page, setPage] = useState(0);\r\n  const [selectedOrder, setSelectedOrder]=useState(null);\r\n  \r\n  const handleToRetract= (code)=>{\r\n    handleRetractOrder(code);\r\n    handleDialogClose();\r\n  }\r\n  const columns=React.useMemo(\r\n    () => [\r\n    {\r\n      \"Header\": \"Order Code\",\r\n      \"accessor\": \"orderCode\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Date Time\",\r\n      \"accessor\": \"doneOn\",\r\n      sortType: 'basic',\r\n      Cell: props=>  {return moment(props.value).format('DD/MM/YYYY')}\r\n    },{\r\n        \"Header\": \"Sender\",\r\n        \"accessor\": \"senderContact\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Recipient Name\",\r\n        \"accessor\": \"recipientAccountName\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Account\",\r\n        \"accessor\": \"recipeintAccountNo\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Bank\",\r\n        \"accessor\": \"bankName\",\r\n        sortType: 'basic'\r\n    },{\r\n      \"Header\": \"MYR\",\r\n      \"accessor\": \"amountBase\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"IDR\",\r\n      \"accessor\": \"amountExchange\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Rate\",\r\n      \"accessor\": \"orderRate\",\r\n      sortType: 'basic',\r\n\r\n    },{\r\n        \"Header\": \"Obtain Rate\",\r\n        \"accessor\": \"obtainedRate\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n        \"Header\": \"Fee\",\r\n        \"accessor\": \"orderFee\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n        \"Header\": \"Obtain Fee\",\r\n        \"accessor\": \"obtainedFee\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n      \"Header\": \"Order Status\",\r\n      \"accessor\": \"orderStatus\",\r\n      sortType: 'basic',\r\n\r\n  },{\r\n        \"Header\": \"Agent\",\r\n        \"accessor\": \"agentUsername\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n      \"Header\": \"Action\", \r\n      \r\n      Cell: props =>{  \r\n        var dd = [];\r\n        downlines.map(d => dd.push(d.username));; \r\n        return (props.row.cells[13].value === localStorage.getItem('user') && (props.row.cells[12].value === 'InsufficientFund' ||  props.row.cells[12].value === 'Pending')) ? \r\n          <Button color='primary' onClick={x=>renderModal(props.row.cells[0].value,props.row,theBanks)}>Edit</Button>  :\r\n          \r\n          \r\n          (dd.indexOf(props.row.cells[13].value ) !== -1 && (props.row.cells[12].value === 'InsufficientFund' ||  props.row.cells[12].value === 'Pending'))\r\n         ?  <Button color='primary' onClick={x=>retractOrder(props.row.cells[0].value)}>Retract</Button> \r\n         : null\r\n      }\r\n\r\n  }],[downlines,statusCallBack]\r\n    );\r\n    \r\n    \r\n  const submitEdit =(orderCode)=>{\r\n    if(isNaN(parseInt(values.bank_name.toString()))){\r\n      setResponseTitle('Edit order');\r\n     setResponseMessage('Please select a bank');\r\n     setOpen(true);\r\n      return ;\r\n    }\r\n    console.log( )\r\n    const url = domainUrl + 'Orders/EditOrder';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"OrderCode\": orderCode, \r\n      \"SenderContactNo\":values.sender_phone,  \r\n      \"BankId\":values.bank_name,  \r\n      \"RecipientAccountName\":values.recipient_contact,\r\n      \"RecipientAccountNo\":values.bank_account,\r\n      \"Amount\": values.my_amount,\r\n      \"Express\": values.is_express,\r\n      \"Fee\": values.my_fee_myr,\r\n      \"Rate\":values.my_rate_idr\r\n    }\r\n    \r\n    console.log(query)\r\n    var query2 = JSON.stringify(query);\r\n    console.log(query2)\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, renderResponseModal );  \r\n\r\n  }\r\n  \r\n  \r\n  const retractOrder = (code )=>{ \r\n     \r\n    setEditCode(code);\r\n    setResponseTitle('Retract Order');\r\n    setResponseMessage('Do you want to retract order?');\r\n    setDialogOpen(true);\r\n  }\r\n\r\n  const renderModal = (code, row,theBanks)=>{ \r\n    console.log(theBanks)\r\n    var bankid = banks.indexOf(row.cells[5].value);\r\n    console.log(bankid)\r\n    setEditCode(code)\r\n      setValues({\r\n        ...values,\r\n        recipient_contact: row.cells[3].value, \r\n        bank_name: row.cells[5].value ,\r\n        bank_account: row.cells[4].value, \r\n        my_fee_myr:parseFloat(row.cells[10].value),\r\n        my_amount:parseFloat(row.cells[6].value),\r\n        my_rate_idr: parseFloat(row.cells[8].value),\r\n        my_obtainedrate_idr: parseFloat(row.cells[9].value), \r\n        is_express: false, \r\n        sender_phone: row.cells[2].value, \r\n\r\n      });\r\n      setSelectedOrder({\r\n        recipient_contact: row.cells[3].value, \r\n        bank_name: row.cells[5].value,\r\n        bank_account: row.cells[4].value, \r\n        my_fee_myr:parseFloat(row.cells[10].value),\r\n        my_amount:parseFloat(row.cells[6].value),\r\n        my_rate_idr: parseFloat(row.cells[8].value),\r\n        my_obtainedrate_idr: parseFloat(row.cells[9].value), \r\n        is_express: false, \r\n        sender_phone: row.cells[2].value, \r\n          \r\n      })\r\n    setModalOpen(true);\r\n  }\r\n \r\n  const renderResponseModal = (data)=>{\r\n    console.log(data)\r\n    if(data){\r\n     var title= 'Edit Order'\r\n     var message = 'Order edited successfully'\r\n     setResponseTitle(title);\r\n     setResponseMessage(message);\r\n    }\r\n\r\n    setOpen(true);\r\n  }\r\n\r\n  const handleSelectAll = event => { \r\n\r\n    let selectedUsers;\r\n\r\n    if (event.target.checked) {\r\n      selectedUsers = orders.map(orders => orders.id);\r\n    } else {\r\n      selectedUsers = [];\r\n    }\r\n\r\n    setSelectedUsers(selectedUsers);\r\n  };\r\n\r\n  const handleSelectOne = (event, id) => {\r\n    const selectedIndex = selectedUsers.indexOf(id);\r\n    let newSelectedUsers = [];\r\n\r\n    if (selectedIndex === -1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);\r\n    } else if (selectedIndex === 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));\r\n    } else if (selectedIndex === selectedUsers.length - 1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));\r\n    } else if (selectedIndex > 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(\r\n        selectedUsers.slice(0, selectedIndex),\r\n        selectedUsers.slice(selectedIndex + 1)\r\n      );\r\n    }\r\n\r\n    setSelectedUsers(newSelectedUsers);\r\n  };\r\n\r\n  const handlePageChange = (event, page) => {\r\n    setPage(page);\r\n  };\r\n\r\n  const handleRowsPerPageChange = event => {\r\n    setRowsPerPage(event.target.value);\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setOpen(false);\r\n  };\r\n  \r\n  const handleDialogClose = () => {\r\n    setDialogOpen(false);\r\n  };\r\n  \r\n  const handleModalClose = () => {\r\n    setModalOpen(false);\r\n  };\r\n    \r\n  useEffect(() => {\r\n     setBanks(banks);\r\n     \r\n    console.log(banks) \r\n  },[banks]);\r\n \r\n  useEffect(() => { \r\n    \r\n    if(selectedOrder !== null  && banks.length > 0){\r\n      for(var b in banks){\r\n        if(banks[b].bankName === selectedOrder.bank_name){\r\n          var bankId = parseInt(banks[b].id);\r\n          console.log(bankId) \r\n          setValues({...values, bank_name:bankId});\r\n          handleGetRates(bankId)\r\n          \r\n           \r\n        }\r\n      }\r\n    }\r\n  },[selectedOrder]);\r\n\r\n  useEffect(() => {\r\n    if(obtainRate){\r\n      setValues({...values, \r\n        my_obtainedexpress: obtainRate.obtainedExpressFee,\r\n        my_obtainedrate_idr: obtainRate.obtainedRate,\r\n        bank_fee_idr: obtainRate.obtainedBankFee*obtainRate.obtainedRate, \r\n        fee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0), \r\n        my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee), \r\n        my_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\n    });\r\n    }\r\n    \r\n},[obtainRate]);\r\n\r\nuseEffect(() => {\r\n  \r\n\r\n\r\n  if(obtainRate){\r\n    setValues({...values, \r\n      my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee) , \r\nmy_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\nfee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0) ,  \r\n    \r\n  });\r\n  }\r\n  \r\n},[values.my_fee_myr,values.my_rate_idr,values.my_amount]);\r\n\r\nconst handleChangeSwitch= event => {\r\n  setValues({ \r\n    ...values,\r\n    is_express: event.target.checked\r\n  });\r\n};\r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n    if(event.target.name == 'bank_name'){ \r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseInt(event.target.value)\r\n      });\r\n      handleGetRates(parseInt(event.target.value))\r\n    } \r\n    if(event.target.name == 'my_fee_myr' || event.target.name == 'my_amount' || event.target.name == 'my_rate_idr' ){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    if(event.target.name == 'my_amount'){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    console.log(event.target.name,event.target.value )\r\n    \r\n  };\r\n\r\n  return (\r\n\r\n     orders.length >0 ?\r\n     <React.Fragment>\r\n       <TTable classes={classes} columns={columns} data={orders} className={className} {...rest} />\r\n        <Modal\r\n        open={open}\r\n        onClose={handleClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        <div style={modalStyle} className={classes.paper}>\r\n        <h2 id=\"simple-modal-title\">{responseTitle}</h2>\r\n        <p id=\"simple-modal-description\">\r\n          {responseMessage}\r\n        </p> \r\n        </div>\r\n      </Modal>\r\n      <Modal\r\n        open={dialogOpen}\r\n        onClose={handleDialogClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        <Card\r\n          {...rest}\r\n          className={clsx(classes.root, className)}\r\n        >\r\n          <form\r\n            autoComplete=\"off\"\r\n            noValidate\r\n          >\r\n            <CardHeader\r\n              subheader=\"\"\r\n              title={responseTitle}\r\n            />\r\n            <Divider />\r\n            <CardContent>\r\n           \r\n        <p id=\"simple-modal-description\">  {responseMessage}</p> \r\n        </CardContent>\r\n            <Divider />\r\n            <CardActions>\r\n              <Button\r\n                color=\"primary\"\r\n                variant=\"contained\"\r\n                onClick={x=> handleToRetract(editCode)}\r\n              >\r\n                Retract Order {editCode}\r\n              </Button>\r\n            </CardActions>\r\n          </form>\r\n        </Card>\r\n      </Modal>\r\n      <Modal\r\n        open={openModal}\r\n        onClose={handleModalClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n        \r\n      >\r\n        <div style={modalStyle} className={classes.paper}>\r\n        <h2 id=\"simple-modal-title\"> Edit Order <br/>Current Rate:   {obtainRate!== null ? obtainRate.obtainedRate: 0.0}</h2>\r\n        <div id=\"simple-modal-description\"> \r\n        <Card\r\n          {...rest}\r\n          className={clsx(classes.root, className)}\r\n        >\r\n          <form\r\n            autoComplete=\"off\"\r\n            noValidate\r\n          >\r\n            <CardHeader\r\n              subheader={\"Edit order -\" +editCode}\r\n              title=\"Edit Order\" \r\n            />\r\n            <Divider />\r\n            <CardContent>\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    helperText=\"Please specify recipient contact\"\r\n                    label=\"Recipient Contact\"\r\n                    margin=\"dense\"\r\n                    name=\"recipient_contact\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    value={values.recipient_contact}\r\n                    variant=\"outlined\"\r\n                  />\r\n                </Grid>\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Select Bank\"\r\n                    margin=\"dense\"\r\n                    name=\"bank_name\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    select\r\n                    // eslint-disable-next-line react/jsx-sort-props\r\n                    SelectProps={{ native: true }}\r\n                    value={values.bank_name}\r\n                    variant=\"outlined\"\r\n                  >\r\n                    <option\r\n                        key={-1}\r\n                        value={'-1'}\r\n                      >\r\n                        {'Please Select.. '}\r\n                      </option>\r\n                    {banks.map(option => (\r\n                      <option\r\n                        key={option.id}\r\n                        value={option.id}\r\n                      >\r\n                        {option.bankName}\r\n                      </option>\r\n                    ))}\r\n                  </TextField>\r\n                </Grid>\r\n              </Grid>\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Sender Contact\"\r\n                    margin=\"dense\"\r\n                    name=\"sender_phone\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    \r\n                    value={values.sender_phone}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Bank Account\"\r\n                    margin=\"dense\"\r\n                    name=\"bank_account\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    \r\n                    value={values.bank_account}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n              </Grid>\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Fee\"\r\n                    margin=\"dense\"\r\n                    name=\"my_fee_myr\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    \r\n                    value={values.my_fee_myr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Bank Fee (IDR)\"\r\n                    margin=\"dense\"\r\n                    name=\"bank_fee_idr\" \r\n                    required\r\n                    disabled\r\n                    \r\n                    value={values.bank_fee_idr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                \r\n              </Grid>  \r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Amount\"\r\n                    margin=\"dense\"\r\n                    name=\"my_amount\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    \r\n                    value={values.my_amount}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Rate\"\r\n                    margin=\"dense\"\r\n                    name=\"my_rate_idr\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    \r\n                    value={values.my_rate_idr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n              </Grid>\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <FormGroup row>\r\n                    <FormControlLabel\r\n                      control={<Switch\r\n                              checked={values.is_express}\r\n                              onChange={handleChangeSwitch}\r\n                              name=\"is_express\"\r\n                              inputProps={{ 'aria-label': 'secondary checkbox' }}\r\n                              />\r\n                            }\r\n                            label=\"Is Express\"\r\n                          /> \r\n                </FormGroup>\r\n                  \r\n                  \r\n                </Grid>\r\n                \r\n              </Grid>\r\n\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Rate Earning (MYR)\"\r\n                    margin=\"dense\"\r\n                    name=\"rate_earning\"  \r\n                    disabled\r\n                    value={values.rate_earning}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                <Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Fee Earning (MYR)\"\r\n                    margin=\"dense\"\r\n                    name=\"fee_earning\"\r\n                    disabled\r\n                    value={values.fee_earning}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n              </Grid>\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={12}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Total (MYR)\"\r\n                    margin=\"dense\"\r\n                    name=\"my_total\" \r\n                    required\r\n                    disabled\r\n                    \r\n                    value={values.my_total}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                \r\n              </Grid>\r\n\r\n              <Grid\r\n                container\r\n                spacing={4}\r\n              >\r\n                <Grid\r\n                  item\r\n                  md={12}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"Total (IDR)\"\r\n                    margin=\"dense\"\r\n                    name=\"my_total_idr\" \r\n                    required\r\n                    disabled\r\n                    \r\n                    value={values.my_total_idr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                \r\n              </Grid>\r\n            </CardContent>\r\n            <Divider />\r\n            <CardActions>\r\n              <Button\r\n                color=\"primary\"\r\n                variant=\"contained\"\r\n                onClick={x=> submitEdit(editCode)}\r\n              >\r\n                Edit Order {editCode}\r\n              </Button>\r\n            </CardActions>\r\n          </form>\r\n        </Card>\r\n        </div> \r\n        </div>\r\n      </Modal>\r\n    </React.Fragment>\r\n   :null\r\n    \r\n  );\r\n};\r\n\r\nOrdersTable.propTypes = {\r\n  className: PropTypes.string,\r\n  orders: PropTypes.array.isRequired,\r\n  posttoserverwithheader: PropTypes.func,\r\n  handleSubmitOrder: PropTypes.func,\r\n  banks:PropTypes.array,\r\n  selectedBank: PropTypes.string,\r\n  obtainRate:PropTypes.object,  \r\n handleGetRates:  PropTypes.func,\r\n handleRetractOrder:PropTypes.func,\r\n downlines: PropTypes.array.isRequired,\r\n statusCallBack:PropTypes.string,\r\n};\r\n\r\nexport default OrdersTable;\r\n \r\n\r\n/*\r\n<Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Express Fee\"\r\n                    margin=\"dense\"\r\n                    name=\"my_expressfee_myr\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    disabled={!values.is_express}\r\n                    value={values.my_expressfee_myr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                */","import React,{useState, useEffect} from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid,Modal,Card,\r\n  CardHeader,\r\n  CardContent,\r\n  Divider,\r\n  CardActions,\r\n  Button,\r\n\r\n } from '@material-ui/core';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {domainUrl} from '../../constants';\r\n\r\n\r\nimport  { OrderEx,ProductInfo}   from './components';\r\n//import mockData from './data';\r\nimport OrdersTable from './components/OrderListTable/OrdersTable';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst OrderList = (props) => {\r\n  const classes:any = useStyles();\r\n  const [orders,setOrders] = useState([]);\r\n  const [banks, setBanks]=useState([]);\r\n  const [rates, setRate]=useState(null);\r\n  const [downlines, setDownlines] = React.useState([]);\r\n  const [dialogOpen, setDialogOpen] = React.useState(false);\r\n  const [responseTitle,setTitle]= useState('');\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [statusCallBack,setStatusCallBack]= useState('');\r\n\r\n  \r\n  const handleCheckPendingOrder =(status)=>{\r\n      \r\n    const url = domainUrl + 'Orders/ListDirectGroupOrderTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"ProductId\": 1,\r\n      //\"AgentUsername\":localStorage.getItem('user'),\r\n      //\"OrderStatus\":status, \r\n      'Authorization': auth ,\r\n      \"Pagination\":{\r\n        \"OrderByKeys\":null,\r\n        \"PageSize\":50,\r\n        \"PageNum\":1\r\n      }\r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponsePendingOrder );  \r\n\r\n  }\r\n\r\n  const handleResponsePendingOrder =(data)=>{\r\n    if(data.data){\r\n\r\n      setOrders(data.data); \r\n    }\r\n  }\r\n\r\n  const handleSelect = (event, nodeIds) => {\r\n    setOrders(nodeIds);\r\n  };\r\n \r\nuseEffect(() => {\r\n  handleCheckPendingOrder('Pending');\r\n  \r\n},[]);\r\n\r\nconst handleGetBanks = () => {\r\n  const url = domainUrl + 'Banks/GetActiveBanks';\r\n  var auth = localStorage.getItem('authorization');\r\n  var query = {  \r\n    \"Pagination\":{\r\n      \"OrderByKeys\":null,\r\n      \"PageSize\":50,\r\n      \"PageNum\":0\r\n    }\r\n }\r\n\r\n var query2 = JSON.stringify(query);\r\n console.log(auth)\r\n return props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleBankResponse\r\n);  \r\n};\r\n\r\nconst handleBankResponse =(data)=>{ \r\n  setBanks(data.data);\r\n}\r\n\r\nconst handleRate =(data)=>{\r\n  setRate(data.data);\r\n}\r\n\r\n\r\nuseEffect(() => {\r\n  handleGetBanks();\r\n  handleGetRates();\r\n  handleGetDownlines();\r\n},[]);\r\n\r\n\r\n\r\nconst handleGetRates  = (bankid = 0) => {\r\nconst url = domainUrl + 'Spreads/GetObtainedSpread';\r\nvar auth = localStorage.getItem('authorization');\r\nvar query = {   \r\n  \"ProductId\" : 1,\r\n  \"BankId\":bankid \r\n}\r\n\r\nvar query2 = JSON.stringify(query);\r\nconsole.log(auth)\r\nreturn props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRate\r\n);  \r\n};\r\n\r\nconst handleSetDownlines = (data)=>{\r\n  if(data.data){\r\n    setDownlines(data.data);\r\n  }\r\n}\r\nconst handleRetractResponse = (data)=>{\r\n  console.log(data)\r\n  if(data.data){\r\n    setDialogOpen(true);\r\n    setTitle('Retract Order Successfully');\r\n    setResponseMessage('Retract Order Successfully');\r\n    setStatusCallBack(data.data);\r\n\r\n  }\r\n  else{\r\n    \r\n    setDialogOpen(true);\r\n    setTitle('Retract Order Failed');\r\n    setResponseMessage('Retract Order Failed');\r\n    setStatusCallBack(data.data);\r\n  }\r\n}\r\n\r\n\r\nconst handleRetractOrder  = (ordercode) => {\r\n  const url = domainUrl + 'Orders/RetractOrder';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'OrderCode': ordercode\r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRetractResponse );  \r\n\r\n\r\n  };\r\nconst handleDialogClose = ()=>{\r\n  setDialogOpen(false);\r\n}\r\nconst handleGetDownlines  = (bankid = 0) => {\r\n  const url = domainUrl + 'Users/ListDirectDownlineUserTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'Pagination': {\r\n        'PageSize': 100,\r\n        'PageNum': 1\r\n      } \r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleSetDownlines );  \r\n\r\n\r\n  };\r\n\r\n  return (\r\n    <HttpPostServiceContextConsumer> \r\n      {({ httpPostContext,\r\n          setHttpPostContext,\r\n          postToServerWithHeader  })=>\r\n      (\r\n    <div className={classes.root}> \r\n      <div className={classes.content}>\r\n        <OrdersTable statusCallBack={statusCallBack} orders={orders} posttoserverwithheader={postToServerWithHeader} downlines={downlines}  banks={banks} obtainRate={rates}   handleGetRates={handleGetRates} handleRetractOrder={handleRetractOrder} />\r\n        <Modal\r\n        open={dialogOpen}\r\n        onClose={handleDialogClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        <Card  \r\n        >\r\n          <form\r\n            autoComplete=\"off\"\r\n            noValidate\r\n          >\r\n            <CardHeader\r\n              subheader=\"\"\r\n              title={responseTitle}\r\n            />\r\n            <Divider />\r\n            <CardContent>\r\n           \r\n        <p id=\"simple-modal-description\">  {responseMessage}</p> \r\n        </CardContent>\r\n            <Divider />\r\n            <CardActions>\r\n              <Button\r\n                color=\"primary\"\r\n                variant=\"contained\"\r\n                onClick={x=> handleDialogClose()}\r\n              >\r\n                OK\r\n              </Button>\r\n            </CardActions>\r\n          </form>\r\n        </Card>\r\n      </Modal>\r\n\r\n      </div>\r\n    </div>\r\n    )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n};\r\n\r\nconst HOCOrderList =()=>{\r\n  \r\n  return (<HttpPostServiceContextConsumer> \r\n        {({ httpPostContext,\r\n            setHttpPostContext,\r\n            postToServerWithHeader  })=>\r\n        (\r\n          \r\n         \r\n       <HttpGetServiceContextConsumer>\r\n       {({ \r\n               genericGetHttp  })=> \r\n           (\r\n             <OrderList  posttoserverwithheader={postToServerWithHeader} genericgethttp={genericGetHttp}/>\r\n            )\r\n        }\r\n        </HttpGetServiceContextConsumer>\r\n        )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\nexport default HOCOrderList;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Typography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  },\r\n  content: {\r\n    paddingTop: 150,\r\n    textAlign: 'center'\r\n  },\r\n  image: {\r\n    marginTop: 50,\r\n    display: 'inline-block',\r\n    maxWidth: '100%',\r\n    width: 560\r\n  }\r\n}));\r\n\r\nconst NotFound = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        justify=\"center\"\r\n        spacing={4}\r\n      >\r\n        <Grid\r\n          item\r\n          lg={6}\r\n          xs={12}\r\n        >\r\n          <div className={classes.content}>\r\n            <Typography variant=\"h1\">\r\n              404: The page you are looking for isn’t here\r\n            </Typography>\r\n            <Typography variant=\"subtitle2\">\r\n              You either tried some shady route or you came here by mistake.\r\n              Whichever it is, try using the navigation\r\n            </Typography>\r\n            <img\r\n              alt=\"Under development\"\r\n              className={classes.image}\r\n              src=\"/images/undraw_page_not_found_su7k.svg\"\r\n            />\r\n          </div>\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default NotFound;\r\n","import uuid from 'uuid/v1';\r\n\r\nexport default [\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1049',\r\n    amount: 30.5,\r\n    customer: {\r\n      name: 'Ekaterina Tankova'\r\n    },\r\n    createdAt: 1555016400000,\r\n    status: 'pending'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1048',\r\n    amount: 25.1,\r\n    customer: {\r\n      name: 'Cao Yu'\r\n    },\r\n    createdAt: 1555016400000,\r\n    status: 'delivered'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1047',\r\n    amount: 10.99,\r\n    customer: {\r\n      name: 'Alexa Richardson'\r\n    },\r\n    createdAt: 1554930000000,\r\n    status: 'refunded'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1046',\r\n    amount: 96.43,\r\n    customer: {\r\n      name: 'Anje Keizer'\r\n    },\r\n    createdAt: 1554757200000,\r\n    status: 'pending'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1045',\r\n    amount: 32.54,\r\n    customer: {\r\n      name: 'Clarke Gillebert'\r\n    },\r\n    createdAt: 1554670800000,\r\n    status: 'delivered'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    ref: 'CDD1044',\r\n    amount: 16.76,\r\n    customer: {\r\n      name: 'Adam Denisov'\r\n    },\r\n    createdAt: 1554670800000,\r\n    status: 'delivered'\r\n  }\r\n];\r\n","import React, { useState } from 'react';\r\nimport clsx from 'clsx';\r\nimport moment from 'moment';\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {default as OrderList} from '../../../Order/OrderList';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardHeader,\r\n  CardContent,\r\n  Button,\r\n  Divider,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableRow,\r\n  Tooltip,\r\n  TableSortLabel\r\n} from '@material-ui/core';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\n\r\nimport mockData from './data';\r\nimport { StatusBullet } from '../../../../components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  content: {\r\n    padding: 0\r\n  },\r\n  inner: {\r\n    minWidth: 800\r\n  },\r\n  statusContainer: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  status: {\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nconst statusColors = {\r\n  delivered: 'success',\r\n  pending: 'info',\r\n  refunded: 'danger'\r\n};\r\n\r\nconst LatestOrders = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [orders] = useState(mockData);\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardHeader\r\n        action={\r\n          <Button\r\n            color=\"primary\"\r\n            size=\"small\"\r\n            variant=\"outlined\"\r\n            href=\"/order\"\r\n          >\r\n            New Order\r\n          </Button>\r\n        }\r\n        title=\"Latest Orders\"\r\n      />\r\n      <Divider />\r\n      <CardContent className={classes.content}>\r\n        <PerfectScrollbar>\r\n          <div className={classes.inner}> \r\n    <OrderList></OrderList>\r\n    </div>\r\n        </PerfectScrollbar>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions className={classes.actions}>\r\n        <Button\r\n          color=\"primary\"\r\n          size=\"small\"\r\n          variant=\"text\"\r\n          href=\"/orderlist\"\r\n        >\r\n          View all <ArrowRightIcon />\r\n        </Button>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nLatestOrders.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default LatestOrders;\r\n\r\n/*\r\n<Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardHeader\r\n        action={\r\n          <Button\r\n            color=\"primary\"\r\n            size=\"small\"\r\n            variant=\"outlined\"\r\n          >\r\n            New entry\r\n          </Button>\r\n        }\r\n        title=\"Latest Orders\"\r\n      />\r\n      <Divider />\r\n      <CardContent className={classes.content}>\r\n        <PerfectScrollbar>\r\n          <div className={classes.inner}>\r\n            <Table>\r\n              <TableHead>\r\n                <TableRow>\r\n                  <TableCell>Order Ref</TableCell>\r\n                  <TableCell>Customer</TableCell>\r\n                  <TableCell sortDirection=\"desc\">\r\n                    <Tooltip\r\n                      enterDelay={300}\r\n                      title=\"Sort\"\r\n                    >\r\n                      <TableSortLabel\r\n                        active\r\n                        direction=\"desc\"\r\n                      >\r\n                        Date\r\n                      </TableSortLabel>\r\n                    </Tooltip>\r\n                  </TableCell>\r\n                  <TableCell>Status</TableCell>\r\n                </TableRow>\r\n              </TableHead>\r\n              <TableBody>\r\n                {orders.map(order => (\r\n                  <TableRow\r\n                    hover\r\n                    key={order.id}\r\n                  >\r\n                    <TableCell>{order.ref}</TableCell>\r\n                    <TableCell>{order.customer.name}</TableCell>\r\n                    <TableCell>\r\n                      {moment(order.createdAt).format('DD/MM/YYYY')}\r\n                    </TableCell>\r\n                    <TableCell>\r\n                      <div className={classes.statusContainer}>\r\n                        <StatusBullet\r\n                          className={classes.status}\r\n                          color={statusColors[order.status]}\r\n                          size=\"sm\"\r\n                        />\r\n                        {order.status}\r\n                      </div>\r\n                    </TableCell>\r\n                  </TableRow>\r\n                ))}\r\n              </TableBody>\r\n            </Table>\r\n          </div>\r\n        </PerfectScrollbar>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions className={classes.actions}>\r\n        <Button\r\n          color=\"primary\"\r\n          size=\"small\"\r\n          variant=\"text\"\r\n        >\r\n          View all <ArrowRightIcon />\r\n        </Button>\r\n      </CardActions>\r\n    </Card>\r\n*/","import uuid from 'uuid/v1';\r\nimport moment from 'moment';\r\n\r\nexport default [\r\n  {\r\n    id: uuid(),\r\n    name: 'Dropbox',\r\n    imageUrl: '/images/products/product_1.png',\r\n    updatedAt: moment().subtract(2, 'hours')\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Medium Corporation',\r\n    imageUrl: '/images/products/product_2.png',\r\n    updatedAt: moment().subtract(2, 'hours')\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Slack',\r\n    imageUrl: '/images/products/product_3.png',\r\n    updatedAt: moment().subtract(3, 'hours')\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Lyft',\r\n    imageUrl: '/images/products/product_4.png',\r\n    updatedAt: moment().subtract(5, 'hours')\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'GitHub',\r\n    imageUrl: '/images/products/product_5.png',\r\n    updatedAt: moment().subtract(9, 'hours')\r\n  }\r\n];\r\n","import React, { useState ,useEffect} from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Button,\r\n  Divider,\r\n  List,\r\n  ListItem,\r\n  ListItemAvatar,\r\n  ListItemText,\r\n  IconButton,\r\n  Typography\r\n} from '@material-ui/core';\r\n\r\nimport {domainUrl} from '../../../../constants';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\n\r\nimport mockData from './data';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {\r\n    height: '100%'\r\n  },\r\n  content: {\r\n    padding: 0\r\n  },\r\n  image: {\r\n    height: 48,\r\n    width: 48\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nconst LatestProducts = props => {\r\n  const { className,posttoserverwithheader, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n \r\n  //const [products, setProducts] = useState([]);\r\n  //const [spreadedProduct, setSpreadedProducts] = useState(null);\r\n  const [spread, setSpread] = useState(null);\r\n/*\r\n  const handleGetRate = event => {\r\n    const url = domainUrl + 'Products/GetProductRate';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n     \"ProductName\": \"MYR/IDR\",\r\n     \"ProductId\" : 1\r\n   }\r\n\r\n   var query2 = JSON.stringify(query);\r\n   console.log(auth)\r\n   posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponseRate );  \r\n };\r\n*/\r\n const handleGetSpread = event => {\r\n  const url = domainUrl + 'Spreads/GetObtainedSpread';\r\n  var auth = localStorage.getItem('authorization');\r\n  var query = {   \r\n   \"ProductId\" : 1\r\n }\r\n\r\n var query2 = JSON.stringify(query);\r\n console.log(auth)\r\n posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponseSpread );  \r\n};\r\n  \r\n  \r\n/*\r\nuseEffect(() => { \r\n  if(products.length > 0 && spread !== null && spread !== undefined){\r\n\r\n    setSpreadedProducts({\r\n      id : products[0].id,\r\n      name : products[0].productname,\r\n      rate: parseFloat(products[0].currentrate ) - parseFloat(spread)\r\n    });\r\n  }\r\n},[products,spread]);*/\r\n useEffect(() => { \r\n  //handleGetRate();\r\n  handleGetSpread();\r\n},[]);\r\n\r\n /*const handleResponseRate =(data)=>{\r\n  if(data.data){\r\n    setProducts(data.data);\r\n  }\r\n   \r\n }\r\n */\r\n const handleResponseSpread =(data)=>{\r\n   console.log(data)\r\n    if(data.data){\r\n      setSpread(data.data);\r\n    }\r\n }\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardHeader\r\n        subtitle={``}\r\n        title=\"Latest Rate\"\r\n      />\r\n      <Divider />\r\n      <CardContent className={classes.content}> \r\n      {spread !== null ?<List>\r\n         <ListItem\r\n              divider={false}\r\n              key={spread.productId}\r\n            >\r\n               <Typography variant=\"h3\"> {spread.obtainedRate}  </Typography>\r\n             \r\n            </ListItem>\r\n             \r\n        </List>\r\n        : null}\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions className={classes.actions}>\r\n        <Button\r\n          color=\"primary\"\r\n          size=\"small\"\r\n          variant=\"text\"\r\n          href=\"/setrate\"\r\n        >\r\n          Set Downline Rate <ArrowRightIcon />\r\n        </Button>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nLatestProducts.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default LatestProducts;\r\n","import palette from '../../../../theme/palette';\r\n\r\nexport const data = {\r\n  labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug'],\r\n  datasets: [\r\n    {\r\n      label: 'This year',\r\n      backgroundColor: palette.primary.main,\r\n      data: [18, 5, 19, 27, 29, 19, 20]\r\n    },\r\n    {\r\n      label: 'Last year',\r\n      backgroundColor: palette.neutral,\r\n      data: [11, 20, 12, 29, 30, 25, 13]\r\n    }\r\n  ]\r\n};\r\n\r\nexport const options = {\r\n  responsive: true,\r\n  maintainAspectRatio: false,\r\n  animation: false,\r\n  legend: { display: false },\r\n  cornerRadius: 20,\r\n  tooltips: {\r\n    enabled: true,\r\n    mode: 'index',\r\n    intersect: false,\r\n    borderWidth: 1,\r\n    borderColor: palette.divider,\r\n    backgroundColor: palette.white,\r\n    titleFontColor: palette.text.primary,\r\n    bodyFontColor: palette.text.secondary,\r\n    footerFontColor: palette.text.secondary\r\n  },\r\n  layout: { padding: 0 },\r\n  scales: {\r\n    xAxes: [\r\n      {\r\n        barThickness: 12,\r\n        maxBarThickness: 10,\r\n        barPercentage: 0.5,\r\n        categoryPercentage: 0.5,\r\n        ticks: {\r\n          fontColor: palette.text.secondary\r\n        },\r\n        gridLines: {\r\n          display: false,\r\n          drawBorder: false\r\n        }\r\n      }\r\n    ],\r\n    yAxes: [\r\n      {\r\n        ticks: {\r\n          fontColor: palette.text.secondary,\r\n          beginAtZero: true,\r\n          min: 0\r\n        },\r\n        gridLines: {\r\n          borderDash: [2],\r\n          borderDashOffset: [2],\r\n          color: palette.divider,\r\n          drawBorder: false,\r\n          zeroLineBorderDash: [2],\r\n          zeroLineBorderDashOffset: [2],\r\n          zeroLineColor: palette.divider\r\n        }\r\n      }\r\n    ]\r\n  }\r\n};\r\n","import React from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { Bar } from 'react-chartjs-2';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Divider,\r\n  Button\r\n} from '@material-ui/core';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\n\r\nimport { data, options } from './chart';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {},\r\n  chartContainer: {\r\n    height: 400,\r\n    position: 'relative'\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nconst LatestSales = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardHeader\r\n        action={\r\n          <Button\r\n            size=\"small\"\r\n            variant=\"text\"\r\n          >\r\n            Last 7 days <ArrowDropDownIcon />\r\n          </Button>\r\n        }\r\n        title=\"Latest Sales\"\r\n      />\r\n      <Divider />\r\n      <CardContent>\r\n        <div className={classes.chartContainer}>\r\n          <Bar\r\n            data={data}\r\n            options={options}\r\n          />\r\n        </div>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions className={classes.actions}>\r\n        <Button\r\n          color=\"primary\"\r\n          size=\"small\"\r\n          variant=\"text\"\r\n        >\r\n          Overview <ArrowRightIcon />\r\n        </Button>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nLatestSales.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default LatestSales;\r\n","import React from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  Grid,\r\n  Typography,\r\n  Avatar,\r\n  LinearProgress\r\n} from '@material-ui/core';\r\nimport InsertChartIcon from '@material-ui/icons/InsertChartOutlined';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    height: '100%'\r\n  },\r\n  content: {\r\n    alignItems: 'center',\r\n    display: 'flex'\r\n  },\r\n  title: {\r\n    fontWeight: 700\r\n  },\r\n  avatar: {\r\n    backgroundColor: theme.palette.primary.main,\r\n    color: theme.palette.primary.contrastText,\r\n    height: 56,\r\n    width: 56\r\n  },\r\n  icon: {\r\n    height: 32,\r\n    width: 32\r\n  },\r\n  progress: {\r\n    marginTop: theme.spacing(3)\r\n  }\r\n}));\r\n\r\nconst TasksProgress = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <Grid\r\n          container\r\n          justify=\"space-between\"\r\n        >\r\n          <Grid item>\r\n            <Typography\r\n              className={classes.title}\r\n              color=\"textSecondary\"\r\n              gutterBottom\r\n              variant=\"body2\"\r\n            >\r\n              TASKS PROGRESS\r\n            </Typography>\r\n            <Typography variant=\"h3\">75.5%</Typography>\r\n          </Grid>\r\n          <Grid item>\r\n            <Avatar className={classes.avatar}>\r\n              <InsertChartIcon className={classes.icon} />\r\n            </Avatar>\r\n          </Grid>\r\n        </Grid>\r\n        <LinearProgress\r\n          className={classes.progress}\r\n          value={75.5}\r\n          variant=\"determinate\"\r\n        />\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n};\r\n\r\nTasksProgress.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default TasksProgress;\r\n","import React from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';\r\nimport AttachMoneyIcon from '@material-ui/icons/AttachMoney';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    height: '100%',\r\n    backgroundColor: theme.palette.primary.main,\r\n    color: theme.palette.primary.contrastText\r\n  },\r\n  content: {\r\n    alignItems: 'center',\r\n    display: 'flex'\r\n  },\r\n  title: {\r\n    fontWeight: 700\r\n  },\r\n  avatar: {\r\n    backgroundColor: theme.palette.white,\r\n    color: theme.palette.primary.main,\r\n    height: 56,\r\n    width: 56\r\n  },\r\n  icon: {\r\n    height: 32,\r\n    width: 32\r\n  }\r\n}));\r\n\r\nconst TotalProfit = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <Grid\r\n          container\r\n          justify=\"space-between\"\r\n        >\r\n          <Grid item>\r\n            <Typography\r\n              className={classes.title}\r\n              color=\"inherit\"\r\n              gutterBottom\r\n              variant=\"body2\"\r\n            >\r\n              TOTAL PROFIT\r\n            </Typography>\r\n            <Typography\r\n              color=\"inherit\"\r\n              variant=\"h3\"\r\n            >\r\n              $23,200\r\n            </Typography>\r\n          </Grid>\r\n          <Grid item>\r\n            <Avatar className={classes.avatar}>\r\n              <AttachMoneyIcon className={classes.icon} />\r\n            </Avatar>\r\n          </Grid>\r\n        </Grid>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n};\r\n\r\nTotalProfit.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default TotalProfit;\r\n","import React,{useEffect, useState} from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';\r\nimport ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';\r\nimport PeopleIcon from '@material-ui/icons/PeopleOutlined';\r\nimport {domainUrl} from '../../../../constants';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    height: '100%'\r\n  },\r\n  content: {\r\n    alignItems: 'center',\r\n    display: 'flex'\r\n  },\r\n  title: {\r\n    fontWeight: 700\r\n  },\r\n  avatar: {\r\n    backgroundColor: theme.palette.success.main,\r\n    height: 56,\r\n    width: 56\r\n  },\r\n  icon: {\r\n    height: 32,\r\n    width: 32\r\n  },\r\n  difference: {\r\n    marginTop: theme.spacing(2),\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    display:'none'\r\n  },\r\n  differenceIcon: {\r\n    color: theme.palette.success.dark\r\n  },\r\n  differenceValue: {\r\n    color: theme.palette.success.dark,\r\n    marginRight: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst TotalDownlines = props => { \r\n\r\n  const { className,posttoserverwithheader, ...rest } = props;\r\n  const [downlines, setTotalDownline] = useState(0);\r\n  const classes = useStyles();\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  const handleSubmitGetDownlineCount = ()=>{\r\n    const url = domainUrl + 'Users/CountDirectDownlineUserTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n    //  \"Username\": values.username, \r\n    }\r\n    \r\n    var query2 = JSON.stringify(query);\r\n    //console.log(query2)\r\n    posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},  x=> renderResponseModal(x, 'User Networth',x.data !== undefined && x.data !== \"\"? 'Search user '+x.data+' successfully' : 'Search Failed', false)  );  \r\n    }\r\n\r\n    useEffect(() => { \r\n      handleSubmitGetDownlineCount();\r\n  },[]);\r\n\r\n  \r\n  const renderResponseModal = (data, title, message, isOpen)=>{ \r\n    setResponseTitle(title);\r\n    setResponseMessage(message); \r\n    setOpen(isOpen); \r\n    setTotalDownline(data.data);\r\n }\r\n \r\n  \r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <Grid\r\n          container\r\n          justify=\"space-between\"\r\n        >\r\n          <Grid item>\r\n            <Typography\r\n              className={classes.title}\r\n              color=\"textSecondary\"\r\n              gutterBottom\r\n              variant=\"body2\"\r\n            >\r\n              TOTAL DOWNLINES\r\n            </Typography>\r\n            <Typography variant=\"h3\">{downlines}</Typography>\r\n          </Grid>\r\n          <Grid item>\r\n            <Avatar className={classes.avatar}>\r\n              <PeopleIcon className={classes.icon} />\r\n            </Avatar>\r\n          </Grid>\r\n        </Grid>\r\n        <div className={classes.difference}>\r\n          <ArrowUpwardIcon className={classes.differenceIcon} />\r\n          <Typography\r\n            className={classes.differenceValue}\r\n            variant=\"body2\"\r\n          >--\r\n          </Typography>\r\n          <Typography\r\n            className={classes.caption}\r\n            variant=\"caption\"\r\n          >\r\n            Since last month\r\n          </Typography>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n};\r\n\r\nTotalDownlines.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default TotalDownlines;\r\n","import React from 'react';\r\nimport { Doughnut } from 'react-chartjs-2';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles, useTheme } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  IconButton,\r\n  Divider,\r\n  Typography\r\n} from '@material-ui/core';\r\nimport LaptopMacIcon from '@material-ui/icons/LaptopMac';\r\nimport PhoneIphoneIcon from '@material-ui/icons/PhoneIphone';\r\nimport RefreshIcon from '@material-ui/icons/Refresh';\r\nimport TabletMacIcon from '@material-ui/icons/TabletMac';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    height: '100%'\r\n  },\r\n  chartContainer: {\r\n    position: 'relative',\r\n    height: '300px'\r\n  },\r\n  stats: {\r\n    marginTop: theme.spacing(2),\r\n    display: 'flex',\r\n    justifyContent: 'center'\r\n  },\r\n  device: {\r\n    textAlign: 'center',\r\n    padding: theme.spacing(1)\r\n  },\r\n  deviceIcon: {\r\n    color: theme.palette.icon\r\n  }\r\n}));\r\n\r\nconst UsersByDevice = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n  const theme = useTheme();\r\n\r\n  const data = {\r\n    datasets: [\r\n      {\r\n        data: [63, 15, 22],\r\n        backgroundColor: [\r\n          theme.palette.primary.main,\r\n          theme.palette.error.main,\r\n          theme.palette.warning.main\r\n        ],\r\n        borderWidth: 8,\r\n        borderColor: theme.palette.white,\r\n        hoverBorderColor: theme.palette.white\r\n      }\r\n    ],\r\n    labels: ['Desktop', 'Tablet', 'Mobile']\r\n  };\r\n\r\n  const options = {\r\n    legend: {\r\n      display: false\r\n    },\r\n    responsive: true,\r\n    maintainAspectRatio: false,\r\n    animation: false,\r\n    cutoutPercentage: 80,\r\n    layout: { padding: 0 },\r\n    tooltips: {\r\n      enabled: true,\r\n      mode: 'index',\r\n      intersect: false,\r\n      borderWidth: 1,\r\n      borderColor: theme.palette.divider,\r\n      backgroundColor: theme.palette.white,\r\n      titleFontColor: theme.palette.text.primary,\r\n      bodyFontColor: theme.palette.text.secondary,\r\n      footerFontColor: theme.palette.text.secondary\r\n    }\r\n  };\r\n\r\n  const devices = [\r\n    {\r\n      title: 'Desktop',\r\n      value: '63',\r\n      icon: <LaptopMacIcon />,\r\n      color: theme.palette.primary.main\r\n    },\r\n    {\r\n      title: 'Tablet',\r\n      value: '15',\r\n      icon: <TabletMacIcon />,\r\n      color: theme.palette.error.main\r\n    },\r\n    {\r\n      title: 'Mobile',\r\n      value: '23',\r\n      icon: <PhoneIphoneIcon />,\r\n      color: theme.palette.warning.main\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardHeader\r\n        action={\r\n          <IconButton size=\"small\">\r\n            <RefreshIcon />\r\n          </IconButton>\r\n        }\r\n        title=\"Users By Device\"\r\n      />\r\n      <Divider />\r\n      <CardContent>\r\n        <div className={classes.chartContainer}>\r\n          <Doughnut\r\n            data={data}\r\n            options={options}\r\n          />\r\n        </div>\r\n        <div className={classes.stats}>\r\n          {devices.map(device => (\r\n            <div\r\n              className={classes.device}\r\n              key={device.title}\r\n            >\r\n              <span className={classes.deviceIcon}>{device.icon}</span>\r\n              <Typography variant=\"body1\">{device.title}</Typography>\r\n              <Typography\r\n                style={{ color: device.color }}\r\n                variant=\"h2\"\r\n              >\r\n                {device.value}%\r\n              </Typography>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n};\r\n\r\nUsersByDevice.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default UsersByDevice;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { Cookies } from 'react-cookie';\r\nimport { HttpPostServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {\r\n  NetworthBalance,\r\n  TotalDownlines, \r\n  LatestOrders,\r\n  LatestProducts\r\n} from './components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst Dashboard = props => {\r\n  const {posttoserverwithheader, ...rest}  = props;\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        spacing={4}\r\n      >\r\n        <Grid\r\n          item\r\n          lg={3}\r\n          sm={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <NetworthBalance posttoserverwithheader={props.posttoserverwithheader}/>\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          lg={3}\r\n          sm={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <TotalDownlines posttoserverwithheader={props.posttoserverwithheader}/>\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          lg={4}\r\n          md={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <LatestProducts posttoserverwithheader={props.posttoserverwithheader}/>\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          lg={8}\r\n          md={12}\r\n          xl={9}\r\n          xs={12}\r\n        >\r\n          <LatestOrders />\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\n//export default Dashboard;\r\n\r\n\r\nconst HocDashboard= (props) => {  \r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServerWithHeader  })=>\r\n    (\r\n      <React.Fragment> \r\n        <Dashboard {...props} posttoserverwithheader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></Dashboard>\r\n       </React.Fragment>\r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\n\r\nHocDashboard.propTypes = {\r\n className: PropTypes.string,\r\n postToServer: PropTypes.func,\r\n sethttppostcontext:  PropTypes.func,\r\n httppostcontext:  PropTypes.any,\r\n};\r\nexport default HocDashboard;\r\n/*\r\n<Grid\r\n          item\r\n          lg={3}\r\n          sm={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <TasksProgress />\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          lg={3}\r\n          sm={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <TotalProfit />\r\n        </Grid> \r\n        <Grid\r\n          item\r\n          lg={4}\r\n          md={6}\r\n          xl={3}\r\n          xs={12}\r\n        >\r\n          <UsersByDevice />\r\n        </Grid>\r\n        \r\n        */","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  },\r\n  iframe: {\r\n    width: '100%',\r\n    minHeight: 640,\r\n    border: 0\r\n  }\r\n}));\r\n\r\nconst Icons = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <iframe\r\n        className={classes.iframe}\r\n        src=\"https://material.io/tools/icons/?icon=accessibility&style=outline\"\r\n        title=\"Material Design icons\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Icons;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardActions,\r\n  Typography,\r\n  Grid,\r\n  Divider\r\n} from '@material-ui/core';\r\nimport AccessTimeIcon from '@material-ui/icons/AccessTime';\r\nimport GetAppIcon from '@material-ui/icons/GetApp';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  imageContainer: {\r\n    height: 64,\r\n    width: 64,\r\n    margin: '0 auto',\r\n    border: `1px solid ${theme.palette.divider}`,\r\n    borderRadius: '5px',\r\n    overflow: 'hidden',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center'\r\n  },\r\n  image: {\r\n    width: '100%'\r\n  },\r\n  statsItem: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  statsIcon: {\r\n    color: theme.palette.icon,\r\n    marginRight: theme.spacing(1)\r\n  }\r\n}));\r\n\r\n\r\n\r\nconst ProductCard = props => {\r\n  const { className, product, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <Typography\r\n          align=\"center\"\r\n          gutterBottom\r\n          variant=\"h4\"\r\n        >\r\n          {product.title}\r\n        </Typography>\r\n        <Typography\r\n          align=\"center\"\r\n          variant=\"body1\"\r\n        >\r\n          {product.description}\r\n        </Typography>\r\n        <br/>\r\n      <Divider />\r\n        <br/>\r\n        <Typography\r\n          align=\"center\"\r\n          variant=\"body1\"\r\n        >\r\n          {product.current_rate}\r\n        </Typography>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions>\r\n        \r\n        <Grid\r\n          container\r\n          justify=\"space-between\"\r\n        >\r\n          <Grid\r\n            className={classes.statsItem}\r\n            item\r\n          >\r\n            <AccessTimeIcon className={classes.statsIcon} />\r\n            <Typography\r\n              display=\"inline\"\r\n              variant=\"body2\"\r\n            >\r\n              {product.updatedAt}\r\n            </Typography>\r\n          </Grid>\r\n        </Grid>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nProductCard.propTypes = {\r\n  className: PropTypes.string,\r\n  product: PropTypes.object.isRequired\r\n};\r\n\r\nexport default ProductCard;\r\n\r\n/*\r\n\r\n        <div className={classes.imageContainer}>\r\n          <img\r\n            alt=\"Product\"\r\n            className={classes.image}\r\n            src={product.imageUrl}\r\n          />\r\n        </div>\r\n\r\n       \r\n\r\n          */","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button } from '@material-ui/core';\r\n\r\nimport { SearchInput } from '../../../../components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  row: {\r\n    height: '42px',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    marginTop: theme.spacing(1)\r\n  },\r\n  spacer: {\r\n    flexGrow: 1\r\n  },\r\n  importButton: {\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  exportButton: {\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  searchInput: {\r\n    marginRight: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst ProductsToolbar = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <div className={classes.row}>\r\n        <span className={classes.spacer} />\r\n        <Button className={classes.importButton}>Import</Button>\r\n        <Button className={classes.exportButton}>Export</Button>\r\n        <Button\r\n          color=\"primary\"\r\n          variant=\"contained\"\r\n        >\r\n          Add product\r\n        </Button>\r\n      </div>\r\n      <div className={classes.row}>\r\n        <SearchInput\r\n          className={classes.searchInput}\r\n          placeholder=\"Search product\"\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nProductsToolbar.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default ProductsToolbar;\r\n","import React, { useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport Modal from '@material-ui/core/Modal';\r\n\r\nfunction rand() {\r\n  return Math.round(Math.random() * 20) - 10;\r\n}\r\n\r\nfunction getModalStyle() {\r\n  const top = 50 + rand();\r\n  const left = 50 + rand();\r\n\r\n  return {\r\n    top: `${top}%`,\r\n    left: `${left}%`,\r\n    transform: `translate(-${top}%, -${left}%)`,\r\n  };\r\n}\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  paper: {\r\n    position: 'absolute',\r\n    width: 400,\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '2px solid #000',\r\n    boxShadow: theme.shadows[5],\r\n    padding: theme.spacing(2, 4, 3),\r\n  },\r\n}));\r\n\r\nexport default function SimpleModal( props) {\r\n  const classes = useStyles();\r\n  // getModalStyle is not a pure function, we roll the style only on the first render\r\n  const [modalStyle] = React.useState(getModalStyle);\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n  const handleOpen = () => {\r\n    setOpen(true);\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setOpen(false);\r\n  };\r\n\r\n  \r\n  useEffect(() => { \r\n      if(props.open){\r\n        handleOpen();\r\n      }\r\n},[]);\r\n\r\n  const body = (\r\n    <div style={modalStyle} className={classes.paper}>\r\n      <h2 id=\"simple-modal-title\">{props.title}</h2>\r\n      <p id=\"simple-modal-description\">\r\n        {props.body}\r\n      </p>\r\n      <SimpleModal />\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <div>\r\n      <button type=\"button\" onClick={handleOpen}>\r\n        {props.buttonText}\r\n      </button>\r\n      <Modal\r\n        open={open}\r\n        onClose={handleClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        {body}\r\n      </Modal>\r\n    </div>\r\n  );\r\n}","import React,{useState,useEffect} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardActions,\r\n  Typography,\r\n  Grid,\r\n  Divider,\r\n  TextField,\r\n  Button,\r\n  Modal \r\n} from '@material-ui/core';\r\nimport {domainUrl} from '../../../../constants';\r\nimport AccessTimeIcon from '@material-ui/icons/AccessTime';\r\nimport GetAppIcon from '@material-ui/icons/GetApp';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../../../contexts/HttpServiceContext';\r\nimport { SimpleModal } from '../../../../components/SimpleModal';\r\n// import mockData from '../../data';\r\n \r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  imageContainer: {\r\n    height: 64,\r\n    width: 64,\r\n    margin: '0 auto',\r\n    border: `1px solid ${theme.palette.divider}`,\r\n    borderRadius: '5px',\r\n    overflow: 'hidden',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center'\r\n  },\r\n  image: {\r\n    width: '100%'\r\n  },\r\n  statsItem: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  statsIcon: {\r\n    color: theme.palette.icon,\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  paper: {\r\n    position: 'absolute',\r\n    width: 400,\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '2px solid #000',\r\n    boxShadow: theme.shadows[5],\r\n    padding: theme.spacing(2, 4, 3),\r\n  },\r\n}));\r\n\r\n\r\nfunction rand() {\r\n  return Math.round(Math.random() * 20) - 10;\r\n}\r\n\r\nfunction getModalStyle() {\r\n  const top = 50 + rand();\r\n  const left = 50 + rand();\r\n\r\n  return {\r\n    top: `${top}%`,\r\n    left: `${left}%`,\r\n    transform: `translate(-${top}%, -${left}%)`,\r\n  };\r\n}\r\n\r\nconst SetProduct = props => {\r\n  console.log(props)\r\n  const { className, postToServer,  ...rest } = props; \r\n  const [products, setProduct] = useState([]);\r\n  const classes = useStyles();\r\n  const [rate, setRate] = useState(0);\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n  const [modalStyle] = React.useState(getModalStyle);\r\n     \r\n  const handleChange = event => {\r\n    setRate(parseFloat(event.target.value));\r\n  };\r\n\r\n  \r\n  const handleResponse =(data)=>{\r\n    \r\n    if(data.data){\r\n      setResponseMessage('Edit Rate Successfully');\r\n      setOpen(true);\r\n      \r\n    }\r\n    else{\r\n      \r\n      setResponseMessage('Edit Rate Failed');\r\n      setOpen(true);\r\n    }\r\n  }\r\n\r\n  const handleRateResponse =(data)=>{\r\n    setProduct([data.data])\r\n  }\r\n\r\n  useEffect(() => { \r\n    handleGetRate();\r\n},[]);\r\n\r\n  const handleSubmitRate = event => {\r\n     const url = domainUrl + 'Products/EditProductRate';\r\n     var auth = localStorage.getItem('authorization');\r\n     var query = {  \r\n      \"ProductName\": \"MYR/IDR\",\r\n      \"Rate\": rate , \r\n    }\r\n\r\n    var query2 = JSON.stringify(query);\r\n    console.log(auth)\r\n    props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponse );  \r\n  };\r\n\r\n   \r\n  const handleClose = () => {\r\n    setOpen(false);\r\n  };\r\n  const handleGetRate = event => {\r\n    const url = domainUrl + 'Products/GetProductRate';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n     \"ProductName\": \"MYR/IDR\", \r\n   }\r\n\r\n   var query2 = JSON.stringify(query);\r\n   console.log(auth)\r\n   props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRateResponse );  \r\n };\r\n  return (\r\n    <Grid\r\n    container\r\n    spacing={3}\r\n  >\r\n    {products.map(product => (\r\n      <Grid\r\n        item\r\n        key={product.id}\r\n        lg={4}\r\n        md={6}\r\n        xs={12}\r\n      >\r\n       \r\n        <Card\r\n        {...rest}\r\n        className={clsx(classes.root, className)}\r\n        >\r\n        <CardContent>\r\n            <Typography\r\n            align=\"center\"\r\n            gutterBottom\r\n            variant=\"h4\"\r\n            >\r\n            {product.name}\r\n            </Typography>\r\n            <Typography\r\n            align=\"center\"\r\n            variant=\"body1\"\r\n            > \r\n            </Typography>\r\n            <br/>\r\n        <Divider />\r\n            <br/>\r\n            <Typography\r\n            align=\"center\"\r\n            variant=\"body1\"\r\n            >\r\n            {product.current_rate} <br/>\r\n            {product.modified}\r\n            </Typography>\r\n            \r\n            <Typography\r\n            align=\"center\"\r\n            variant=\"body1\"\r\n            > <br/>\r\n            (New RATE) {rate}\r\n            </Typography>\r\n            <TextField\r\n                    fullWidth\r\n                    helperText=\"New Top Rate\"\r\n                    label=\"Set rate\"\r\n                    margin=\"dense\"\r\n                    name=\"rate\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    value={rate}\r\n                    variant=\"outlined\"\r\n                />\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n            \r\n            <Grid\r\n            container\r\n            justify=\"space-between\"\r\n            >\r\n            <Grid\r\n                className={classes.statsItem}\r\n                item\r\n            >\r\n                <Button onClick={handleSubmitRate} color='secondary'>Set Rate</Button>\r\n              <Modal\r\n                open={open}\r\n                onClose={handleClose}\r\n                aria-labelledby=\"simple-modal-title\"\r\n                aria-describedby=\"simple-modal-description\"\r\n              >\r\n                <div style={modalStyle} className={classes.paper}>\r\n                <h2 id=\"simple-modal-title\">{'Edit Rate'}</h2>\r\n                <p id=\"simple-modal-description\">\r\n                  {responseMessage}\r\n                </p> \r\n              </div>\r\n              </Modal>\r\n            </Grid>\r\n            </Grid>\r\n        </CardActions>\r\n        </Card>\r\n      </Grid>\r\n    ))}\r\n\r\n        \r\n  </Grid>\r\n  \r\n  );\r\n};\r\nSetProduct.propTypes = {\r\n  className: PropTypes.string, \r\n};\r\n\r\n\r\nconst HocSetProduct = (props) => {  \r\n   return (\r\n     \r\n <HttpPostServiceContextConsumer> \r\n     {({ httpPostContext,\r\n         setHttpPostContext,\r\n         postToServerWithHeader  })=>\r\n     (\r\n       <React.Fragment> \r\n         <SetProduct {...props} postToServerWithHeader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></SetProduct>\r\n        </React.Fragment>\r\n     )}\r\n </HttpPostServiceContextConsumer>\r\n   );\r\n }\r\n \r\n \r\n HocSetProduct.propTypes = {\r\n  className: PropTypes.string,\r\n  postToServer: PropTypes.func,\r\n  sethttppostcontext:  PropTypes.func,\r\n  httppostcontext:  PropTypes.any,\r\n};\r\n export default HocSetProduct;\r\n","import React, { useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport PropTypes from 'prop-types';\r\nimport { IconButton, Grid, Typography } from '@material-ui/core';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport ChevronLeftIcon from '@material-ui/icons/ChevronLeft';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {domainUrl} from '../../constants';\r\n\r\nimport     {ProductsToolbar}    from './components';\r\nimport   {ProductCard}   from './components';\r\n// import mockData from './data';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(3)\r\n  },\r\n  content: {\r\n    marginTop: theme.spacing(2)\r\n  },\r\n  pagination: {\r\n    marginTop: theme.spacing(3),\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nconst ProductList =props => {\r\n  const classes = useStyles();\r\n\r\n  const [products] = useState([]);\r\n\r\n  const handleGetRate = event => {\r\n    const url = domainUrl + 'Products/GetProductRate';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n     \"ProductName\": \"MYR/IDR\", \r\n   }\r\n\r\n   var query2 = JSON.stringify(query);\r\n   console.log(auth)\r\n   props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponse );  \r\n };\r\n \r\n const handleResponse =(data)=>{\r\n  console.log(data);\r\n}\r\n\r\n  return (\r\n    <div className={classes.root}> \r\n      <div className={classes.content}>\r\n        <Grid\r\n          container\r\n          spacing={3}\r\n        >\r\n          {products.map(product => (\r\n            <Grid\r\n              item\r\n              key={product.id}\r\n              lg={4}\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <ProductCard product={product} />\r\n            </Grid>\r\n          ))}\r\n        </Grid>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n \r\n\r\n\r\nconst HocProduct = (props) => {  \r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServerWithHeader  })=>\r\n    (\r\n      <React.Fragment> \r\n        <ProductList {...props} postToServerWithHeader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></ProductList>\r\n       </React.Fragment>\r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\n\r\nHocProduct.propTypes = {\r\n className: PropTypes.string,\r\n postToServer: PropTypes.func,\r\n sethttppostcontext:  PropTypes.func,\r\n httppostcontext:  PropTypes.any,\r\n};\r\nexport default HocProduct;\r\n\r\n/*\r\n\r\n      <div className={classes.pagination}>\r\n        <Typography variant=\"caption\">1-6 of 20</Typography>\r\n        <IconButton>\r\n          <ChevronLeftIcon />\r\n        </IconButton>\r\n        <IconButton>\r\n          <ChevronRightIcon />\r\n        </IconButton>\r\n      </div>\r\n*/","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Grid,\r\n  Divider,\r\n  FormControlLabel,\r\n  Checkbox,\r\n  Typography,\r\n  Button\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {},\r\n  item: {\r\n    display: 'flex',\r\n    flexDirection: 'column'\r\n  }\r\n}));\r\n\r\nconst Notifications = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form>\r\n        <CardHeader\r\n          subheader=\"Manage the notifications\"\r\n          title=\"Notifications\"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n          <Grid\r\n            container\r\n            spacing={6}\r\n            wrap=\"wrap\"\r\n          >\r\n            <Grid\r\n              className={classes.item}\r\n              item\r\n              md={4}\r\n              sm={6}\r\n              xs={12}\r\n            >\r\n              <Typography\r\n                gutterBottom\r\n                variant=\"h6\"\r\n              >\r\n                Notifications\r\n              </Typography>\r\n              <FormControlLabel\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    defaultChecked //\r\n                  />\r\n                }\r\n                label=\"Email\"\r\n              />\r\n              <FormControlLabel\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    defaultChecked //\r\n                  />\r\n                }\r\n                label=\"Push Notifications\"\r\n              />\r\n              <FormControlLabel\r\n                control={<Checkbox color=\"primary\" />}\r\n                label=\"Text Messages\"\r\n              />\r\n              <FormControlLabel\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    defaultChecked //\r\n                  />\r\n                }\r\n                label=\"Phone calls\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              className={classes.item}\r\n              item\r\n              md={4}\r\n              sm={6}\r\n              xs={12}\r\n            >\r\n              <Typography\r\n                gutterBottom\r\n                variant=\"h6\"\r\n              >\r\n                Messages\r\n              </Typography>\r\n              <FormControlLabel\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    defaultChecked //\r\n                  />\r\n                }\r\n                label=\"Email\"\r\n              />\r\n              <FormControlLabel\r\n                control={<Checkbox color=\"primary\" />}\r\n                label=\"Push Notifications\"\r\n              />\r\n              <FormControlLabel\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    defaultChecked //\r\n                  />\r\n                }\r\n                label=\"Phone calls\"\r\n              />\r\n            </Grid>\r\n          </Grid>\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"outlined\"\r\n          >\r\n            Save\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n  );\r\n};\r\n\r\nNotifications.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default Notifications;\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Divider,\r\n  Button,\r\n  TextField\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {}\r\n}));\r\n\r\nconst Password = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [values, setValues] = useState({\r\n    password: '',\r\n    confirm: ''\r\n  });\r\n\r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n  };\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form>\r\n        <CardHeader\r\n          subheader=\"Update password\"\r\n          title=\"Password\"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n          <TextField\r\n            fullWidth\r\n            label=\"Password\"\r\n            name=\"password\"\r\n            onChange={handleChange}\r\n            type=\"password\"\r\n            value={values.password}\r\n            variant=\"outlined\"\r\n          />\r\n          <TextField\r\n            fullWidth\r\n            label=\"Confirm password\"\r\n            name=\"confirm\"\r\n            onChange={handleChange}\r\n            style={{ marginTop: '1rem' }}\r\n            type=\"password\"\r\n            value={values.confirm}\r\n            variant=\"outlined\"\r\n          />\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"outlined\"\r\n          >\r\n            Update\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n  );\r\n};\r\n\r\nPassword.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default Password;\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\n\r\nimport { Notifications, Password } from './components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst Settings = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        spacing={4}\r\n      >\r\n        <Grid\r\n          item\r\n          md={7}\r\n          xs={12}\r\n        >\r\n          <Notifications />\r\n        </Grid>\r\n        <Grid\r\n          item\r\n          md={5}\r\n          xs={12}\r\n        >\r\n          <Password />\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Settings;\r\n","import * as React from 'react'; \r\nimport axios from 'axios'; \r\nimport { HttpPostServiceContextProvider } from '../contexts/HttpServiceContext';\r\nfunction post2(url,auth, params = {}) {\r\n    return  axios({\r\n        method: 'post',\r\n        url:url,\r\n        data:params,\r\n        auth: auth,\r\n      headers: {'Content-Type': 'application/json'}\r\n      }) ;\r\n}\r\nfunction postWithHeader(url, params = {}, header) {\r\n    return  axios({\r\n        method: 'post',\r\n        url:url,\r\n        data:params,\r\n        headers: header\r\n      }) ;\r\n}\r\n\r\nfunction post3(url, params ) {\r\n    return   axios.post(\r\n        url,\r\n        params\r\n    ) ;\r\n}\r\n\r\nexport class HttpPostService extends React.Component<any,any>{\r\n    \r\n    constructor(props: any) {\r\n        super(props); \r\n        this.state={ \r\n            setHttpContext : this.setHttpContext,\r\n            postToServer:this.postToServer, \r\n            postToServerWithHeader:this.postToServerWithHeader,\r\n            httpServiceContext:{},\r\n        }\r\n    }\r\n \r\n\r\n    static getDerivedStateFromProps(props, state) {\r\n        var update :any = {};\r\n \r\n        return update;\r\n    }\r\n\r\n    async retrieveSettingFromServer(queryStr, handleRetrievedData){\r\n        let url = this.state.baseURL + this.state.subURL;\r\n        //console.log(url)\r\n        //console.log(queryStr)\r\n        return this.post(url, queryStr).then(\r\n            response=>{\r\n                handleRetrievedData(response)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n \r\n/*\r\n    async retrieveActiveTiledLayersFromServer(layerName, layerStyles,handleRetrievedData){\r\n        let url = this.state.baseURL + this.state.subURL;\r\n        return this.post(url, queryStr).then(\r\n            response=>{\r\n                var data = response.data.data;\r\n                console.log(data);\r\n                handleRetrievedData(data)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n*/\r\n\r\n\r\n  postToServer(url, queryStr,auth,handleRetrievedData){\r\n  //  let url = this.state.basePURL + this.state.subPURL;\r\n    //console.log(queryStr);\r\n    return  post3(url, queryStr).then(\r\n        response=>{\r\n            var data = response.data;\r\n            //console.log(data);\r\n            handleRetrievedData(data)\r\n        }\r\n    )\r\n    .catch(response => \r\n        {alert ('Invalid Captcha or login information') ; console.log(response)});\r\n}\r\n\r\n    \r\n\r\n  postToServerWithHeader(url, queryStr,header,handleRetrievedData){\r\n    //  let url = this.state.basePURL + this.state.subPURL;\r\n      console.log(queryStr);\r\n      return  postWithHeader(url, queryStr,header).then(\r\n          response=>{\r\n              var data = response;\r\n              //console.log(data);\r\n              handleRetrievedData(data)\r\n          }\r\n      )\r\n      .catch(response => console.log(response));\r\n  }\r\n  \r\n    async initializeAppsFromServerSession(queryStr, handleRetrievedData){\r\n        let url = this.state.baseURL + this.state.subURL;\r\n        return this.post(url, queryStr).then(\r\n            response=>{\r\n                handleRetrievedData(response)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n\r\n    \r\n    async initializeAppsFromServerSession2(url, queryStr, handleRetrievedData){ \r\n        return this.post(url, queryStr).then(\r\n            response=>{\r\n                handleRetrievedData(response)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n \r\n    setHttpContext = httpServiceContext => {\r\n        // console.log(mainContext)\r\n        this.setState({ httpServiceContext });\r\n    };\r\n\r\n    post(url, params = {}) {\r\n        return axios.post(url, params)\r\n    }\r\n\r\n    \r\n    render(){\r\n        const{httpServiceContext} = this.state;\r\n        return <HttpPostServiceContextProvider  value={ {\r\n            httpPostContext:  httpServiceContext,\r\n            setHttpPostContext:this.state.setHttpPostContext,\r\n            postToServer: this.state.postToServer,\r\n            postToServerWithHeader: this.state.postToServerWithHeader  }}>\r\n                {this.props.children}\r\n        </HttpPostServiceContextProvider>  \r\n        ;\r\n    }\r\n}","import * as React from 'react'; \r\nimport axios from 'axios';\r\nimport { HttpGetServiceContextProvider, HttpGetStoreInterface } from '../contexts/HttpServiceContext';\r\n\r\nfunction get(url, auth , params  ) {\r\n    return axios.get(url,{auth:auth, params:params});\r\n}\r\nfunction getBuffer(url, auth , resType, params  ) {\r\n    return axios.get(url,{auth:auth,responseType:resType, params:params});\r\n}\r\nfunction get2(url,   params={}  ) {\r\n    return axios.get(url, params );\r\n}\r\n\r\nexport class HttpGetService extends React.Component<any,any>{\r\n    \r\n    constructor(props: any) {\r\n        super(props); \r\n        this.state={ \r\n            httpGetServiceContext:{},\r\n            setHttpGetContext : this.setHttpGetContext, \r\n            genericGetHttp:this.genericGetHttp2,\r\n            genericGetHttpBinary:this.genericGetHttpBinary,\r\n        }\r\n    }\r\n\r\n    getServerDataByPage(page, pageSize, sorted, filtered, handleRetrievedData) {\r\n        let url = this.state.baseURL + this.state.subURL;\r\n        let postObject = {\r\n            page: page,\r\n            pageSize: pageSize,\r\n            sorted: sorted,\r\n            filtered: filtered,\r\n        }; \r\n\r\n        return get2(url, postObject).then(response => handleRetrievedData(response)).catch(response => console.log(response));\r\n    }\r\n    \r\n    setHttpGetContext = httpGetServiceContext => {\r\n        // console.log(mainContext)\r\n         this.setState({ httpGetServiceContext });\r\n       };\r\n \r\n    setBaseUrl = (baseURL,subURL) => {\r\n      //  console.log(baseURL)\r\n        this.setState({ baseURL:baseURL,subURL:subURL });\r\n    };\r\n\r\n   async genericGetHttp(url, parameterizedString,auth, params,handleRetrievedData){\r\n        let that = this; \r\n       // let url = that.state.baseURL + that.state.subURL;  \r\n       // console.log(this.state);\r\n       if(parameterizedString !== null && parameterizedString !== '')\r\n        url = url + '?'+parameterizedString;\r\n        \r\n       // console.log(url);\r\n        return get2(url,params).then(\r\n            response=>{\r\n                var data = response;\r\n                handleRetrievedData(data)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n\r\n    \r\n    genericGetHttp2(url, parameterizedString,auth, params){\r\n    let that = this; \r\n   // let url = that.state.baseURL + that.state.subURL;  \r\n   // console.log(this.state);\r\n   if(parameterizedString !== null && parameterizedString !== '')\r\n    url = url + '?'+parameterizedString;\r\n                               \r\n   // console.log(url);\r\n     return  get2(url,params)\r\n      /*.then(\r\n        response=>{\r\n            return  response\r\n        }\r\n    )\r\n    .catch(response => console.log(response)); */\r\n}\r\n\r\n    \r\n    genericGetHttpBinary(url, parameterizedString,auth, resType, params,handleRetrievedData){\r\n        let that = this; \r\n       // let url = that.state.baseURL + that.state.subURL;  \r\n       // console.log(this.state);\r\n        url = url + '?'+parameterizedString;\r\n       // console.log(url);\r\n        return getBuffer(url,auth,resType, params).then(\r\n            response=>{\r\n                var data = response.data;\r\n                // console.log(response);\r\n                handleRetrievedData(data)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n\r\n      searchGeocodeAndAddresses(url,searchTxt, appId, appCode,handleRetrievedData){\r\n       // let url = this.state.baseURL + this.state.subURL;\r\n        let postObject = {\r\n            searchtext: searchTxt,\r\n            app_id: appId,\r\n            app_code: appCode,\r\n            gen: 8,\r\n        }; \r\n        url = url + '?searchtext='+postObject.searchtext + '&app_id='+postObject.app_id + '&app_code='+postObject.app_code + '&gen='+ postObject.gen;\r\n        return get2(url).then(\r\n            response=>{\r\n                var data = response.data.Response;\r\n                //console.log(response);\r\n                handleRetrievedData(data)\r\n            }\r\n        )\r\n        .catch(response => console.log(response));\r\n    }\r\n    \r\n\r\n    render(){ \r\n          return <HttpGetServiceContextProvider  value={ { \r\n            httpGetServiceContext:this.state.httpGetServiceContext,\r\n            setHttpGetContext : this.state.setHttpGetContext, \r\n            genericGetHttp:this.state.genericGetHttp,\r\n            genericGetHttpBinary:this.state.genericGetHttpBinary,\r\n        } }>\r\n                    { this.props.children}\r\n                </HttpGetServiceContextProvider>  ;\r\n    }\r\n}","import {createBrowserHistory} from 'history'\r\n\r\nconst customHistory = createBrowserHistory()\r\nexport default customHistory;","import React, { useState, useEffect, useContext, useCallback } from 'react';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\r\nimport Card from '@material-ui/core/Card';\r\nimport CardContent from '@material-ui/core/CardContent';\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Button from '@material-ui/core/Button';\r\nimport CardHeader from '@material-ui/core/CardHeader';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer, httpGetVar } from '../contexts/HttpServiceContext';\r\nimport { CardMedia, Typography } from '@material-ui/core';\r\nimport {  Redirect   } from 'react-router-dom';\r\nimport customHistory from \"../history.js\";\r\nimport { SessionContext } from '../contexts/SessionContext';\r\n\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n  createStyles({\r\n    container: {\r\n      display: 'flex',\r\n      flexWrap: 'wrap',\r\n      width: 400,\r\n      margin: `${theme.spacing(0)} auto`\r\n    },\r\n    loginBtn: {\r\n      marginTop: theme.spacing(2),\r\n      flexGrow: 1\r\n    },\r\n    header: {\r\n      textAlign: 'center',\r\n      background: '#212121',\r\n      color: '#fff',\r\n      fontSize:22,\r\n      fontWeight:'bold'\r\n    },\r\n    card: {\r\n      marginTop: theme.spacing(10)\r\n    }\r\n\r\n  }),\r\n);\r\n\r\nconst purl =  'http://localhost:5000/auth/Login';//'http://sys.geotech.solutions:8080/auth/Login';\r\nconst gurl = 'http://localhost:5000/auth/GetCaptcha'; // 'http://sys.geotech.solutions:8080/auth/GetCaptcha';\r\n\r\n\r\nconst Login = (props) => {\r\n  const classes = useStyles();\r\n  const [username, setUsername] = useState('');\r\n  const [password, setPassword] = useState('');\r\n  const [captcha, setCap] = useState('');\r\n  const [isButtonDisabled, setIsButtonDisabled] = useState(true);\r\n  const [helperText, setHelperText] = useState('');\r\n  const [error, setError] = useState(false);\r\n  const [showOnce, setShowOnce] = useState(false);\r\n  const getServ = useContext(httpGetVar); \r\n  const [state1, setContextState] = useContext(SessionContext); \r\n  //const [b64Captcha, setCaptcha] = useState('');\r\n  //const [captchaData, setCaptchaData] = useState('');\r\n  useEffect(() => {\r\n    if (username.trim() && password.trim()&& captcha.trim()) {\r\n      setIsButtonDisabled(false);\r\n    } else {\r\n      setIsButtonDisabled(true);\r\n    }\r\n  }, [username, password,captcha]);\r\n\r\n  useEffect(() => {\r\n   // console.log(localStorage.getItem('isLoggedIn'))\r\n   // console.log(state1)\r\n    if (state1.isLoggedIn) {\r\n      customHistory.push('/dashboard')\r\n    }  \r\n\r\n  });\r\n\r\n  const myFunction = () => {\r\n    return getServ.genericGetHttp(gurl,'', {}, {});\r\n  }\r\n  \r\n  const useAsync = (asyncFunction, immediate = true) => {\r\n    const [pending, setPending] = useState(false);\r\n    const [b64Captcha, setCaptcha] = useState(null);\r\n    const [captchaData, setCaptchaData] = useState(null);\r\n    const [error2, setError] = useState(null);\r\n  \r\n    // The execute function wraps asyncFunction and\r\n    // handles setting state for pending, value, and error.\r\n    // useCallback ensures the below useEffect is not called\r\n    // on every render, but only if asyncFunction changes.\r\n \r\n      const execute = useCallback(() => {\r\n        setPending(true);\r\n        setCaptcha(null);\r\n        setError(null);\r\n        return asyncFunction()\r\n          .then(response => { \r\n            setCaptcha('data:image/png;base64,'+ response.data.captchaImage);\r\n            setCaptchaData(response.data.captchaData);\r\n            setPending(false)\r\n        })\r\n          .catch(error => setError(error))\r\n          .finally(() => setPending(false));\r\n      }, [asyncFunction]);\r\n      \r\n      useEffect(() => {\r\n        if (immediate) {\r\n          execute();\r\n        }\r\n      }, [execute, immediate]);\r\n     \r\n    // Call execute if we want to fire it right away.\r\n    // Otherwise execute can be called later, such as\r\n    // in an onClick handler.\r\n      return { execute, pending, b64Captcha, captchaData, error2 };\r\n   \r\n  \r\n  };\r\n\r\n  const { execute, pending, b64Captcha, captchaData, error2 } = useAsync(myFunction, false); \r\n  \r\n  useEffect(() => {\r\n    if( !state1.isLoggedIn){\r\n      if(!showOnce ){\r\n        execute();\r\n        setShowOnce(true);\r\n      }\r\n    }\r\n  });\r\n  const handleLogin = () => {\r\n    //var q = `query{login( username:\"${username}\", password:\"${password}\") { message, success,sessionKey,apiKey }}`;\r\n    var query = {\r\n      \"AuthenticateModel\": {\r\n        \"Username\": username,\r\n        \"Password\": password,\r\n      },\r\n      \"CaptchaCode\": captcha,\r\n      \"CaptchaData\": captchaData, \r\n    }\r\n    props.postToServer(purl,query, {'Content-Type':'application/json'},handleResponse );\r\n    /*if (username === 'abc@email.com' && password === 'password') {\r\n      setError(false);\r\n      setHelperText('Login Successfully');\r\n    } else {\r\n      setError(true);\r\n      setHelperText('Incorrect username or password')\r\n    }*/\r\n  };\r\n\r\n  const handleResponse =(data)=>{\r\n    console.log(data);\r\n    if(data.authorization !== undefined && data.authorization !== ''){\r\n      localStorage.setItem('authorization', data.authorization);\r\n      localStorage.setItem('isLoggedIn', 'true'); \r\n      localStorage.setItem('type', data.type); \r\n      localStorage.setItem('user', data.username); \r\n      //setContextState(state => ({ ...state, isLoggedIn: true,authorizationToken: data.authorization}))\r\n      customHistory.push('/dashboard');\r\n    }\r\n    else{\r\n      alert ('Invalid Captcha or login information')\r\n    }\r\n  }\r\n\r\n  const handleKeyPress = (e:any) => {\r\n    if (e.keyCode === 13 || e.which === 13) {\r\n      isButtonDisabled || handleLogin();\r\n    }\r\n  };\r\n\r\n  return ( \r\n          <React.Fragment > \r\n            <form className={classes.container} noValidate autoComplete=\"off\" >\r\n              <Card className={classes.card} onLoadStart={e=> execute}>\r\n                <CardHeader className={classes.header} disableTypography={true} title='OMNIPay Login'/> \r\n                <CardContent>\r\n                  <div  >\r\n                    <TextField\r\n                      error={error}\r\n                      fullWidth\r\n                      id=\"username\"\r\n                      type=\"email\"\r\n                      label=\"Username\"\r\n                      placeholder=\"Username\"\r\n                      margin=\"normal\"\r\n                      onChange={(e)=>setUsername(e.target.value)}\r\n                      onKeyPress={(e)=>handleKeyPress(e)}\r\n                    />\r\n                    <TextField\r\n                      error={error}\r\n                      fullWidth\r\n                      id=\"password\"\r\n                      type=\"password\"\r\n                      label=\"Password\"\r\n                      placeholder=\"Password\"\r\n                      margin=\"normal\"\r\n                      helperText={helperText}\r\n                      onChange={(e)=>setPassword(e.target.value)}\r\n                      onKeyPress={(e)=>handleKeyPress(e)}\r\n                    /> \r\n                    <CardMedia\r\n                    component=\"img\"\r\n                    alt=\"Try Captcha\"\r\n                    height=\"80\"\r\n                    src={ b64Captcha}\r\n                    title=\"Try Captcha\" \r\n                    onClick={execute}\r\n                    style={{cursor:'pointer'}}\r\n                  />\r\n                  <TextField\r\n                      error={error}\r\n                      fullWidth\r\n                      id=\"captcha\"\r\n                      type=\"text\"\r\n                      label=\"Captcha\"\r\n                      placeholder=\"Captcha\"\r\n                      margin=\"normal\" \r\n                      onChange={(e)=>setCap(e.target.value)}\r\n                      onKeyPress={(e)=>handleKeyPress(e)}\r\n                    /> \r\n                  </div>\r\n                </CardContent>\r\n                <CardActions>\r\n                  <Button\r\n                    variant=\"contained\"\r\n                    size=\"large\"\r\n                    color=\"secondary\"\r\n                    className={classes.loginBtn}\r\n                    onClick={()=>handleLogin()}\r\n                    disabled={isButtonDisabled}>\r\n                    Login\r\n                  </Button>\r\n                </CardActions>\r\n              </Card>\r\n            </form>\r\n          </React.Fragment> \r\n  );\r\n}\r\n\r\nexport default Login;","import React, { useState, useEffect } from 'react';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; \r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../contexts/HttpServiceContext';\r\nimport Login from '../components/Login';\r\n\r\n \r\nconst HocLogin = () => { \r\n const con = (input) =>{\r\n  return true;\r\n }\r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServer  })=>\r\n    (\r\n      <React.Fragment>\r\n        <HttpGetServiceContextConsumer>\r\n        {({ \r\n                genericGetHttp  })=>\r\n                con(genericGetHttp) && \r\n            (\r\n              <Login  genericGetHttp={genericGetHttp} postToServer={postToServer} setHttpPostContext={setHttpPostContext} httpPostContext={httpPostContext}\r\n             \r\n                \r\n              />\r\n            )}\r\n        </HttpGetServiceContextConsumer>\r\n            </React.Fragment>\r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\nexport default HocLogin;","import React from 'react'; \r\nimport { HttpPostService } from '../../services/HttpPostService';\r\nimport { HttpGetService } from '../../services/GetService';\r\nimport HocLogin from '../../HOC/HocLogin';\r\nimport {  withRouter } from 'react-router-dom';\r\n\r\nconst LoginMain: React.FC = () => {\r\n    return (\r\n        \r\n    <HttpPostService    >\r\n      <HttpGetService>\r\n        <HocLogin />\r\n    </HttpGetService>\r\n  </HttpPostService>\r\n    );\r\n  } \r\n\r\n  \r\nexport default LoginMain;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Link as RouterLink, withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport validate from 'validate.js';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Grid,\r\n  Button,\r\n  IconButton,\r\n  TextField,\r\n  Link,\r\n  FormHelperText,\r\n  Checkbox,\r\n  Typography\r\n} from '@material-ui/core';\r\nimport ArrowBackIcon from '@material-ui/icons/ArrowBack';\r\n\r\nconst schema = {\r\n  firstName: {\r\n    presence: { allowEmpty: false, message: 'is required' },\r\n    length: {\r\n      maximum: 32\r\n    }\r\n  },\r\n  lastName: {\r\n    presence: { allowEmpty: false, message: 'is required' },\r\n    length: {\r\n      maximum: 32\r\n    }\r\n  },\r\n  email: {\r\n    presence: { allowEmpty: false, message: 'is required' },\r\n    email: true,\r\n    length: {\r\n      maximum: 64\r\n    }\r\n  },\r\n  password: {\r\n    presence: { allowEmpty: false, message: 'is required' },\r\n    length: {\r\n      maximum: 128\r\n    }\r\n  },\r\n  policy: {\r\n    presence: { allowEmpty: false, message: 'is required' },\r\n    checked: true\r\n  }\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    backgroundColor: theme.palette.background.default,\r\n    height: '100%'\r\n  },\r\n  grid: {\r\n    height: '100%'\r\n  },\r\n  quoteContainer: {\r\n    [theme.breakpoints.down('md')]: {\r\n      display: 'none'\r\n    }\r\n  },\r\n  quote: {\r\n    backgroundColor: theme.palette.neutral,\r\n    height: '100%',\r\n    display: 'flex',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundImage: 'url(/images/auth.jpg)',\r\n    backgroundSize: 'cover',\r\n    backgroundRepeat: 'no-repeat',\r\n    backgroundPosition: 'center'\r\n  },\r\n  quoteInner: {\r\n    textAlign: 'center',\r\n    flexBasis: '600px'\r\n  },\r\n  quoteText: {\r\n    color: theme.palette.white,\r\n    fontWeight: 300\r\n  },\r\n  name: {\r\n    marginTop: theme.spacing(3),\r\n    color: theme.palette.white\r\n  },\r\n  bio: {\r\n    color: theme.palette.white\r\n  },\r\n  contentContainer: {},\r\n  content: {\r\n    height: '100%',\r\n    display: 'flex',\r\n    flexDirection: 'column'\r\n  },\r\n  contentHeader: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    paddingTop: theme.spacing(5),\r\n    paddingBototm: theme.spacing(2),\r\n    paddingLeft: theme.spacing(2),\r\n    paddingRight: theme.spacing(2)\r\n  },\r\n  logoImage: {\r\n    marginLeft: theme.spacing(4)\r\n  },\r\n  contentBody: {\r\n    flexGrow: 1,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    [theme.breakpoints.down('md')]: {\r\n      justifyContent: 'center'\r\n    }\r\n  },\r\n  form: {\r\n    paddingLeft: 100,\r\n    paddingRight: 100,\r\n    paddingBottom: 125,\r\n    flexBasis: 700,\r\n    [theme.breakpoints.down('sm')]: {\r\n      paddingLeft: theme.spacing(2),\r\n      paddingRight: theme.spacing(2)\r\n    }\r\n  },\r\n  title: {\r\n    marginTop: theme.spacing(3)\r\n  },\r\n  textField: {\r\n    marginTop: theme.spacing(2)\r\n  },\r\n  policy: {\r\n    marginTop: theme.spacing(1),\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  policyCheckbox: {\r\n    marginLeft: '-14px'\r\n  },\r\n  signUpButton: {\r\n    margin: theme.spacing(2, 0)\r\n  }\r\n}));\r\n\r\nconst SignUp = props => {\r\n  const { history } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [formState, setFormState] = useState({\r\n    isValid: false,\r\n    values: {},\r\n    touched: {},\r\n    errors: {}\r\n  });\r\n\r\n  useEffect(() => {\r\n    const errors = validate(formState.values, schema);\r\n\r\n    setFormState(formState => ({\r\n      ...formState,\r\n      isValid: errors ? false : true,\r\n      errors: errors || {}\r\n    }));\r\n  }, [formState.values]);\r\n\r\n  const handleChange = event => {\r\n    event.persist();\r\n\r\n    setFormState(formState => ({\r\n      ...formState,\r\n      values: {\r\n        ...formState.values,\r\n        [event.target.name]:\r\n          event.target.type === 'checkbox'\r\n            ? event.target.checked\r\n            : event.target.value\r\n      },\r\n      touched: {\r\n        ...formState.touched,\r\n        [event.target.name]: true\r\n      }\r\n    }));\r\n  };\r\n\r\n  const handleBack = () => {\r\n    history.goBack();\r\n  };\r\n\r\n  const handleSignUp = event => {\r\n    event.preventDefault();\r\n    history.push('/');\r\n  };\r\n\r\n  const hasError = field =>\r\n    formState.touched[field] && formState.errors[field] ? true : false;\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        className={classes.grid}\r\n        container\r\n      >\r\n        <Grid\r\n          className={classes.quoteContainer}\r\n          item\r\n          lg={5}\r\n        >\r\n          <div className={classes.quote}>\r\n            <div className={classes.quoteInner}>\r\n              <Typography\r\n                className={classes.quoteText}\r\n                variant=\"h1\"\r\n              >\r\n                Hella narwhal Cosby sweater McSweeney's, salvia kitsch before\r\n                they sold out High Life.\r\n              </Typography>\r\n              <div className={classes.person}>\r\n                <Typography\r\n                  className={classes.name}\r\n                  variant=\"body1\"\r\n                >\r\n                  Takamaru Ayako\r\n                </Typography>\r\n                <Typography\r\n                  className={classes.bio}\r\n                  variant=\"body2\"\r\n                >\r\n                  Manager at inVision\r\n                </Typography>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </Grid>\r\n        <Grid\r\n          className={classes.content}\r\n          item\r\n          lg={7}\r\n          xs={12}\r\n        >\r\n          <div className={classes.content}>\r\n            <div className={classes.contentHeader}>\r\n              <IconButton onClick={handleBack}>\r\n                <ArrowBackIcon />\r\n              </IconButton>\r\n            </div>\r\n            <div className={classes.contentBody}>\r\n              <form\r\n                className={classes.form}\r\n                onSubmit={handleSignUp}\r\n              >\r\n                <Typography\r\n                  className={classes.title}\r\n                  variant=\"h2\"\r\n                >\r\n                  Create new account\r\n                </Typography>\r\n                <Typography\r\n                  color=\"textSecondary\"\r\n                  gutterBottom\r\n                >\r\n                  Use your email to create new account\r\n                </Typography>\r\n                <TextField\r\n                  className={classes.textField}\r\n                  error={hasError('firstName')}\r\n                  fullWidth\r\n                  helperText={\r\n                    hasError('firstName') ? formState.errors.firstName[0] : null\r\n                  }\r\n                  label=\"First name\"\r\n                  name=\"firstName\"\r\n                  onChange={handleChange}\r\n                  type=\"text\"\r\n                  value={formState.values.firstName || ''}\r\n                  variant=\"outlined\"\r\n                />\r\n                <TextField\r\n                  className={classes.textField}\r\n                  error={hasError('lastName')}\r\n                  fullWidth\r\n                  helperText={\r\n                    hasError('lastName') ? formState.errors.lastName[0] : null\r\n                  }\r\n                  label=\"Last name\"\r\n                  name=\"lastName\"\r\n                  onChange={handleChange}\r\n                  type=\"text\"\r\n                  value={formState.values.lastName || ''}\r\n                  variant=\"outlined\"\r\n                />\r\n                <TextField\r\n                  className={classes.textField}\r\n                  error={hasError('email')}\r\n                  fullWidth\r\n                  helperText={\r\n                    hasError('email') ? formState.errors.email[0] : null\r\n                  }\r\n                  label=\"Email address\"\r\n                  name=\"email\"\r\n                  onChange={handleChange}\r\n                  type=\"text\"\r\n                  value={formState.values.email || ''}\r\n                  variant=\"outlined\"\r\n                />\r\n                <TextField\r\n                  className={classes.textField}\r\n                  error={hasError('password')}\r\n                  fullWidth\r\n                  helperText={\r\n                    hasError('password') ? formState.errors.password[0] : null\r\n                  }\r\n                  label=\"Password\"\r\n                  name=\"password\"\r\n                  onChange={handleChange}\r\n                  type=\"password\"\r\n                  value={formState.values.password || ''}\r\n                  variant=\"outlined\"\r\n                />\r\n                <div className={classes.policy}>\r\n                  <Checkbox\r\n                    checked={formState.values.policy || false}\r\n                    className={classes.policyCheckbox}\r\n                    color=\"primary\"\r\n                    name=\"policy\"\r\n                    onChange={handleChange}\r\n                  />\r\n                  <Typography\r\n                    className={classes.policyText}\r\n                    color=\"textSecondary\"\r\n                    variant=\"body1\"\r\n                  >\r\n                    I have read the{' '}\r\n                    <Link\r\n                      color=\"primary\"\r\n                      component={RouterLink}\r\n                      to=\"#\"\r\n                      underline=\"always\"\r\n                      variant=\"h6\"\r\n                    >\r\n                      Terms and Conditions\r\n                    </Link>\r\n                  </Typography>\r\n                </div>\r\n                {hasError('policy') && (\r\n                  <FormHelperText error>\r\n                    {formState.errors.policy[0]}\r\n                  </FormHelperText>\r\n                )}\r\n                <Button\r\n                  className={classes.signUpButton}\r\n                  color=\"primary\"\r\n                  disabled={!formState.isValid}\r\n                  fullWidth\r\n                  size=\"large\"\r\n                  type=\"submit\"\r\n                  variant=\"contained\"\r\n                >\r\n                  Sign up now\r\n                </Button>\r\n                <Typography\r\n                  color=\"textSecondary\"\r\n                  variant=\"body1\"\r\n                >\r\n                  Have an account?{' '}\r\n                  <Link\r\n                    component={RouterLink}\r\n                    to=\"/sign-in\"\r\n                    variant=\"h6\"\r\n                  >\r\n                    Sign in\r\n                  </Link>\r\n                </Typography>\r\n              </form>\r\n            </div>\r\n          </div>\r\n        </Grid>\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\nSignUp.propTypes = {\r\n  history: PropTypes.object\r\n};\r\n\r\nexport default withRouter(SignUp);\r\n","import React, { Fragment } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid, Typography as MuiTypography } from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst variants = {\r\n  h1: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  h2: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  h3: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  h4: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  h5: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  h6: 'Nisi euismod ante senectus consequat phasellus ut',\r\n  subtitle1: 'Leo varius justo aptent arcu urna felis pede nisl',\r\n  subtitle2: 'Leo varius justo aptent arcu urna felis pede nisl',\r\n  body1:\r\n    'Justo proin curabitur dictumst semper auctor, consequat tempor, nostra aenean neque turpis nunc. Leo. Sapien aliquet facilisi turpis, elit facilisi praesent porta metus leo. Dignissim amet dis nec ac integer inceptos erat dis Turpis sodales ad torquent. Dolor, erat convallis.Laoreet velit a fames commodo tristique hendrerit sociosqu rhoncus vel sapien penatibus facilisis faucibus ad. Mus purus vehicula imperdiet tempor lectus, feugiat Sapien erat viverra netus potenti mattis purus turpis. Interdum curabitur potenti tristique. Porta velit dignissim tristique ultrices primis.',\r\n  body2:\r\n    'Justo proin curabitur dictumst semper auctor, consequat tempor, nostra aenean neque turpis nunc. Leo. Sapien aliquet facilisi turpis, elit facilisi praesent porta metus leo. Dignissim amet dis nec ac integer inceptos erat dis Turpis sodales ad torquent. Dolor, erat convallis.',\r\n  caption: 'Accumsan leo pretium conubia ullamcorper.',\r\n  overline: 'Accumsan leo pretium conubia ullamcorper.',\r\n  button: 'Vivamus ultrices rutrum fames dictumst'\r\n};\r\n\r\nconst Typography = () => {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Grid\r\n        container\r\n        spacing={4}\r\n      >\r\n        {Object.keys(variants).map((key, i) => (\r\n          <Fragment key={i}>\r\n            <Grid\r\n              item\r\n              sm={3}\r\n              xs={12}\r\n            >\r\n              <MuiTypography variant=\"caption\">{key}</MuiTypography>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              sm={9}\r\n              xs={12}\r\n            >\r\n              <MuiTypography variant={key}>{variants[key]}</MuiTypography>\r\n            </Grid>\r\n          </Fragment>\r\n        ))}\r\n      </Grid>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Typography;\r\n","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport {domainUrl} from '../../../../constants';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport 'react-perfect-scrollbar/dist/css/styles.css';\r\nimport {\r\n  useTable,\r\n  useGroupBy,\r\n  useFilters,\r\n  useSortBy,\r\n  useExpanded,\r\n  usePagination,\r\n} from 'react-table';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Checkbox,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableRow,\r\n  Typography,\r\n  TablePagination\r\n} from '@material-ui/core';\r\n\r\nimport { getInitials } from '../../../../helpers';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  content: {\r\n    padding: 0\r\n  },\r\n  inner: {\r\n    minWidth: 1050\r\n  },\r\n  nameContainer: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  avatar: {\r\n    marginRight: theme.spacing(2)\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nfunction TTable({ classes, columns,className, data,...rest }) {\r\n  \r\n  const {\r\n    getTableProps,\r\n    getTableBodyProps,\r\n    headerGroups,\r\n    rows,\r\n    prepareRow,\r\n    page, // Instead of using 'rows', we'll use page,\r\n    // which has only the rows for the active page\r\n\r\n    // The rest of these things are super handy, too ;)\r\n    canPreviousPage,\r\n    canNextPage,\r\n    pageOptions,\r\n    pageCount,\r\n    gotoPage,\r\n    nextPage,\r\n    previousPage,\r\n    setPageSize,\r\n    state: { pageIndex, pageSize },\r\n  } = useTable(\r\n    {\r\n      columns,\r\n      data,\r\n      initialState: { pageIndex: 0 },\r\n    },\r\n    useSortBy,\r\n    usePagination,\r\n  )\r\n\r\n\r\n    return (\r\n      <Card\r\n           {...rest}\r\n           className={clsx(classes.root, className)}\r\n         >\r\n           <CardContent className={classes.content}>\r\n             <PerfectScrollbar>\r\n               <div className={classes.inner}>\r\n               \r\n               <Table {...getTableProps()}>\r\n                   <TableHead>\r\n                         {headerGroups.map(headerGroup => (\r\n                     <TableRow {...headerGroup.getHeaderGroupProps()}>\r\n                       {headerGroup.headers.map(column => ( \r\n                         <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>\r\n                           {column.render('Header')}\r\n                           <span>\r\n                             {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}\r\n                           </span>\r\n                         </TableCell>\r\n                       ))}\r\n                     </TableRow>\r\n                   ))}\r\n                      \r\n                   </TableHead>\r\n                   <TableBody  {...getTableBodyProps()}>\r\n                     {page.map((row, i) => {\r\n                       prepareRow(row)\r\n                       return (\r\n                         <TableRow \r\n                         className={classes.tableRow}\r\n                         hover\r\n                          {...row.getRowProps()}>\r\n                           {row.cells.map(cell => {\r\n                             return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>\r\n                           })}\r\n                         </TableRow>\r\n                       )\r\n                     })}\r\n                   \r\n                   </TableBody>\r\n                 </Table>\r\n     \r\n               </div>\r\n             </PerfectScrollbar>\r\n           </CardContent>\r\n           <CardActions className={classes.actions}>\r\n             <div className=\"pagination\">\r\n               <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>\r\n                 {'<<'}\r\n               </button>{' '}\r\n               <button onClick={() => previousPage()} disabled={!canPreviousPage}>\r\n                 {'<'}\r\n               </button>{' '}\r\n               <button onClick={() => nextPage()} disabled={!canNextPage}>\r\n                 {'>'}\r\n               </button>{' '}\r\n               <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>\r\n                 {'>>'}\r\n               </button>{' '}\r\n               <span>\r\n                 Page{' '}\r\n                 <strong>\r\n                   {pageIndex + 1} of {pageOptions.length}\r\n                 </strong>{' '}\r\n               </span>\r\n               <span>\r\n                 | Go to page:{' '}\r\n                 <input\r\n                   type=\"number\"\r\n                   defaultValue={pageIndex + 1}\r\n                   onChange={e => {\r\n                     const page = e.target.value ? Number(e.target.value) - 1 : 0\r\n                     gotoPage(page)\r\n                   }}\r\n                   style={{ width: '100px' }}\r\n                 />\r\n               </span>{' '}\r\n               <select\r\n                 value={pageSize}\r\n                 onChange={e => {\r\n                   setPageSize(Number(e.target.value))\r\n                 }}\r\n               >\r\n                 {[10, 20, 30, 40, 50].map(pageSize => (\r\n                   <option key={pageSize} value={pageSize}>\r\n                     Show {pageSize}\r\n                   </option>\r\n                 ))}\r\n               </select>\r\n             </div>\r\n           </CardActions>\r\n         </Card>\r\n         )\r\n}\r\n\r\nconst UsersTable = props => {\r\n  const { className,  ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  const [ownInfo, setOwnInfo] = React.useState({});\r\n  const [users, setUsers] = React.useState([]);\r\n  const [selectedUsers, setSelectedUsers] = useState([]);\r\n  const [rowsPerPage, setRowsPerPage] = useState(100);\r\n  const [page, setPage] = useState(0);\r\n  const handleCheckIsLoggedIn =()=>{\r\n      \r\n    const url = domainUrl + 'Auth/IsLoggedIn';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'Authorization': auth \r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponseIsLoggedIn );  \r\n\r\n  }\r\n  \r\n  const handleResponseIsLoggedIn = (data) =>{\r\n    // handleGetFirstTreeNodes(data.data)\r\n\r\n    setOwnInfo(data.data)\r\n   }\r\n\r\n   \r\n  const handleGetDownlines =()=>{\r\n      \r\n    const url = domainUrl + 'Users/ListDirectDownlineUserTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'Pagination': {\r\n        'PageSize': rowsPerPage,\r\n        'PageNum': page\r\n      } \r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handlePopulateTable );  \r\n\r\n  }\r\n  const handlePopulateTable = (data) =>{\r\n    // handleGetFirstTreeNodes(data.data)\r\nconsole.log(data.data)\r\nif(data.data){\r\n  \r\n  setUsers(data.data)\r\n}\r\n   }\r\n\r\n \r\n\r\n\r\n  useEffect(() => {\r\n    handleCheckIsLoggedIn();\r\n    handleGetDownlines();\r\n},[]);\r\n  const columns=React.useMemo(\r\n    () => [\r\n    {\r\n      \"Header\": \"User\",\r\n      \"accessor\": \"username\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Email\",\r\n      \"accessor\": \"email\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Language\",\r\n      \"accessor\": \"language\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Phone\",\r\n      \"accessor\": \"contactNo\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Status\",\r\n      \"accessor\": \"status\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Networth\",\r\n      \"accessor\": \"currentNetworth\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Registration date\",\r\n      \"accessor\": \"createdOn\",\r\n      sortType: 'basic',\r\n      Cell: props=>  {return moment(props.value).format('DD/MM/YYYY')}\r\n\r\n    }],[]\r\n    );\r\n  const handleSelectAll = event => { \r\n\r\n    let selectedUsers;\r\n\r\n    if (event.target.checked) {\r\n      selectedUsers = users.map(user => user.id);\r\n    } else {\r\n      selectedUsers = [];\r\n    }\r\n\r\n    setSelectedUsers(selectedUsers);\r\n  };\r\n\r\n  const handleSelectOne = (event, id) => {\r\n    const selectedIndex = selectedUsers.indexOf(id);\r\n    let newSelectedUsers = [];\r\n\r\n    if (selectedIndex === -1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);\r\n    } else if (selectedIndex === 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));\r\n    } else if (selectedIndex === selectedUsers.length - 1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));\r\n    } else if (selectedIndex > 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(\r\n        selectedUsers.slice(0, selectedIndex),\r\n        selectedUsers.slice(selectedIndex + 1)\r\n      );\r\n    }\r\n\r\n    setSelectedUsers(newSelectedUsers);\r\n  };\r\n\r\n  const handlePageChange = (event, page) => {\r\n    setPage(page);\r\n  };\r\n\r\n  const handleRowsPerPageChange = event => {\r\n    setRowsPerPage(event.target.value);\r\n  };\r\n\r\n  return (\r\n\r\n    \r\n    <TTable classes={classes} columns={columns} data={users} className={className} {...rest} />\r\n   \r\n  );\r\n};\r\n\r\nUsersTable.propTypes = {\r\n  className: PropTypes.string,\r\n  users: PropTypes.array.isRequired\r\n};\r\n\r\nexport default UsersTable;\r\n\r\n\r\n/*\r\n\r\n\r\n\r\n\r\n                {users.slice(0, rowsPerPage).map(user => (\r\n                  <TableRow\r\n                    className={classes.tableRow}\r\n                    hover\r\n                    key={user.id}\r\n                    selected={selectedUsers.indexOf(user.id) !== -1}\r\n                  >\r\n                    <TableCell padding=\"checkbox\">\r\n                      <Checkbox\r\n                        checked={selectedUsers.indexOf(user.id) !== -1}\r\n                        color=\"primary\"\r\n                        onChange={event => handleSelectOne(event, user.id)}\r\n                        value=\"true\"\r\n                      />\r\n                    </TableCell>\r\n                    <TableCell>\r\n                      <div className={classes.nameContainer}>\r\n                        <Avatar\r\n                          className={classes.avatar}\r\n                          src={user.avatarUrl}\r\n                        >\r\n                          {getInitials(user.name)}\r\n                        </Avatar>\r\n                        <Typography variant=\"body1\">{user.name}</Typography>\r\n                      </div>\r\n                    </TableCell>\r\n                    <TableCell>{user.email}</TableCell>\r\n                    <TableCell>\r\n                      {user.address.city}, {user.address.state},{' '}\r\n                      {user.address.country}\r\n                    </TableCell>\r\n                    <TableCell>{user.phone}</TableCell>\r\n                    <TableCell>\r\n                      {moment(user.createdAt).format('DD/MM/YYYY')}\r\n                    </TableCell>\r\n                  </TableRow>\r\n                ))}\r\n\r\n        /*<TablePagination\r\n                  component=\"div\"\r\n                  count={users.length}\r\n                  onChangePage={handlePageChange}\r\n                  onChangeRowsPerPage={handleRowsPerPageChange}\r\n                  page={page}\r\n                  rowsPerPage={rowsPerPage}\r\n                  rowsPerPageOptions={[5, 10, 25]}\r\n                />\r\n            \r\n            <EnhancedTable\r\n              data={users}\r\n              columns={cols}\r\n              showPagination={true}\r\n              defaultPageSize={10}\r\n              resizable={true}\r\n              className={classes}\r\n            />\r\n            */","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Button } from '@material-ui/core';\r\n\r\nimport { SearchInput } from '../../../../components';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  row: {\r\n    height: '42px',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    marginTop: theme.spacing(1)\r\n  },\r\n  spacer: {\r\n    flexGrow: 1\r\n  },\r\n  importButton: {\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  exportButton: {\r\n    marginRight: theme.spacing(1)\r\n  },\r\n  searchInput: {\r\n    marginRight: theme.spacing(1)\r\n  }\r\n}));\r\n\r\nconst UsersToolbar = props => {\r\n  const { className, ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <div className={classes.row}>\r\n        <span className={classes.spacer} />\r\n        <Button\r\n          color=\"primary\"\r\n          variant=\"contained\"\r\n          to='/'\r\n        >\r\n          Add user\r\n        </Button>\r\n      </div>\r\n      <div className={classes.row}>\r\n        <SearchInput\r\n          className={classes.searchInput}\r\n          placeholder=\"Search user\"\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nUsersToolbar.propTypes = {\r\n  className: PropTypes.string\r\n};\r\n\r\nexport default UsersToolbar;\r\n/*\r\n<Button className={classes.importButton}>Import</Button>\r\n<Button className={classes.exportButton}>Export</Button>\r\n\r\n*/","import uuid from 'uuid/v1';\r\n\r\nexport default [\r\n  {\r\n    id: uuid(),\r\n    name: 'Ekaterina Tankova',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'West Virginia',\r\n      city: 'Parkersburg',\r\n      street: '2849 Fulton Street'\r\n    },\r\n    email: 'ekaterina.tankova@devias.io',\r\n    phone: '304-428-3097',\r\n    avatarUrl: '/images/avatars/avatar_3.png',\r\n    createdAt: 1555016400000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Cao Yu',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Bristow',\r\n      city: 'Iowa',\r\n      street: '1865  Pleasant Hill Road'\r\n    },\r\n    email: 'cao.yu@devias.io',\r\n    avatarUrl: '/images/avatars/avatar_4.png',\r\n    phone: '712-351-5711',\r\n    createdAt: 1555016400000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Alexa Richardson',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Georgia',\r\n      city: 'Atlanta',\r\n      street: '4894  Lakeland Park Drive'\r\n    },\r\n    email: 'alexa.richardson@devias.io',\r\n    phone: '770-635-2682',\r\n    avatarUrl: '/images/avatars/avatar_2.png',\r\n    createdAt: 1555016400000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Anje Keizer',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Ohio',\r\n      city: 'Dover',\r\n      street: '4158  Hedge Street'\r\n    },\r\n    email: 'anje.keizer@devias.io',\r\n    avatarUrl: '/images/avatars/avatar_5.png',\r\n    phone: '908-691-3242',\r\n    createdAt: 1554930000000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Clarke Gillebert',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Texas',\r\n      city: 'Dallas',\r\n      street: '75247'\r\n    },\r\n    email: 'clarke.gillebert@devias.io',\r\n    phone: '972-333-4106',\r\n    avatarUrl: '/images/avatars/avatar_6.png',\r\n    createdAt: 1554757200000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Adam Denisov',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'California',\r\n      city: 'Bakerfield',\r\n      street: '317 Angus Road'\r\n    },\r\n    email: 'adam.denisov@devias.io',\r\n    phone: '858-602-3409',\r\n    avatarUrl: '/images/avatars/avatar_1.png',\r\n    createdAt: 1554670800000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Ava Gregoraci',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'California',\r\n      city: 'Redondo Beach',\r\n      street: '2188  Armbrester Drive'\r\n    },\r\n    email: 'ava.gregoraci@devias.io',\r\n    avatarUrl: '/images/avatars/avatar_7.png',\r\n    phone: '415-907-2647',\r\n    createdAt: 1554325200000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Emilee Simchenko',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Nevada',\r\n      city: 'Las Vegas',\r\n      street: '1798  Hickory Ridge Drive'\r\n    },\r\n    email: 'emilee.simchenko@devias.io',\r\n    phone: '702-661-1654',\r\n    avatarUrl: '/images/avatars/avatar_8.png',\r\n    createdAt: 1523048400000\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Kwak Seong-Min',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Michigan',\r\n      city: 'Detroit',\r\n      street: '3934  Wildrose Lane'\r\n    },\r\n    email: 'kwak.seong.min@devias.io',\r\n    avatarUrl: '/images/avatars/avatar_9.png',\r\n    phone: '313-812-8947'\r\n  },\r\n  {\r\n    id: uuid(),\r\n    name: 'Merrile Burgett',\r\n    address: {\r\n      country: 'USA',\r\n      state: 'Utah',\r\n      city: 'Salt Lake City',\r\n      street: '368 Lamberts Branch Road'\r\n    },\r\n    email: 'merrile.burgett@devias.io',\r\n    phone: '801-301-7894',\r\n    avatarUrl: '/images/avatars/avatar_10.png',\r\n    createdAt: 1522702800000\r\n  }\r\n];\r\n","import React, { useState } from 'react';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nimport { UsersToolbar, UsersTable } from './components';\r\nimport mockData from './data';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(3)\r\n  },\r\n  content: {\r\n    marginTop: theme.spacing(2)\r\n  }\r\n}));\r\n\r\nconst UserList = () => {\r\n  const classes = useStyles();\r\n\r\n\r\n  return (\r\n    <HttpPostServiceContextConsumer> \r\n        {({ httpPostContext,\r\n            setHttpPostContext,\r\n            postToServerWithHeader  })=>\r\n        (\r\n          \r\n         \r\n       <HttpGetServiceContextConsumer>\r\n       {({ \r\n               genericGetHttp  })=> \r\n           (\r\n            <div className={classes.root}> \r\n              <UsersToolbar />\r\n              <div className={classes.content}> \r\n                <UsersTable  posttoserverwithheader={postToServerWithHeader} genericgethttp={genericGetHttp} />\r\n              </div>\r\n            </div>\r\n     )\r\n    }\r\n    </HttpGetServiceContextConsumer>\r\n   )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n};\r\n\r\nexport default UserList;\r\n","import React, { useEffect,useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport SvgIcon from '@material-ui/core/SvgIcon';\r\nimport { fade, makeStyles, withStyles } from '@material-ui/core/styles';\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport {domainUrl} from '../../../../constants';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../../../contexts/HttpServiceContext';\r\nimport { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support\r\n\r\nfunction MinusSquare(props) {\r\n    return (\r\n      <SvgIcon fontSize=\"inherit\" style={{ width: 14, height: 14 }} {...props}>\r\n        {/* tslint:disable-next-line: max-line-length */}\r\n        <path d=\"M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z\" />\r\n      </SvgIcon>\r\n    );\r\n  }\r\n  \r\n  function PlusSquare(props) {\r\n    return (\r\n      <SvgIcon fontSize=\"inherit\" style={{ width: 14, height: 14 }} {...props}>\r\n        {/* tslint:disable-next-line: max-line-length */}\r\n        <path d=\"M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z\" />\r\n      </SvgIcon>\r\n    );\r\n  }\r\n  \r\n  function CloseSquare(props) {\r\n    return (\r\n      <SvgIcon className=\"close\" fontSize=\"inherit\" style={{ width: 14, height: 14 }} {...props}>\r\n        {/* tslint:disable-next-line: max-line-length */}\r\n        <path d=\"M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z\" />\r\n      </SvgIcon>\r\n    );\r\n  }\r\n  \r\n  function TransitionComponent(props) {\r\n    const style = useSpring({\r\n      from: { opacity: 0, transform: 'translate3d(20px,0,0)' },\r\n      to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },\r\n    });\r\n  \r\n    return (\r\n      <animated.div style={style}>\r\n        <Collapse {...props} />\r\n      </animated.div>\r\n    );\r\n  }\r\n  \r\n  TransitionComponent.propTypes = {\r\n    /**\r\n     * Show the component; triggers the enter or exit states\r\n     */\r\n    in: PropTypes.bool,\r\n  };\r\n \r\nconst StyledTreeItem = withStyles((theme) => ({\r\n    iconContainer: {\r\n      '& .close': {\r\n        opacity: 0.3,\r\n      },\r\n    },\r\n    group: {\r\n      marginLeft: 7,\r\n      paddingLeft: 18,\r\n      borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,\r\n    },\r\n  }))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);\r\n  \r\n  const useStyles = makeStyles({\r\n    root: {\r\n      height: 264,\r\n      flexGrow: 1,\r\n      maxWidth: 400,\r\n    },\r\n  });\r\n  \r\n  const UserTree = props => {\r\n    const classes = useStyles();\r\n    const [expanded, setExpanded] = React.useState([]);\r\n    const [selected, setSelected] = React.useState([]);\r\n    const [ownInfo, setOwnInfo] = React.useState({});\r\n    const [theDownlines, setTheDownlines] = useState(null)\r\n    const handleCheckIsLoggedIn =()=>{\r\n      \r\n      const url = domainUrl + 'Auth/IsLoggedIn';\r\n      var auth = localStorage.getItem('authorization');\r\n      var query = {  \r\n        'Authorization': auth \r\n      }\r\n      var query2 = JSON.stringify(query);\r\n      props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponseIsLoggedIn );  \r\n\r\n    }\r\n\r\n\r\n    const handleSelect = (event, nodeIds) => {\r\n      setSelected(nodeIds);\r\n    };\r\n   \r\n  useEffect(() => {\r\n    handleCheckIsLoggedIn();\r\n    \r\n},[]);\r\n\r\n    const handleResponse = (data)=>{\r\n      console.log(data)\r\n    }\r\n    const handleResponseIsLoggedIn = (data) =>{\r\n     // handleGetFirstTreeNodes(data.data)\r\n\r\n     setOwnInfo(data.data)\r\n    }\r\n\r\n    const handleClickExpand=(event, nodeIds)=>{\r\n      if(nodeIds=== \"1\"){\r\n        handleGetFirstTreeNodes(ownInfo)\r\n      }\r\n      setSelected(nodeIds); \r\n   //console.log(nodeIds)\r\n    }\r\n\r\n    const handleGetFirstTreeNodes = (data) => {\r\n      let url = domainUrl ;\r\n      if(data.usertype === \"Admin\"){\r\n\r\n        url = url + 'Trees/GetUserViewTreeNode';\r\n      }\r\n      else\r\n      {\r\n        url = url + 'Trees/GetViewTreeNode';\r\n      }\r\n      var auth = localStorage.getItem('authorization');\r\n      \r\n      console.log(data)\r\n      var query = {  \r\n       \"UserName\": data.username,\r\n       \"Level\": 1 , \r\n     }\r\n \r\n     var query2 = JSON.stringify(query);\r\n     console.log(auth)\r\n     props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},(d)=>{\r\n       console.log(d);\r\n      setTheDownlines(d.data.downlines)}) ;  \r\n   };\r\n\r\n   const renderTree = (nodes) => ( \r\n     <StyledTreeItem key={nodes.userId} nodeId={`${nodes.userId}`} label={nodes.username +'- balance: ' + nodes.balanceNetworth }>\r\n      {Array.isArray(nodes.downlines) ? nodes.downlines.map((node) => renderTree(node)) : null}\r\n    </StyledTreeItem> \r\n  );\r\n\r\n   \r\n  useEffect(() => {\r\n    ReRenderTree();\r\n    \r\n},[theDownlines]);\r\n\r\n  const ReRenderTree = ()=>\r\n    {\r\n\r\n      return  <TreeView\r\n        className={classes.root} \r\n        defaultCollapseIcon={<MinusSquare />}\r\n        selected={selected}\r\n        defaultExpandIcon={<PlusSquare />}\r\n        defaultEndIcon={<CloseSquare />} \r\n        onNodeSelect={handleClickExpand} \r\n      >\r\n        <StyledTreeItem nodeId=\"1\" label={ownInfo.username}>\r\n        {\r\n          (theDownlines!== null) ? theDownlines.map( downline=>{\r\n       \r\n           return renderTree(downline)\r\n         }) : null\r\n        }\r\n        </StyledTreeItem>\r\n      </TreeView>\r\n    }\r\n  \r\n\r\n    const handleGetTreeNodes = event => {\r\n      let url = domainUrl ;\r\n     /* if(data.usertype === \"Admin\"){\r\n\r\n        url = url + 'Trees/GetUserViewTreeNode';\r\n      }\r\n      else\r\n      {\r\n        url = url + 'Trees/GetViewTreeNode';\r\n      }*/\r\n      var auth = localStorage.getItem('authorization');\r\n      var rate = parseInt(event.target.value)\r\n      var query = {  \r\n       \"UserName\": \"MYR/IDR\",\r\n       \"Level\": rate , \r\n     }\r\n \r\n     var query2 = JSON.stringify(query);\r\n     console.log(auth)\r\n     props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponse );  \r\n   };\r\n\r\n    return ReRenderTree()\r\n      \r\n  }\r\n\r\n  \r\n  UserTree.propTypes = {\r\n  className: PropTypes.string, \r\n};\r\n\r\n\r\nconst HocUserTree = (props) => {  \r\n   return (\r\n     \r\n <HttpPostServiceContextConsumer> \r\n     {({ httpPostContext,\r\n         setHttpPostContext,\r\n         postToServerWithHeader  })=>\r\n     (\r\n       \r\n      \r\n    <HttpGetServiceContextConsumer>\r\n    {({ \r\n            genericGetHttp  })=> \r\n        (\r\n        <React.Fragment> \r\n          <UserTree {...props}  postToServerWithHeader={postToServerWithHeader} genericGetHttp={genericGetHttp} sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext} />\r\n          </React.Fragment>\r\n        )\r\n      }\r\n      </HttpGetServiceContextConsumer>\r\n     )}\r\n </HttpPostServiceContextConsumer>\r\n   );\r\n }\r\n \r\n \r\n HocUserTree.propTypes = {\r\n  className: PropTypes.string,\r\n  postToServerWithHeader: PropTypes.func,\r\n  sethttppostcontext:  PropTypes.func,\r\n  httppostcontext:  PropTypes.any,\r\n};\r\n export default HocUserTree;\r\n\r\n\r\n /*  <StyledTreeItem nodeId=\"3\" label=\"Subtree with children\">\r\n            <StyledTreeItem nodeId=\"6\" label=\"Hello\" />\r\n            <StyledTreeItem nodeId=\"7\" label=\"Sub-subtree with children\">\r\n              <StyledTreeItem nodeId=\"9\" label=\"Child 1\" />\r\n              <StyledTreeItem nodeId=\"10\" label=\"Child 2\" />\r\n              <StyledTreeItem nodeId=\"11\" label=\"Child 3\" />\r\n            </StyledTreeItem>\r\n            <StyledTreeItem nodeId=\"8\" label=\"Hello\" />\r\n          </StyledTreeItem>\r\n          <StyledTreeItem nodeId=\"4\" label=\"World\" />\r\n          <StyledTreeItem nodeId=\"5\" label=\"Something something\" />\r\n          */","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {domainUrl} from '../../../constants';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Divider,\r\n  Grid,\r\n  Button,Modal,\r\n  TextField,\r\n  FormGroup,\r\n  FormControlLabel,\r\n  Switch\r\n} from '@material-ui/core';\r\nimport { HttpPostServiceContextConsumer } from '../../../contexts/HttpServiceContext';\r\n\r\nconst useStyles = makeStyles((theme )=> ({\r\n  root: {},\r\n  \r\n  paper: {\r\n    position: 'absolute',\r\n    width: 400,\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '2px solid #000',\r\n    boxShadow: theme.shadows[5],\r\n    padding: theme.spacing(2, 4, 3),\r\n  } \r\n}));\r\n\r\nfunction rand() {\r\n    return Math.round(Math.random() * 20) - 10;\r\n  }\r\n  \r\n  function getModalStyle() {\r\n    const top = 50 + rand();\r\n    const left = 50 + rand();\r\n  \r\n    return {\r\n      top: `${top}%`,\r\n      left: `${left}%`,\r\n      transform: `translate(-${top}%, -${left}%)`,\r\n      overflow:'auto'\r\n    };\r\n  }\r\n\r\nconst SearchUserforNetworth = props => {\r\n    const { className,posttoserverwithheader,   ...rest } = props;\r\n    \r\n  const [modalStyle] = React.useState(getModalStyle);\r\n    const classes = useStyles();  \r\n    const [values,setValues]=useState({\r\n        username: '',\r\n        networth: 0,\r\n        networthmode:'',\r\n    })\r\n    const [foundUser, setFoundUser] = useState(''); \r\n    \r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n\r\n    const modes = [{\r\n        id:'TOPUP',\r\n        modename:'Top Up'\r\n    },{\r\n        id:'DEDUCT',\r\n        modename:'Deduct'\r\n    }];\r\n\r\n    \r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    }); \r\n    \r\n  };\r\n\r\n  const handleSubmitTopUp = ()=>{\r\n      if(values.networthmode === 'TOPUP'){\r\n\r\n        const url = domainUrl + 'UserNetworths/TransferNetworth';\r\n        var auth = localStorage.getItem('authorization');\r\n        var query = {  \r\n          \"RecipientUsername\": foundUser, \r\n          \"Amount\": parseFloat(values.networth)\r\n         \r\n        }\r\n         \r\n        var query2 = JSON.stringify(query);\r\n        //console.log(query2)\r\n        posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, x=> renderResponseModal(x, 'Top up User Networth',x.data !== undefined && x.data !== \"\" ? 'Top Up user '+x.data+' successfully' : 'Top Up Failed')   );  \r\n      }\r\n      else if (values.networthmode === 'DEDUCT'){\r\n\r\n        const url = domainUrl + 'UserNetworths/DeductDownlineNetworth';\r\n        var auth = localStorage.getItem('authorization');\r\n        var query = {  \r\n          \"DownlineUsername\": foundUser, \r\n          \"Amount\": parseFloat(values.networth)\r\n         \r\n        }\r\n         \r\n        var query2 = JSON.stringify(query);\r\n        //console.log(query2)\r\n        posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, x=> renderResponseModal(x, 'Deduct User Networth',x.data === ''? 'Deduct Networth Fail' : 'Deduct Networth Successfully') );  \r\n      }\r\n  }\r\n\r\n  const handleSubmitSearch = ()=>{\r\n    const url = domainUrl + 'UserNetworths/GetUserWithNetworth';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"Username\": values.username, \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n    //console.log(query2)\r\n    posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},  x=> renderResponseModal(x, 'User Networth',x.data !== undefined && x.data !== \"\"? 'Search user '+x.data+' successfully' : 'Search Failed')  );  \r\n    }\r\n\r\n  \r\n    const handleClose = () => {\r\n        setOpen(false);\r\n      };\r\n    const renderResponseModal = (data, title, message)=>{\r\n        console.log(data) \r\n            if(message === '')\r\n           message = 'Search user '+data.data+' successfully'\r\n         setResponseTitle(title);\r\n         setResponseMessage(message);\r\n         setFoundUser(  data.data )\r\n         setOpen(true); \r\n    \r\n      }\r\nreturn (\r\n    <div>\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form\r\n        autoComplete=\"off\"\r\n        noValidate\r\n      >\r\n        <CardHeader\r\n          subheader=\"Topup / Deduct Networth\"\r\n          title=\"Topup or Deduct Networth \"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n        <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify username\"\r\n                label=\"Username\"\r\n                margin=\"dense\"\r\n                name=\"username\"\r\n                onChange={handleChange}\r\n                \r\n                value={values.username}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            > <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n            onClick={handleSubmitSearch}\r\n          >\r\n            Search\r\n          </Button> \r\n            </Grid>\r\n          </Grid>\r\n          \r\n        <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth \r\n                label=\"User\"\r\n                margin=\"dense\"\r\n                name=\"foundUser\"\r\n                onChange={handleChange}\r\n                required\r\n                disabled\r\n                value={foundUser}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={3}\r\n              xs={6}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify top up vaalue\"\r\n                label=\"Top Up Value\"\r\n                margin=\"dense\"\r\n                name=\"networth\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.networth}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n\r\n            <Grid\r\n              item\r\n              md={3}\r\n              xs={6}\r\n            >\r\n               <TextField\r\n                fullWidth\r\n                label=\"Select Mode\"\r\n                margin=\"dense\"\r\n                name=\"networthmode\"\r\n                onChange={handleChange}\r\n                required\r\n                select\r\n                // eslint-disable-next-line react/jsx-sort-props\r\n                SelectProps={{ native: true }}\r\n                value={values.networthmode}\r\n                variant=\"outlined\"\r\n              >\r\n                <option\r\n                    key={-1}\r\n                    value={'-1'}\r\n                  >\r\n                    {'Please Select.. '}\r\n                  </option>\r\n                {modes.map(option => (\r\n                  <option\r\n                    key={option.id}\r\n                    value={option.id}\r\n                  >\r\n                    {option.modename}\r\n                  </option>\r\n                ))}\r\n              </TextField>\r\n            </Grid>\r\n          </Grid>\r\n          </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n            onClick={handleSubmitTopUp}\r\n          >\r\n             Submit\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n     <Modal\r\n     open={open}\r\n     onClose={handleClose}\r\n     aria-labelledby=\"simple-modal-title\"\r\n     aria-describedby=\"simple-modal-description\"\r\n   >\r\n     <div style={modalStyle} className={classes.paper}>\r\n     <h2 id=\"simple-modal-title\">{responseTitle}</h2>\r\n     <p id=\"simple-modal-description\">\r\n       {responseMessage}\r\n     </p> \r\n     </div>\r\n   </Modal>\r\n   </div>\r\n);\r\n};\r\n\r\n\r\n\r\n\r\nSearchUserforNetworth.propTypes = {\r\n  className: PropTypes.string,\r\n  handleSubmitTopUp: PropTypes.func,  \r\n};\r\n\r\n\r\nconst HocNetworth= (props) => {  \r\n    return (\r\n      \r\n  <HttpPostServiceContextConsumer> \r\n      {({ httpPostContext,\r\n          setHttpPostContext,\r\n          postToServerWithHeader  })=>\r\n      (\r\n        <React.Fragment> \r\n          <SearchUserforNetworth {...props} posttoserverwithheader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></SearchUserforNetworth>\r\n         </React.Fragment>\r\n      )}\r\n  </HttpPostServiceContextConsumer>\r\n    );\r\n  }\r\n  \r\n  \r\n  HocNetworth.propTypes = {\r\n   className: PropTypes.string,\r\n   postToServer: PropTypes.func,\r\n   sethttppostcontext:  PropTypes.func,\r\n   httppostcontext:  PropTypes.any,\r\n  };\r\n  export default HocNetworth;\r\n ","import React, { useState, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { HttpPostService } from '../../services/HttpPostService';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport { makeStyles } from '@material-ui/styles'; \r\nimport InputAdornment from '@material-ui/core/InputAdornment'; \r\nimport axios from 'axios'; \r\nimport {   Redirect } from 'react-router-dom';\r\nimport qs from 'qs'; \r\nimport {receiptUrl, payDomain} from '../../constants';\r\nimport Image\r\n from 'material-ui-image'\r\n  \r\nimport { \r\n    Tabs, \r\n    InputLabel,\r\n    MenuItem,\r\n    Input, \r\n    Grid,\r\n    Button, \r\n    TextField,\r\n    RadioGroup,Col, \r\n    FormHelperText,\r\n    FormControl,\r\n    FormControlLabel,\r\n    Radio,\r\n    Select,\r\n    FormLabel,\r\n    Row,  \r\n    Upload,  \r\n    Card,\r\n    CardActions,\r\n    CardContent,\r\n    Avatar,\r\n    Checkbox,\r\n    Table,\r\n    TableBody,\r\n    TableCell,\r\n    TableHead,\r\n    TableRow,\r\n    Typography,\r\n    TablePagination\r\n} from '@material-ui/core' \r\nimport Backdrop from '@material-ui/core/Backdrop';\r\nimport CircularProgress from '@material-ui/core/CircularProgress'; \r\nimport Box from '@material-ui/core/Box';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n    root: {\r\n      padding: theme.spacing(3)\r\n    },\r\n    content: {\r\n      marginTop: theme.spacing(2)\r\n    },\r\n    imageSrc: {   \r\n        width:160,\r\n        backgroundRepeat: 'no-repeat',\r\n        right: 0,\r\n        top: 0,\r\n        bottom: 0, \r\n        backgroundPosition: 'right center',\r\n      },\r\n      backdrop: {\r\n        zIndex: theme.zIndex.drawer + 1,\r\n        color: '#fff',\r\n      },\r\n      formControl: {\r\n        margin: theme.spacing(1),\r\n        minWidth: 120,\r\n      },\r\n      selectEmpty: {\r\n        marginTop: theme.spacing(2),\r\n      },\r\n  }));\r\n\r\n  \r\nfunction CircularProgressWithLabel(props) {\r\n    return (\r\n      <Box position=\"relative\" display=\"inline-flex\">\r\n        <CircularProgress size=\"9rem\"   color=\"primary\" style={{color:'rgb(220, 0, 78)'}} variant=\"determinate\" {...props} />\r\n        <Box\r\n          top={0}\r\n          left={0}\r\n          bottom={0}\r\n          right={0}\r\n          position=\"absolute\"\r\n          display=\"flex\"\r\n          alignItems=\"center\"\r\n          justifyContent=\"center\"\r\n        >\r\n          <Typography variant=\"h4\" component=\"div\" color=\"textSecondary\" style={{color:'rgb(220, 0, 78)'}}>{`${Math.round(\r\n            props.value,\r\n          )}% Transaction in progress`}</Typography>\r\n        </Box>\r\n      </Box>\r\n    );\r\n  }\r\n  \r\n  CircularProgressWithLabel.propTypes = {\r\n    /**\r\n     * The value of the progress indicator for the determinate variant.\r\n     * Value between 0 and 100.\r\n     */\r\n    value: PropTypes.number.isRequired,\r\n  };\r\n   \r\nfunction getUrlParameter(name) {\r\n    name = name.replace(/[\\[]/, '\\\\[').replace(/[\\]]/, '\\\\]');\r\n    \r\n    const regex = new RegExp(`[\\\\?&]${name}\"=([^&#]*)`);  \r\n    // const s = new  URLSearchParams(window.location.hash)\r\n  // const s = `http://${str[1]}`;\r\n  // const url = new URL(s);\r\n  if(window.location.search !== null || window.location.search !== undefined){\r\n    const s1 = new  URLSearchParams(window.location.search) \r\n    console.log(window.location)\r\n     const results = s1.get(name);\r\n     return results === null ? '' : decodeURIComponent(results);\r\n  }\r\n  return '';\r\n  };\r\n  \r\n\r\n  let token = '';\r\n  let paymentAmount = 0.0;\r\n  let paymentDesc = '';\r\n  let mid = '';\r\n  token = decodeURIComponent(getUrlParameter('t'));\r\n  paymentAmount = getUrlParameter('pa');\r\n  paymentDesc = getUrlParameter('pd');\r\n  mid = getUrlParameter('mid');\r\n  console.log(token, paymentAmount, paymentDesc, mid)\r\nconst getBody = (thisquery, variables) => {\r\n    return {\r\n      OperationName: \"\",\r\n      query: thisquery,\r\n      Variables: variables\r\n    };\r\n  };\r\n \r\n  function RenderGrid (props) {\r\n      const arr = props.arr;\r\n    console.log('arr',arr);\r\n    \r\n   return arr.length > 0 ? arr.map(x=>{\r\n                \r\n                    return ( <Grid\r\n                        container\r\n                        justify=\"center\"\r\n                        alignItems=\"center\"\r\n                        spacing={4}\r\n                    >\r\n                        \r\n                {x.length > 0 ? x.map(y=>\r\n                         \r\n                     y): null}\r\n                        </Grid>)\r\n           \r\n            })\r\n            : null\r\n  }\r\n  \r\n  \r\n  \r\n  RenderGrid.propTypes = {\r\n    /**\r\n     * The value of the progress indicator for the determinate variant.\r\n     * Value between 0 and 100.\r\n     */\r\n    arr: PropTypes.array.isRequired,\r\n  };\r\n\r\n\r\n  function RenderSelect (props) {\r\n    const arr = props.arr; \r\n    const bankBanner = props.banner;\r\n    console.log('bankBanner',bankBanner);\r\n        return (<FormControl className={props.classes.formControl}>\r\n        <InputLabel shrink id=\"demo-simple-select-placeholder-label-label\">\r\n        Bank\r\n        </InputLabel>\r\n        <Select\r\n            labelId=\"demo-simple-select-placeholder-label-label\"\r\n            id=\"demo-simple-select-placeholder-label\"\r\n            value={props.bank}\r\n            onChange={props.handleBankChange}\r\n            displayEmpty\r\n            className={props.classes.selectEmpty}\r\n            >\r\n            <MenuItem value=\"\">\r\n                <em>Please Select Bank</em>\r\n            </MenuItem> \r\n\r\n            {arr.length > 0 ? arr[0]: null}\r\n         </Select>\r\n        <FormHelperText>{bankBanner}</FormHelperText>\r\n      </FormControl>)\r\n         \r\n          \r\n}\r\n\r\n  \r\nRenderSelect.propTypes = {\r\n    /**\r\n     * The value of the progress indicator for the determinate variant.\r\n     * Value between 0 and 100.\r\n     */\r\n    arr: PropTypes.array.isRequired,\r\n    banner: PropTypes.object.isRequired,\r\n    classes: PropTypes.object,\r\n    bank: PropTypes.string,\r\n    handleBankChange: PropTypes.func\r\n  };\r\n\r\nconst FPXPay = props => {\r\n    const {posttoserverwithheader} = props;\r\n    const classes = useStyles();\r\n    const [progress, setProgress] = React.useState(0);\r\n   \r\n    const [totalAmount, setTotalAmount] = useState(parseFloat(paymentAmount));\r\n    const [tok, setToken] = useState(token);\r\n    \r\n    const [exchangeNo, setExchangeNo] = React.useState('EX00011727');\r\n    const [sellerID, setSellerID] = React.useState('SE00013225');\r\n    const [merchantOrderId, setMerchantOrderId] = useState(mid);\r\n    const [fpxTransactionID, setFpxTransactionID] = useState('-');\r\n    const [fpxTransTime, setFpxTransactionTime] = useState('');\r\n    const [fpxTransCur, setFpxTransactionCurrency] = useState('');\r\n    const [buyer_email, setBuyerEmail] = useState('');\r\n    const [ARQueryString, setARQueryString] = useState('');\r\n    const [checkSum, setCheckSum] = useState('');\r\n    const [AECheckSum, setAECheckSum] = useState('');\r\n    const [BCcheckSum, setBCCheckSum] = useState('');\r\n    const [bank, setBank] = useState('');\r\n    const [prodDesc, setProdDesc] = useState(paymentDesc) \r\n    const [openBackdrop, setOpenBackdrop] = React.useState(false);\r\n    const [isApproved, setIsApproved] = React.useState(false);\r\n    const [openIBackdrop, setOpenIBackdrop] = React.useState(false);\r\n    const [checkedTerms, setCheckTerms] = React.useState(false);\r\n    const [btnEnabled, setBtnEnabled] = React.useState(false);\r\n    const [startQuery, setStartQuery] = React.useState(false);\r\n    const[activeBankList, setActiveBankList] = useState([])\r\n    const[allBankList, setAllBankList] = useState([])\r\n    const[inactiveBankList, setInActiveBankList] = useState([])\r\n    const [bankBanner, setBankBanner] = useState(null);\r\n    const [counter, setCounter] = useState(0);\r\n    const [renderedBank,setRenderedBank] = useState([]);\r\n    const [retailbankList] = useState(['ABB0233','ABMB0212','AMBB0209','BCBB0235','BIMB0340','BKRM0602','BMMB0341','BSN0601','HLB0224','HSBC0223','KFH0346','MB2U0227','OCBC0229','PBB0233','RHB0218','SCB0216','UOB0226','CIT0219','AGRO01','TEST0021','TEST0022','TEST0023','ABB0234','MBB0228']);\r\n    const [retailbankListName] = useState(['Affin Bank','Alliance Bank (Personal)','AmBank','CIMB Clicks','Bank Islam','Bank Rakyat','Bank Muamalat ','BSN','Hong Leong Bank ','HSBC Bank','KFH','Maybank2U','OCBC Bank','Public Bank','RHB Bank','Standard Chartered','UOB Bank','Citibank','AGRONet','SBI Bank A','SBI Bank B','SBI Bank C','Affin B2C - Test ID','Maybank2E']);\r\n    const [commercialbankList] = useState(['ABB0232','ABMB0213','AMBB0208','BCBB0235','BIMB0340','BKRM0602','BMMB0342','BSN0601','HLB0224','HSBC0223','KFH0346','MBB0228','OCBC0229','PBB0234','RHB0218','SCB0215','UOB0228','CIT0218','AGRO02','TEST0021','TEST0022','TEST0023']);\r\n    \r\n    const handleCloseBackdrop = () => {\r\n        setOpenBackdrop(false);\r\n        return true;\r\n    };\r\n    \r\nuseEffect(() => {\r\n    fillInBankList(activeBankList,inactiveBankList );\r\n}, [activeBankList, inactiveBankList]);\r\n\r\nuseEffect(() => {\r\n    handleQueryAE(AECheckSum); \r\n    console.log(checkSum)\r\n}, [AECheckSum]);\r\n\r\n \r\n\r\nuseEffect(() => {\r\n   \r\n    \r\n    const url =  `${payDomain}omniql`; \r\n    const query = `query{verifytransaction( token:\"${token}\",  productDesc:\"${prodDesc}\", mid:\"${mid}\",fpxTransCur:\"MYR\",messageType:\"AR\",messageToken:\"01\",transAmount:${totalAmount}  ) {  status,sellerTransTime, transactionCurrency ,sellerExchangeOrderNo,sellerExchangeId,sellerID,transactionAmount}}`;\r\n   \r\n\r\n   var query2 = JSON.stringify(getBody(query,{}));\r\n   console.log(query2)\r\n   async function fd(e){ e(url,query2, {'Content-Type':'application/json' },handleVerifyResponse)};\r\n   \r\n   fd(posttoserverwithheader);\r\n   \r\n   queryBESign();\r\n  }, []);\r\n\r\n\r\n  const handleVerifyResponse =(data)=>{\r\n    console.log(data)\r\n    if(data.data){\r\n        if(data.data.data.verifytransaction.status === 'PENDING'){\r\n            var transTime = data.data.data.verifytransaction.sellerTransTime;\r\n            var dt = new Date(transTime);\r\n           var transactionAmount = data.data.data.verifytransaction.transactionAmount;\r\n            var dtFormat = [dt.getFullYear() + ('0' + (dt.getMonth() + 1)).slice(-2) + ('0' + dt.getDate()).slice(-2)+('0' + dt.getHours()).slice(-2)+('0' + dt.getMinutes()).slice(-2)+('0' + dt.getSeconds()).slice(-2)].join(''); \r\n            \r\n            var cur = data.data.data.verifytransaction.transactionCurrency;\r\n            var sellID = data.data.data.verifytransaction.sellerID;\r\n            var sxid = data.data.data.verifytransaction.sellerExchangeId;\r\n            setFpxTransactionTime(dtFormat);\r\n            setTotalAmount(parseFloat(transactionAmount));\r\n            setFpxTransactionCurrency('MYR');\r\n            setSellerID(sellID)\r\n            setExchangeNo(sxid)\r\n        }\r\n        else{\r\n            setOpenIBackdrop(true);\r\n            return <Redirect to='/not-found'></Redirect>\r\n        }\r\n    } \r\n  }\r\n\r\n   \r\n  const queryBESign = ()=>{\r\n      \r\n    const url =  `${payDomain}omniql`; \r\n    const query = `query{getbankchecksum( token:\"${token}\", messageToken:\"01\",  messageType:\"BE\", sellerExchangeId:\"${exchangeNo}\") {  message, success}}`;\r\n   \r\n\r\n   var query2 = JSON.stringify(getBody(query,{})); \r\n   async function fd(e){ e(url,query2, {'Content-Type':'application/json' },handleBCResponse)};\r\n   \r\n   fd(posttoserverwithheader);\r\n  }\r\n\r\n  \r\n  const handleBCResponse =(data)=>{\r\n    console.log(data)\r\n    if(data.data){\r\n        if(data.data.data.getbankchecksum.success){\r\n            setBCCheckSum(data.data.data.getbankchecksum.message);\r\n            console.log(data.data.data.getbankchecksum.message);\r\n            queryFPXBC(data.data.data.getbankchecksum.message);\r\n        }\r\n    }\r\n  }\r\n\r\n  const queryFPXBC = (bcchecksum)=>{\r\n    const url = 'https://uat.mepsfpx.com.my/FPXMain/RetrieveBankList';\r\n    const _headers = {\r\n        headers: { \r\n          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',\r\n          //'Access-Control-Allow-Origin':'*'\r\n        }\r\n    }\r\n\r\n    if(bcchecksum === '' ){\r\n        console.log('Message not signed. Contact administrator');\r\n        return;\r\n    }\r\n\r\n    const dat = qs.stringify({\r\n        fpx_msgType: 'BE',\r\n        fpx_msgToken: '01',\r\n        fpx_sellerExId: exchangeNo, \r\n        fpx_version:'7.0',\r\n        fpx_checkSum:bcchecksum\r\n    });\r\n    \r\n    axios.post(url, dat, _headers.headers).then(x=>{  \r\n      //  const s1 = new  URLSearchParams(x.data) \r\n      //  console.log(s1.get('fpx_bankList'))\r\n      if(x.data !== 'ERROR'){\r\n        const qsObj = qs.parse(x.data);\r\n        console.log(qsObj)\r\n        const banksStr = qsObj.fpx_bankList;\r\n        const banks = banksStr.split(',');\r\n        let activeB = [];\r\n        let allBank = [];\r\n        let inactiveB = [];\r\n        banks.map(x=>{\r\n            \r\n            const bb = x.split('~')\r\n            if(bb.length > 0)\r\n            if(bb[1] === 'A'){\r\n                activeB.push(bb[0]);\r\n            }\r\n            else{\r\n                inactiveB.push(bb[0])\r\n            }\r\n            allBank.push(bb[0])\r\n        });\r\n        setActiveBankList(activeB);\r\n        setAllBankList(allBank);\r\n        setInActiveBankList(inactiveB);\r\n        console.log(activeB)\r\n        console.log(inactiveB)\r\n      }\r\n    });\r\n  }\r\n\r\n  \r\n\r\n  const handleSigned =(data)=>{\r\n    console.log(data.data)\r\n    const _headers = {\r\n        headers: { \r\n          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'\r\n        }\r\n      }\r\n\r\n    if(data.data){\r\n        console.log(data.data.data.updatetransactioninfo)\r\n        if(data.data.data.updatetransactioninfo.success ){\r\n            var checkSum2 = data.data.data.updatetransactioninfo.message;\r\n            const url= 'https://uat.mepsfpx.com.my/FPXMain/seller2DReceiver.jsp';\r\n            /*var formData = new FormData();\r\n            formData.append('fpx_msgType', 'AR');\r\n            formData.append('fpx_msgToken', '01');\r\n            formData.append('fpx_sellerExId', exchangeNo);\r\n            formData.append('fpx_sellerExOrderNo', mid);\r\n            formData.append('fpx_sellerTxnTime', fpxTransTime);\r\n            formData.append('fpx_sellerOrderNo', mid);\r\n            formData.append('fpx_sellerId', sellerID);\r\n            formData.append('fpx_sellerBankCode', '01');\r\n            formData.append('fpx_txnCurrency', fpxTransCur);\r\n            formData.append('fpx_txnAmount', totalAmount.toFixed(2));\r\n            formData.append('fpx_buyerEmail', buyer_email);\r\n            formData.append('fpx_checkSum', checkSum2);\r\n            formData.append('fpx_buyerName', '');\r\n            formData.append('fpx_buyerBankId', 'TEST0021');\r\n            formData.append('fpx_buyerBankBranch', '');\r\n            formData.append('fpx_buyerAccNo', '');\r\n            formData.append('fpx_buyerId', '');\r\n            formData.append('fpx_makerName', '');\r\n            formData.append('fpx_buyerIban', '');\r\n            formData.append('fpx_productDesc', prodDesc);\r\n            formData.append('fpx_version', '7.0');\r\n            formData.append('checkSum_String', checkSum2);*/\r\n            const dat = qs.stringify({\r\n                fpx_msgType: 'AR',\r\n                fpx_msgToken: '01',\r\n                fpx_sellerExId: exchangeNo,\r\n                fpx_sellerExOrderNo: mid,\r\n                fpx_sellerTxnTime: fpxTransTime,\r\n                fpx_sellerOrderNo: mid,\r\n                fpx_sellerId: sellerID,\r\n                fpx_sellerBankCode: '01',\r\n                fpx_txnCurrency: fpxTransCur,\r\n                fpx_txnAmount: totalAmount.toFixed(2),\r\n                fpx_buyerEmail: buyer_email,\r\n                fpx_checkSum: checkSum2,\r\n                fpx_buyerName: '',\r\n                fpx_buyerBankId: bank,\r\n                fpx_buyerBankBranch: '',\r\n                fpx_buyerAccNo: '',\r\n                fpx_buyerId: '',\r\n                fpx_makerName: '',\r\n                fpx_buyerIban: '',\r\n                fpx_productDesc: prodDesc,\r\n                fpx_version: '7.0',\r\n                checkSum_String: checkSum2\r\n            });\r\n            \r\n            \r\n    async function fd(e, checksum, datStr){ \r\n\r\n        setARQueryString(datStr);\r\n        setCheckSum(checksum);\r\n        queryAEChecksum();\r\n        e(url,dat,_headers.headers,handleSignedResponse)\r\n        };\r\n    \r\n   fd(posttoserverwithheader,checkSum2, dat);\r\n    \r\n        }\r\n        \r\n    } \r\n  }\r\n\r\n  const handleSignedResponse =(x)=>{ \r\n      console.log(x)\r\n        var winName = '_self'; \r\n        var winRef = window.open('', winName);\r\n        winRef.document.open();\r\n        winRef.document.write(x.data);\r\n        winRef.document.close(); \r\n  }\r\n  \r\n    const handleTermsChange = () =>{ \r\n        setCheckTerms(!checkedTerms)\r\n    }\r\n\r\n    const handleEmailChange = value =>{\r\n        console.log(value.target.value);\r\n    setBuyerEmail(value.target.value)\r\n    }\r\n\r\n    const handleToggleClose = () => {\r\n        window.close();\r\n    }\r\n    const handleToggleBackdrop = () => {\r\n        setStartQuery(true);\r\n        setOpenBackdrop(!openBackdrop);\r\n        onFinish();\r\n      };\r\n    \r\n    const [merchantName, setMerchantName] = useState('INFINITY SUCCESS SOLUTIONS SDN BHD (1180021-V)');\r\n\r\n    const styleRow = { background: '#eee', padding: '8px 5', marginRight:20, width:160};\r\n\r\n    const onFinish =()=>{\r\n        console.log('ONFINISH')\r\n        const url =  `${payDomain}omniql`; \r\n    const query = `query{updatetransactioninfo( token:\"${token}\", buyerName:\"\", productDesc:\"${prodDesc}\",fpxTransCur:\"MYR\",messageType:\"AR\",messageToken:\"01\",transAmount:${totalAmount},orderNo:\"${mid}\", email:\"${buyer_email}\", bankCode:\"${bank}\", exchangeId:\"${exchangeNo}\", sellerId:\"${sellerID}\",  ) {  success, message }}`;\r\n   \r\n\r\n   var query2 = JSON.stringify(getBody(query));\r\n   console.log(query2)\r\n   return posttoserverwithheader(url,query2, {'Content-Type':'application/json' },handleSigned)\r\n\r\n    }\r\n\r\n    const onFinishFailed =()=>{\r\n\r\n    } \r\n\r\n    const returnProgress = (prog) =>{\r\n        return prog + 0.4\r\n    }\r\n\r\n    \r\n\r\n    const queryAEChecksum=()=>{\r\n        const url =  `${payDomain}omniql`; \r\n        const query = `query{getaechecksum( token:\"${token}\", buyerName:\"carnegiea\",  productDesc:\"${prodDesc}\",fpxTransCur:\"MYR\",messageType:\"AE\",messageToken:\"01\",transAmount:${totalAmount},orderNo:\"${mid}\", email:\"${buyer_email}\", bankCode:\"${bank}\", exchangeId:\"${exchangeNo}\", sellerId:\"${sellerID}\",  ) {  success, message }}`;\r\n       \r\n   var query2 = JSON.stringify(getBody(query));\r\n    async function fd(e ){ \r\n \r\n        e(url,query2, {'Content-Type':'application/json' },handleReturnAEChecksum)\r\n        };\r\n    \r\n   fd(posttoserverwithheader);\r\n    \r\n \r\n    }\r\n\r\n    const handleReturnAEChecksum = (data)=>{\r\n        console.log(data)\r\n        if(data.data){\r\n            if(data.data.data.getaechecksum.success){\r\n                setAECheckSum(data.data.data.getaechecksum.message);\r\n            }\r\n        }\r\n    }\r\n\r\n    \r\n  const queryACSign = (aeres)=>{\r\n      \r\n    const url =  `${payDomain}omniql`; \r\n    const query = `query{verifyac( token:\"${token}\", fpx_msgToken:\"01\",email:\"${buyer_email}\"  messageType:\"AC\",fpxTransCur:\"MYR\",transAmount:${totalAmount},  fpx_debitAuthCode:\"${aeres.get('fpx_debitAuthCode')}\",  fpx_debitAuthNo:\"${aeres.get('fpx_debitAuthNo')}\",  fpx_sellerExId:\"${aeres.get('fpx_sellerExId')}\",  fpx_creditAuthNo:\"${aeres.get('fpx_creditAuthNo')}\",  fpx_buyerName:\"${aeres.get('fpx_buyerName')}\",  fpx_buyerId:\"${aeres.get('fpx_buyerId')}\",  fpx_sellerTxnTime:\"${aeres.get('fpx_sellerTxnTime')}\",  fpx_sellerExOrderNo:\"${aeres.get('fpx_sellerExOrderNo')}\",  fpx_makerName:\"${aeres.get('fpx_makerName')}\",  fpx_buyerBankBranch:\"${aeres.get('fpx_buyerBankBranch')}\",  fpx_buyerBankId:\"${aeres.get('fpx_buyerBankId')}\",  fpx_creditAuthCode:\"${aeres.get('fpx_creditAuthCode')}\",  fpx_sellerId:\"${aeres.get('fpx_sellerId')}\",  fpx_fpxTxnTime:\"${aeres.get('fpx_fpxTxnTime')}\",  fpx_buyerIban:\"${aeres.get('fpx_buyerIban')}\",  fpx_sellerOrderNo:\"${aeres.get('fpx_sellerOrderNo')}\",  fpx_fpxTxnId:\"${aeres.get('fpx_fpxTxnId')}\",  fpx_checkSum:\"${aeres.get('fpx_checkSum')}\") {  status, transactionChecksum}}`;\r\n   \r\n\r\n   var query2 = JSON.stringify(getBody(query,{})); \r\n   async function fd(e){ e(url,query2, {'Content-Type':'application/json' },e=> handleACResponse(e, aeres))};\r\n   \r\n   fd(posttoserverwithheader);\r\n  }\r\n\r\n  const handleACResponse = (data, aeres)=>{\r\n      if(data.data){\r\n          if(data.data.data.verifyac){\r\n            setStartQuery(false);\r\n            console.log(data.data.data);\r\n              if(data.data.data.verifyac.status === 'SUCCESS'){\r\n                    console.log('Successfully verified');\r\n                    var winRef = window.open(`./receipt?t=${encodeURIComponent(token)}&type=${aeres.get('fpx_msgType')}&cs=${aeres.get('fpx_checkSum')}&total=${aeres.get('fpx_txnAmount')}&tid=${aeres.get('fpx_fpxTxnId')}&soid=${aeres.get('fpx_sellerOrderNo')}`, \"_self\");\r\n                  \r\n              }\r\n          }\r\n      }\r\n  }\r\n    const handleQueryAE=(checksum)=>{ \r\n        console.log('handleQueryAE',checksum)\r\n        if(startQuery ){\r\n            const url= 'https://uat.mepsfpx.com.my/FPXMain/sellerNVPTxnStatus.jsp';\r\n            const _headers = {\r\n                headers: { \r\n                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'\r\n                }\r\n              }\r\n              \r\n              const dat = qs.stringify({\r\n                fpx_msgType: 'AE',\r\n                fpx_msgToken: '01',\r\n                fpx_sellerExId: exchangeNo,\r\n                fpx_sellerExOrderNo: mid,\r\n                fpx_sellerTxnTime: fpxTransTime,\r\n                fpx_sellerOrderNo: mid,\r\n                fpx_sellerId: sellerID,\r\n                fpx_sellerBankCode: '01',\r\n                fpx_txnCurrency: fpxTransCur,\r\n                fpx_txnAmount: totalAmount.toFixed(2),\r\n                fpx_buyerEmail: buyer_email,\r\n                fpx_checkSum: checksum,\r\n                fpx_buyerName: 'carnegiea',\r\n                fpx_buyerBankId: bank,\r\n                fpx_buyerBankBranch: '',\r\n                fpx_buyerAccNo: '',\r\n                fpx_buyerId: '',\r\n                fpx_makerName: '',\r\n                fpx_buyerIban: '',\r\n                fpx_productDesc: prodDesc,\r\n                fpx_version: '7.0',\r\n                checkSum_String: checksum\r\n            });\r\n            async function fd(e,query, _headers ){ \r\n \r\n                e(url,query,_headers.headers,handleAEResponse)\r\n                };\r\n            \r\n           fd(posttoserverwithheader,dat, _headers);\r\n \r\n        }\r\n       \r\n    }\r\n\r\n    const handleAEResponse=(data)=>{\r\n        console.log(data);\r\n        if(data.data){\r\n            var urlParams = new URLSearchParams(data.data);\r\n           // var  d =JSON.parse(data.data);\r\n            console.log(urlParams)\r\n            var debitauth = urlParams.get('fpx_debitAuthCode');\r\n            if(debitauth === '00'){\r\n                queryACSign(urlParams);\r\n            }\r\n            \r\n        }\r\n    }\r\n\r\n    React.useEffect(() => {\r\n        if(startQuery){\r\n\r\n            const timer = setInterval(() => {\r\n                setProgress((prevProgress) => \r\n                (prevProgress >= 100 ? handleCloseBackdrop() : returnProgress(prevProgress))\r\n                );\r\n              }, 1000); \r\n              \r\n            const timer2 = setInterval(() => \r\n            {\r\n                startQuery? handleQueryAE(AECheckSum): clearInterval(timer2)\r\n            }\r\n                , 8000); \r\n              return () => {\r\n                clearInterval(timer);\r\n                clearInterval(timer2);\r\n              };\r\n        }\r\n       \r\n      }, [startQuery,AECheckSum]);\r\n\r\n      const bankBan = (name,classes)=>{\r\n          return  <div \r\n            style={{\r\n                width:120,\r\n                height:40,\r\n                backgroundImage: `url(./resources/images/${name}_01.png)`, \r\n                backgroundRepeat: 'no-repeat',\r\n                right: 0,\r\n                top: 0,\r\n                bottom: 0, \r\n                backgroundPosition: 'right center',\r\n            }}\r\n        ><img src={`./resources/images/${name}_01.png`}></img></div>\r\n      }\r\n\r\n    const onChange =event =>{\r\n        console.log(event.target.value)\r\n        setBank(event.target.value);\r\n        setBtnEnabled(true);\r\n    } \r\n\r\n    const handleBankChange=(e,classes) =>{\r\n        \r\n\r\n        if(e.target.value !== '')\r\n        {\r\n            setBankBanner(bankBan(e.target.value, classes));\r\n            setBank(e.target.value);\r\n            setBtnEnabled(true);\r\n        }\r\n    }\r\n \r\n    const renderMenuItems = (arr, inactArr)=>{\r\n        let bb = [];\r\n        \r\n        const sortedList = Object.assign([], retailbankListName); \r\n        sortedList.sort((a,b)=>{\r\n            var aa = a.toUpperCase();\r\n            var bb = b.toUpperCase();\r\n            if (aa < bb) {\r\n                return -1; //nameA comes first\r\n              }\r\n              if (aa > bb) {\r\n                return 1; // nameB comes first\r\n              }\r\n              return 0;\r\n        })\r\n        var newBankList = [];\r\n        for(var i in sortedList){\r\n            //console.log(retailbankList[retailbankListName.indexOf(sortedList[i])],retailbankListName.indexOf(sortedList[i]) ,retailbankListName[retailbankListName.indexOf(sortedList[i])], sortedList[i]);\r\n            newBankList.push(retailbankList[retailbankListName.indexOf(sortedList[i])])\r\n        }\r\n        //console.log(sortedList, newBankList);\r\n        \r\n\r\n        newBankList.map (x=>{\r\n            if(arr.indexOf(x) !== -1)\r\n            bb.push(<MenuItem value={x}>{sortedList[newBankList.indexOf(x)]}</MenuItem>) \r\n            if(inactArr.indexOf(x) !== -1)\r\n            bb.push(<MenuItem value={x}>{`${sortedList[newBankList.indexOf(x)]} (Offline)`} </MenuItem>)\r\n       }) \r\n       return bb;\r\n    }\r\n    const renderSelectObj = (obj, inactiveObj) =>{\r\n        return  renderMenuItems(obj,inactiveObj).map(x=>{ return x})\r\n            \r\n    }\r\n\r\n    const fillInBankList = (active, inactive)=>{ \r\n        let l = [];\r\n        console.log(active)\r\n        console.log(inactive)\r\n         if(active.length > 0){   l.push(renderSelectObj(active, inactive))}\r\n         \r\n        setRenderedBank(l);\r\n    }\r\n\r\n    const renderAll =(ab)=>{ \r\n        let bb  = [];\r\n        let childs = [];\r\n        for(var i =0; i< ab.length; i++){ \r\n            if(i % 3 ===0 && i !== 0){\r\n                if(childs.length > 0)\r\n                    bb.push(childs)\r\n                childs = [];\r\n                childs.push(renderRows(ab, i));  \r\n            }\r\n            else{\r\n                \r\n                childs.push(renderRows(ab, i)); \r\n            }\r\n \r\n        } \r\n        setRenderedBank(bb); \r\n    }\r\n\r\n    \r\n    const renderRows =(ab, thiscounter)=>{\r\n      console.log(inactiveBankList)\r\n            return   retailbankList.includes(ab[thiscounter]) && activeBankList.includes(ab[thiscounter]) ? \r\n                                                <Grid\r\n                                                    item\r\n                                                    lg={3}\r\n                                                    md={3}\r\n                                                    xl={3}\r\n                                                    xs={3}\r\n                                                    >\r\n                                                    <div style={styleRow}> \r\n                                                        <FormControlLabel value={ab[thiscounter]} control={  \r\n                                                            <span\r\n                                                            className={classes.imageSrc} \r\n                                                            style={{\r\n                                                            backgroundImage: `url(resources/images/${ab[thiscounter]}_01.png)`,  \r\n                                                            }}\r\n                                                        ><Radio value={ab[thiscounter]} >\r\n                                                                \r\n                                                            </Radio></span> } label=\"\" >\r\n                                                                \r\n                                                                \r\n                                                        </FormControlLabel>\r\n                                                \r\n                                                    </div> \r\n                                                </Grid>\r\n                                                :\r\n                                                /*retailbankList.includes(ab[thiscounter]) &&  inactiveBankList.includes(ab[thiscounter]) ?\r\n                                                <Grid\r\n                                                    item\r\n                                                    lg={3}\r\n                                                    md={3}\r\n                                                    xl={3}\r\n                                                    xs={3}\r\n                                                    >\r\n                                                        <div style={styleRow}> \r\n                                                    <FormControlLabel value={ab[thiscounter]} control={  \r\n                                                    <span\r\n                                                    className={classes.imageSrc} \r\n                                                    style={{\r\n                                                        backgroundImage: `url(resources/images/${ab[thiscounter]}_01.png)`,  \r\n                                                    }}\r\n                                                    ><Radio value={ab[thiscounter]} >\r\n                                                            \r\n                                                        </Radio></span> } label=\"(Offline)\" >\r\n                                                            \r\n                                                            \r\n                                                    </FormControlLabel>\r\n                                                        </div> \r\n                                                </Grid>\r\n                                                :*/ <Grid\r\n                                                item\r\n                                                lg={3}\r\n                                                md={3}\r\n                                                xl={3}\r\n                                                xs={3}\r\n                                                >\r\n                                                    <div style={styleRow}> \r\n                                                <FormControlLabel value={ab[thiscounter]} control={  \r\n                                                <span\r\n                                                className={classes.imageSrc} \r\n                                                style={{\r\n                                                    backgroundImage: `url(resources/images/${ab[thiscounter]}_01.png)`,  \r\n                                                }}\r\n                                                ><Radio value={ab[thiscounter]} disabled >\r\n                                                        \r\n                                                    </Radio></span> } label=\"(Offline)\" >\r\n                                                        \r\n                                                        \r\n                                                </FormControlLabel>\r\n                                                    </div> \r\n                                            </Grid>\r\n       \r\n        \r\n    }\r\n\r\n    // <span className=\"pager-align pager_img nav nav-pills pull-right\"></span>\r\n\r\n    return (\r\n        \r\n<div className=\"container\" style={{margin:\"0 auto\", alignContent:'center', alignItems:'center',width:800}}>\r\n<div>\r\n      <Backdrop className={classes.backdrop} open={openBackdrop} >\r\n      <CircularProgressWithLabel value={progress} />\r\n      </Backdrop>\r\n      \r\n      <Backdrop className={classes.backdrop} open={openIBackdrop} >\r\n        Invalid\r\n      </Backdrop>\r\n    </div>\r\n    <div className=\"header\">\r\n        <span className=\"banner_img banner-alignment img-responsive\" title={`Merchant Name: ${merchantName}`} >\r\n        <img src='./images/logos/fpx_banner.png'/>\r\n        </span>\r\n    </div>\r\n   \r\n    <form\r\n                \r\n    layout=\"vertical\"\r\n        \r\n    \r\n    onSubmit={onFinish} \r\n    className=\"mb-4\"  \r\n    >  \r\n\t\t<Input type=\"hidden\" name=\"winstatus\" value=\"2\" />\r\n\t\t\r\n\t\t<div className=\"panel panel-default\">\r\n\t\t\t<div className=\"panel-heading\">\r\n\t\t\t\t<h3 className=\"panel-title\"><strong>Payment Details</strong></h3>\r\n\t\t\t</div>\r\n\t\t\t\r\n\t\t\t<div className=\"panel-body\">\t\r\n                <table className=\"table table-striped\">\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>Merchant Name</td>\r\n                            <td>{merchantName}</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>Merchant Order No</td>\r\n                            <td>{merchantOrderId}</td>\r\n                        </tr>\r\n                        <tr>\r\n                            <td>FPX Transaction ID</td>\r\n                            <td>{fpxTransactionID}</td>\r\n                        </tr>\r\n                        <tr>\t\t\t\t\t\r\n                            <td>Product Description</td>\r\n                            <td>{prodDesc}</td>\r\n                        </tr>\r\n                        <tr>\t\t\t\t\t\r\n                            <td>Amount</td>\r\n                            <td>{totalAmount.toFixed(2)}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\t\t\t\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div className=\"panel panel-default\"> \r\n            <div className=\"panel-body\">\t\r\n                <table className=\"table table-striped\">\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>Bank</td>\r\n                            <td><RenderSelect arr={renderedBank} banner={bankBanner} classes={classes} handleBankChange={e=> handleBankChange(e, classes)} bank={bank}/></td>\r\n                        </tr> \r\n                    </tbody>\r\n                </table>\t\t\t\r\n\t\t\t</div> \r\n\t\t</div>\r\n\r\n\t\t<div className=\"panel panel-default\">\r\n\t\t\t<div className=\"panel-heading\">\r\n                \r\n\t\t\t\t<div id=\"emailDiv\" className=\"input-group has-error\">\r\n                    \r\n\t\t\t\t\t<span className=\"input-group-addon\" style={{color:'#fff' }}>\t\t\t\t\r\n\t\t\t\t\t\t\r\n                    <TextField\r\n                        fullWidth\r\n                        helperText=\"Please specify your email\"\r\n                        label=\"Email\"\r\n                        margin=\"dense\"\r\n                        name=\"buyer_email\"\r\n                        onChange={handleEmailChange}\r\n                        required  \r\n                        InputProps={{\r\n                            startAdornment: (\r\n                              <InputAdornment position=\"start\">\r\n                                <span className=\"glyphicon glyphicon-envelope\" aria-hidden=\"true\"></span>\r\n                              </InputAdornment>\r\n                            ),\r\n                          }}\r\n                        value={buyer_email}\r\n                        variant=\"outlined\"\r\n                    />\r\n\t\t\t\t\t</span>\t\r\n\t\t\t\t\t\r\n\t\t\t\t</div>\t\t\t\t\r\n\t\t\t\t<span id=\"alertBlock\" className=\"text-danger\"></span>\r\n\t\t\t</div>\r\n\t\t</div>\t\t\r\n\r\n\r\n\t\t\r\n\t\t<div className=\"panel panel-default\">\r\n\t\t\t<div className=\"panel-heading\">\r\n                <h3 className=\"panel-title\">\r\n                <FormControlLabel\r\n                    control={\r\n                    <Checkbox\r\n                        checked={checkedTerms}\r\n                        onChange={handleTermsChange}\r\n                        name=\"checkedTerms\"\r\n                        color=\"primary\"\r\n                    />\r\n                    }\r\n                    label=\" I agree with the \"\r\n                />\r\n                <a href=\"https://www.mepsfpx.com.my/FPXMain/termsAndConditions.jsp\" target='_blank'> FPX's Terms and Conditions</a>\r\n                 \r\n                </h3>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"panel-body\">\r\n                <p>\t\t\t\r\n                </p>\r\n                <h4>\t\r\n                    <em>\r\n                        <small>\t\t\t\t\r\n                            <ul>\r\n                                <li>\r\n                                    Please disable your pop-up blocker. For more information, please <a href=\"https://support.google.com/chrome/answer/95472?co=GENIE.Platform%3DDesktop&amp;hl=en\"  target=\"_blank\"> click here</a>\r\n                                </li>\r\n                                <li>\r\n                                    On some browser, you may see the Transaction Response displayed in two&nbsp;(2) tabs. This will not affect your transaction. For more information, please <a href=\"http://www.myclear.org.my/personal-fpx.html\" target=\"_blank\"> click here </a>\r\n                                </li>\r\n                                <li>\r\n                                    For FPX operation hour, please <a href='https://www.mepsfpx.com.my/FPXMain/Html/faq.html' target=\"_blank\"> click here </a>\r\n                                </li>\r\n                                <li>\r\n                                    Please do not click on browser&apos;s back button, refresh or close this page.\r\n                                </li>\r\n                            </ul>\r\n                        </small>\r\n                    </em>\r\n                </h4>\r\n\t\t\t</div>\t\r\n\t\t</div> \r\n            <span data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"Please select a bank to continue\">\r\n                \r\n                <Button variant=\"outlined\" color=\"primary\" className=\"btn btn-primary\" onSubmit={onFinish} onClick={handleToggleBackdrop} disabled={!btnEnabled} >\r\n                    Agree and Continue\r\n                </Button>\r\n               \r\n            </span> \r\n                <Button variant=\"outlined\" color=\"primary\" className=\"btn btn-primary\"  onClick={handleToggleClose} >\r\n                    Back\r\n                </Button>\r\n              \r\n\t\t\t<span className=\"pull-right\">\r\n                <span className=\"verisign_img footerimg-align img-responsive\" title=\"Click to Verify - This site chose VeriSign SSL for secure e-commerce and confidential communications.\" style={{cursor: \"pointer\"}}/* onClick=\"openVerisign();\" */>\r\n\r\n                </span>\r\n                <span className=\"myclogo_img footerfpximg-align img-responsive\" title=\"Click to go  MyClear home Page\" style={{cursor: \"pointer\"}}/* onClick=\"openMEPS()\" */>\r\n\r\n                </span>\r\n\t\t\t</span> \r\n\t\t\r\n\t\t<div id=\"footer\">\r\n            <div className=\"footer\">\r\n                <h6>\r\n                    \r\n                </h6>\r\n            </div>\t\r\n\t\t</div>\r\n    </form>\r\n</div>\r\n    )\r\n}\r\nconst HOCFpxPay =() =>{\r\n    return ( \r\n            <HttpPostServiceContextConsumer> \r\n                {({ \r\n                    postToServerWithHeader  })=>\r\n                (\r\n                    \r\n                        <FPXPay posttoserverwithheader ={postToServerWithHeader}/>\r\n                    \r\n            \r\n            )}\r\n        </HttpPostServiceContextConsumer> \r\n    );\r\n\r\n    }\r\n   \r\n\r\n  \r\nconst HOCFpxMain  = () => {\r\n    return (\r\n        \r\n    <HttpPostService    > \r\n        <HOCFpxPay /> \r\n    </HttpPostService>\r\n    );\r\n  } \r\n\r\n  \r\nexport default HOCFpxMain;\r\n\r\n /*  \r\n \r\n\t\t<Input type=\"hidden\" name=\"fpx_token\" value=\"3JK2WUNNA0A9915687LNWA8J74O1I85H\" />\r\n\t\t<Input type=\"hidden\" name=\"errcode\" value=\"TXN_BUYER_CANCEL\" />\r\n\t\t<Input type=\"hidden\" name=\"buyer_id\" value=\"defaultMail@mailDomain.com\" />\r\n\t\t<Input type=\"hidden\" name=\"ssval1\" value=\"Q6Fxf7zLclVt5hTk5MgNT4ysyG1ntTf112sTFLL6wxBYjkc2Gsk0!-123819762!-340395063!1606103816607\" />\r\n\t\t<Input type=\"hidden\" name=\"bankinfo\" value=\"****\" />\r\n\t\t<Input type=\"hidden\" id=\"XYZ\" name=\"XYZ2\" value=\"****\" />\r\n\t\r\n\t\t<Input type=\"hidden\" name=\"as_fid\" value=\"1afd9c2fea63f9e7169cda86caf386de48523304\" /> \r\n <Input type=\"button\" id=\"btnSubmit\"  value=\"Agree and Continue\" style={{cursor:\"pointer\"}} onClick=\"return ok();\" onkeydown=\"return blockEnter(event)\"  /> \r\n <Input id=\"email_txt\" name=\"email_txt\" title=\"Please enter your email address\"maxlength=\"50\" placeholder=\"Email\" value=\"\" type=\"email\" />\r\n */\r\n    /*\r\n\t\t<div className=\"panel panel-default\">\r\n\t\t\t<div className=\"panel-heading\">\r\n\t\t\t\tEnter E-Mail address here to receive transaction status <small><em>(optional)</em></small>\r\n\t\t\t\t<input type=\"text\" id=\"email_txt\"  name=\"email_txt\" value='' maxlength=\"40\" size=\"25\" />\r\n\t\t\t</div>\r\n        </div>\r\n        \r\n\r\n\r\n        <p className=\"text-center\"> |&nbsp;<a style=\"cursor: pointer;\" onClick=\"showpage('faq')\">FAQ</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"showpage('join')\">Merchant Program</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"showpage('contact')\">Contact Us</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"showpage('popup')\">Pop-up Blocker Settings</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"javascript:window.open('t_and_c_link.jsp', 'cont', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no,titlebar=no, width=550, height=500');\">Terms and Conditions</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"showpage('privacy')\">Privacy Policy</a>&nbsp;|&nbsp;<a style=\"cursor: pointer;\" onClick=\"javascript:window.open('disclaimer.jsp', 'cont', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no,titlebar=no, width=550, height=500');\">Disclaimer</a>&nbsp;|</p>\r\n\t\t<p className=\"text-center\">Malaysian Electronic Clearing Corporation Sdn Bhd 836743-D | <a target=\"_blank\" href=\"http://www.myclear.org.my/\"> http://www.myclear.org.my </a></p>\r\n\t\t<p className=\"text-center\">© Malaysian Electronic Clearing Corporation Sdn Bhd . All Rights Reserved.</p>\r\n\t\t<p className=\"text-center\">FPX V5.0</p>\r\n\t*/\r\n\r\n    /*\r\n<div className=\"panel panel-default\">\r\n\t\t\t<div className=\"panel-heading\">\r\n\t\t\t\t<h3 className=\"panel-title\"><strong>Corporate Banking</strong></h3>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"panel-body\">\t\r\n\t\t\t\t<div className=\"row\">\t\r\n\t\t\t\t\r\n                    <div className=\"col-sm-6 col-md-4 col-lg-4\">\r\n                        <p>\r\n                        </p>\r\n                        <div className=\"input-group\">\r\n\r\n                            <span className=\"input-group-addon\">\t\t\t\t\t\t\t\t\t\t\t\t\r\n                                <Radio value='MBB0228'>\r\n                                    <Image width={120}\r\n                                    height={39}\r\n                                        src=\"resources/images/MBB0228_01.png\"\r\n                                        />\r\n                                </Radio> \r\n                            </span>\t\r\n\r\n                        </div>\r\n                        <p></p>\r\n                    </div>\t\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\t\t\r\n\r\n        \r\n                    activeBankList.map ( x=> {\r\n \r\n                        <Grid\r\n                        container\r\n                        justify=\"center\"\r\n                        alignItems=\"center\"\r\n                        spacing={4}\r\n                        > \r\n                             \r\n                            bankList.includes(x) ? \r\n                                <Grid\r\n                                    item\r\n                                    lg={3}\r\n                                    md={3}\r\n                                    xl={3}\r\n                                    xs={3}\r\n                                    >\r\n                                        <div style={styleRow}>\r\n                                                \r\n                                            <FormControlLabel value={x} control={  \r\n                                                <span\r\n                                                className={classes.imageSrc} \r\n                                                style={{\r\n                                                backgroundImage: `url(resources/images/${x}_01.png)`,  \r\n                                                }}\r\n                                            ><Radio value={x} >\r\n                                                    \r\n                                                </Radio></span> } label=\"\" >\r\n                                                    \r\n                                                    \r\n                                            </FormControlLabel>\r\n                                    \r\n                                        </div>\r\n                                    </Grid>\r\n                                    :\r\n                                    <Grid\r\n                                    item\r\n                                    lg={3}\r\n                                    md={3}\r\n                                    xl={3}\r\n                                    xs={3}\r\n                                    >\r\n                                        <div style={styleRow}>\r\n                                    <FormControlLabel value={x} control={  \r\n                                    <span\r\n                                    className={classes.imageSrc} \r\n                                    style={{\r\n                                        backgroundImage: `url(resources/images/${x}_01.png)`,  \r\n                                    }}\r\n                                    ><Radio value={x+ ' (Offline)'} >\r\n                                            \r\n                                        </Radio></span> } label=\"\" >\r\n                                            \r\n                                            \r\n                                    </FormControlLabel>\r\n                                        </div>\r\n                                    </Grid>\r\n                                    </Grid>\r\n                                    :\r\n\r\n                    })\r\n                            \r\n\r\n              \r\n                            \r\n                         \r\n                 <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                        <FormControlLabel value=\"ABMB0212\" control={ \r\n                        <span\r\n                         className={classes.imageSrc} \r\n                         style={{\r\n                           backgroundImage: `url(resources/images/ABMB0212_01.png)`,  \r\n                         }}\r\n                       > <Radio value='ABMB0212'>\r\n                                </Radio>\r\n                                </span>} label=\"\" /> \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                        <FormControlLabel value=\"AMBB0209\" control={\r\n                            <span\r\n                            className={classes.imageSrc} \r\n                            style={{\r\n                              backgroundImage: `url(resources/images/AMBB0209_01.png)`,  \r\n                            }}\r\n                          >\r\n                            <Radio value='AMBB0209'/></span>} label=\"\" /> \r\n                             \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n                <Grid\r\n                container\r\n                justify=\"center\"\r\n                alignItems=\"center\"\r\n                spacing={4}\r\n                > \r\n                \r\n                <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"BCBB0235\" control={\r\n                            <span\r\n                            className={classes.imageSrc} \r\n                            style={{\r\n                              backgroundImage: `url(resources/images/BCBB0235_01.png)`,  \r\n                            }}\r\n                          >\r\n                               <Radio value='BCBB0235'>\r\n                                    \r\n                                </Radio>\r\n                                </span>} label=\"\" /> \r\n                         \r\n                        </div>\r\n                    </Grid >\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"BIMB0340\" control={ \r\n                            <span\r\n                                className={classes.imageSrc} \r\n                                style={{\r\n                                backgroundImage: `url(resources/images/BIMB0340_01.png)`,  \r\n                                }}\r\n                            >\r\n                           <Radio value='BIMB0340'>\r\n                                    \r\n                                </Radio>\r\n                                </span>} label=\"\" /> \r\n                          \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"BKRM0602\" control={ <span\r\n                                className={classes.imageSrc} \r\n                                style={{\r\n                                backgroundImage: `url(resources/images/BKRM0602_01.png)`,  \r\n                                }}\r\n                            >\r\n                                <Radio value='BKRM0602'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>\r\n                                } label=\"\" /> \r\n                              \r\n                             \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n                <Grid\r\n                container\r\n                justify=\"center\"\r\n                alignItems=\"center\"\r\n                spacing={4}\r\n                > \r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"BMMB0341\" control={ \r\n                            <span\r\n                                className={classes.imageSrc} \r\n                                style={{\r\n                                backgroundImage: `url(resources/images/BMMB0341_01.png)`,  \r\n                                }}\r\n                            >\r\n                            <Radio value='BMMB0341'>\r\n\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                             \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"BSN0601\" control={ <span\r\n                                className={classes.imageSrc} \r\n                                style={{\r\n                                backgroundImage: `url(resources/images/BSN0601_01.png)`,  \r\n                                }}\r\n                            > <Radio value='BSN0601'>\r\n                                         \r\n                                    </Radio>\r\n                                </span>} label=\"\" /> \r\n                             \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"HLB0224\" control={ \r\n                            <span\r\n                            className={classes.imageSrc} \r\n                            style={{\r\n                            backgroundImage: `url(resources/images/HLB0224_01.png)`,  \r\n                            }}\r\n                        > \r\n                        <Radio value='HLB0224'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                             \r\n                             \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n                <Grid\r\n                container\r\n                justify=\"center\"\r\n                alignItems=\"center\"\r\n                spacing={4}\r\n                > \r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"HSBC0223\" control={ \r\n                            <span\r\n                            className={classes.imageSrc} \r\n                            style={{\r\n                            backgroundImage: `url(resources/images/HSBC0223_01.png)`,  \r\n                            }}\r\n                        > \r\n                        <Radio value='HSBC0223'> \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                             \r\n                             \r\n                            \r\n                         \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            <FormControlLabel value=\"KFH0346\" control={ \r\n                             <span\r\n                             className={classes.imageSrc} \r\n                             style={{\r\n                             backgroundImage: `url(resources/images/KFH0346_01.png)`,  \r\n                             }}\r\n                         > \r\n                         <Radio value='KFH0346'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                              \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"MB2U0227\" control={\r\n                             <span\r\n                             className={classes.imageSrc} \r\n                             style={{\r\n                             backgroundImage: `url(resources/images/MB2U0227_01.png)`,  \r\n                             }}\r\n                         > \r\n                          <Radio value='MB2U0227'>\r\n                                         \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                               \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n                <Grid\r\n            justify=\"center\"\r\n            alignItems=\"center\"\r\n                container\r\n                spacing={4}\r\n                > \r\n                   \r\n                   <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            \r\n                        <FormControlLabel value=\"OCBC0229\" control={ \r\n                        <span\r\n                             className={classes.imageSrc} \r\n                             style={{\r\n                             backgroundImage: `url(resources/images/OCBC0229_01.png)`,  \r\n                             }}\r\n                         > \r\n                         <Radio value='OCBC0229'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                                \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"PBB0233\" control={ \r\n                             <span\r\n                             className={classes.imageSrc} \r\n                             style={{\r\n                             backgroundImage: `url(resources/images/PBB0233_01.png)`,  \r\n                             }}\r\n                         > \r\n                         <Radio value='PBB0233'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                                 \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"RHB0218\" control={ \r\n                         <span\r\n                         className={classes.imageSrc} \r\n                         style={{\r\n                         backgroundImage: `url(resources/images/RHB0218_01.png)`,  \r\n                         }}\r\n                     > \r\n                     <Radio value='RHB0218'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                                  \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n                <Grid\r\n                container\r\n                justify=\"center\"\r\n                alignItems=\"center\"\r\n                spacing={4}\r\n                > \r\n                   <Grid\r\n                    item\r\n                    lg={3}\r\n                    md={3}\r\n                    xl={3}\r\n                    xs={3}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                            \r\n                        <FormControlLabel value=\"SCB0216\" control={ \r\n                        <span\r\n                         className={classes.imageSrc} \r\n                         style={{\r\n                         backgroundImage: `url(resources/images/SCB0216_01.png)`,  \r\n                         }}\r\n                     > \r\n                     <Radio value='SCB0216'> \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                                   \r\n                        </div>\r\n                    </Grid>\r\n                    <Grid\r\n                    item\r\n                    lg={6}\r\n                    md={6}\r\n                    xl={6}\r\n                    xs={6}\r\n                    >\r\n                        <div style={styleRow}>\r\n                            \r\n                        <FormControlLabel value=\"UOB0226\" control={ \r\n                        <span\r\n                        className={classes.imageSrc} \r\n                        style={{\r\n                        backgroundImage: `url(resources/images/UOB0226_01.png)`,  \r\n                        }}\r\n                    > \r\n                    <Radio value='UOB0226'>\r\n                                        \r\n                                    </Radio>\r\n                                    </span>} label=\"\" /> \r\n                                    \r\n                        </div>\r\n                    </Grid>\r\n                </Grid>\r\n            </Grid>\r\n\r\n    */\r\n\r\n/*\r\n\r\n <RadioGroup aria-label=\"Select Bank\" name=\"bank\" value={bank} onChange={onChange}>\r\n      \r\n        <div className=\"panel panel-default\">\r\n            <div className=\"panel-heading\">\r\n\r\n                <h3 className=\"panel-title\"><strong>Retail Banking</ strong></h3>\r\n\r\n            </div>\r\n            <RenderGrid arr={renderedBank} />\r\n                \r\n        </div>\r\n\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n        </RadioGroup>\r\n        */","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { MdCancel as DeleteIcon } from 'react-icons/md'\r\nimport styles from './LineItem.module.scss'\r\n\r\n\r\nclass LineItem extends Component {\r\n\r\n  render = () => {\r\n\r\n    const { index, name, description, quantity, price } = this.props\r\n\r\n    return (\r\n      <div className={styles.lineItem}>\r\n        <div>{index + 1}</div>\r\n        <div><input name=\"name\" type=\"text\" disabled value={name} /*onChange={this.props.changeHandler(index)}*/ /></div>\r\n        <div><input name=\"description\" type=\"text\" disabled value={description} /*onChange={this.props.changeHandler(index)}*/ /></div>\r\n        <div><input name=\"quantity\" type=\"number\" disabled step=\"1\" value={quantity} /*onChange={this.props.changeHandler(index)}*/ /*onFocus={this.props.focusHandler}/* /></div>\r\n        <div className={styles.currency}><input name=\"price\" type=\"number\" step=\"0.01\" min=\"0.00\" max=\"9999999.99\" value={price} /*onChange={this.props.changeHandler(index)}*/ /*onFocus={this.props.focusHandler}*/ /></div>\r\n        <div className={styles.currency}>{this.props.currencyFormatter(  price )}</div>\r\n        <div className={styles.currency}>{this.props.currencyFormatter( quantity * price )}</div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n\r\nexport default LineItem\r\n\r\nLineItem.propTypes = {\r\n  index: PropTypes.number.isRequired,\r\n  name: PropTypes.string,\r\n  description: PropTypes.string,\r\n  quantity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n  price: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n}\r\n/*\r\n <div>\r\n          <button type=\"button\"\r\n            className={styles.deleteItem}\r\n            onClick={this.props.deleteHandler(index)}\r\n          ><DeleteIcon size=\"1.25em\" /></button>\r\n        </div>\r\n        */\r\n\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'\r\n\r\nimport LineItem from './LineItem'\r\n\r\nimport { MdAddCircle as AddIcon } from 'react-icons/md'\r\nimport styles from './LineItems.module.scss'\r\n\r\n\r\nclass LineItems extends Component {\r\n\r\n  handleDragEnd = (result) => {\r\n\r\n    if (!result.destination) return\r\n\r\n    // helper function to reorder result (src: react-beautiful-dnd docs)\r\n    const reorder = (list, startIndex, endIndex) => {\r\n      const result = Array.from(list)\r\n      const [removed] = result.splice(startIndex, 1)\r\n      result.splice(endIndex, 0, removed)\r\n      return result\r\n    }\r\n\r\n    // perform reorder\r\n    const lineItems = reorder(\r\n      this.props.items,\r\n      result.source.index,\r\n      result.destination.index\r\n    )\r\n\r\n    // call parent handler with new state representation\r\n    this.props.reorderHandler(lineItems)\r\n\r\n  }\r\n\r\n  componentDidMount( )   {\r\n    console.log(this.props.items)\r\n  }\r\n  render = () => {\r\n\r\n    const {items, addHandler, reorderHandler,currencyFormatter} = this.props\r\n\r\n    return (\r\n      <form>\r\n\r\n        <div className={styles.lineItems}>\r\n          <div className={`${styles.gridTable}`}>\r\n\r\n            <div className={`${styles.row} ${styles.header}`}>\r\n              <div>#</div>\r\n              <div>Item</div>\r\n              <div>Description</div>\r\n              <div>Qty</div>\r\n              <div>Price</div>\r\n              <div>Total</div>\r\n              <div></div>\r\n            </div>\r\n\r\n            <DragDropContext onDragEnd={this.handleDragEnd}>\r\n              <Droppable droppableId=\"droppable\">\r\n                {(provided, snapshot) => (\r\n                  <div\r\n                    ref={provided.innerRef}\r\n                    className={snapshot.isDraggingOver ? styles.listDraggingOver : ''}\r\n                  >\r\n                    {this.props.items.map((item, i) => (\r\n                      <Draggable key={item.id} draggableId={item.id} index={i}>\r\n                        {(provided, snapshot) => (\r\n                          <div\r\n                            ref={provided.innerRef}\r\n                            {...provided.draggableProps}\r\n                            {...provided.dragHandleProps}\r\n                            style={provided.draggableProps.style}\r\n                            className={snapshot.isDragging ? styles.listItemDragging : ''}\r\n                          >\r\n                            <LineItem\r\n                              style={{color: 'red'}}\r\n                              key={i + item.id} index={i} name={item.name}\r\n                              description={item.description} quantity={item.quantity} price={item.price} \r\n                              currencyFormatter={currencyFormatter}\r\n                            />\r\n                          </div>\r\n                        )}\r\n                      </Draggable>\r\n                    ))}\r\n                    {provided.placeholder}\r\n                  </div>\r\n                )}\r\n            </Droppable>\r\n          </DragDropContext>\r\n\r\n          </div>\r\n\r\n         \r\n\r\n        </div>\r\n      </form>\r\n\r\n    )\r\n  }\r\n}\r\n\r\nexport default LineItems\r\n\r\nLineItems.propTypes = {\r\n  items: PropTypes.array.isRequired,\r\n  currencyFormatter: PropTypes.func.isRequired,\r\n  addHandler: PropTypes.func,\r\n  changeHandler: PropTypes.func,\r\n  focusHandler: PropTypes.func,\r\n  deleteHandler: PropTypes.func,\r\n  reorderHandler: PropTypes.func,\r\n}\r\n\r\n\r\n/*\r\n\r\n <div className={styles.addItem}>\r\n            <button type=\"button\" ><AddIcon size=\"1.25em\" className={styles.addIcon} /> Add Item</button>\r\n          </div>\r\n\r\n          */","import React, { Component } from 'react'\r\nimport styles from './Invoice.module.scss'\r\n\r\nimport LineItems from './LineItems'\r\nimport { HttpPostService } from '../../../services/HttpPostService';\r\nimport { HttpPostServiceContextConsumer } from '../../../contexts/HttpServiceContext';\r\n\r\nimport uuidv4 from 'uuid/v4'\r\nimport {receiptUrl, payDomain} from '../../../constants';\r\n\r\n\r\nfunction getUrlParameter(name) {\r\n  name = name.replace(/[\\[]/, '\\\\[').replace(/[\\]]/, '\\\\]');\r\n  \r\n  const regex = new RegExp(`[\\\\?&]${name}\"=([^&#]*)`);  \r\n  // const s = new  URLSearchParams(window.location.hash)\r\n// const s = `http://${str[1]}`;\r\n// const url = new URL(s);\r\nif(window.location.search !== null || window.location.search !== undefined){\r\n  const s1 = new  URLSearchParams(window.location.search)  \r\n   const results = s1.get(name);\r\n   return results === null ? '' : decodeURIComponent(results);\r\n}\r\nreturn '';\r\n};\r\n\r\nconst getBody = (thisquery, variables) => {\r\n  return {\r\n    OperationName: \"\",\r\n    query: thisquery,\r\n    Variables: variables\r\n  };\r\n};\r\n\r\n//let token = decodeURIComponent(getUrlParameter('t'));\r\nlet tid = decodeURIComponent(getUrlParameter('tid'));\r\nlet sellerOrderID = decodeURIComponent(getUrlParameter('soid'));\r\nlet checksum =decodeURIComponent(getUrlParameter('cs')); \r\nlet total =decodeURIComponent(getUrlParameter('total')); \r\nlet type =decodeURIComponent(getUrlParameter('type')); \r\nvar today = new Date();\r\nvar date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();\r\nvar time = today.getHours() + \":\" + today.getMinutes() + \":\" + today.getSeconds();\r\nclass Invoice extends Component  {\r\n\r\n  locale = 'en-US'\r\n  currency = 'USD'\r\n\r\n  state = {\r\n    taxRate: 0.00,\r\n    lineItems: [],\r\n    transId: '',\r\n    receiptDate: '',\r\n    sellerOrderID:'',\r\n    bankBranch:'',\r\n    status:'',\r\n\r\n      /*{\r\n        id: 'initial',      // react-beautiful-dnd unique key\r\n        name: '',\r\n        description: '',\r\n        quantity: 0,\r\n        price: 0.00,\r\n      },*/ \r\n  }\r\n \r\n  componentDidMount( )   {\r\n    console.log(this.props.posttoserverwithheader)\r\n    const url =  `${payDomain}omniql`; \r\n    const query = `query{ getreceipt(type:\"${type}\", soid:\"${sellerOrderID}\",tid:\"${tid}\",checksum:\"${checksum}\"  ,total:${total}) { items{item,quantity,unitprice,description}, receiptDate, receiptId, sellerOrderID, taxamount, taxrate, totalprice,bankBranch, status,fpxId}}`;\r\n   \r\n\r\n   var query2 = JSON.stringify(getBody(query,{})); \r\n   let that = this;\r\n   async function fd(e){ e(url,query2, {'Content-Type':'application/json' },that.handleReceiptResponse)};\r\n   \r\n   fd(this.props.posttoserverwithheader);\r\n   \r\n\r\n} ;\r\n\r\n\r\n  handleReceiptResponse =(data)=>{\r\n  console.log(data)\r\n  if(data.data){\r\n    if(data.data.data.getreceipt){\r\n      var ret =  data.data.data.getreceipt ;\r\n      var li = this.state.lineItems;\r\n\r\n      var count = 1;\r\n      for(var i in ret.items){\r\n        console.log(i)\r\n       var it = {\r\n          id: count + \"\",      \r\n          name: ret.items[i].item,\r\n          description: decodeURIComponent( ret.items[i].description),\r\n          quantity: ret.items[i].quantity,\r\n          price: ret.items[i].unitprice,\r\n        }\r\n        console.log(it)\r\n        li.push(it);\r\n        count++;\r\n      }\r\n\r\n      this.setState({\r\n        lineItems:li,\r\n        transId: ret.fpxId,\r\n        receiptDate: new Date(ret.receiptDate),\r\n        sellerOrderID: ret.sellerOrderID,\r\n        bankBranch: ret.bankBranch,\r\n        status: ret.status\r\n      })\r\n    console.log(ret);\r\n    }\r\n  }\r\n}\r\n\r\n  handleInvoiceChange = (event) => {\r\n    this.setState({[event.target.name]: event.target.value})\r\n  }\r\n\r\n  handleLineItemChange = (elementIndex) => (event) => {\r\n    let lineItems = this.state.lineItems.map((item, i) => {\r\n      if (elementIndex !== i) return item\r\n      return {...item, [event.target.name]: event.target.value}\r\n    })\r\n    this.setState({lineItems})\r\n  }\r\n\r\n  handleAddLineItem = (event) => {\r\n    this.setState({\r\n      // use optimistic uuid for drag drop; in a production app this could be a database id\r\n      lineItems: this.state.lineItems.concat(\r\n        [{ id: uuidv4(), name: '', description: '', quantity: 0, price: 0.00 }]\r\n      )\r\n    })\r\n  }\r\n\r\n  handleRemoveLineItem = (elementIndex) => (event) => {\r\n    this.setState({\r\n      lineItems: this.state.lineItems.filter((item, i) => {\r\n        return elementIndex !== i\r\n      })\r\n    })\r\n  }\r\n\r\n  handleReorderLineItems = (newLineItems) => {\r\n    this.setState({\r\n      lineItems: newLineItems,\r\n    })\r\n  }\r\n\r\n  handleFocusSelect = (event) => {\r\n    event.target.select()\r\n  }\r\n\r\n  handlePayButtonClick = () => {\r\n    alert('Not implemented')\r\n  }\r\n\r\n  formatCurrency = (amount) => {\r\n    return (new Intl.NumberFormat(this.locale, {\r\n      style: 'currency',\r\n      currency: this.currency,\r\n      minimumFractionDigits: 2,\r\n      maximumFractionDigits: 2\r\n    }).format(amount))\r\n  }\r\n\r\n  calcTaxAmount = (c) => {\r\n    return c * (this.state.taxRate / 100)\r\n  }\r\n\r\n  calcLineItemsTotal = () => {\r\n    return this.state.lineItems.reduce((prev, cur) => (prev + (cur.quantity * cur.price)), 0)\r\n  }\r\n\r\n  calcTaxTotal = () => {\r\n    return this.calcLineItemsTotal() * (this.state.taxRate / 100)\r\n  }\r\n\r\n  calcGrandTotal = () => {\r\n    return this.calcLineItemsTotal() + this.calcTaxTotal()\r\n  }\r\n\r\n  render = () => {\r\n    return (\r\n\r\n      <div className={styles.invoice}>\r\n        <div className={styles.brand}>\r\n          <img src=\"http://infinityss.com.my/wp-content/uploads/2021/02/ISS.jpg\" alt=\"Logo\" className={styles.logo} />\r\n        </div>\r\n        <div className={styles.addresses}>\r\n          <div className={styles.from}>\r\n            <strong>Infinity Success Solutions Sdn Bhd</strong><br />\r\n              No 27, Jalan 7/40,<br />\r\n              Taman Pusat Kepong, 53300, Kuala Lumpur <br />\r\n              +603-6252 5188\r\n          </div>\r\n          <div>\r\n            <div className={`${styles.valueTable} ${styles.to}`}>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>FPX Transaction ID #</div>\r\n                <div className={styles.value}>{this.state.transId}</div>\r\n              </div>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Receipt #</div>\r\n                <div className={styles.value}>{this.state.sellerOrderID}</div>\r\n              </div>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Date</div>\r\n                <div className={`${styles.value} ${styles.date}`}>{`${this.state.receiptDate}`}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <h2>Receipt</h2>\r\n\r\n          <LineItems\r\n            items={this.state.lineItems}\r\n            currencyFormatter={this.formatCurrency}\r\n            reorderHandler={this.handleReorderLineItems}\r\n            /*addHandler={this.handleAddLineItem}\r\n            changeHandler={this.handleLineItemChange}\r\n            focusHandler={this.handleFocusSelect}\r\n            deleteHandler={this.handleRemoveLineItem}\r\n            */\r\n          />\r\n\r\n        <div className={styles.totalContainer}>\r\n          <form>\r\n            <div className={styles.valueTable}>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Bank</div>\r\n                <div className={styles.value}>{this.state.bankBranch}</div>\r\n              </div>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Status</div>\r\n                <div className={styles.value}>{this.state.status}</div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <form>\r\n            <div className={styles.valueTable}>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Subtotal</div>\r\n                <div className={`${styles.value} ${styles.currency}`}>{this.formatCurrency(this.calcLineItemsTotal())}</div>\r\n              </div>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Tax ({this.state.taxRate}%)</div>\r\n                <div className={`${styles.value} ${styles.currency}`}>{this.formatCurrency(this.calcTaxTotal())}</div>\r\n              </div>\r\n              <div className={styles.row}>\r\n                <div className={styles.label}>Total Payment</div>\r\n                <div className={`${styles.value} ${styles.currency}`}>{this.formatCurrency(this.calcGrandTotal())}</div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n\r\n        <div className={styles.pay}>\r\n          Payment Status: <span className={styles.payNow}></span>\r\n        </div>\r\n\r\n        <div className={styles.footer}>\r\n          <div className={styles.comments}>\r\n            <h4>Notes</h4>\r\n            <p>This receipt is computer generated <b>No Signature Required</b>.</p>\r\n            <p></p>\r\n          </div>\r\n          <div className={styles.closing}>\r\n            <div>Thank-you for your business</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n    )\r\n  }\r\n\r\n}\r\n\r\n\r\nconst HOCInvoice =() =>{\r\n  return ( \r\n          <HttpPostServiceContextConsumer> \r\n              {({ \r\n                  postToServerWithHeader  })=>\r\n              (\r\n                  \r\n                      <Invoice posttoserverwithheader ={postToServerWithHeader}/>\r\n                  \r\n          \r\n          )}\r\n      </HttpPostServiceContextConsumer> \r\n  );\r\n\r\n  }\r\n \r\nconst HOCReceiptMain  = () => {\r\n  return (\r\n      \r\n  <HttpPostService    > \r\n      <HOCInvoice /> \r\n  </HttpPostService>\r\n  );\r\n} \r\n\r\n\r\nexport default HOCReceiptMain\r\n\r\n\r\n//<input name=\"taxRate\" type=\"number\" step=\"0.01\" value={this.state.taxRate} onChange={this.handleInvoiceChange} onFocus={this.handleFocusSelect} />","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardHeader,\r\n  CardContent,\r\n  CardActions,\r\n  Divider,\r\n  Grid,\r\n  Button,\r\n  TextField,\r\n  FormGroup,\r\n  FormControlLabel,\r\n  Switch,\r\n  Modal\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles(() => ({\r\n  root: {}\r\n}));\r\n\r\nconst OrderEx = props => {\r\n  const { className,handleSubmitOrder, handleGetBanks,handleGetRates, obtainRate,banks, ...rest } = props;\r\n\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [dialogOpen, setDialogOpen] = React.useState(false);\r\n  const classes = useStyles(); \r\n  const [values, setValues] = useState({\r\n    recipient_contact: '010', \r\n    bank_name: 'BNI',\r\n    bank_account: '12345',\r\n    bank_fee_idr:  6000,\r\n    my_fee_myr: 5,\r\n    my_amount:0,\r\n    my_rate_idr: 2300,\r\n    my_obtainedrate_idr: 2300,\r\n    my_obtainedexpress: 2300,\r\n    is_express: false, \r\n    sender_phone: '',\r\n    rate_earning: 0,\r\n    fee_earning: 0,\r\n    my_total:0,\r\n    my_total_idr:0,\r\n  });\r\n \r\n  useEffect(() => {\r\n    if(obtainRate){\r\n      setValues({...values, \r\n        my_obtainedexpress: obtainRate.obtainedExpressFee,\r\n        my_obtainedrate_idr: obtainRate.obtainedRate,\r\n        bank_fee_idr: obtainRate.obtainedBankFee*obtainRate.obtainedRate, \r\n        fee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0), \r\n        my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee), \r\n        my_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\n    });\r\n    }\r\n    \r\n},[obtainRate]);\r\n\r\nuseEffect(() => {\r\n  \r\n\r\n\r\n  if(obtainRate){\r\n    setValues({...values, \r\n      my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee) ,\r\nmy_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\nfee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0) ,  \r\n    \r\n  });\r\n  }\r\n  \r\n},[values.my_fee_myr,values.my_rate_idr,values.my_amount]);\r\n\r\n  const handleSubmitNewOrder=()=>{\r\n    handleSubmitOrder(values);\r\n    handleDialogClose();\r\n  }\r\n\r\n  const handleChangeSwitch= event => {\r\n    setValues({ \r\n      ...values,\r\n      is_express: event.target.checked\r\n    });\r\n  };\r\n \r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n    if(event.target.name == 'bank_name'){ \r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseInt(event.target.value)\r\n      });\r\n      handleGetRates(parseInt(event.target.value))\r\n    } \r\n    if(event.target.name == 'my_fee_myr' || event.target.name == 'my_amount' || event.target.name == 'my_rate_idr'){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    if(event.target.name == 'my_amount'){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    console.log(event.target.name,event.target.value )\r\n    \r\n  };\r\n  \r\n  \r\n  const handleDialogClose = () => {\r\n    setDialogOpen(false);\r\n  };\r\n \r\n  const popUpOrderConfirmation =()=>{\r\n    \r\n    setResponseTitle('Place Order');\r\n    setResponseMessage('Do you want to place this order?');\r\n    setDialogOpen(true);\r\n  }\r\n  return (\r\n    \r\n    <React.Fragment>\r\n    <Modal\r\n    open={dialogOpen}\r\n    onClose={handleDialogClose}\r\n    aria-labelledby=\"simple-modal-title\"\r\n    aria-describedby=\"simple-modal-description\"\r\n  >\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form\r\n        autoComplete=\"off\"\r\n        noValidate\r\n      >\r\n        <CardHeader\r\n          subheader=\"\"\r\n          title={responseTitle}\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n       \r\n    <p id=\"simple-modal-description\">  {responseMessage}</p> \r\n    </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n            onClick={x=> handleSubmitNewOrder()}\r\n          >\r\n            Place New Order \r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n  </Modal>\r\n\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <form\r\n        autoComplete=\"off\"\r\n        noValidate\r\n      >\r\n        <CardHeader\r\n          subheader=\"Place new order\"\r\n          title=\"Place Order\"\r\n        />\r\n        <Divider />\r\n        <CardContent>\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                helperText=\"Please specify recipient contact\"\r\n                label=\"Recipient Contact\"\r\n                margin=\"dense\"\r\n                name=\"recipient_contact\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.recipient_contact}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Select Bank\"\r\n                margin=\"dense\"\r\n                name=\"bank_name\"\r\n                onChange={handleChange}\r\n                required\r\n                select\r\n                // eslint-disable-next-line react/jsx-sort-props\r\n                SelectProps={{ native: true }}\r\n                value={values.bank_name}\r\n                variant=\"outlined\"\r\n              >\r\n                <option\r\n                    key={-1}\r\n                    value={'-1'}\r\n                  >\r\n                    {'Please Select.. '}\r\n                  </option>\r\n                {banks.map(option => (\r\n                  <option\r\n                    key={option.id}\r\n                    value={option.id}\r\n                  >\r\n                    {option.bankName}\r\n                  </option>\r\n                ))}\r\n              </TextField>\r\n            </Grid>\r\n          </Grid>\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Sender Contact\"\r\n                margin=\"dense\"\r\n                name=\"sender_phone\"\r\n                onChange={handleChange}\r\n                required\r\n                \r\n                value={values.sender_phone}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Bank Account\"\r\n                margin=\"dense\"\r\n                name=\"bank_account\"\r\n                onChange={handleChange}\r\n                required\r\n                \r\n                value={values.bank_account}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n          </Grid>\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"My Fee\"\r\n                margin=\"dense\"\r\n                name=\"my_fee_myr\"\r\n                onChange={handleChange}\r\n                required\r\n                \r\n                value={values.my_fee_myr}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Bank Fee (IDR)\"\r\n                margin=\"dense\"\r\n                name=\"bank_fee_idr\" \r\n                required\r\n                disabled\r\n                \r\n                value={values.bank_fee_idr}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            \r\n          </Grid>  \r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n             <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Amount\"\r\n                margin=\"dense\"\r\n                name=\"my_amount\"\r\n                onChange={handleChange}\r\n                required\r\n                \r\n                value={values.my_amount}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"My Rate\"\r\n                margin=\"dense\"\r\n                name=\"my_rate_idr\"\r\n                onChange={handleChange}\r\n                required\r\n                \r\n                value={values.my_rate_idr}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n          </Grid>\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <FormGroup row>\r\n                <FormControlLabel\r\n                  control={<Switch\r\n                          checked={values.is_express}\r\n                          onChange={handleChangeSwitch}\r\n                          name=\"is_express\"\r\n                          inputProps={{ 'aria-label': 'secondary checkbox' }}\r\n                          />\r\n                        }\r\n                        label=\"Is Express\"\r\n                      /> \r\n            </FormGroup>\r\n              \r\n               \r\n            </Grid>\r\n             \r\n          </Grid>\r\n\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"My Rate Earning (MYR)\"\r\n                margin=\"dense\"\r\n                name=\"rate_earning\"  \r\n                disabled\r\n                value={values.rate_earning}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"My Fee Earning (MYR)\"\r\n                margin=\"dense\"\r\n                name=\"fee_earning\"\r\n                disabled\r\n                value={values.fee_earning}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n          </Grid>\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n             <Grid\r\n              item\r\n              md={12}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Total (MYR)\"\r\n                margin=\"dense\"\r\n                name=\"my_total\" \r\n                required\r\n                disabled\r\n                \r\n                value={values.my_total}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            \r\n          </Grid>\r\n\r\n          <Grid\r\n            container\r\n            spacing={4}\r\n          >\r\n             <Grid\r\n              item\r\n              md={12}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Total (IDR)\"\r\n                margin=\"dense\"\r\n                name=\"my_total_idr\" \r\n                required\r\n                disabled\r\n                \r\n                value={values.my_total_idr}\r\n                variant=\"outlined\"\r\n              > \r\n              </TextField>\r\n            </Grid>\r\n            \r\n          </Grid>\r\n        </CardContent>\r\n        <Divider />\r\n        <CardActions>\r\n          <Button\r\n            color=\"primary\"\r\n            variant=\"contained\"\r\n            onClick={popUpOrderConfirmation}\r\n          >\r\n            Place Order\r\n          </Button>\r\n        </CardActions>\r\n      </form>\r\n    </Card>\r\n    \r\n    </React.Fragment>\r\n  );\r\n};\r\n\r\nOrderEx.propTypes = {\r\n  className: PropTypes.string,\r\n  handleSubmitOrder: PropTypes.func,\r\n  banks:PropTypes.array,\r\n  obtainRate:PropTypes.object,  \r\n handleGetRates:  PropTypes.func,\r\n};\r\n\r\nexport default OrderEx;\r\n\r\n\r\n/*\r\n\r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Email Address\"\r\n                margin=\"dense\"\r\n                name=\"email\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.email}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n           \r\n <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Phone Number\"\r\n                margin=\"dense\"\r\n                name=\"phone\"\r\n                onChange={handleChange}\r\n                type=\"number\"\r\n                value={values.phone}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n            \r\n            <Grid\r\n              item\r\n              md={6}\r\n              xs={12}\r\n            >\r\n              <TextField\r\n                fullWidth\r\n                label=\"Country\"\r\n                margin=\"dense\"\r\n                name=\"country\"\r\n                onChange={handleChange}\r\n                required\r\n                value={values.country}\r\n                variant=\"outlined\"\r\n              />\r\n            </Grid>\r\n\r\n            */","import React,{useState,useEffect} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport moment from 'moment';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Typography,\r\n  Divider,\r\n  Button,\r\n  LinearProgress\r\n} from '@material-ui/core';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {},\r\n  details: {\r\n    display: 'flex'\r\n  },\r\n  avatar: {\r\n    marginLeft: 'auto',\r\n    height: 110,\r\n    width: 100,\r\n    flexShrink: 0,\r\n    flexGrow: 0\r\n  },\r\n  progress: {\r\n    marginTop: theme.spacing(2)\r\n  },\r\n  uploadButton: {\r\n    marginRight: theme.spacing(2)\r\n  }\r\n}));\r\n\r\nconst ProductInfo = props => {\r\n  const { className, obtainRate, ...rest } = props;\r\n\r\n  const classes:any = useStyles();\r\n\r\n  const [prod, setProd] =useState({\r\n    product: 'MYR/IDR',\r\n    current_rate: 1000,\r\n    updatedAt: '', \r\n  });\r\n\r\n  useEffect(() => {\r\n    if(obtainRate){\r\n      setProd({ \r\n            ...prod,\r\n            current_rate: obtainRate.obtainedRate\r\n        });\r\n    }\r\n    \r\n},[obtainRate]);\r\n\r\n  return (\r\n    <Card\r\n      {...rest}\r\n      className={clsx(classes.root, className)}\r\n    >\r\n      <CardContent>\r\n        <div className={classes.details}>\r\n          <div>\r\n            <Typography\r\n              gutterBottom\r\n              variant=\"h2\"\r\n            >\r\n              {prod.product}\r\n            </Typography>\r\n            <Typography\r\n              className={classes.locationText}\r\n              color=\"textSecondary\"\r\n              variant=\"body1\"\r\n            >\r\n              \r\n              {prod.current_rate}\r\n            </Typography>\r\n            <Typography\r\n              className={classes.dateText}\r\n              color=\"textSecondary\"\r\n              variant=\"body1\"\r\n            >\r\n              {moment().format('hh:mm A')} ({prod.updatedAt})\r\n            </Typography>\r\n          </div> \r\n        </div>\r\n      </CardContent>\r\n      <Divider />\r\n      <CardActions>\r\n      </CardActions>\r\n    </Card>\r\n  );\r\n};\r\n\r\nProductInfo.propTypes = {\r\n  className: PropTypes.string,\r\n  obtainRate:PropTypes.object\r\n};\r\n\r\nexport default ProductInfo;\r\n\r\n/*\r\n        <div className={classes.progress}>\r\n          <Typography variant=\"body1\">Profile Completeness: 70%</Typography>\r\n          <LinearProgress\r\n            value={70}\r\n            variant=\"determinate\"\r\n          />\r\n        </div>\r\n\r\n        <Button\r\n          className={classes.uploadButton}\r\n          color=\"primary\"\r\n          variant=\"text\"\r\n        >\r\n          Upload picture\r\n        </Button>\r\n        <Button variant=\"text\">Remove picture</Button>\r\n        */\r\n","import React, { useEffect, useState } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid,\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Modal ,\r\n  Button,\r\n  CardHeader,\r\n  Divider, } from '@material-ui/core';\r\n  import clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport  { OrderEx,ProductInfo}   from './components';\r\nimport { HttpPostServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {domainUrl} from '../../constants';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst Order = props => {\r\n  const classes = useStyles();\r\n  const [banks, setBanks]=useState([]);\r\n  const [rates, setRate]=useState(null);\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [dialogOpen, setDialogOpen] = React.useState(false);\r\n  \r\n  const handleResponse =(data)=>{\r\n    if(data.data){\r\n      \r\n    setResponseTitle('Place Order Successful');\r\n    setResponseMessage('New order placed successfully');\r\n    setDialogOpen(true);\r\n    }\r\n    else\r\n    {\r\n      setResponseTitle('Place Order Failed');\r\n      setResponseMessage('Failed to place new order');\r\n      setDialogOpen(true);\r\n    }\r\n  }\r\n\r\n  const handleBankResponse =(data)=>{ \r\n    setBanks(data.data);\r\n  }\r\n\r\n  const handleRate =(data)=>{\r\n    setRate(data.data);\r\n  }\r\n\r\n  \r\n  const handleDialogClose = () => {\r\n    setDialogOpen(false);\r\n  };\r\n \r\n  useEffect(() => {\r\n    handleGetBanks();\r\n    handleGetRates();\r\n},[]);\r\n\r\n  const _handleSubmitOrder = (order) => {\r\n    \r\n     const url = domainUrl + 'Orders/CreateOrder';\r\n     var auth = localStorage.getItem('authorization');\r\n     var query = {  \r\n      \"SenderContactNo\": order.sender_phone,\r\n      \"ProductId\": 1 , \r\n      \"BankId\":order.bank_name,\r\n      \"RecipientAccountName\":order.recipient_contact,\r\n      \"RecipientAccountNo\":order.bank_account,\r\n      \"Amount\":order.my_amount,\r\n      \"Express\":order.is_express,\r\n      \"Rate\":order.my_rate_idr,\r\n      \"Fee\":order.my_fee_myr\r\n    }\r\n\r\n    var query2 = JSON.stringify(query);\r\n    console.log(auth)\r\n    props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponse );  \r\n  };\r\n\r\n  \r\n  const handleGetBanks = () => {\r\n    const url = domainUrl + 'Banks/GetActiveBanks';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"Pagination\":{\r\n        \"OrderByKeys\":null,\r\n        \"PageSize\":50,\r\n        \"PageNum\":0\r\n      }\r\n   }\r\n\r\n   var query2 = JSON.stringify(query);\r\n   console.log(auth)\r\n   return props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleBankResponse\r\n  );  \r\n };\r\n\r\n \r\n  \r\n const handleGetRates  = (bankid = 0) => {\r\n  const url = domainUrl + 'Spreads/GetObtainedSpread';\r\n  var auth = localStorage.getItem('authorization');\r\n  var query = {   \r\n    \"ProductId\" : 1,\r\n    \"BankId\":bankid \r\n }\r\n\r\n var query2 = JSON.stringify(query);\r\n console.log(auth)\r\n return props.postToServerWithHeader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRate\r\n);  \r\n};\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Modal\r\n        open={dialogOpen}\r\n        onClose={handleDialogClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        <Card \r\n          className={clsx(classes.root)}\r\n        >\r\n          <form\r\n            autoComplete=\"off\"\r\n            noValidate\r\n          >\r\n            <CardHeader\r\n              subheader=\"\"\r\n              title={responseTitle}\r\n            />\r\n            <Divider />\r\n            <CardContent>\r\n          \r\n        <p id=\"simple-modal-description\">  {responseMessage}</p> \r\n        </CardContent>\r\n            <Divider />\r\n            <CardActions>\r\n              <Button\r\n                color=\"primary\"\r\n                variant=\"contained\"\r\n                onClick={x=> handleDialogClose()}\r\n              >\r\n                Close\r\n              </Button>\r\n            </CardActions>\r\n          </form>\r\n        </Card>\r\n      </Modal>\r\n\r\n        <Grid\r\n            container\r\n            spacing={4}\r\n        >\r\n          \r\n            <Grid\r\n            item\r\n            lg={4}\r\n            md={6}\r\n            xl={4}\r\n            xs={12}\r\n            >\r\n                <OrderEx handleSubmitOrder={_handleSubmitOrder} banks={banks} obtainRate={rates} handleGetRates={handleGetRates}  />\r\n            </Grid>\r\n            <Grid\r\n            item\r\n            lg={4}\r\n            md={6}\r\n            xl={4}\r\n            xs={12}\r\n            >\r\n                <Grid\r\n                container\r\n                spacing={4}\r\n                >  \r\n                    <Grid\r\n                        item\r\n                        lg={12}\r\n                        md={12}\r\n                        xl={12}\r\n                        xs={12}\r\n                        >\r\n                            <ProductInfo obtainRate={rates} />\r\n                        </Grid>\r\n                        \r\n                </Grid>\r\n            </Grid>\r\n        </Grid>\r\n\r\n    </div>\r\n  );\r\n};\r\n\r\nconst HocOrder = (props) => {  \r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServerWithHeader  })=>\r\n    (\r\n      <React.Fragment> \r\n        <Order {...props} postToServerWithHeader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></Order>\r\n       </React.Fragment>\r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\n\r\nHocOrder.propTypes = {\r\n className: PropTypes.string,\r\n postToServer: PropTypes.func,\r\n sethttppostcontext:  PropTypes.func,\r\n httppostcontext:  PropTypes.any,\r\n};\r\nexport default HocOrder;\r\n","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport { makeStyles } from '@material-ui/styles'; \r\nimport 'react-perfect-scrollbar/dist/css/styles.css';\r\nimport {domainUrl} from '../../../../constants';\r\nimport {\r\n  useTable,\r\n  useGroupBy,\r\n  useFilters,\r\n  useSortBy,\r\n  useExpanded,\r\n  usePagination,\r\n  useRowSelect\r\n} from 'react-table';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Checkbox,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableRow,\r\n  Typography,\r\n  TablePagination,\r\n  Modal ,\r\n  Button,\r\n  CardHeader,\r\n  Divider,\r\n  Grid,\r\n  TextField,\r\n  FormGroup,\r\n  FormControlLabel,\r\n  Switch,\r\n  FormControl,\r\n  FormLabel,\r\n  FormHelperText,\r\n  CheckboxProps,\r\n} from '@material-ui/core';\r\n\r\nimport { getInitials } from '../../../../helpers';\r\nimport { Label } from '@material-ui/icons';\r\n\r\nfunction rand() {\r\n  return Math.round(Math.random() * 20) - 10;\r\n}\r\n\r\nfunction getModalStyle() {\r\n  const top = 50 + rand();\r\n  const left = 50 + rand();\r\n\r\n  return {\r\n    top: `${top}%`,\r\n    left: `${left}%`,\r\n    transform: `translate(-${top}%, -${left}%)`,\r\n    overflow:'auto'\r\n  };\r\n}\r\nconst useStyles = makeStyles((theme )=> ({\r\n  root: {},\r\n  content: {\r\n    padding: 0\r\n  },\r\n  inner: {\r\n    minWidth: 1050\r\n  },\r\n  nameContainer: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  avatar: {\r\n    marginRight: theme.spacing(2)\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  },\r\n  paper: {\r\n    position: 'absolute',\r\n    width: 400,\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '2px solid #000',\r\n    boxShadow: theme.shadows[5],\r\n    padding: theme.spacing(2, 4, 3),\r\n  },\r\n  formControl: {\r\n    margin: theme.spacing(3),\r\n  },\r\n}));\r\n\r\n\r\nconst IndeterminateCheckbox = React.forwardRef(\r\n  ({ indeterminate, ...rest }, ref) => {\r\n    const defaultRef = React.useRef()\r\n    const resolvedRef = ref || defaultRef\r\n\r\n    React.useEffect(() => {\r\n      resolvedRef.current.indeterminate = indeterminate\r\n    }, [resolvedRef, indeterminate])\r\n\r\n    return (\r\n      <>\r\n        <input type=\"checkbox\" ref={resolvedRef} {...rest} />\r\n      </>\r\n    )\r\n  }\r\n)\r\n\r\n\r\nconst EditableCell = ({\r\n  value: initialValue,\r\n  row: { index },\r\n  column: { id },\r\n  updateMyData, // This is a custom function that we supplied to our table instance\r\n}) => {\r\n  // We need to keep and update the state of the cell normally\r\n  const [value, setValue] = React.useState(initialValue)\r\n\r\n  const onChange = e => {\r\n    setValue(e.target.value)\r\n  }\r\n\r\n  // We'll only update the external data when the input is blurred\r\n  const onBlur = () => {\r\n    updateMyData(index, id, value)\r\n  }\r\n\r\n  // If the initialValue is changed external, sync it up with our state\r\n  React.useEffect(() => {\r\n    setValue(initialValue)\r\n  }, [initialValue])\r\n \r\n  if(   id === 'remarks')\r\n  return <input value={value === null ? \"\" : value} onChange={onChange} onBlur={onBlur} style={{paddingTop:'10.5px', paddingBottom:'10.5px'}} />\r\n  else\r\n  return  <label   style={{paddingTop:'10.5px', paddingBottom:'10.5px'}}  >{value}</label>\r\n}\r\n\r\nconst defaultColumn = {\r\n  Cell: EditableCell,\r\n}\r\n\r\nfunction TTable({ classes, columns,className,posttoserverwithheader,updateMyData, selectedOrders, data,...rest }) {\r\n  \r\n  const {\r\n    getTableProps,\r\n    getTableBodyProps,\r\n    headerGroups,\r\n    rows,\r\n    prepareRow,\r\n    page, // Instead of using 'rows', we'll use page,\r\n    // which has only the rows for the active page\r\n\r\n    // The rest of these things are super handy, too ;)\r\n    canPreviousPage,\r\n    canNextPage,\r\n    pageOptions,\r\n    pageCount,\r\n    gotoPage,\r\n    nextPage,\r\n    previousPage,\r\n    setPageSize,\r\n    selectedFlatRows,\r\n    state: { pageIndex, pageSize,selectedRowIds },\r\n  } = useTable(\r\n    {\r\n      columns,\r\n      defaultColumn,\r\n      data,\r\n      updateMyData,\r\n      selectedOrders,\r\n      initialState: { pageIndex: 0 },\r\n    },\r\n    useSortBy,\r\n    usePagination,\r\n    useRowSelect,\r\n    hooks => {\r\n      hooks.visibleColumns.push(columns => [\r\n        // Let's make a column for selection\r\n        {\r\n          id: 'selection',\r\n          // The header can use the table's getToggleAllRowsSelectedProps method\r\n          // to render a checkbox\r\n          Header: ({ getToggleAllRowsSelectedProps }) => (\r\n            <div>\r\n              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />\r\n            </div>\r\n          ),\r\n          // The cell can use the individual row's getToggleRowSelectedProps method\r\n          // to the render a checkbox\r\n          Cell: ({ row }) =>\r\n          (\r\n            <div>\r\n            { \r\n            \r\n             (row.cells[13].value === 'InsufficientFund'  || row.cells[13].value === 'In Process' ||  row.cells[13].value === 'Completed' ||  row.cells[13].value === 'Rejected')?\r\n              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />\r\n              :null}\r\n            </div>\r\n          ),\r\n        },\r\n        ...columns,\r\n      ])\r\n    }\r\n\r\n  )\r\n\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n  const [editCodes,setEditCodes]= useState([]);\r\n\r\n\r\n  const submitTellerRetractOrder =()=>{\r\n    console.log(selectedFlatRows.map(\r\n      d => {\r\n        console.log(d.original)}\r\n    ),);\r\n    \r\n    const url = domainUrl + 'Orders/RetractOrders';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"OrderCodes\": editCodes, \r\n     \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n    console.log(query2)\r\n    /*posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, renderResponseModal );  */\r\n\r\n  }\r\n\r\n  const submitTellerCompleteOrder =()=>{\r\n   var codes = [];\r\n   selectedFlatRows.map(\r\n    d =>  {\r\n      codes.push(d.original.orderCode)}\r\n  );\r\n\r\n    console.log(codes);\r\n    \r\n    const url = domainUrl + 'Orders/CompleteOrders';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"OrderCodes\": codes, \r\n     \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n    //console.log(query2)\r\n    posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, renderResponseModal );  \r\n\r\n  }\r\n\r\n  \r\n    \r\n  const submitTellerRejectOrder =()=>{\r\n   \r\n    var codes = [];\r\n    \r\n   selectedFlatRows.map(\r\n    d =>  {\r\n      codes.push({\r\n        OrderCode: d.original.orderCode,\r\n        Remark: d.original.remarks\r\n      }); \r\n    }); \r\n\r\n    const url = domainUrl + 'Orders/RejectOrders';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      RejectOrderCodes:codes\r\n     \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n    console.log(query2)\r\n    posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, renderResponseModal );  \r\n/*\" */\r\n  }\r\n\r\n  const renderResponseModal = (data)=>{\r\n    console.log(data)\r\n    if(data){\r\n     var title= 'Submit Order'\r\n     var message = 'Order submitted successfully'\r\n     setResponseTitle(title);\r\n     setResponseMessage(message);\r\n    }\r\n\r\n    setOpen(true);\r\n  }\r\n\r\n    return (\r\n      <div>\r\n    <Button color='primary' onClick={x=> submitTellerCompleteOrder()} >Complete Orders</Button>\r\n    <Button color='primary' onClick={x=> submitTellerRejectOrder()} >Reject Orders</Button>\r\n    <Button color='primary' onClick={x=> submitTellerRetractOrder()} >Retract Orders</Button>\r\n      <Card\r\n           {...rest}\r\n           className={clsx(classes.root, className)}\r\n         >\r\n           <CardContent className={classes.content}>\r\n             <PerfectScrollbar>\r\n               <div className={classes.inner}>\r\n               \r\n               <Table {...getTableProps()}>\r\n                   <TableHead>\r\n                         {headerGroups.map(headerGroup => (\r\n                     <TableRow {...headerGroup.getHeaderGroupProps()}>\r\n                       {headerGroup.headers.map(column => ( \r\n                         <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>\r\n                           {column.render('Header')}\r\n                           <span>\r\n                             {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}\r\n                           </span>\r\n                         </TableCell>\r\n                       ))}\r\n                     </TableRow>\r\n                   ))}\r\n                      \r\n                   </TableHead>\r\n                   <TableBody  {...getTableBodyProps()}>\r\n                     {page.map((row, i) => {\r\n                       prepareRow(row)\r\n                       return (\r\n                         <TableRow \r\n                         className={classes.tableRow}\r\n                         hover\r\n                          {...row.getRowProps()}>\r\n                           {row.cells.map(cell => {\r\n                             return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>\r\n                           })}\r\n                         </TableRow>\r\n                       )\r\n                     })}\r\n                   \r\n                   </TableBody>\r\n                 </Table>\r\n     \r\n               </div>\r\n             </PerfectScrollbar>\r\n           </CardContent>\r\n           <CardActions className={classes.actions}>\r\n             <div className=\"pagination\">\r\n               <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>\r\n                 {'<<'}\r\n               </button>{' '}\r\n               <button onClick={() => previousPage()} disabled={!canPreviousPage}>\r\n                 {'<'}\r\n               </button>{' '}\r\n               <button onClick={() => nextPage()} disabled={!canNextPage}>\r\n                 {'>'}\r\n               </button>{' '}\r\n               <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>\r\n                 {'>>'}\r\n               </button>{' '}\r\n               <span>\r\n                 Page{' '}\r\n                 <strong>\r\n                   {pageIndex + 1} of {pageOptions.length}\r\n                 </strong>{' '}\r\n               </span>\r\n               <span>\r\n                 | Go to page:{' '}\r\n                 <input\r\n                   type=\"number\"\r\n                   defaultValue={pageIndex + 1}\r\n                   onChange={e => {\r\n                     const page = e.target.value ? Number(e.target.value) - 1 : 0\r\n                     gotoPage(page)\r\n                   }}\r\n                   style={{ width: '100px' }}\r\n                 />\r\n               </span>{' '}\r\n               <select\r\n                 value={pageSize}\r\n                 onChange={e => {\r\n                   setPageSize(Number(e.target.value))\r\n                 }}\r\n               >\r\n                 {[10, 20, 30, 40, 50].map(pageSize => (\r\n                   <option key={pageSize} value={pageSize}>\r\n                     Show {pageSize}\r\n                   </option>\r\n                 ))}\r\n               </select>\r\n             </div>\r\n           </CardActions>\r\n         </Card>\r\n         </div>\r\n         )\r\n}\r\n\r\nconst TellerOrdersTable = props => {\r\n  const { className, orders,handleSubmitOrder, handleGetBanks,handleGetRates,obtainRate,banks,  ...rest } = props;\r\n  const [modalStyle] = React.useState(getModalStyle);\r\n\r\n  const [values, setValues] = useState({\r\n    order_status:0\r\n  });\r\n \r\n  const classes = useStyles();\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n  const [editCode,setEditCode]= useState('');\r\n  const [selectedOrders, setSelectedOrders]= useState([]);\r\n  const [chkBoxes, setChkBoxes]= useState([]);\r\n  const [openModal, setModalOpen] = React.useState(false);\r\n  const [selectedUsers, setSelectedUsers] = useState([]);\r\n  const [theBanks, setBanks] = useState([]);\r\n  const [rowsPerPage, setRowsPerPage] = useState(10);\r\n  const [page, setPage] = useState(0);\r\n  const [selectedOrder, setSelectedOrder]=useState(null);\r\n  \r\n  const columns=React.useMemo(\r\n    () => [\r\n    {\r\n      \"Header\": \"Order Code\",\r\n      \"accessor\": \"orderCode\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Date Time\",\r\n      \"accessor\": \"doneOn\",\r\n      sortType: 'basic',\r\n      Cell: props=>  {return moment(props.value).format('DD/MM/YYYY')}\r\n    },{\r\n        \"Header\": \"Sender\",\r\n        \"accessor\": \"senderContact\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Recipient Name\",\r\n        \"accessor\": \"recipientAccountName\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Account\",\r\n        \"accessor\": \"recipeintAccountNo\",\r\n        sortType: 'basic'\r\n    },{\r\n        \"Header\": \"Bank\",\r\n        \"accessor\": \"bankName\",\r\n        sortType: 'basic'\r\n    },{\r\n      \"Header\": \"MYR\",\r\n      \"accessor\": \"amountBase\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"IDR\",\r\n      \"accessor\": \"amountExchange\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Rate\",\r\n      \"accessor\": \"orderRate\",\r\n      sortType: 'basic',\r\n\r\n    },{\r\n        \"Header\": \"Obtain Rate\",\r\n        \"accessor\": \"obtainedRate\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n        \"Header\": \"Fee\",\r\n        \"accessor\": \"orderFee\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n        \"Header\": \"Obtain Fee\",\r\n        \"accessor\": \"obtainedFee\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n      \"Header\": \"Order Status\",\r\n      \"accessor\": \"orderStatus\",\r\n      sortType: 'basic',\r\n\r\n  },{\r\n        \"Header\": \"Agent\",\r\n        \"accessor\": \"agentUsername\",\r\n        sortType: 'basic',\r\n  \r\n    },{\r\n      \"Header\": \"Remarks\",\r\n      \"accessor\": \"remarks\" \r\n  } /*,{\r\n      \"Header\": \"Action\", \r\n      \r\n      Cell: props =>{  \r\n        console.log(selectedOrders)\r\n        chkBoxes .push({'name':props.row.cells[0].value,\r\n          value:false})\r\n        setChkBoxes( chkBoxes);\r\n        return ((props.row.cells[12].value === 'InsufficientFund'  || props.row.cells[12].value === 'In Process' ||  props.row.cells[12].value === 'Completed' ||  props.row.cells[12].value === 'Rejected')) ? \r\n        \r\n        <FormControl component=\"fieldset\" className={classes.formControl}>\r\n          <FormGroup>\r\n            <FormControlLabel\r\n              control={<Checkbox checked={getCheck(props)} onChange={handleChangeCheck} id={props.row.cells[0].value} name={props.row.cells[0].value} />}\r\n              label=\"\"\r\n            /> \r\n          </FormGroup> \r\n      </FormControl>\r\n       :\r\n          null\r\n      }\r\n\r\n  }*/],[]\r\n    );\r\n\r\n    const getCheck =(props)=>{\r\n      chkBoxes.find((x,y)=>{\r\n        if(x.name === props.row.cells[0].value){\r\n          return x.value;\r\n        }\r\n      }) ;\r\n      return false;\r\n    }\r\n\r\n    \r\nconst updateMyData = (rowIndex, columnId, value) => {\r\n  // We also turn on the flag to not reset the page\r\n  //setSkipPageReset(true)\r\n // console.log(rowIndex, columnId,value)\r\n  setSelectedOrders(old =>\r\n    old.map((row, index) => {\r\n      if (index === rowIndex) {\r\n       // handleSubmitEditRate(rowIndex,columnId,value);\r\n        return {\r\n          ...old[rowIndex],\r\n          [columnId]: value,\r\n        }\r\n      }\r\n      return row\r\n    })\r\n  );\r\n   \r\n}\r\n\r\n\r\n    const handleChangeCheck = (event) => {\r\n      var ss = selectedOrders;\r\n      var checked = false;\r\n      if(ss.indexOf(event.target.name) === -1){\r\n        ss.push( event.target.name);\r\n        checked = true;\r\n        chkBoxes.find((x,y)=>{\r\n          if(x.name === event.target.name){\r\n             x.value = true;\r\n             console.log(x)\r\n            setChkBoxes( chkBoxes);\r\n          }\r\n        }) ;\r\n      }\r\n      else{\r\n        var ind = ss.indexOf(event.target.name);\r\n        ss.splice(ind, 1);  \r\n        checked = false;\r\n        chkBoxes.find((x,y)=>{\r\n          if(x.name === event.target.name){\r\n             x.value = false;\r\n             console.log(x)\r\n             \r\n            setChkBoxes( chkBoxes);\r\n          }\r\n        }) ;\r\n      }\r\n      console.log(ss)\r\n      setSelectedOrders(ss); \r\n      return checked;\r\n    };\r\n    \r\n  /*\r\n  const renderModal = (code, row,theBanks)=>{ \r\n    console.log(theBanks)\r\n    var bankid = banks.indexOf(row.cells[5].value);\r\n    console.log(bankid)\r\n    setEditCode(code)\r\n      setValues({\r\n        ...values,\r\n        recipient_contact: row.cells[3].value, \r\n        bank_name: row.cells[5].value ,\r\n        bank_account: row.cells[4].value, \r\n        my_fee_myr:parseFloat(row.cells[10].value),\r\n        my_amount:parseFloat(row.cells[6].value),\r\n        my_rate_idr: parseFloat(row.cells[8].value),\r\n        my_obtainedrate_idr: parseFloat(row.cells[9].value), \r\n        is_express: false, \r\n        sender_phone: row.cells[2].value, \r\n\r\n      });\r\n      setSelectedOrder({\r\n        recipient_contact: row.cells[3].value, \r\n        bank_name: row.cells[5].value,\r\n        bank_account: row.cells[4].value, \r\n        my_fee_myr:parseFloat(row.cells[10].value),\r\n        my_amount:parseFloat(row.cells[6].value),\r\n        my_rate_idr: parseFloat(row.cells[8].value),\r\n        my_obtainedrate_idr: parseFloat(row.cells[9].value), \r\n        is_express: false, \r\n        sender_phone: row.cells[2].value, \r\n          \r\n      })\r\n    setModalOpen(true);\r\n  }\r\n */\r\n  const renderResponseModal = (data)=>{\r\n    console.log(data)\r\n    if(data){\r\n     var title= 'Edit Order'\r\n     var message = 'Order edited successfully'\r\n     setResponseTitle(title);\r\n     setResponseMessage(message);\r\n    }\r\n\r\n    setOpen(true);\r\n  }\r\n\r\n  const handleSelectAll = event => { \r\n\r\n    let selectedUsers;\r\n\r\n    if (event.target.checked) {\r\n      selectedUsers = orders.map(orders => orders.id);\r\n    } else {\r\n      selectedUsers = [];\r\n    }\r\n\r\n    setSelectedUsers(selectedUsers);\r\n  };\r\n\r\n  const handleSelectOne = (event, id) => {\r\n    const selectedIndex = selectedUsers.indexOf(id);\r\n    let newSelectedUsers = [];\r\n\r\n    if (selectedIndex === -1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);\r\n    } else if (selectedIndex === 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));\r\n    } else if (selectedIndex === selectedUsers.length - 1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));\r\n    } else if (selectedIndex > 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(\r\n        selectedUsers.slice(0, selectedIndex),\r\n        selectedUsers.slice(selectedIndex + 1)\r\n      );\r\n    }\r\n\r\n    setSelectedUsers(newSelectedUsers);\r\n  };\r\n\r\n  const handlePageChange = (event, page) => {\r\n    setPage(page);\r\n  };\r\n\r\n  const handleRowsPerPageChange = event => {\r\n    setRowsPerPage(event.target.value);\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setOpen(false);\r\n  };\r\n  const handleModalClose = () => {\r\n    setModalOpen(false);\r\n  };\r\n    \r\n  useEffect(() => {\r\n     setSelectedOrders(orders);\r\n     \r\n    console.log(orders) \r\n  },[orders]);\r\n  \r\n /*\r\n  useEffect(() => { \r\n    if(selectedOrder !== null  && banks.length > 0){\r\n      for(var b in banks){\r\n        if(banks[b].bankName === selectedOrder.bank_name){\r\n          var bankId = parseInt(banks[b].id);\r\n          console.log(bankId) \r\n          setValues({...values, bank_name:bankId});\r\n          handleGetRates(bankId)\r\n          \r\n           \r\n        }\r\n      }\r\n    }\r\n  },[selectedOrder]);\r\n\r\n  useEffect(() => {\r\n    if(obtainRate){\r\n      setValues({...values, \r\n        my_obtainedexpress: obtainRate.obtainedExpressFee,\r\n        my_obtainedrate_idr: obtainRate.obtainedRate,\r\n        bank_fee_idr: obtainRate.obtainedBankFee*obtainRate.obtainedRate, \r\n        fee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0), \r\n        my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee), \r\n        my_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\n        parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\n    });\r\n    }\r\n    \r\n},[obtainRate]);\r\n\r\nuseEffect(() => {\r\n  \r\n\r\n\r\n  if(obtainRate){\r\n    setValues({...values, \r\n      my_total:  values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee) , \r\nmy_total_idr:  (values.my_amount+values.my_fee_myr+ parseFloat(obtainRate.obtainedStandardFee)+ \r\nparseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0)+parseFloat(obtainRate.obtainedExpressFee))*obtainRate.obtainedRate,\r\nfee_earning:values.my_fee_myr -parseFloat(obtainRate.obtainedStandardFee) - parseFloat(obtainRate.obtainedBankFee != null ? obtainRate.obtainedBankFee: 0) ,  \r\n    \r\n  });\r\n  }\r\n  \r\n},[values.my_fee_myr,values.my_rate_idr,values.my_amount]);\r\n*//*\r\nconst handleChangeSwitch= event => {\r\n  setValues({ \r\n    ...values,\r\n    is_express: event.target.checked\r\n  });\r\n};\r\n*/\r\n  const handleChange = event => {\r\n    setValues({\r\n      ...values,\r\n      [event.target.name]: event.target.value\r\n    });\r\n    if(event.target.name == 'bank_name'){ \r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseInt(event.target.value)\r\n      });\r\n      handleGetRates(parseInt(event.target.value))\r\n    } \r\n    if(event.target.name == 'my_fee_myr' || event.target.name == 'my_amount' || event.target.name == 'my_rate_idr' ){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    if(event.target.name == 'my_amount'){\r\n      setValues({\r\n        ...values,\r\n        [event.target.name]: parseFloat(event.target.value)\r\n      });\r\n    } \r\n    console.log(event.target.name,event.target.value )\r\n    \r\n  };\r\n\r\n  return (\r\n    <div>\r\n     {orders.length >0 ?\r\n     <React.Fragment>\r\n       <TTable classes={classes} columns={columns} data={selectedOrders} posttoserverwithheader={props.posttoserverwithheader} className={className} {...rest} /*selectedOrders={selectedOrders} */updateMyData={updateMyData}  />\r\n        <Modal\r\n        open={open}\r\n        onClose={handleClose}\r\n        aria-labelledby=\"simple-modal-title\"\r\n        aria-describedby=\"simple-modal-description\"\r\n      >\r\n        <div style={modalStyle} className={classes.paper}>\r\n        <h2 id=\"simple-modal-title\">{responseTitle}</h2>\r\n        <p id=\"simple-modal-description\">\r\n          {responseMessage}\r\n        </p> \r\n        </div>\r\n      </Modal>\r\n      \r\n      \r\n    </React.Fragment>\r\n   :null}\r\n   \r\n   </div>\r\n    \r\n  );\r\n};\r\n\r\nTellerOrdersTable.propTypes = {\r\n  className: PropTypes.string,\r\n  orders: PropTypes.array.isRequired,\r\n  posttoserverwithheader: PropTypes.func,\r\n  handleSubmitOrder: PropTypes.func,\r\n  banks:PropTypes.array,\r\n  selectedBank: PropTypes.string,\r\n  obtainRate:PropTypes.object,  \r\n handleGetRates:  PropTypes.func,\r\n};\r\n\r\nexport default TellerOrdersTable;\r\n \r\n\r\n/*\r\n<Grid\r\n                  item\r\n                  md={6}\r\n                  xs={12}\r\n                >\r\n                  <TextField\r\n                    fullWidth\r\n                    label=\"My Express Fee\"\r\n                    margin=\"dense\"\r\n                    name=\"my_expressfee_myr\"\r\n                    onChange={handleChange}\r\n                    required\r\n                    disabled={!values.is_express}\r\n                    value={values.my_expressfee_myr}\r\n                    variant=\"outlined\"\r\n                  > \r\n                  </TextField>\r\n                </Grid>\r\n                */","import React,{useState, useEffect} from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {domainUrl} from '../../constants';\r\n\r\n\r\nimport  { OrderEx,ProductInfo}   from './components';\r\n//import mockData from './data'; \r\nimport TellerOrdersTable from './components/OrderListTable/TellerOrdersTable.js';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst TellerOrderPendingList = (props) => {\r\n  const classes:any = useStyles();\r\n  const [orders,setOrders] = useState([]);\r\n  const [banks, setBanks]=useState([]);\r\n  const [rates, setRate]=useState(null);\r\n\r\n  const handleCheckPendingOrder =(status)=>{\r\n      \r\n    const url = domainUrl + 'Orders/ListOrderTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"ProductId\": 1, \r\n      \"OrderStatus\":status, \r\n      'Authorization': auth ,\r\n      \"Pagination\":{\r\n        \"OrderByKeys\":null,\r\n        \"PageSize\":50,\r\n        \"PageNum\":1\r\n      }\r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponsePendingOrder );  \r\n\r\n  }\r\n\r\n  const handleResponsePendingOrder =(data)=>{\r\n    if(data.data){\r\n      setOrders(data.data); \r\n    }\r\n  }\r\n\r\n  const handleSelect = (event, nodeIds) => {\r\n    setOrders(nodeIds);\r\n  };\r\n \r\nuseEffect(() => {\r\n  handleCheckPendingOrder('InsufficientFund');\r\n  \r\n},[]);\r\n\r\nconst handleGetBanks = () => {\r\n  const url = domainUrl + 'Banks/GetActiveBanks';\r\n  var auth = localStorage.getItem('authorization');\r\n  var query = {  \r\n    \"Pagination\":{\r\n      \"OrderByKeys\":null,\r\n      \"PageSize\":50,\r\n      \"PageNum\":0\r\n    }\r\n }\r\n\r\n var query2 = JSON.stringify(query);\r\n console.log(auth)\r\n return props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleBankResponse\r\n);  \r\n};\r\n\r\nconst handleBankResponse =(data)=>{ \r\n  setBanks(data.data);\r\n}\r\n\r\nconst handleRate =(data)=>{\r\n  setRate(data.data);\r\n}\r\n\r\n\r\nuseEffect(() => {\r\n // handleGetBanks();\r\n // handleGetRates();\r\n},[]);\r\n\r\n\r\n\r\nconst handleGetRates  = (bankid = 0) => {\r\nconst url = domainUrl + 'Spreads/GetObtainedSpread';\r\nvar auth = localStorage.getItem('authorization');\r\nvar query = {   \r\n  \"ProductId\" : 1,\r\n  \"BankId\":bankid \r\n}\r\n\r\nvar query2 = JSON.stringify(query);\r\nconsole.log(auth)\r\nreturn props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRate\r\n);  \r\n};\r\n\r\n  return (\r\n    <HttpPostServiceContextConsumer> \r\n      {({ httpPostContext,\r\n          setHttpPostContext,\r\n          postToServerWithHeader  })=>\r\n      (\r\n    <div className={classes.root}> \r\n      <div className={classes.content}>\r\n        <TellerOrdersTable orders={orders} posttoserverwithheader={postToServerWithHeader}   banks={banks} obtainRate={rates}   handleGetRates={handleGetRates}  />\r\n      </div>\r\n    </div>\r\n    )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n};\r\n\r\nconst HOCTellerOrderPendingList =()=>{\r\n  \r\n  return (<HttpPostServiceContextConsumer> \r\n        {({ httpPostContext,\r\n            setHttpPostContext,\r\n            postToServerWithHeader  })=>\r\n        (\r\n          \r\n         \r\n       <HttpGetServiceContextConsumer>\r\n       {({ \r\n               genericGetHttp  })=> \r\n           (\r\n             <TellerOrderPendingList  posttoserverwithheader={postToServerWithHeader} genericgethttp={genericGetHttp}/>\r\n            )\r\n        }\r\n        </HttpGetServiceContextConsumer>\r\n        )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\nexport default HOCTellerOrderPendingList;\r\n","import React,{useState, useEffect} from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport { Grid } from '@material-ui/core';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../contexts/HttpServiceContext';\r\nimport {domainUrl} from '../../constants';\r\n\r\n\r\nimport  { OrderEx,ProductInfo}   from './components';\r\n//import mockData from './data'; \r\nimport TellerOrdersTable from './components/OrderListTable/TellerOrdersTable.js';\r\n\r\nconst useStyles = makeStyles((theme:any) => ({\r\n  root: {\r\n    padding: theme.spacing(4)\r\n  }\r\n}));\r\n\r\nconst TellerOrderInProcessList = (props) => {\r\n  const classes:any = useStyles();\r\n  const [orders,setOrders] = useState([]);\r\n  const [banks, setBanks]=useState([]);\r\n  const [rates, setRate]=useState(null);\r\n\r\n  const handleCheckPendingOrder =(status)=>{\r\n      \r\n    const url = domainUrl + 'Orders/ListOrderTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"ProductId\": 1, \r\n      \"OrderStatus\":status, \r\n      'Authorization': auth ,\r\n      \"Pagination\":{\r\n        \"OrderByKeys\":null,\r\n        \"PageSize\":50,\r\n        \"PageNum\":1\r\n      }\r\n    }\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponsePendingOrder );  \r\n\r\n  }\r\n\r\n  const handleResponsePendingOrder =(data)=>{\r\n    if(data.data){\r\n      setOrders(data.data); \r\n    }\r\n  }\r\n\r\n  const handleSelect = (event, nodeIds) => {\r\n    setOrders(nodeIds);\r\n  };\r\n \r\nuseEffect(() => {\r\n  handleCheckPendingOrder('InProcess');\r\n  \r\n},[]);\r\n\r\nconst handleGetBanks = () => {\r\n  const url = domainUrl + 'Banks/GetActiveBanks';\r\n  var auth = localStorage.getItem('authorization');\r\n  var query = {  \r\n    \"Pagination\":{\r\n      \"OrderByKeys\":null,\r\n      \"PageSize\":50,\r\n      \"PageNum\":0\r\n    }\r\n }\r\n\r\n var query2 = JSON.stringify(query);\r\n console.log(auth)\r\n return props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleBankResponse\r\n);  \r\n};\r\n\r\nconst handleBankResponse =(data)=>{ \r\n  setBanks(data.data);\r\n}\r\n\r\nconst handleRate =(data)=>{\r\n  setRate(data.data);\r\n}\r\n\r\n\r\nuseEffect(() => {\r\n // handleGetBanks();\r\n // handleGetRates();\r\n},[]);\r\n\r\n\r\n\r\nconst handleGetRates  = (bankid = 0) => {\r\nconst url = domainUrl + 'Spreads/GetObtainedSpread';\r\nvar auth = localStorage.getItem('authorization');\r\nvar query = {   \r\n  \"ProductId\" : 1,\r\n  \"BankId\":bankid \r\n}\r\n\r\nvar query2 = JSON.stringify(query);\r\nconsole.log(auth)\r\nreturn props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleRate\r\n);  \r\n};\r\n\r\n  return (\r\n    <HttpPostServiceContextConsumer> \r\n      {({ httpPostContext,\r\n          setHttpPostContext,\r\n          postToServerWithHeader  })=>\r\n      (\r\n    <div className={classes.root}> \r\n      <div className={classes.content}>\r\n        <TellerOrdersTable orders={orders} posttoserverwithheader={postToServerWithHeader}   banks={banks} obtainRate={rates}   handleGetRates={handleGetRates}  />\r\n      </div>\r\n    </div>\r\n    )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n};\r\n\r\nconst HOCTellerOrderInProcessList =()=>{\r\n  \r\n  return (<HttpPostServiceContextConsumer> \r\n        {({ httpPostContext,\r\n            setHttpPostContext,\r\n            postToServerWithHeader  })=>\r\n        (\r\n          \r\n         \r\n       <HttpGetServiceContextConsumer>\r\n       {({ \r\n               genericGetHttp  })=> \r\n           (\r\n             <TellerOrderInProcessList  posttoserverwithheader={postToServerWithHeader} genericgethttp={genericGetHttp}/>\r\n            )\r\n        }\r\n        </HttpGetServiceContextConsumer>\r\n        )}\r\n    </HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\nexport default HOCTellerOrderInProcessList;\r\n","import React, { useState,useEffect } from 'react';\r\nimport clsx from 'clsx';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport PerfectScrollbar from 'react-perfect-scrollbar';\r\nimport {domainUrl} from '../../../../constants';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from '../../../../contexts/HttpServiceContext';\r\nimport { makeStyles } from '@material-ui/styles';\r\nimport 'react-perfect-scrollbar/dist/css/styles.css';\r\nimport {\r\n  useTable,\r\n  useGroupBy,\r\n  useFilters,\r\n  useSortBy,\r\n  useExpanded,\r\n  usePagination\r\n  \r\n} from 'react-table';\r\nimport {\r\n  Card,\r\n  CardActions,\r\n  CardContent,\r\n  Avatar,\r\n  Checkbox,\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableRow,\r\n  Button,\r\n  Typography,\r\n  Modal ,\r\n  TablePagination\r\n} from '@material-ui/core';\r\n\r\nimport { getInitials } from '../../../../helpers';\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {},\r\n  content: {\r\n    padding: 0\r\n  },\r\n  inner: {\r\n    minWidth: 1050\r\n  },\r\n  nameContainer: {\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  avatar: {\r\n    marginRight: theme.spacing(2)\r\n  },\r\n  actions: {\r\n    justifyContent: 'flex-end'\r\n  }\r\n}));\r\n\r\nfunction rand() {\r\n  return Math.round(Math.random() * 20) - 10;\r\n}\r\n\r\nfunction getModalStyle() {\r\n  const top = 50 + rand();\r\n  const left = 50 + rand();\r\n\r\n  return {\r\n    top: `${top}%`,\r\n    left: `${left}%`,\r\n    transform: `translate(-${top}%, -${left}%)`,\r\n    overflow:'auto'\r\n  };\r\n}\r\n\r\nfunction TTable({ classes, columns,className, data,updateMyData,handleSubmitEditRate,originalData, ...rest }) {\r\n  \r\n  const {\r\n    getTableProps,\r\n    getTableBodyProps,\r\n    headerGroups,\r\n    rows,\r\n    prepareRow,\r\n    page, // Instead of using 'rows', we'll use page,\r\n    // which has only the rows for the active page\r\n\r\n    // The rest of these things are super handy, too ;)\r\n    canPreviousPage,\r\n    canNextPage,\r\n    pageOptions,\r\n    pageCount,\r\n    gotoPage,\r\n    nextPage,\r\n    previousPage,\r\n    setPageSize,\r\n    selectedFlatRows,\r\n    state: { pageIndex, pageSize },\r\n  } = useTable(\r\n    {\r\n      columns,\r\n      defaultColumn,\r\n      data,\r\n      initialState: { pageIndex: 0 },\r\n      updateMyData,\r\n      handleSubmitEditRate,\r\n      originalData\r\n    },\r\n    useSortBy,\r\n    usePagination,\r\n  )\r\n\r\n  function compareObjects(o, p)\r\n  {\r\n      var i,\r\n          keysO = Object.keys(o).sort(),\r\n          keysP = Object.keys(p).sort();\r\n      if (keysO.length !== keysP.length)\r\n          return false;//not the same nr of keys\r\n      if (keysO.join('') !== keysP.join(''))\r\n          return false;//different keys\r\n      for (i=0;i<keysO.length;++i)\r\n      {\r\n          if (o[keysO[i]] instanceof Array)\r\n          {\r\n              if (!(p[keysO[i]] instanceof Array))\r\n                  return false;\r\n              //if (compareObjects(o[keysO[i]], p[keysO[i]] === false) return false\r\n              //would work, too, and perhaps is a better fit, still, this is easy, too\r\n              if (p[keysO[i]].sort().join('') !== o[keysO[i]].sort().join(''))\r\n                  return false;\r\n          }\r\n          else if (o[keysO[i]] instanceof Date)\r\n          {\r\n              if (!(p[keysO[i]] instanceof Date))\r\n                  return false;\r\n              if ((''+o[keysO[i]]) !== (''+p[keysO[i]]))\r\n                  return false;\r\n          }\r\n          else if (o[keysO[i]] instanceof Function)\r\n          {\r\n              if (!(p[keysO[i]] instanceof Function))\r\n                  return false;\r\n              //ignore functions, or check them regardless?\r\n          }\r\n          else if (o[keysO[i]] instanceof Object)\r\n          {\r\n              if (!(p[keysO[i]] instanceof Object))\r\n                  return false;\r\n              if (o[keysO[i]] === o)\r\n              {//self reference?\r\n                  if (p[keysO[i]] !== p)\r\n                      return false;\r\n              }\r\n              else if (compareObjects(o[keysO[i]], p[keysO[i]]) === false)\r\n                  return false;//WARNING: does not deal with circular refs other than ^^\r\n          }\r\n          if (o[keysO[i]] !== p[keysO[i]])//change !== to != for loose comparison\r\n              return false;//not the same value\r\n      }\r\n      return true;\r\n  }\r\n  const handleSubmitUpdateSpread =()=>{ \r\n    \r\n  var compared =  originalData.map(o=> \r\n    { \r\n      var updated=[];\r\n      if(!compareObjects(o,data[originalData.indexOf(o)])){\r\n        updated.push(data[originalData.indexOf(o)]);\r\n      } \r\n      return updated;\r\n\r\n    });\r\n\r\n    var compiled = [];\r\n    compared.map(c=>{\r\n      if(c.length > 0){\r\n\r\n        console.log(c)\r\n        compiled.push(c);\r\n        handleSubmitEditRate(c)\r\n      }\r\n    })\r\n\r\n    console.log(compiled)\r\n   /* console.log(selectedFlatRows.map(\r\n      d => d.original\r\n    ),);\r\n    const url = domainUrl + 'Orders/CompleteOrder';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      \"OrderCode\": orderCode, \r\n    }\r\n     \r\n    var query2 = JSON.stringify(query);\r\n\r\n   // handleSubmitEditRate(rowIndex,columnId,value);\r\n    //console.log(query2)\r\n   /* posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, renderResponseModal );  */\r\n\r\n  }\r\n\r\n    return (\r\n      <div>\r\n      <Button color='primary' onClick={x=> handleSubmitUpdateSpread()} >Update Rate</Button>\r\n    \r\n      <Card\r\n           {...rest}\r\n           className={clsx(classes.root, className)}\r\n         >\r\n           <CardContent className={classes.content}>\r\n             <PerfectScrollbar>\r\n               <div className={classes.inner}>\r\n               \r\n               <Table {...getTableProps()}>\r\n                   <TableHead>\r\n                         {headerGroups.map(headerGroup => (\r\n                     <TableRow {...headerGroup.getHeaderGroupProps()}>\r\n                       {headerGroup.headers.map(column => ( \r\n                         <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>\r\n                           {column.render('Header')}\r\n                           <span>\r\n                             {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}\r\n                           </span>\r\n                         </TableCell>\r\n                       ))}\r\n                     </TableRow>\r\n                   ))}\r\n                      \r\n                   </TableHead>\r\n                   <TableBody  {...getTableBodyProps()}>\r\n                     {page.map((row, i) => {\r\n                       prepareRow(row)\r\n                       return (\r\n                         <TableRow \r\n                         className={classes.tableRow}\r\n                         hover\r\n                          {...row.getRowProps()}>\r\n                           {row.cells.map(cell => {\r\n                             return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>\r\n                           })}\r\n                         </TableRow>\r\n                       )\r\n                     })}\r\n                   \r\n                   </TableBody>\r\n                 </Table>\r\n     \r\n               </div>\r\n             </PerfectScrollbar>\r\n           </CardContent>\r\n           <CardActions className={classes.actions}>\r\n             <div className=\"pagination\">\r\n               <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>\r\n                 {'<<'}\r\n               </button>{' '}\r\n               <button onClick={() => previousPage()} disabled={!canPreviousPage}>\r\n                 {'<'}\r\n               </button>{' '}\r\n               <button onClick={() => nextPage()} disabled={!canNextPage}>\r\n                 {'>'}\r\n               </button>{' '}\r\n               <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>\r\n                 {'>>'}\r\n               </button>{' '}\r\n               <span>\r\n                 Page{' '}\r\n                 <strong>\r\n                   {pageIndex + 1} of {pageOptions.length}\r\n                 </strong>{' '}\r\n               </span>\r\n               <span>\r\n                 | Go to page:{' '}\r\n                 <input\r\n                   type=\"number\"\r\n                   defaultValue={pageIndex + 1}\r\n                   onChange={e => {\r\n                     const page = e.target.value ? Number(e.target.value) - 1 : 0\r\n                     gotoPage(page)\r\n                   }}\r\n                   style={{ width: '100px' }}\r\n                 />\r\n               </span>{' '}\r\n               <select\r\n                 value={pageSize}\r\n                 onChange={e => {\r\n                   setPageSize(Number(e.target.value))\r\n                 }}\r\n               >\r\n                 {[10, 20, 30, 40, 50].map(pageSize => (\r\n                   <option key={pageSize} value={pageSize}>\r\n                     Show {pageSize}\r\n                   </option>\r\n                 ))}\r\n               </select>\r\n             </div>\r\n           </CardActions>\r\n         </Card>\r\n         </div>\r\n         )\r\n}\r\n\r\nconst EditableCell = ({\r\n  value: initialValue,\r\n  row: { index },\r\n  column: { id },\r\n  updateMyData, // This is a custom function that we supplied to our table instance\r\n}) => {\r\n  // We need to keep and update the state of the cell normally\r\n  const [value, setValue] = React.useState(initialValue)\r\n\r\n  const onChange = e => {\r\n    setValue(e.target.value)\r\n  }\r\n\r\n  // We'll only update the external data when the input is blurred\r\n  const onBlur = () => {\r\n    updateMyData(index, id, value)\r\n  }\r\n\r\n  // If the initialValue is changed external, sync it up with our state\r\n  React.useEffect(() => {\r\n    setValue(initialValue)\r\n  }, [initialValue])\r\n\r\n  if(   id !== 'downlineUsername')\r\n  return <input value={value} onChange={onChange} onBlur={onBlur} style={{paddingTop:'10.5px', paddingBottom:'10.5px'}} />\r\n  else\r\n  return  <input value={value} disabled style={{paddingTop:'10.5px', paddingBottom:'10.5px'}}  />\r\n}\r\n\r\n\r\nconst defaultColumn = {\r\n  Cell: EditableCell,\r\n}\r\nconst DownlineRateTable = props => {\r\n  const { className,  ...rest } = props;\r\n\r\n  const classes = useStyles();\r\n  const [modalStyle] = React.useState(getModalStyle);\r\n\r\n  const [ownInfo, setOwnInfo] = React.useState({});\r\n  const [users, setUsers] = React.useState([]);\r\n  const [originalUsers, setOriginalUsers] = React.useState([]);\r\n  const [selectedUsers, setSelectedUsers] = useState([]);\r\n  const [rowsPerPage, setRowsPerPage] = useState(100);\r\n  const [page, setPage] = useState(0);\r\n  const [responseMessage,setResponseMessage]= useState('');\r\n  const [responseTitle,setResponseTitle]= useState('');\r\n  const [open, setOpen] = React.useState(false);\r\n  \r\n  \r\n\r\n  const handleCheckIsLoggedIn =()=>{\r\n      \r\n    const url = domainUrl + 'Auth/IsLoggedIn';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'Authorization': auth \r\n    }\r\n\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleResponseIsLoggedIn );  \r\n\r\n  }\r\n  \r\n\r\nconst updateMyData = (rowIndex, columnId, value) => {\r\n  // We also turn on the flag to not reset the page\r\n  //setSkipPageReset(true)\r\n  console.log(rowIndex, columnId,value)\r\n  setUsers(old =>\r\n    old.map((row, index) => {\r\n      if (index === rowIndex) {\r\n       // handleSubmitEditRate(rowIndex,columnId,value);\r\n        return {\r\n          ...old[rowIndex],\r\n          [columnId]: value,\r\n        }\r\n      }\r\n      return row\r\n    })\r\n  );\r\n   \r\n}\r\n\r\n\r\n  const handleResponseIsLoggedIn = (data) =>{\r\n    // handleGetFirstTreeNodes(data.data)\r\n\r\n    setOwnInfo(data.data)\r\n   }\r\n\r\n   \r\n  const handleGetDownlines =()=>{\r\n    const url = domainUrl + 'Spreads/ListSpreadTable';\r\n    var auth = localStorage.getItem('authorization');\r\n    var query = {  \r\n      'ProductId':1,\r\n      'Pagination': {\r\n        'PageSize': rowsPerPage,\r\n        'PageNum': page\r\n      } \r\n    }\r\n\r\n    var query2 = JSON.stringify(query);\r\n    props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth}, handlePopulateTable );\r\n  }\r\n  \r\n  const handleSubmitEditRate =(data)=>{\r\n      //var data = users[rowIndex];\r\n       console.log(data); \r\n      var user = data.downlineUsername;\r\n      var feeSpread = 0.0;\r\n      var rateSpread = 0.0;\r\n      var expressFeeSpread = 0.0;\r\n      rateSpread = parseFloat(data[0].uplineRateSpread);\r\n      feeSpread = parseFloat(data[0].uplineStandardFeeSpread);\r\n      expressFeeSpread = parseFloat(data[0].uplineExpressFeeSpread);\r\n/*      if(columnId === 'uplineRateSpread'){\r\n      }\r\n      if(columnId === 'uplineStandardFeeSpread'){\r\n      }\r\n      if(columnId === 'uplineExpressFeeSpread'){\r\n      }\r\n*/\r\n    const url = domainUrl + 'Spreads/UpdateDownlineSpread';\r\n    var auth = localStorage.getItem('authorization'); \r\n    var query = {  \r\n      'ProductId':1,\r\n      'Username':user,\r\n      'UplineRateSpread':rateSpread,\r\n      'UplineStandardFeeSpread': feeSpread,\r\n      'UplineExpressFeeSpread': expressFeeSpread \r\n    }\r\n\r\n    var query2 = JSON.stringify(query);\r\n    console.log(query2);\r\n    //props.posttoserverwithheader(url,query2, {'Content-Type':'application/json', 'Authorization': auth},handleSubmitResponse );  \r\n\r\n  }\r\n\r\n  \r\n  const handleSubmitResponse = (data) =>{\r\n    // handleGetFirstTreeNodes(data.data) \r\n      if(data){\r\n         console.log('OK')\r\n      }\r\n   }\r\n\r\n\r\n  const handlePopulateTable = (data) =>{\r\n    // handleGetFirstTreeNodes(data.data)\r\n      console.log(data.data)\r\n      if(data.data){\r\n        \r\n        setUsers(data.data)\r\n        setOriginalUsers(data.data)\r\n      }\r\n   }\r\n\r\n \r\n\r\n\r\n  useEffect(() => {\r\n    handleCheckIsLoggedIn();\r\n    handleGetDownlines();\r\n},[]);\r\n  const columns=React.useMemo(\r\n    () => [\r\n    {\r\n      \"Header\": \"Downline User\",\r\n      \"accessor\": \"downlineUsername\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Rate\",\r\n      \"accessor\": \"uplineRateSpread\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Fee\",\r\n      \"accessor\": \"uplineStandardFeeSpread\",\r\n      sortType: 'basic'\r\n    },{\r\n      \"Header\": \"Express Fee\",\r\n      \"accessor\": \"uplineExpressFeeSpread\",\r\n      sortType: 'basic'\r\n    }],[]\r\n    );\r\n  const handleSelectAll = event => { \r\n\r\n    let selectedUsers;\r\n\r\n    if (event.target.checked) {\r\n      selectedUsers = users.map(user => user.id);\r\n    } else {\r\n      selectedUsers = [];\r\n    }\r\n\r\n    setSelectedUsers(selectedUsers);\r\n  };\r\n\r\n  const handleSelectOne = (event, id) => {\r\n    const selectedIndex = selectedUsers.indexOf(id);\r\n    let newSelectedUsers = [];\r\n\r\n    if (selectedIndex === -1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);\r\n    } else if (selectedIndex === 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));\r\n    } else if (selectedIndex === selectedUsers.length - 1) {\r\n      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));\r\n    } else if (selectedIndex > 0) {\r\n      newSelectedUsers = newSelectedUsers.concat(\r\n        selectedUsers.slice(0, selectedIndex),\r\n        selectedUsers.slice(selectedIndex + 1)\r\n      );\r\n    }\r\n\r\n    setSelectedUsers(newSelectedUsers);\r\n  };\r\n\r\n  \r\n  const renderResponseModal = (data)=>{\r\n    console.log(data)\r\n    if(data){\r\n     var title= 'Edit Order'\r\n     var message = 'Order edited successfully'\r\n     setResponseTitle(title);\r\n     setResponseMessage(message);\r\n    }\r\n\r\n    setOpen(true);\r\n  }\r\n  const handleClose = () => {\r\n    setOpen(false);\r\n  };\r\n\r\n  const handlePageChange = (event, page) => {\r\n    setPage(page);\r\n  };\r\n\r\n  const handleRowsPerPageChange = event => {\r\n    setRowsPerPage(event.target.value);\r\n  };\r\n\r\n  return (\r\n\r\n    <React.Fragment>\r\n      <TTable classes={classes} columns={columns} data={users} className={className} {...rest}    updateMyData={updateMyData} handleSubmitEditRate={handleSubmitEditRate} originalData={originalUsers}/>\r\n      <Modal\r\n      open={open}\r\n      onClose={handleClose}\r\n      aria-labelledby=\"simple-modal-title\"\r\n      aria-describedby=\"simple-modal-description\"\r\n    >\r\n      <div style={modalStyle} className={classes.paper}>\r\n      <h2 id=\"simple-modal-title\">{responseTitle}</h2>\r\n      <p id=\"simple-modal-description\">\r\n        {responseMessage}\r\n      </p> \r\n      </div>\r\n    </Modal>\r\n  </React.Fragment>\r\n  \r\n  );\r\n}; \r\n\r\n\r\nconst HOCDownlineRateTable = (props) => {  \r\n  return (\r\n    \r\n<HttpPostServiceContextConsumer> \r\n    {({ httpPostContext,\r\n        setHttpPostContext,\r\n        postToServerWithHeader  })=>\r\n    (\r\n      <React.Fragment> \r\n        <DownlineRateTable {...props} posttoserverwithheader={postToServerWithHeader}  sethttppostcontext={setHttpPostContext} httppostcontext={httpPostContext}></DownlineRateTable>\r\n       </React.Fragment>\r\n    )}\r\n</HttpPostServiceContextConsumer>\r\n  );\r\n}\r\n\r\n\r\nDownlineRateTable.propTypes = {\r\n className: PropTypes.string,\r\n postToServer: PropTypes.func,\r\n sethttppostcontext:  PropTypes.func,\r\n httppostcontext:  PropTypes.any,\r\n};\r\nexport default HOCDownlineRateTable;\r\n \r\n\r\n\r\n\r\n\r\n/*\r\n\r\n\r\n\r\n\r\n                {users.slice(0, rowsPerPage).map(user => (\r\n                  <TableRow\r\n                    className={classes.tableRow}\r\n                    hover\r\n                    key={user.id}\r\n                    selected={selectedUsers.indexOf(user.id) !== -1}\r\n                  >\r\n                    <TableCell padding=\"checkbox\">\r\n                      <Checkbox\r\n                        checked={selectedUsers.indexOf(user.id) !== -1}\r\n                        color=\"primary\"\r\n                        onChange={event => handleSelectOne(event, user.id)}\r\n                        value=\"true\"\r\n                      />\r\n                    </TableCell>\r\n                    <TableCell>\r\n                      <div className={classes.nameContainer}>\r\n                        <Avatar\r\n                          className={classes.avatar}\r\n                          src={user.avatarUrl}\r\n                        >\r\n                          {getInitials(user.name)}\r\n                        </Avatar>\r\n                        <Typography variant=\"body1\">{user.name}</Typography>\r\n                      </div>\r\n                    </TableCell>\r\n                    <TableCell>{user.email}</TableCell>\r\n                    <TableCell>\r\n                      {user.address.city}, {user.address.state},{' '}\r\n                      {user.address.country}\r\n                    </TableCell>\r\n                    <TableCell>{user.phone}</TableCell>\r\n                    <TableCell>\r\n                      {moment(user.createdAt).format('DD/MM/YYYY')}\r\n                    </TableCell>\r\n                  </TableRow>\r\n                ))}\r\n\r\n        /*<TablePagination\r\n                  component=\"div\"\r\n                  count={users.length}\r\n                  onChangePage={handlePageChange}\r\n                  onChangeRowsPerPage={handleRowsPerPageChange}\r\n                  page={page}\r\n                  rowsPerPage={rowsPerPage}\r\n                  rowsPerPageOptions={[5, 10, 25]}\r\n                />\r\n            \r\n            <EnhancedTable\r\n              data={users}\r\n              columns={cols}\r\n              showPagination={true}\r\n              defaultPageSize={10}\r\n              resizable={true}\r\n              className={classes}\r\n            />\r\n            */","import React from 'react';\r\nimport { Switch, Redirect } from 'react-router-dom';\r\n\r\nimport { RouteWithLayout } from './components';\r\nimport { Main as MainLayout, Minimal as MinimalLayout } from './layouts';\r\nimport { HttpPostServiceContextConsumer, HttpGetServiceContextConsumer } from './contexts/HttpServiceContext';\r\n\r\nimport {\r\n  Dashboard as DashboardView,\r\n  ProductList as ProductListView,\r\n  SetProduct as SetProduct,\r\n  UserList as UserListView,\r\n  Typography as TypographyView,\r\n  Icons as IconsView,\r\n  Account as AccountView,\r\n  Settings as SettingsView,\r\n  SignUp as SignUpView,\r\n  LoginMain as SignInView,\r\n  NotFound as NotFoundView,\r\n  Order as OrderView,\r\n  NewAccount as NewAccountView,\r\n  SignOut as SignOut,\r\n  OrderList as OrderListView,\r\n  UserNetworth as UserNetworth,\r\n  TellerOrderPendingList as TellerOrderPendingListView,\r\n  TellerOrderInProcessList as TellerOrderInProcessListView,\r\n  UserTree as UserTreeView,\r\n  FPXPay as FPXView,\r\n  Receipt as ReceiptView\r\n} from './views';\r\nimport { SessionContextProvider } from \"./contexts/SessionContext\";\r\n\r\nimport RequireAuth from \"./RequireAuth.js\";\r\nimport { DownlineRate } from './views/ProductList/components/DownlineRate';\r\nconst Routes = () => {\r\n  return (\r\n    <SessionContextProvider>\r\n      \r\n    <Switch>\r\n      \r\n      <Redirect\r\n        exact\r\n        from=\"/\"\r\n        to=\"/sign-in\"\r\n      /> \r\n      <RouteWithLayout\r\n        component={SignUpView}\r\n        exact\r\n        layout={MinimalLayout}\r\n        path=\"/sign-up\"\r\n      />\r\n      <RouteWithLayout\r\n        component={FPXView}\r\n        exact\r\n        layout={MinimalLayout}\r\n        path=\"/pay\"\r\n      />\r\n      <RouteWithLayout\r\n        component={ReceiptView}\r\n        exact\r\n        layout={MinimalLayout}\r\n        path=\"/receipt\"\r\n      />\r\n      <RouteWithLayout\r\n        component={SignInView}\r\n        exact\r\n        layout={MinimalLayout}\r\n        path=\"/sign-in\"\r\n      />\r\n      \r\n      <RouteWithLayout\r\n        component={NotFoundView}\r\n        exact\r\n        layout={MinimalLayout}\r\n        path=\"/not-found\"\r\n      />\r\n      <Redirect to=\"/not-found\" />\r\n    </Switch>  \r\n    </SessionContextProvider>\r\n  );\r\n};\r\n\r\nexport default Routes;\r\n","\r\nimport React, { Component } from 'react';\r\nimport { Router } from 'react-router-dom';\r\nimport { createBrowserHistory } from 'history';\r\nimport { ThemeProvider } from '@material-ui/styles';\r\nimport validate from 'validate.js';\r\n\r\nimport { chartjs } from './helpers';\r\nimport theme from './theme';\r\nimport 'react-perfect-scrollbar/dist/css/styles.css';\r\nimport './assets/scss/index.scss';\r\nimport validators from './common/validators';\r\nimport Routes from './Routes';\r\nimport customHistory from \"./history.js\";\r\nconst Chart = require('react-chartjs-2').Chart;\r\n\r\n//const browserHistory = createBrowserHistory();\r\n\r\nChart.helpers.extend(Chart.elements.Rectangle.prototype, {\r\n  draw: chartjs.draw\r\n});\r\n\r\nvalidate.validators = {\r\n  ...validate.validators,\r\n  ...validators\r\n};\r\n\r\nconst App: React.FC = () => {\r\n  return (\r\n      <ThemeProvider theme={theme}>\r\n      <Router history={customHistory}>\r\n        <Routes />\r\n      </Router>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n  window.location.hostname === 'localhost' ||\r\n    // [::1] is the IPv6 localhost address.\r\n    window.location.hostname === '[::1]' ||\r\n    // 127.0.0.1/8 is considered localhost for IPv4.\r\n    window.location.hostname.match(\r\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n    )\r\n);\r\n\r\ntype Config = {\r\n  onSuccess?: (registration: ServiceWorkerRegistration) => void;\r\n  onUpdate?: (registration: ServiceWorkerRegistration) => void;\r\n};\r\n\r\nexport function register(config?: Config) {\r\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n    // The URL constructor is available in all browsers that support SW.\r\n    const publicUrl = new URL(\r\n      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,\r\n      window.location.href\r\n    );\r\n    if (publicUrl.origin !== window.location.origin) {\r\n      // Our service worker won't work if PUBLIC_URL is on a different origin\r\n      // from what our page is served on. This might happen if a CDN is used to\r\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n      return;\r\n    }\r\n\r\n    window.addEventListener('load', () => {\r\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n      if (isLocalhost) {\r\n        // This is running on localhost. Let's check if a service worker still exists or not.\r\n        checkValidServiceWorker(swUrl, config);\r\n\r\n        // Add some additional logging to localhost, pointing developers to the\r\n        // service worker/PWA documentation.\r\n        navigator.serviceWorker.ready.then(() => {\r\n          console.log(\r\n            'This web app is being served cache-first by a service ' +\r\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n          );\r\n        });\r\n      } else {\r\n        // Is not localhost. Just register service worker\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nfunction registerValidSW(swUrl: string, config?: Config) {\r\n  navigator.serviceWorker\r\n    .register(swUrl)\r\n    .then(registration => {\r\n      registration.onupdatefound = () => {\r\n        const installingWorker = registration.installing;\r\n        if (installingWorker == null) {\r\n          return;\r\n        }\r\n        installingWorker.onstatechange = () => {\r\n          if (installingWorker.state === 'installed') {\r\n            if (navigator.serviceWorker.controller) {\r\n              // At this point, the updated precached content has been fetched,\r\n              // but the previous service worker will still serve the older\r\n              // content until all client tabs are closed.\r\n              console.log(\r\n                'New content is available and will be used when all ' +\r\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n              );\r\n\r\n              // Execute callback\r\n              if (config && config.onUpdate) {\r\n                config.onUpdate(registration);\r\n              }\r\n            } else {\r\n              // At this point, everything has been precached.\r\n              // It's the perfect time to display a\r\n              // \"Content is cached for offline use.\" message.\r\n              console.log('Content is cached for offline use.');\r\n\r\n              // Execute callback\r\n              if (config && config.onSuccess) {\r\n                config.onSuccess(registration);\r\n              }\r\n            }\r\n          }\r\n        };\r\n      };\r\n    })\r\n    .catch(error => {\r\n      console.error('Error during service worker registration:', error);\r\n    });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\r\n  // Check if the service worker can be found. If it can't reload the page.\r\n  fetch(swUrl)\r\n    .then(response => {\r\n      // Ensure service worker exists, and that we really are getting a JS file.\r\n      const contentType = response.headers.get('content-type');\r\n      if (\r\n        response.status === 404 ||\r\n        (contentType != null && contentType.indexOf('javascript') === -1)\r\n      ) {\r\n        // No service worker found. Probably a different app. Reload the page.\r\n        navigator.serviceWorker.ready.then(registration => {\r\n          registration.unregister().then(() => {\r\n            window.location.reload();\r\n          });\r\n        });\r\n      } else {\r\n        // Service worker found. Proceed as normal.\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    })\r\n    .catch(() => {\r\n      console.log(\r\n        'No internet connection found. App is running in offline mode.'\r\n      );\r\n    });\r\n}\r\n\r\nexport function unregister() {\r\n  if ('serviceWorker' in navigator) {\r\n    navigator.serviceWorker.ready.then(registration => {\r\n      registration.unregister();\r\n    });\r\n  }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"lineItems\":\"LineItems_lineItems__2i1Oc\",\"addItem\":\"LineItems_addItem__1oVDp\",\"gridTable\":\"LineItems_gridTable__1eF3H\",\"row\":\"LineItems_row__1fFx5\",\"deleteItem\":\"LineItems_deleteItem__27rsY\",\"currency\":\"LineItems_currency__fMWmG\",\"addIcon\":\"LineItems_addIcon__BIMgG\",\"header\":\"LineItems_header__2-Sg_\",\"editable\":\"LineItems_editable__1PUzY\",\"listDraggingOver\":\"LineItems_listDraggingOver__2OOJv\",\"listItemDragging\":\"LineItems_listItemDragging__2DsGM\"};"],"sourceRoot":""}