☰

ao-helper

arthur online helper

  1. // ==UserScript==
  2. // @name         ao-helper
  3. // @description  arthur online helper
  4. // @version      1.0.9
  5. // @author       yuze
  6. // @namespace    yuze
  7. // @match        https://system.arthuronline.co.uk/*
  8. // @connect      arthuronline.co.uk
  9. // @connect      ea-api.yuze.now.sh
  10. // @grant        GM.getValue
  11. // @grant        GM.setValue
  12. // @grant        GM.xmlHttpRequest
  13. // @require      https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js
  14. // ==/UserScript==
  15.  
  16. /* eslint-env jquery */ 
  17. /* globals moment, GM */
  18.  
  19. let id;
  20. let icons = {}
  21. let storage = {}
  22. let targets = {}
  23.  
  24. let local = false
  25. let letter_endpoint
  26.  
  27. init()
  28. function init() {
  29.     $(window).on('load focus mousedown', checkLocation)
  30.     $(window).on('load', loadActions)
  31.     $(window).on('mousedown', mousedownActions)
  32.     $(window).on('hashchange', checkTab)
  33.  
  34.     appendCSS()
  35.     loadIcons()
  36.  
  37.     id = $('.text-logo span').text().toLowerCase()
  38.  
  39.     if (local) {
  40.         letter_endpoint = 'https://localhost:3000/api/gen-letter'
  41.         console.log('using localhost endpoint')
  42.     } else {
  43.         letter_endpoint = 'https://ea-api.yuze.now.sh/api/gen-letter'
  44.     }
  45.  
  46.     targets = {
  47.         addTransaction: {
  48.             btn: '.box-header .actions ul > :nth-child(3)',
  49.             date: 'input#TransactionDate',
  50.             desc: 'input#TransactionDescription',
  51.             amount: 'input#TransactionAmount',
  52.         },
  53.         documents: {
  54.             checkboxes: 'table.attachments input[type="checkbox"]'
  55.         }
  56.     }
  57. }
  58.  
  59. function loadActions() {
  60.     //quickAccess()
  61.     quickNotes()
  62. }
  63.  
  64. function mousedownActions(e) {
  65.     if ( event.which == 2 || event.which == 3  ) return;
  66.  
  67.     copyOnClick(e)
  68.     addTransactionBtn(e)
  69. }
  70.  
  71. async function wait(ms) {
  72.     return new Promise(resolve => {
  73.         setTimeout( () => { resolve() }, ms);
  74.     });
  75. }
  76.  
  77. async function waitForExistance(elem, resolve) {
  78.  
  79.     if ( $(elem).length ) {
  80.         resolve()
  81.     }
  82.  
  83.     let interval;
  84.     if ( !$(elem).length ) {
  85.         interval = setInterval( () => checkExistance(), 256)
  86.     }
  87.     function checkExistance() {
  88.         if ( $(elem).length ) {
  89.             clearInterval(interval)
  90.             resolve()
  91.         }
  92.     }
  93. }
  94.  
  95. async function waitForIframeExistance(iframe, elem, resolve) {
  96.     if ( $(iframe).contents().find(elem).length ) {
  97.         resolve()
  98.     }
  99.     let interval;
  100.     if ( !$(iframe).contents().find(elem).length ) {
  101.         interval = setInterval( () => checkExistance(), 128)
  102.     }
  103.     function checkExistance() {
  104.         if ( $(iframe).contents().find(elem).length ) {
  105.             clearInterval(interval)
  106.             resolve()
  107.         }
  108.     }
  109. }
  110.  
  111. async function checkLocation() {
  112.     $(window).trigger('hashchange')
  113.     await wait(256)
  114.     if( /tenancies\/view\/\d{6}/.test(window.location.href) ) {
  115.         viewTenancies()
  116.     }
  117.     if( /\/\w+\/(page|filter|index)/.test(window.location.href) ) {
  118.         viewSearch()
  119.     }
  120. }
  121.  
  122. async function checkTab() {
  123.     await wait(64)
  124.     if( !location.hash.includes('tab-transactions') ) {
  125.         tabTransactions(true)
  126.     }
  127.     if( !location.hash.includes('tab-recurrings') ) {
  128.         tabRecurrings(true)
  129.     }   
  130.     if( !location.hash.includes('tab-attachments') ) {
  131.         tabAttachments(true)
  132.     }   
  133.  
  134.     if( location.hash.includes('tab-transactions') ) {
  135.         tabTransactions(false)
  136.     }
  137.     if( location.hash.includes('tab-recurrings') ) {
  138.         tabRecurrings(false)
  139.     }
  140.     if( location.hash.includes('tab-attachments') ) {
  141.         tabAttachments(false)
  142.     }
  143.     
  144. }
  145.  
  146. function viewTenancies() {
  147.     new Promise( function(resolve) {
  148.         waitForExistance('.identifier', resolve)
  149.     }).then( () => {
  150.         appendTenantToolbox()
  151.         appendReadableDateRange()
  152.     } )
  153. }
  154.  
  155. function viewSearch() {
  156.     $('#_q').off('paste', querySeperator)
  157.     $('#_q').on('paste', querySeperator)
  158. }
  159.  
  160. function appendTenantToolbox() {
  161.  
  162.     if ( $('#tenantToolbox').length ) return;
  163.  
  164.     const option = {
  165.         bfc: `  <div class="option" id="tenantToolbox_bfc">
  166.                     <div class="icon red">${icons.percent}</div><span class="red">Breaking Fee Calculator</span>
  167.                 </div>`,
  168.         letter: `<div class="option" id="tenantToolbox_letter">
  169.                     <div class="icon red">${icons.letter}</div><span class="red">Overdue Rent Letter</span>
  170.                 </div>`
  171.     }
  172.  
  173.     const html = `  <div id="tenantToolbox" class="element-container">
  174.                         <div class="element-header">
  175.                             <div class="title">${id[0].toUpperCase() + id.slice(1)} tools</div>
  176.                             <div style="height: 4px"></div>
  177.                             ${option.bfc}
  178.                             ${option.letter}
  179.                         </div>
  180.                     </div>`
  181.  
  182.     $('.left-side-detail').append(html)
  183.  
  184.     $('#tenantToolbox').on('click', tenantToolboxActions)
  185. }
  186.  
  187. function tenantToolboxActions(e) { 
  188.     if( e.target.id == 'tenantToolbox' ) return;
  189.     if( e.target.closest('.option').id == 'tenantToolbox_bfc') {
  190.         prepareModal('bfc')
  191.         return;
  192.     }
  193.     if( e.target.id == 'tenantToolbox' ) return;
  194.     if( e.target.closest('.option').id == 'tenantToolbox_letter') {
  195.         genLetter()
  196.         return;
  197.     }
  198. }
  199.  
  200. async function genLetter() {
  201.  
  202.     let savedLoc = window.location.href;
  203.     
  204.     let property = function() {
  205.         let arr = $('.identifier-detail .sub-title a:nth-of-type(1)').text().split(',')
  206.         arr.splice(1, 1)
  207.         return arr.join(',')
  208.     }()
  209.  
  210.     let ref = $('.identifier-detail .title').text().match(/TE\d{4,5}/)[0]
  211.     let total = $('.financial-transaction .overdue .number').text()
  212.  
  213.     let arrears;
  214.     let dueDate;
  215.  
  216.     getArrears()
  217.     function getArrears() {
  218.         $('.nav.nav-tabs [href^="#tab-transactions"]')[0].click()
  219.  
  220.         new Promise( function(resolve) {
  221.             waitForExistance('.transactions tbody', resolve)
  222.         }).then(() => {
  223.  
  224.             // arrears data
  225.             $('#genOverdueBtn')[0].click()
  226.             arrears =  $('#genOverdueText')[0].value.split('\n\n')[0]
  227.             $('#genOverdueText').css('display', 'none')
  228.  
  229.             // extract due date
  230.             dueDate = arrears.split('\n')
  231.  
  232.             for (let i = 0; i <= dueDate.length; i++) {
  233.                 
  234.                 if ( !dueDate[i] && i === 0 ) {
  235.                     break;
  236.                 } else if ( i == dueDate.length - 1 ) {
  237.  
  238.                     try {
  239.                         dueDate = dueDate[0].match(/\((\d.+)-/)[1].trim()
  240.                         break;
  241.                     } catch(err) {
  242.                         dueDate = dueDate[0].match(/\((\d.+)\)/)[1].trim()
  243.                         break;
  244.                     }
  245.                     
  246.                 } else if ( dueDate[i].includes('Outstanding') ) {
  247.                     dueDate = dueDate[i].match(/\((.+)-/)[1].trim()
  248.                     break;
  249.                 }
  250.  
  251.             }
  252.             getNames()
  253.         })
  254.     }
  255.  
  256.     let names = []
  257.     let namesFirst = []
  258.     let fullName;
  259.     let firstName;
  260.  
  261.     function getNames() {
  262.         $('.nav.nav-tabs [href^="#tab-summary"]')[0].click()
  263.  
  264.         new Promise( function(resolve) {
  265.             waitForExistance('.title .name h3', resolve)
  266.         }).then(() => {
  267.             for(let i = 0; i < $('.title .name h3').length; i++) {
  268.                 names.push( $('.title .name h3')[i].textContent )
  269.             }
  270.  
  271.             for (let i = 0; i < names.length; i++) {    
  272.                 fullName = names.join(', ')
  273.             }
  274.         
  275.             for (let i = 0; i < names.length; i++) {
  276.                 namesFirst.push( names[i].split(' ')[0] )
  277.             }
  278.  
  279.             if( names.length > 2) {
  280.                 firstName = namesFirst.join(', ').replace(/(,)(?!.+\1)/, ' and')
  281.             } else {
  282.                 firstName = namesFirst.join(' and ')
  283.             }
  284.             returnToSavedLocation()
  285.             sendRequest()
  286.         })
  287.     }
  288.  
  289.     function sendRequest() {
  290.  
  291.         GM.xmlHttpRequest({
  292.             method: "POST",
  293.             url: letter_endpoint,
  294.             data: `for=${id}&name=${names[0]}&full_name=${fullName}&first_name=${firstName}&property=${property}&ref=${ref}&arrears=${arrears}&due_date=${dueDate}&total=${total}`,
  295.             headers: {
  296.                 "Content-Type": "application/x-www-form-urlencoded"
  297.             },
  298.             onload: function(res) {
  299.                 console.log(res.response)
  300.                 window.open(`${letter_endpoint}/${names[0]}/${property}/`)
  301.             }
  302.         })
  303.  
  304.     }
  305.  
  306.     function returnToSavedLocation() {
  307.         if( /tenancies\/view\/\d{6}\/ident:Datatable.{5}$/.test(savedLoc) ){
  308.             setTimeout( async () => {
  309.                 $(`.nav.nav-tabs [href^="#tab-summary"]`)[0].click()
  310.                 await wait(512)
  311.                 checkLocation()
  312.             }, 1)
  313.         } else if ( /tenancies\/view\/\d{6}\/ident:Datatable.{5}#tab-.+-/.test(savedLoc) ) {
  314.             let match = savedLoc.match(/tab-.+(?=-)/)[0]
  315.             setTimeout( async () => {
  316.                 $(`.nav.nav-tabs [href^="#${match}"]`)[0].click()
  317.                 await wait(512)
  318.                 checkLocation()
  319.             }, 1)
  320.         }
  321.     }
  322. }
  323.  
  324. async function prepareModal(mode) {
  325.  
  326.     let template = {}
  327.  
  328.     if ( mode == 'bfc') {
  329.         prepareDataBfc('bfc')
  330.     }
  331.  
  332.     async function prepareDataBfc(mode) {
  333.         let data = {}
  334.  
  335.         data.today = currentDate()
  336.         data.endOfTenancy = storage.tenancyEndDate
  337.         data.monthly = ''
  338.  
  339.         if ( $('.summary-data-container div:nth-child(2) p').length ) {
  340.             data.monthly = $('.summary-data-container div:nth-child(2) p').text().trim().replace(' monthly', '')
  341.             makeTemplateBfc(data, mode)
  342.         } else {
  343.             $('.nav.nav-tabs [href^="#tab-summary"]')[0].click()
  344.             new Promise( function(resolve) {
  345.                 waitForExistance('.summary-data-container div:nth-child(2) p', resolve)
  346.             }).then( () => {
  347.                 data.monthly = $('.summary-data-container div:nth-child(2) p').text().trim().replace(' monthly', '')
  348.                 makeTemplateBfc(data, mode)
  349.             } )
  350.         }
  351.     }
  352.  
  353.     function makeTemplateBfc(data, mode) {    
  354.  
  355.         template.postLaunchActions = true
  356.         template.title = 'Breaking Fee Calculator'
  357.         template.close = 'Understood'
  358.         template.color = 'red'
  359.         template.body = `One month's rent is&ensp;<input class="monthly red" type="text" value="£0.00" style="width: 7.5ch"><br>
  360.                     <hr>
  361.                     <input class="from red" type="date" value="2020-01-01" style="width: 12.25ch">&ensp;to&ensp;<input class="to red" type="date" value="2020-01-01" style="width: 12.25ch">&ensp;is <b><span class="days">0</span> days</b><br>
  362.                     That's <span class="daysBetweenReadable"><b>0 months, 0 weeks</b> and <b>0 days</b></span>
  363.                     <hr>
  364.                     Weekly rent is <b>£<span class="weekly curr">0.00</span></b> which is <b>£<span class="daily curr">0.00</span></b> per day<br>
  365.                     <b class="start">£<span class="daily curr">0.00</span></b> multiplied by <b><span class="days">0</span> days</b> is <b>£<span class="dailyByDays curr">0.00</span></b>
  366.                     <hr>
  367.                     <input type="text" value="0%" style="width: 2.75ch" class="percent red"">&ensp;of <b>£<span class="dailyByDays curr">0.00</span></b> is <b>£<span class="percentOfRemaining curr">0.00</span></b>`
  368.         template.footer = `<span style="color: #d64a65">Total to be paid: <b class="totalStyle">£<span class="total">0.00</span></b></span>`
  369.         
  370.         createModal(template, data, mode)
  371.     }
  372. }
  373.  
  374. function createModal(template, data, mode) {
  375.  
  376.     if ( $('#fModal').length ) return;
  377.  
  378.     let { title, body, footer, close, color, postLaunchActions } = template;
  379.  
  380.     const html = `  <div id="fModal" class="${color}">
  381.                         <div class="header ${color}">${title}</div>
  382.                         <div class="body">${body}</div>
  383.                         <div class="footer">
  384.                             <div class="left">${footer}</div>
  385.                             <div class="right"><div class="btn ${color}" id="fModalClose">${close}</div></div>
  386.                         </div>
  387.                     </div>`
  388.  
  389.     $('body').append(html)
  390.     $('#fModal').hide().fadeIn(314)
  391.  
  392.     //CLOSE
  393.     $('#fModalClose').on('click', removeModal)
  394.  
  395.     //MOVE
  396.     $('#fModal .header').on('mousedown', moveModal)
  397.  
  398.     function moveModal(e) {
  399.         let x = e.clientX - ( $('#fModal .header')[0].getBoundingClientRect().left + ( $('#fModal .header')[0].getBoundingClientRect().width / 2 ) )
  400.         let y = e.clientY - $('#fModal .header')[0].getBoundingClientRect().top
  401.  
  402.         $('body').on('mousemove', beginDrag)
  403.         function beginDrag(e) {
  404.             $('#fModal').css('left', e.clientX - x + "px")
  405.             $('#fModal').css('top', + e.clientY - y + "px")
  406.         } 
  407.  
  408.         $('#fModal .header').on('mouseup', endDrag)
  409.         function endDrag(){
  410.             $('body').off('mousemove', beginDrag)
  411.         }
  412.     }
  413.  
  414.     if ( postLaunchActions ) {
  415.         modalPostLaunch(data, mode)
  416.     }
  417. }
  418.  
  419. function modalPostLaunch(data, mode) {
  420.     if ( mode == 'bfc') {
  421.         postLaunchBfc(data)
  422.     }
  423.  
  424.     function postLaunchBfc(data) {
  425.  
  426.         let { monthly, today, endOfTenancy } = data;
  427.  
  428.         initialise()
  429.         function initialise() {
  430.             $('#fModal .monthly')[0].value = monthly
  431.             $('#fModal .from')[0].value = today
  432.             $('#fModal .to')[0].value = endOfTenancy
  433.             $('#fModal .percent')[0].value = 7
  434.  
  435.             console.log(endOfTenancy)
  436.         }
  437.         
  438.         calc()
  439.         function calc() {
  440.  
  441.             let monthly = $('#fModal .monthly')[0].value
  442.             let percent = $('#fModal .percent')[0].value
  443.  
  444.             clearFormatting()
  445.             function clearFormatting() {
  446.                 // monthly
  447.                 if ( $('#fModal .monthly')[0].value.includes('£') ) {
  448.                     monthly = $('#fModal .monthly')[0].value.slice(1)
  449.                 }
  450.                 if ( monthly.includes(',') ) {
  451.                     monthly = monthly.replace(',', '')
  452.                 }
  453.                 // percent
  454.                 if ( $('#fModal .percent')[0].value.includes('%') ) {
  455.                     percent = $('#fModal .percent')[0].value.replace('%', '')
  456.                 }
  457.             }
  458.  
  459.             let daysBetweenArray = differenceBetweenDates($('#fModal .from')[0].value, $('#fModal .to')[0].value)
  460.             for(let i = 0; i < $('#fModal .days').length; i++ ) {
  461.                 if ( $('#fModal .days')[i].innerHTML == 'NaN' ) {
  462.                     $('#fModal .days')[i].innerHTML = '0'
  463.                     continue;
  464.                 }
  465.                 $('#fModal .days')[i].innerHTML = daysBetweenArray[0]
  466.             }
  467.             $('#fModal .daysBetweenReadable')[0].innerHTML = daysBetweenArray[1]
  468.  
  469.             $('#fModal .weekly')[0].innerHTML = function() {
  470.  
  471.                 let weekly = String( (parseFloat(monthly) * 12 / 52).toFixed(3) ).slice(0, -1) ;
  472.  
  473.                 if( weekly.match(/\.\d(\d)/)[1] == '9' ) {
  474.                     weekly = +weekly + 0.01
  475.                 } else if ( weekly.match(/\.\d(\d)/)[1] == '1' ) {
  476.                     weekly = +weekly - 0.01 
  477.                 } else {
  478.                     weekly = +weekly
  479.                 }
  480.  
  481.                 return String( weekly.toFixed(3) ).slice(0,-1)
  482.             }() 
  483.  
  484.             for(let i = 0; i < $('#fModal .daily').length; i++ ) {
  485.                 $('#fModal .daily')[i].innerHTML = +String( +$('#fModal .weekly')[0].innerHTML / 7 ).match(/\d+(\.\d{2})?/)[0]
  486.             }
  487.  
  488.  
  489.             for(let i = 0; i <  $('#fModal .dailyByDays').length; i++ ) {
  490.                 $('#fModal .dailyByDays')[i].innerHTML = +String(+$('#fModal .daily')[0].innerHTML * +$('#fModal .days')[0].innerHTML).match(/\d+(\.\d{2})?/)[0]
  491.             }
  492.  
  493.             $('#fModal .percentOfRemaining')[0].innerHTML = +String(+$('#fModal .dailyByDays')[0].innerHTML * ( percent / 100 ) ).match(/\d+(\.\d{2})?/)[0]
  494.  
  495.             let total = String(+monthly +  +$('#fModal .percentOfRemaining')[0].innerHTML)
  496.             if ( !total.includes('.') ) {
  497.                 total = String(+monthly +  +$('#fModal .percentOfRemaining')[0].innerHTML) + '.00'
  498.             }
  499.             if ( total.match(/\.\d{1}(?!\d)/) ) {
  500.                 total = String(+monthly +  +$('#fModal .percentOfRemaining')[0].innerHTML) + '0'
  501.             }
  502.             total = total.match(/[0-9]+[.,]\d{2}/)[0]
  503.             $('#fModal .total')[0].innerHTML = total.replace(/(\d{1})(\d{3}.\d{1,2})/, '$1,$2')
  504.         }
  505.  
  506.         format()
  507.         function format() {
  508.             // currentcy input
  509.             if ( !$('#fModal .monthly')[0].value.includes('£') ) {
  510.                 $('#fModal .monthly')[0].value = '£' + $('#fModal .monthly')[0].value
  511.             }
  512.             if ( !$('#fModal .monthly')[0].value.includes('.') ) {
  513.                 $('#fModal .monthly')[0].value = $('#fModal .monthly')[0].value + '.00'
  514.             }
  515.             if ( $('#fModal .monthly')[0].value.match(/(£\d{1})(\d{3}.\d{1,2})/) ) {
  516.                 $('#fModal .monthly')[0].value = $('#fModal .monthly')[0].value.replace(/(£\d{1})(\d{3}.\d{1,2})/, '$1,$2')
  517.             }
  518.             if( $(`#fModal .monthly`)[0].value.match(/\.\d{1}(?!\d)/g)  ){
  519.                 $(`#fModal .monthly`)[0].value = $(`#fModal .monthly`)[0].value + 0
  520.             }   
  521.             // query currencies
  522.             for (let i = 0; i < $('#fModal .curr').length; i++) {
  523.                 if ( !$(`#fModal .curr`)[i].innerHTML.includes('.') ) {
  524.                     $(`#fModal .curr`)[i].innerHTML = $(`#fModal .curr`)[i].innerHTML + '.00'
  525.                 }
  526.                 if ( $(`#fModal .curr`)[i].innerHTML.match(/(\d{1})(\d{3}.\d{1,2})/) ) {
  527.                     $(`#fModal .curr`)[i].innerHTML = $(`#fModal .curr`)[i].innerHTML.replace(/(\d{1})(\d{3}.\d{1,2})/, '$1,$2')
  528.                 }
  529.                 if( $(`#fModal .curr`)[i].innerHTML.match(/\.\d{1}(?!\d)/g)  ){
  530.                     $(`#fModal .curr`)[i].innerHTML = $(`#fModal .curr`)[i].innerHTML + 0
  531.                 }   
  532.             }
  533.             // percent
  534.             if ( !$('#fModal .percent')[0].value.includes('%') ) {
  535.                 $('#fModal .percent')[0].value = $('#fModal .percent')[0].value + '%'
  536.             }
  537.         }
  538.  
  539.         resize()
  540.         function resize() {
  541.             // currency
  542.             if ( $('#fModal .monthly')[0].value.includes(',') ) {
  543.                 $('#fModal .monthly').css('width',  $('#fModal .monthly')[0].value.length - 0.25 + 'ch')
  544.             } else {
  545.                 $('#fModal .monthly').css('width',  $('#fModal .monthly')[0].value.length + 'ch')
  546.             }
  547.             // percent
  548.             if ( $('#fModal .percent')[0].value.includes('.') ) {
  549.                 $('#fModal .percent').css('width',  $('#fModal .percent')[0].value.length + 0.25 + 'ch')
  550.             } else {
  551.                 $('#fModal .percent').css('width',  $('#fModal .percent')[0].value.length + 0.75 + 'ch')
  552.             }
  553.         }
  554.  
  555.         listeners()
  556.         function listeners() {
  557.             $('#fModal .monthly, #fModal .from, #fModal .to').on('input', function() {
  558.                 calc()
  559.                 resize()
  560.             })
  561.             $('#fModal .percent').on('input', function() {
  562.                 calc()
  563.                 resize()
  564.             })
  565.             $('#fModal .monthly, #fModal .percent, #fModal .from, #fModal .to').on('change', function() {
  566.                 calc()
  567.                 format()
  568.                 resize()
  569.             })
  570.             $('#fModal .monthly, #fModal .percent').on('focus click', function(e) {
  571.                 e.target.select()
  572.             })
  573.             let timer;
  574.             $('#fModal .monthly, #fModal .percent').on('keyup', function(e) {
  575.                 clearInterval(timer)
  576.                 timer = setTimeout( () => {
  577.                             e.target.blur()
  578.                         }, 1218)
  579.             })
  580.         }
  581.     }
  582.  
  583. }
  584.  
  585. function removeModal() {
  586.     $('#fModal').fadeOut(314, function () {
  587.         $('#fModal').remove()
  588.     })
  589. }
  590.  
  591. function tabTransactions(remove) {
  592.     if (remove) {
  593.         $('#genOverdueBtn').remove()
  594.         $('#genOverdueContainer').remove()
  595.         $('.genCopyIcon').remove()
  596.         return;
  597.     }
  598.  
  599.     overdueGenReport()
  600.     function overdueGenReport() {
  601.         appendOverdueBtn()
  602.         function appendOverdueBtn() {
  603.             if ( $('#genOverdueBtn').length ) return;
  604.     
  605.             const html = `<button id="genOverdueBtn" class="btn btnPad btnSpecial">Generate Overdue Report</button>`
  606.             $('body').append(html)
  607.             $('#genOverdueBtn').on('click', appendOverdueDisplay)
  608.         }
  609.     
  610.         function appendOverdueDisplay() {
  611.             $('#genOverdueBtn').off('click', appendOverdueDisplay)
  612.             const html = `<textarea id="genOverdueText" class="input textarea textareaSpecial"></textarea>${icons.copy}`
  613.             $('body').append(html)
  614.             $('#genOverdueText').hide().fadeIn(618)
  615.             $('.genCopyIcon').hide().fadeIn(618)
  616.     
  617.             $('#genOverdueText').on('focusout', removeOverdueReport)
  618.             $('#genOverdueText').focus()
  619.     
  620.             $('.genCopyIcon').on('mousedown', copyOverdueReport)
  621.     
  622.             getOverdueData()
  623.         }
  624.     
  625.         function getOverdueData() {
  626.     
  627.             let overdueArray = [];
  628.     
  629.             // OLD FUCKED UP AO-HELPER LOGIC START
  630.             let getTransactionLength = $('.transactions tbody').children().length
  631.             for (let i = 0; i < getTransactionLength; i++) {
  632.                 if ( $('.transactions tbody').children().eq(i).children().eq(1).text().includes('Overdue') ) {
  633.     
  634.                     let getOutstanding = $('.transactions tbody').children().eq(i).children().eq(9).text().trim()
  635.                     let getDesc = $('.transactions tbody').children().eq(i).children().eq(3).text().split('Tenancy:')[0].trim()
  636.                     let getDate = $('.transactions tbody').children().eq(i).children().eq(1).text().split('Due')[0]
  637.     
  638.                     if ( getDesc.includes('Default tenancy rent charge transaction type') ) {
  639.                         getDesc = 'Outstanding Rent'
  640.                         getDate = $('.transactions tbody').children().eq(i).children().eq(3).text().split('Tenancy:')[0].trim().match(/\d{1,2}.{2} \w{3,4} \d{4} - \d{1,2}.{2} \w{3,4} \d{4}/)
  641.                     } else {
  642.                         getDesc = $('.transactions tbody').children().eq(i).children().eq(3).text().split('Tenancy:')[0].trim()
  643.                         }
  644.                     overdueArray.push([getOutstanding, getDesc, getDate])
  645.                 }
  646.             }
  647.             overdueArray.forEach( (i) => appendToGenReportTextbox(`${i[0]} — ${i[1]} (${i[2]})`, false) )
  648.             let formattedOverdueValues = []
  649.             for (let i = 0; i < overdueArray.length; i++) {
  650.                 formattedOverdueValues[i] = +overdueArray[i][0].replace(',', '').slice(1)
  651.             }
  652.             let sum = '£' + String(formattedOverdueValues.reduce( (a, b) => a + b, 0))
  653.             appendToGenReportTextbox('Total to be paid: ' + `${sum.replace(/£(\d{1,4}$)/, '£$1.00').replace(/£(\d{1})(\d{3})/, '£$1,$2')}`, true)
  654.             // OLD FUCKED UP AO-HELPER LOGIC START
  655.     
  656.             resizeOverdueReport()
  657.         }
  658.     
  659.         function appendToGenReportTextbox(data, end) {
  660.             if (!end) {
  661.                 $('#genOverdueText').val( $('#genOverdueText').val() + data + '\n' );
  662.             } else {
  663.                 $('#genOverdueText').val( $('#genOverdueText').val() + '\n' + data );
  664.             }
  665.         }
  666.     
  667.         function resizeOverdueReport() {
  668.             $('#genOverdueText').width(  $('#genOverdueText').prop('scrollWidth') + "px" )
  669.             $('#genOverdueText').height( $('#genOverdueText').prop('scrollHeight') - 10 + "px" )
  670.             $('.genCopyIcon').css('left', $('#genOverdueText')[0].getBoundingClientRect().right - 52 + "px")
  671.     
  672.         }
  673.     
  674.         function copyOverdueReport() {
  675.             copyToClipboard($('#genOverdueText').val())
  676.             copyToast('report')
  677.         }
  678.         
  679.         function removeOverdueReport() {
  680.             $('#genOverdueText').fadeOut(314, function() {
  681.                 $('#genOverdueText').remove()
  682.                 $('#genOverdueBtn').on('click', appendOverdueDisplay)
  683.             })
  684.             $('.genCopyIcon').fadeOut(314, function() {
  685.                 $('.genCopyIcon').remove()
  686.             })
  687.         }
  688.     }
  689. }
  690.  
  691. function tabRecurrings(remove) {
  692.  
  693.     if (remove) {
  694.         $('#genNextMonthBtn').remove()
  695.         return;
  696.     }
  697.  
  698.     // genNextMonth()
  699.     function genNextMonth() {
  700.         
  701.         appendGenNextMonthBtn()
  702.         function appendGenNextMonthBtn() {
  703.             const html = `<button id="genNextMonthBtn" class="btn btnPad">Generate Next Month Invoice?</button>`
  704.             
  705.             new Promise( function(resolve) {
  706.                 waitForExistance('.recurrings .box-header .actions', resolve)
  707.             }).then( () => {
  708.                 if ( $('#genNextMonthBtn').length ) return;
  709.                 $('.recurrings .box-header .actions').prepend(html)
  710.                 $('#genNextMonthBtn').on('click', automation)
  711.             } )
  712.         }
  713.  
  714.         async function automation() {
  715.             disableAccess('<b style="font-size: 1.5em;">Please wait 📅</b><br>Generating next month\'s invoice...')
  716.             
  717.             $('.recurrings .datatable-subactions ul > li:nth-child(3) a').click()
  718.         
  719.             new Promise( function(resolve) {
  720.                 waitForIframeExistance('#dialog iframe', 'input#RecurringDaysInAdvance', resolve)
  721.             }).then( () => {
  722.                 let input = $('#dialog iframe').contents().find('input#RecurringDaysInAdvance')
  723.                 input.val(31)
  724.                 $('#dialog iframe').contents().find('input.submit-btn')[0].click()
  725.             })
  726.         
  727.             await wait(2500)
  728.  
  729.             new Promise ( function(resolve) {
  730.                 $('.recurrings .datatable-subactions ul > li:nth-child(3) a').click()
  731.                 waitForIframeExistance('#dialog iframe', 'input#RecurringDaysInAdvance', resolve)
  732.             }).then( () => {
  733.                 let input = $('#dialog iframe').contents().find('input#RecurringDaysInAdvance')
  734.                 input.val(7)
  735.                 $('#dialog iframe').contents().find('input.submit-btn')[0].click()
  736.                 disableAccess('', true)
  737.             })            
  738.         }
  739.  
  740.  
  741.     }
  742. }
  743.  
  744. function tabAttachments(remove) {
  745.     if (remove) {
  746.         return;
  747.     }
  748. }
  749.  
  750. function appendReadableDateRange() {
  751.     if ( $('.readableDateRange').length ) return;
  752.  
  753.     let getDates = $('.identifier-detail .sub-title')[0].innerHTML.match(/(\d{1,2} \w{3,4} \d{4}) - (\d{1,2} \w{3,4} \d{4})/)
  754.  
  755.     let from = dateFormat( getDates[1].split(' ') )
  756.     let to = dateFormat( getDates[2].split(' ') )
  757.  
  758.     storage.tenancyStartDate = from
  759.     storage.tenancyEndDate = to
  760.  
  761.     function dateFormat(date) {
  762.         let month = new Date(1900 + date[1] + 1).getMonth() + 1
  763.         return date[2] + '-' + String(month).padStart(2, '0') + '-' + String(date[0]).padStart(2, '0')
  764.     }
  765.     
  766.     let readable = differenceBetweenDates(from, to)[1]
  767.                     .replace(/&ensp;/g, '')
  768.                     .replace(/<b>/g, '')
  769.                     .replace(/<\/b>/g, '')
  770.                     .replace(/\s\s+/g, ' ')
  771.                     .replace(/ and 0 days/g, '')
  772.                     .replace(/, 0 weeks/g, '')
  773.                     .trim()    
  774.     
  775.     let readableWrapped = `<span style="color: #8ba2af" class="readableDateRange">&ensp;▶&ensp;${readable}</span>`
  776.     
  777.     $('.identifier-detail .sub-title')[0].innerHTML = $('.identifier-detail .sub-title')[0].innerHTML
  778.                                                         .replace(/(\d{1,2} \w{3,4} \d{4} - \d{1,2} \w{3,4} \d{4})/, '$1' + readableWrapped)
  779. }
  780.  
  781. function currentTime(){
  782.     let time = new Date();
  783.     return time.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric', hour12: true });
  784. }
  785.  
  786. function currentDate() {
  787.     let date = new Date
  788.  
  789.     let dateYear = date.getFullYear()
  790.     let dateMonth = String(date.getMonth() + 1).padStart(2, '0')
  791.     let dateDate = String(date.getDate()).padStart(2, '0')
  792.  
  793.     let today = `${dateYear}-${dateMonth}-${dateDate}`
  794.  
  795.     return today
  796. }
  797.  
  798. function currentDateLegacy(){
  799.     let date = new Date();
  800.     let dateString = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, "0")}`;
  801.     return dateString;
  802. }
  803.  
  804. function differenceBetweenDates(from, to) {
  805.     let a = moment(from, 'YYYY-MM-DD');
  806.     let b = moment(to, 'YYYY-MM-DD');
  807.  
  808.     let diffDays = b.diff(a, 'days') + 1;
  809.  
  810.     let diff = moment.duration(b.diff(a))
  811.     diff.add(1, 'days')
  812.  
  813.     let years = diff.years()
  814.     let months = diff.months()
  815.     let weeks = diff.weeks()
  816.     let days = diff.days()%7
  817.  
  818.     let diffFull = `<b> ${years == 1 ? years + ' year,&ensp;' : years > 1 ? years + ' years,&ensp;' : ''}
  819.                     ${months == 1 ? months + ' month,&ensp;' : months > 1 ? months + ' months,&ensp;' : ''}
  820.                     ${isNaN(weeks) ? '0 weeks' : weeks == 1 ? weeks + ' week' : weeks + ' weeks'}</b> and <b>
  821.                     ${isNaN(days) ? '0 days' : days == 1 ? days + ' day' : days + ' days'}</b>`
  822.  
  823.     return [diffDays, diffFull];
  824. }
  825.  
  826. function querySeperator() {
  827.     setTimeout( () => delay(), 128)
  828.     function delay() {
  829.         let commaDelimited = $('#_q').val().trim().split(' ').join(', ')
  830.         $('#_q').val( commaDelimited )
  831.     }
  832. }
  833.  
  834. function copyOnClick(e) {
  835.  
  836.     tenant()
  837.     function tenant() {
  838.         if ( $(e.target).closest('.identifier-detail').length ) {
  839.  
  840.             if ( e.ctrlKey && e.altKey ) {
  841.                 landingDetailFull()
  842.                 return;
  843.             }
  844.  
  845.             landingDetail()
  846.         }
  847.         if ( $(e.target).closest('.financial-transaction').length ) {
  848.             landingBalance()
  849.         }
  850.         if ( $(e.target).closest('.summary-group-container').length ) {
  851.             landingSummary()
  852.         }
  853.         if ( $(e.target).closest('.notes tbody').length ) {
  854.             landingNotes()
  855.         }
  856.         if ( $(e.target).closest('.transactions tbody').length ) {
  857.             statement()
  858.         }
  859.         if ( $(e.target).closest('.attachments tbody').length ) {
  860.             documents()
  861.         }
  862.     }
  863.  
  864.     tenantSearch()
  865.     function tenantSearch() {
  866.         if ( $(e.target).closest('.datatable-index-filters .tenancies tbody').length ) {
  867.             tenantSearchTable()
  868.         }
  869.     }
  870.  
  871.     // further test
  872.     function landingDetail() {
  873.  
  874.         if ( $(e.target).attr('class') == 'title' ) {
  875.             copyToClipboard($(e.target).text().match(/TE\d{4,5}/)[0])
  876.             copyToast('tenancy reference')
  877.         }
  878.         if ( $(e.target).attr('class') == 'name' ){
  879.             let clone = $(e.target).clone()
  880.             clone.find('.label').remove()
  881.             copyToClipboard(clone.text().replace(/\+.+/, '').trim())
  882.             copyToast('full name')
  883.         }
  884.         if ( $(e.target).closest('.sub-title').length ) {
  885.             copyToClipboard($('.sub-title a')[0].innerHTML.split(',')[0].replace(' Room', ', Room'))
  886.             copyToast('property + room')
  887.         }
  888.     }
  889.     function landingDetailFull() {
  890.  
  891.         let clone = $('.identifier-detail .name').clone()
  892.         clone.find('.label').remove()
  893.         let getName = clone.text().replace(/\+.+/, '').trim()
  894.         let getDate = $('.identifier-detail').children().eq(2).contents()[2].wholeText
  895.         let getMonthly = $('.content-main .summary-data-container').children().eq(1).children().eq(1).text().trim()
  896.  
  897.         copyToClipboard(getName + "\n" + getDate + "\n" + getMonthly + "\n\n")
  898.         copyToast('full information')
  899.     }
  900.     function landingBalance() {
  901.         if ( $(e.target).attr('class').includes('number') ) {
  902.             copyToClipboard($(e.target).text())
  903.             copyToast('balance')
  904.         }
  905.     }
  906.     function landingSummary() {
  907.         if ( $(e.target).closest('.name').length ) {
  908.             copyToClipboard($(e.target).text())
  909.             copyToast('full name')
  910.         }
  911.         if ( $(e.target).closest('.detail > div:nth-child(2) div').length ) {
  912.             copyToClipboard($(e.target).text())
  913.             copyToast('phone')
  914.         }
  915.         if ( $(e.target).closest('.summary-group-container .detail > div:nth-child(3) div').length ) {
  916.             copyToClipboard($(e.target).text())
  917.             copyToast('email')
  918.         }
  919.     }
  920.     function landingNotes() {
  921.         if ( $(e.target).closest('.note').length ) {
  922.             copyToClipboard($(e.target).text())
  923.             copyToast('note')
  924.         }
  925.     }
  926.     function statement() {
  927.         if ( $(e.target).closest('.ref').length ) {
  928.             copyToClipboard($(e.target).text())
  929.             copyToast('ref')
  930.         }
  931.         if ( $(e.target).closest('.date').length ) {
  932.             copyToClipboard($(e.target).text().split('Due')[0]  )
  933.             copyToast('date')
  934.         }
  935.         if ( $(e.target).closest('.description').length ) {
  936.             copyToClipboard($(e.target).closest('.description').text().replace(/ {3}.+/, '').trim() )
  937.             copyToast('description')
  938.         }
  939.         if ( $(e.target).closest('.charge-made').length ) {
  940.             copyToClipboard($(e.target).text().trim())
  941.             copyToast('charge made')
  942.         }
  943.         if ( $(e.target).closest('.payments-received').length ) {
  944.             copyToClipboard($(e.target).text().trim())
  945.             copyToast('received')
  946.         }
  947.         if ( $(e.target).closest('.outstanding').length ) {
  948.             copyToClipboard($(e.target).text().trim())
  949.             copyToast('outstanding')
  950.         }
  951.     }
  952.     function documents() {
  953.         if ( $(e.target).closest('.name').length ) {
  954.             let header = $(e.target).closest('.name').find('a').text()
  955.             let body = $(e.target).closest('.name').find('.unimportant')[0].innerHTML.replace(/<br>/g, '\n')
  956.             let compile = body ? header + '\n' + body : header;
  957.  
  958.             let headerLowerCase = header.toLowerCase()
  959.  
  960.             if ( headerLowerCase.includes('top') || headerLowerCase.includes('receipt') || headerLowerCase.includes('key') ) {
  961.  
  962.                 let bodyArr = []
  963.  
  964.                 for ( let i = 0; i < $(targets.documents.checkboxes).length - 1; i++ ) {
  965.  
  966.                     // if anything is checked , return
  967.                     if ( $(targets.documents.checkboxes)[i].checked  ) {
  968.  
  969.                         // as something is checked, we want to loop over checked and push its data
  970.                         for ( let i = 0; i < $(targets.documents.checkboxes).length; i++ ) {
  971.                             if ( $(targets.documents.checkboxes)[i].checked  ) {
  972.                                 bodyArr.push( $($(targets.documents.checkboxes)[i].closest('tr')).find('.unimportant')[0].innerHTML.replace(/<br>/g, '\n') )
  973.                             }
  974.                         }
  975.  
  976.                         compile = header + '\n' + bodyArr.join('\n')
  977.  
  978.                         copyToClipboard( noteFormat_topup(compile) )
  979.                         copyToast('multiple utility notes')
  980.                         return;
  981.                     }
  982.                 }
  983.                 copyToClipboard( noteFormat_topup(compile) )
  984.                 copyToast('utility note')
  985.             } else {
  986.                 copyToClipboard(compile)
  987.                 copyToast('note')
  988.             }   
  989.         }
  990.     }
  991.     function tenantSearchTable() {
  992.         if ( $(e.target).closest('.name').length ) {
  993.             copyToClipboard($(e.target).text())
  994.             copyToast(`ref`)
  995.         }
  996.         if ( $(e.target).closest('.tenant').length ) {
  997.             copyToClipboard($(e.target).closest('.tenant').text().replace(/ {2}.+/, '').split('+')[0].trim())
  998.             copyToast('name')
  999.         }
  1000.         if ( $(e.target).closest('.unit-address').length ) {
  1001.             copyToClipboard($(e.target).text())
  1002.             copyToast('unit-address')
  1003.         }
  1004.     }
  1005.  
  1006.  
  1007. }
  1008.  
  1009. function noteFormat_topup( content ) {
  1010.  
  1011.     console.log(content)
  1012.  
  1013.     let split = content.split('\n')
  1014.     let header = split[0] + ' ― '
  1015.     let body = split.slice(1).join('; ')
  1016.  
  1017.     console.log( (header + body + ';').replace(/ ;/g, '') )
  1018.  
  1019.     return (header + body + ';').replace(/ ;/g, '') 
  1020. }
  1021.  
  1022. function copyToClipboard(text) {
  1023.     let temp = $("<textarea>");
  1024.     $('body').append(temp);
  1025.     temp.val(text).select();
  1026.     document.execCommand("copy");
  1027.     temp.remove();
  1028. }
  1029.  
  1030. function copyToast(text) {
  1031.  
  1032.     if ( $('.copyToast').length > 4 ) return;
  1033.  
  1034.     let x = event.pageX
  1035.     let y = event.pageY
  1036.  
  1037. 	$(window).on('mouseup', calcMousePos)
  1038.  
  1039. 	function calcMousePos(newMousePos) {
  1040.  
  1041. 		if (Math.abs(x - newMousePos.pageX) > 1 || Math.abs(y - newMousePos.pageY) > 1) return;
  1042.  
  1043.         let elem = document.createElement('div')
  1044.         elem.innerHTML = icons.clipboard + ' ' + text
  1045.         elem.className = "copyToast"
  1046.         elem.style.backgroundColor = $('#main_nav').css('background-color')
  1047.         elem.style.left = event.pageX + "px"
  1048.         elem.style.top = event.pageY - 25 + "px"
  1049.         
  1050.         $('body').append(elem);
  1051.     
  1052.         $(elem).delay(618).animate({
  1053.             'opacity': 0,
  1054.             'top': event.pageY - 55 + "px",
  1055.         }, 618, function() {
  1056.             $(elem).remove()
  1057.         })
  1058.  
  1059. 		$(window).off('mouseup', calcMousePos)
  1060. 	}
  1061. }
  1062.  
  1063. function disableAccess(desc, remove) {
  1064.  
  1065.     if ( remove ) {
  1066.         removeDisableAccess()
  1067.         return;
  1068.     }
  1069.     if ( $('#disableAccess').length ) return;
  1070.  
  1071.     $('body').append(`  <div id="disableAccess">
  1072.                             <div id="disableDesc">${desc}</div>
  1073.                         </div>`)
  1074.  
  1075.     $('#disableAccess').hide().fadeIn(618)
  1076.  
  1077.     setTimeout( () => {
  1078.         if ( $('#disableAccess').length ) {
  1079.             $('#disableDesc').append('<br><div class="btn" style="transform: scale(1.75,1.75); margin-top: 48px" id="disableExit">This is taking too long! Get me out of here. 😠</div>')
  1080.             $('#disableExit').hide().fadeIn(1024)
  1081.             $('#disableExit').on('click', function() {
  1082.                 removeDisableAccess()
  1083.             })
  1084.         }
  1085.     }, 5500)
  1086.  
  1087.     $('#disableClickCover').on('mousedown keydown', disableAccess)
  1088.     function disableAccess(e){
  1089.         e.preventDefault()
  1090.         return;
  1091.     }
  1092.  
  1093.     function removeDisableAccess() {
  1094.         $('#disableAccess').off('mousedown keydown scroll', disableAccess)
  1095.         $('#disableAccess').fadeOut(314, function() {
  1096.             $('#disableAccess').remove()
  1097.         })
  1098.     }
  1099.  
  1100. }
  1101.  
  1102. function quickAccess() {
  1103.  
  1104.     let html = `<div class="qaOption report" id="qaReport">
  1105.                     <div style="position: fixed; left: 27px">${icons.letter}</div>
  1106.                     Overdue Report</div>`
  1107.  
  1108.     $('#main_nav').append(html)
  1109.  
  1110.     $('.qaOption').on('click', qaActions)
  1111.  
  1112.     function qaActions(e) {
  1113.         if (e.target.id == 'qaReport'){
  1114.             qaGenOverdueReport()
  1115.         }
  1116.     }
  1117.  
  1118.     function qaGenOverdueReport() {
  1119.         disableAccess('<b style="font-size: 1.5em;">Please wait 📋</b><br>Generating overdue report...')
  1120.  
  1121.         let iframe = document.createElement('iframe')
  1122.         iframe.id = 'targetIframe'
  1123.         iframe.src = 'https://system.arthuronline.co.uk/flintonsprop/reports/edit/11441/'
  1124.  
  1125.         $('body').append(iframe)
  1126.  
  1127.         let interval;
  1128.         if ( !$(iframe).contents().find("body").length ) {
  1129.             interval = setInterval( () => findBody(), 25)
  1130.         }
  1131.         function findBody() {
  1132.             if ( $(iframe).contents().find("body").length ) {
  1133.                 clearInterval(interval)
  1134.                 iframeContents()
  1135.             }
  1136.         }
  1137.  
  1138.         setTimeout( () => iframeContents(), 3000)
  1139.  
  1140.         function iframeContents() {
  1141.             let contents = $(iframe).contents()
  1142.             contents.find('.daterangepicker .ranges ul li:nth-child(3)').click()
  1143.             contents.find('#runOutput')[0].selectedIndex = 4;
  1144.             contents.find('.save-and-run .btn').click()
  1145.             setTimeout( () => iframe.remove(), 5000 )
  1146.             disableAccess('', true)
  1147.         }
  1148.     }
  1149. }
  1150.  
  1151. function quickNotes() {
  1152.     let html = `<div id="quickNotes">
  1153.                     <div id="qnPhone" class="btnCirc">${icons.phone}</div>
  1154.                     <div id="qnVoicemail" class="btnCirc">${icons.vm}</div>
  1155.                     <div id="qnEmail" class="btnCirc">${icons.email}</div>
  1156.                     <div id="qnReceipt" class="btnCirc">${icons.receipt}</div>
  1157.                 </div>`
  1158.  
  1159.     $('#content-wrapper').append(html)
  1160.  
  1161.     $('#quickNotes').on('mousedown', quickNoteActions)
  1162.     function quickNoteActions(e) {
  1163.  
  1164.  
  1165.         if ( e.target.closest('div').id == 'qnPhone') {
  1166.             copyToClipboard(`PHONED tenant at ${currentTime()} on ${currentDateLegacy()} regarding `)
  1167.         }
  1168.         if ( e.target.closest('div').id == 'qnVoicemail') {
  1169.             copyToClipboard(`Left VOICEMAIL at ${currentTime()} on ${currentDateLegacy()} regarding `)
  1170.         }
  1171.         if ( e.target.closest('div').id == 'qnEmail') {
  1172.             copyToClipboard(`EMAILED tenant at ${currentTime()} on ${currentDateLegacy()} regarding `)
  1173.         }
  1174.         if ( e.target.closest('div').id == 'qnReceipt') {
  1175.             let tenantPayDay = String(storage.tenancyStartDate.match(/\d{4}-\d{1,2}-(\d{1,2})/)[1]).padStart(2, '0')
  1176.             copyToClipboard(`Top-up receipts approved to be deducted from rent due ${tenantPayDay}/`)
  1177.         }
  1178.     }
  1179. }
  1180.  
  1181. function addTransactionBtn(e) {
  1182.     if ( e.target.closest( targets.addTransaction.btn ) ) {
  1183.         topupProcessing()
  1184.     }
  1185.  
  1186.     function topupProcessing() {
  1187.         let desc;
  1188.         let date;
  1189.         let amount;
  1190.  
  1191.         new Promise( function(resolve) {
  1192.             waitForIframeExistance('#dialog iframe', targets.addTransaction.amount , resolve)
  1193.         }).then( () => {
  1194.             //$('#dialog iframe').contents().find( targets.addTransaction.desc ).on('change', descChange)
  1195.             $('#dialog iframe').contents().find( targets.addTransaction.desc ).on('paste', function() {
  1196.                 setTimeout( () => descChange(), 32)
  1197.             })
  1198.  
  1199.             desc = $('#dialog iframe').contents().find( targets.addTransaction.desc )
  1200.             date = $('#dialog iframe').contents().find( targets.addTransaction.date )
  1201.             amount = $('#dialog iframe').contents().find( targets.addTransaction.amount )
  1202.         } )
  1203.  
  1204.         function descChange() {
  1205.             let current = currentDate().split('-')
  1206.             let dayAndMonth = desc.val().match(/(?<=deduct).*?(\d{1,2})[/.-](\d{1,2})/)
  1207.             let day = dayAndMonth[1]
  1208.             let month = dayAndMonth[2]
  1209.             let year = current[0]
  1210.             if ( +current[1] == 12 && +month == 1 ) {
  1211.                 year++
  1212.             }
  1213.             date.val(`${year}-${month}-${day}`)
  1214.  
  1215.             parseDesc()
  1216.         }
  1217.         function parseDesc() {
  1218.  
  1219.             let topUps = desc.val().split(' ― ')[1].split(';')
  1220.                 topUps.splice(topUps.length - 1, 1)
  1221.             let arr = []
  1222.  
  1223.             for(let i = 0; i < topUps.length; i++) {
  1224.                 console.log(topUps[i])
  1225.  
  1226.                 if (topUps[i].includes('dup')) {
  1227.                     continue;
  1228.                 } else if (topUps[i].includes('app') && topUps[i].includes('rej')) {
  1229.  
  1230.                     let match
  1231.                     try {
  1232.                         match = topUps[i].match(/(?<=app\w+) £?((\d+)(\.?(\d+))?)/)[1]
  1233.                     } catch(err) {
  1234.                         match = topUps[i].match(/((\d+)(\.?(\d+))?)(?= app)/)[1]
  1235.                     }
  1236.                     arr.push( +match )
  1237.  
  1238.                 } else if (topUps[i].includes('rej')) {
  1239.                     continue;
  1240.                 } else {
  1241.                     arr.push( +topUps[i].match(/£((\d*)\.?(\d*))/)[1] )
  1242.                 }
  1243.             }
  1244.  
  1245.             // populate value field
  1246.             if ( arr.length == 1) {
  1247.                 amount.val( -arr[0] )
  1248.             } else {
  1249.                 amount.val( -arr.reduce( (prev, curr) => prev + curr ) )
  1250.             }            
  1251.         }
  1252.     }
  1253. }
  1254.  
  1255. function loadIcons() {
  1256.     icons.percent = `<img style="filter: invert(100%); height: 20px; width: 20px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA9klEQVRIie2UOw6CQBRFj53f1sRVuAoLURtWopWfljXgWlyCn87EPRjssLFCi7lGVJCBUFB4EkLezHDfm5l3gT9VZQTsgaveTsq6BuAWEb8nPElJfM15eRIc9NEcaAELxbuPdRMgAm5AP0+CUIJtxR3FYWxNDwg0PssjDubM78BSSVa876AGbDS2UZyLAWbrn3cw1PxM8UU7KYSjiq/ANibex5x5hLmDUqkDR0z1ftniAGuJn4Bm2eJJLWlrxky6wBlT/VRjY+zN+JO0lrQ1YybPlgx4b0kbM2byqyWzzGiFR3pLOnyff8TLL9a4mF9yEmlm/FMxHpirXwLh4+GPAAAAAElFTkSuQmCC">`,
  1257.     icons.clipboard = `<img style=" width: 14px; height: 14px; margin-top: -2px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAAAgUlEQVRIie2VQQqAIBBFn9ExovtE9+ji0z2mTYJKaE1Zi/wgunDmyf8wOlWlprqq3RPADKyAGtehXGCRAMONx7oSQHMXrXo1g1TWTASYfJOcRXcyEWAsAayZRHWfZtAADfAXQB+cH52iXp9atO675WeTM4AlgFyR7LVAPE2rqHoGG9+QR9qv/pARAAAAAElFTkSuQmCC">`,
  1258.     icons.copy = `<img class="genCopyIcon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAWBJREFUaIHtmKFOA0EQhv/ZrihJBRKBRFTUInB9BUjqEVUXDCEhQaArCgpNcr6iBolENEFgKnmAPsCFJg13g2pCZo+EvfRuuDCf29nkbr7M7k1uAMP431BZcJQkvXzdnRQFhkQ0aDKheXpfmtNPeBkYJUlv87H36oA+RT1KBycD+bo7cUBfI5kqBAJFgaFGIlUJjpA887FnsmmCCrQNE9AmuAO/ock+wcxLcrTw7G5n6XQl96MrsO0TzHTRRJMjogEY4w3yt7Px9aHcjxbQ6hMOdIDP/CGMR6LZJxjhu6PvQNN94vT8ir8t9+V+679CJqCNCWhjAtqYgDYmoI0JaGMC2piANiagTfBP/NdnoZLWV8AEtImfCzHemXC0XYu5Ta0wI5Ox+AoQXnaSTTUWMhAt0IG7KcDBlLhumJGRp0sZjxaYpdNVx/tjMJ7KSrprmJEx45k8ncwf75Z1v88w2sYX2olePMs5UyEAAAAASUVORK5CYII=">`,
  1259.     icons.letter = `<img style="width: 17px; height: 17px;margin-top: -1px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAcElEQVR4AZ3KoRGAMBBE0YNuSBO0gsEhY2FSC5XQAS5DJ6hkITHczawA/rdPPoQOQT1wdODpBOAZ0m3whnEkgskwiu4wIltm0Y6+vgIW8f6gXG/UuczQouaIbVGqt+pUZmhWc8S2KIIVLXIIZCfvuwD++D9vDI3s3wAAAABJRU5ErkJggg==">`,
  1260.     icons.phone = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABA0lEQVR4Ae3UMSgFUBTH4SNPYWGhTDLJbBPCoIyCwV7CYLAYhDJaTRY2MSiSwURZpNjLCqO32PQx6d0yvHfv+r6z/+os/2hqhBW7f7elM/KYkzqIPDalHiKPVamXyGNJqhp5jCA1GDn0SLEceXxIHUYex1LrkceiWjfaIo8OXwCutEU+Z4ArlShhEjAQpTyC6yhlHDAbpRyBd31RRrd38Kwjyhj1DS6ilDXAmfaoocWOfRMqUS/bgCe9NZkTQNWdW7dO63jfHuDVQvzS6kQK1hob33vDzv1nN+phxqdEA6GUfpcFoZQZTwWhlDHHPrNDKRXTDrypNR/5dBkyZcmG1WhqwA+OqfZX7C8frQAAAABJRU5ErkJggg==">`,
  1261.     icons.vm = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABh0lEQVR4Ae3TM6CWURgA4DfbXLKnzKk127Ybs+227DlrryXXFsZsm0/+6r/hYonPuxz7xG/pv/8UMsR+Fz1x3HL14/tCQ8sd99hF+wxRIFLp75ZU25WKNJSyXaob+sYXFvieq6rGV1Rz1fcsiI8MAFzQS/YI5a31BpyTLF1B58Aba5WPkF0vFwADIkJZD8EauSOhsZtgcVKyFNzUOBLyWA0eKhtmg6OyRQotwXP54h35PAetIoVsDoPZ4SToEd9wFrSJd7QFZ7/Tqjs4Fe6Ast9pshKMjneMBau+06oMuBOeg/zfabIQjI93TASLvtMqH3gRLoK632myM7mRMAjs+k6rOuBi2Pb9uRT1FFSLd9QATxWNNCwC20JH8EitSGELOJjkj4LNkUJNj0CniHAA3DNM9vhAFXsBzZIuzQF7VYwP5DDSPZLplHYZcNYsM2zwAnDRDEm4BHhhgxlmOQu4kvxKFZ2RVWdUTL3E8S7JrEvGyxtpyaaRQaabkYGYZpCGssV///3l3gLdS5QBUjZf7QAAAABJRU5ErkJggg==">`,
  1262.     icons.email = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAA00lEQVR4Ae3QAQbCUBzH8X8FpBOkMwQdIoi6SZ0ghlSgblIIO0RhZ8hjAyEB1Tf+FP/ZHnvAsg/Y4/lu+0mdNYhIqSolomUzK0JtbcgR6mZDLwAmFYKOCaogJEKPnT77PdnTFSkPKYYk+CQMRZWGONHXU4c5D4rcWdDWO31O5SF7MSYvLnqRDb0LP32K4+vKzP66P2TG/I2fP+MPWY6xKEaMRDHGoSqE1FE3UQw4oPyhMjq+HTcopC6cUeEhqwn9bSglVGpDa0JtxGJJRlUZkTRq7ANaQCOJt++IMQAAAABJRU5ErkJggg==">`,
  1263.     icons.receipt = `<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAgklEQVR4Ae2RAQaAQBBF9x6hPVrRETrAANCpooMUAUQ3eLEGaJkJonb/4I+HBz8UEHqa1IKkjswO0t1FwkaDADASWcFBJCeCEw2HtkWyoscpWCT2uUTBkXdFiH11tbpaXa2u9hXRiUY/m2RFK5FJd2vZwSY5UUdMPSGpWxYHGcL/cwGEQwsHbI/lEwAAAABJRU5ErkJggg==">`
  1264. }
  1265.  
  1266. function appendCSS() {
  1267.  
  1268.     const colors = {
  1269.         red: '#d64a65',
  1270.         blue: '#1facf0',
  1271.         green: '#8BC34A',
  1272.     }
  1273.  
  1274.     const copyToast = `.copyToast{
  1275.                             position: absolute;
  1276.                             color: white;
  1277.                             font-family: 'Open Sans', sans-serif;
  1278.                             text-transform: uppercase;
  1279.                             font-size: 0.75rem;
  1280.                             font-weight: 600;
  1281.                             padding: 4px 9px;
  1282.                             border-radius: 12px;
  1283.                             transform: translate(-50%, -50%);
  1284.                             z-index: 9999;
  1285.                             pointer-events: none;
  1286.                         }`
  1287.  
  1288.     const tenantHeaderTweaks = `.left-side-detail > :nth-child(3){
  1289.                                     margin-right: -40px;
  1290.                                 }
  1291.                                 .left-side-detail{
  1292.                                     width: calc(50% + 200px) !important;
  1293.                                 }`
  1294.  
  1295.     const tenantToolbox = ` #tenantToolbox {
  1296.                                 width: 240px;
  1297.                             }
  1298.                             #tenantToolbox .option{
  1299.                                 display: flex;
  1300.                                 cursor: pointer;
  1301.                                 user-select: none;
  1302.                                 margin-bottom: 7px;
  1303.                                 transition: 314ms;
  1304.                             }
  1305.                             #tenantToolbox .option:hover{
  1306.                                 filter: brightness(125%);
  1307.                             }
  1308.                             #tenantToolbox .option:active{
  1309.                                 filter: brightness(70%) contrast(250%);
  1310.                                 transition: 32ms;
  1311.                             }
  1312.                             #tenantToolbox .icon{
  1313.                                 display: flex;
  1314.                                 align-items: center;
  1315.                                 justify-content: center;
  1316.                                 width: 22px;
  1317.                                 height: 22px;
  1318.                                 border-radius: 4px;
  1319.                                 margin-right: 10px;
  1320.                                 background: dimgray;
  1321.                             }
  1322.                             #tenantToolbox span{
  1323.                                 padding-top: 1px;
  1324.                                 font-weight: 600;
  1325.                                 font-size: 15px;
  1326.                                 color: dimgray;
  1327.                             }
  1328.  
  1329.                             #tenantToolbox .icon.red{
  1330.                                 background: #DA3C5A;
  1331.                             }
  1332.                             #tenantToolbox span.red{
  1333.                                 color: #DA3C5A;
  1334.                             }`
  1335.  
  1336.     const tenantSummaryTweaks = `* {
  1337.                                     outline: 0px dashed rgba(0, 0, 256, 0.1);
  1338.                                 }
  1339.                                 
  1340.                                 .retailspace-horizontal .header {
  1341.                                     display: none;
  1342.                                 }
  1343.                                 .summary-wrapper hr:nth-child(2) {
  1344.                                     display: none;
  1345.                                 }
  1346.                                 .summary-group-container .detail.detail div:first-child,
  1347.                                 .summary-group-container .detail.detail div:nth-child(4),
  1348.                                 .summary-group-container .detail.detail div:nth-child(5) {
  1349.                                     display: none;
  1350.                                 }
  1351.                                 .summary-group-container .detail div:nth-child(2) div {
  1352.                                     font-size: 2.3rem !important;
  1353.                                     letter-spacing: 0.1618rem;
  1354.                                     padding: 18px 0 16px 0;
  1355.                                     margin-left: -2px;
  1356.                                 }
  1357.                                 .summary-group-container .detail div:nth-child(3) div {
  1358.                                     font-size: 1.2rem !important;
  1359.                                     padding: 12px 0 0 0;
  1360.                                 }
  1361.                                 .summary-group-container .status-container div {
  1362.                                     display: none;
  1363.                                 }`
  1364.  
  1365.     const tenantReadabilityTweaks = `.numeric {
  1366.                                         font-size: 1.218em;
  1367.                                         font-weight: 600;
  1368.                                     }`
  1369.  
  1370.     const statementReport = `.btnSpecial {
  1371.                                 position: fixed;
  1372.                                 z-index: 1001;
  1373.                                 left: 240px;
  1374.                                 bottom: 18px;
  1375.                                 outline: 0;
  1376.                             }
  1377.                             .btnPad{
  1378.                                 padding: 11px;
  1379.                             }
  1380.                             .textareaSpecial {
  1381.                                 position: fixed;
  1382.                                 font-family: 'Open Sans', sans-serif;
  1383.                                 box-sizing: border-box;
  1384.                                 font-size: 16px;
  1385.                                 line-height: 2em;
  1386.                                 bottom: 62px;
  1387.                                 z-index: 1000;
  1388.                                 left: 240px;
  1389.                                 resize: none;
  1390.                                 padding: 6px 10px;
  1391.                                 color: #516073;
  1392.                                 background: #f5f7fa;
  1393.                                 white-space: nowrap;
  1394.                             }
  1395.                             .textareaSpecial:focus {
  1396.                                 outline: 0;
  1397.                                 box-shadow: -40px 70px 175px rgba(0,0,0,0.15), 0 8px 12px rgba(0,0,0,0.14) !important;
  1398.                                 border: 1px solid #8ba2af;
  1399.                             }
  1400.                             .textareaSpecial::selection{
  1401.                                 background: #8ba2af;
  1402.                                 color: white;
  1403.                             }
  1404.                             .genCopyIcon {
  1405.                                 position: fixed;
  1406.                                 bottom: 78px;
  1407.                                 z-index: 1001;
  1408.                                 filter: brightness(170%);
  1409.                             }
  1410.                             .genCopyIcon:hover {
  1411.                                 filter: hue-rotate(350deg) brightness(140%) contrast(300%);
  1412.                             }
  1413.                             .genCopyIcon:active {
  1414.                                 filter: none;
  1415.                             }`
  1416.  
  1417.     const modal = ` #fModal{
  1418.                         font-family: 'Open Sans', sans-serif;
  1419.                         transform: translate(-50%, 0%);
  1420.                         position: fixed;
  1421.                         top: 15%;
  1422.                         left: 50%;
  1423.                         z-index: 2001;
  1424.                         width: 460px;
  1425.                     }
  1426.                     #fModal .header{
  1427.                         display: flex;
  1428.                         align-items: center;
  1429.                         background: dimgray;
  1430.                         height: 68px;
  1431.                         font-size: 20px;
  1432.                         font-weight: 400;
  1433.                         color: white;
  1434.                         padding-left: 24px;
  1435.                         border-radius: 6px 6px 0 0;
  1436.                         cursor: grab;
  1437.                         user-select: none;
  1438.                         box-shadow: 0 8px 24px rgba(0,0,0,0.05), 0 8px 4px rgba(0,0,0,0.1618);
  1439.                     }
  1440.                     #fModal .header:active{
  1441.                         cursor: grabbing;
  1442.                     }
  1443.                     #fModal .body{
  1444.                         border-bottom: 1px solid #ECECEC;
  1445.                         padding: 14px 24px;
  1446.                         font-size: 16px;
  1447.                         background: #fff;
  1448.                         line-height: 2.75rem;
  1449.                         letter-spacing: 0.314px;
  1450.                         box-shadow: 0 8px 24px rgba(0,0,0,0.05), 0 8px 4px rgba(0,0,0,0.1618);
  1451.                     }
  1452.                     #fModal .body hr{
  1453.                         margin: 16px -24px 10px -24px;
  1454.                         border: 0.5px solid #ececec;
  1455.                     }
  1456.                     #fModal .footer{
  1457.                         display: flex;
  1458.                         justify-content: space-between;
  1459.                         padding: 12px 24px;
  1460.                         height: 52px;
  1461.                         background: #fff;
  1462.                         border-radius: 0 0 6px 6px;
  1463.                         box-shadow: 0 8px 24px rgba(0,0,0,0.05), 0 4px 4px rgba(0,0,0,0.1618);
  1464.                     }
  1465.                     #fModal .left{
  1466.                         align-self: center;
  1467.                         font-size: 16px;
  1468.                         margin-top: -4px;
  1469.                     }
  1470.                     #fModal .right{
  1471.                         align-self: center;
  1472.                     }
  1473.                     #fModal .btn{
  1474.                         background: dimgray;
  1475.                         user-select: none;
  1476.                         border-radius: 3px;
  1477.                         padding: 11px 15px;
  1478.                         margin-left: 12px;
  1479.                     }
  1480.                     #fModal .btn:hover{
  1481.                         filter: brightness(115%);
  1482.                     }
  1483.                     #fModal .btn:active{
  1484.                         filter: brightness(80%) contrast(150%);
  1485.                         transition: 64ms;
  1486.                     }
  1487.                     #fModal b{
  1488.                         cursor: default;
  1489.                         letter-spacing: 0.618px;
  1490.                         border-bottom: 1px dashed gainsboro;
  1491.                         padding: 0 4px 4px 4px;
  1492.                     }
  1493.                     #fModal b.start{
  1494.                         padding: 0 4px 4px 0;
  1495.                     }`
  1496.  
  1497.     const modalInputs = `#fModal input::-webkit-inner-spin-button,
  1498.                         #fModal input::-webkit-outer-spin-button{
  1499.                             -webkit-appearance: none; 
  1500.                             margin: 0; 
  1501.                         }
  1502.                         #fModal input::-webkit-calendar-picker-indicator{
  1503.                             opacity: 0.75;
  1504.                             padding: 6px 0 6px 6px;
  1505.                             margin-left: -12px;
  1506.                         }
  1507.                         #fModal input::-webkit-clear-button{
  1508.                             display: none;
  1509.                         }
  1510.                         #fModal input[type="date"]::-webkit-calendar-picker-indicator {
  1511.                             width: 10px;
  1512.                             height: 10px;
  1513.                         }
  1514.                         #fModal input{
  1515.                             position: relative;
  1516.                             top: 6px;
  1517.                             font-size: inherit;
  1518.                             font-family: inherit;
  1519.                             font-weight: 700;
  1520.                             border: 0;
  1521.                             outline: 0;
  1522.                             border-radius: 0;
  1523.                             box-shadow: none;
  1524.                             border-bottom: 1px solid gray;
  1525.                             transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  1526.                             letter-spacing: 0.618px;
  1527.                             padding: 0 2px 4px 2px;
  1528.                             cursor: pointer;
  1529.                         }
  1530.                         #fModal input:hover{
  1531.                             top: 8px;
  1532.                             padding-bottom: 8px;
  1533.                         }
  1534.                         #fModal input:focus{
  1535.                             top: 8px;
  1536.                             color: dimgray;
  1537.                             border-bottom: 2px solid dimgray;
  1538.                             padding: 0 8px 7px 8px;
  1539.                         }
  1540.                         #fModal .percent{
  1541.                             margin-top: -1px;
  1542.                             padding-top: -1px;
  1543.  
  1544.                         }`
  1545.  
  1546.     const modalColorVariation = `   #fModal .header.red{
  1547.                                         background: ${colors.red};
  1548.                                     }
  1549.                                     #fModal .header.blue{
  1550.                                         background: ${colors.blue};
  1551.                                     }
  1552.                                     #fModal .header.green{
  1553.                                         background: ${colors.green};
  1554.                                     }
  1555.                                     #fModal .btn.red{
  1556.                                         background: ${colors.red};
  1557.                                     }
  1558.                                     #fModal .btn.blue{
  1559.                                         background: ${colors.blue};
  1560.                                     }
  1561.                                     #fModal .btn.green{
  1562.                                         background: ${colors.green};
  1563.                                     }
  1564.                                     #fModal.red *::selection{
  1565.                                         background: ${colors.red} !important;
  1566.                                         color: white;
  1567.                                     }
  1568.                                     #fModal.blue *::selection{
  1569.                                         background: ${colors.blue} !important;
  1570.                                         color: white;
  1571.                                     }
  1572.                                     #fModal.green *::selection{
  1573.                                         background: ${colors.green} !important;
  1574.                                         color: white;
  1575.                                     }
  1576.                                     #fModal input.red:focus{
  1577.                                         color: ${colors.red};
  1578.                                         border-bottom: 2px solid #d64a65;
  1579.                                     }
  1580.                                     #fModal input.blue:focus{
  1581.                                         color: ${colors.blue};
  1582.                                         border-bottom: 2px solid #d64a65;
  1583.                                     }
  1584.                                     #fModal input.green:focus{
  1585.                                         color: ${colors.green};
  1586.                                         border-bottom: 2px solid #d64a65;
  1587.                                     }
  1588.                                     #fModal .totalStyle{
  1589.                                         padding-bottom: 6px;
  1590.                                         border-bottom: 1px solid #d64a65;
  1591.                                     }`     
  1592.                                     
  1593.     const disableAccess = `#disableAccess {
  1594.                                 display: flex;
  1595.                                 position: fixed;
  1596.                                 top: 0;
  1597.                                 left: 0;
  1598.                                 align-items: center;
  1599.                                 justify-content: center;
  1600.                                 color: lightgray;
  1601.                                 background: rgba(0,6,12,0.65);
  1602.                                 height: 100vh;
  1603.                                 width: 100vw;
  1604.                                 z-index: 9999;
  1605.                                 cursor: wait;
  1606.                                 user-select: none;
  1607.                                 backdrop-filter: blur(4px);
  1608.                             }
  1609.                             #disableDesc {
  1610.                                 transition: 314ms;
  1611.                                 font-family: 'Open Sans', sans-serif;
  1612.                                 font-size: 3.5em;
  1613.                                 line-height: 1.5em;
  1614.                                 text-align: center; 
  1615.                                 margin-top: -128px;
  1616.                             }`
  1617.  
  1618.     const quickAccess = `.qaOption.report{
  1619.                             box-sizing: border-box;
  1620.                             position: absolute;
  1621.                             font-size: inherit;
  1622.                             transition: color 314ms;
  1623.                             background: #0693d7;
  1624.                             padding-left: 68px;
  1625.                             padding-bottom: 18px;
  1626.                             padding-top: 12px;
  1627.                             bottom: 0;
  1628.                             width: 220px;
  1629.                             cursor: pointer;
  1630.                         }
  1631.                         .qaOption:hover{
  1632.                             color: white;
  1633.                                 padding-left: 63px;
  1634.                             border-left: 5px solid #ffffff;
  1635.                         }
  1636.                         .qaOption.report:active{
  1637.                             font-weight: bold;
  1638.                         }
  1639.                         nav div ul li a[title="Settings"]{
  1640.                             padding-bottom: 34px;
  1641.                         }
  1642.                         #targetIframe{
  1643.                             position: fixed;
  1644.                             left: 0;
  1645.                             top: 0;
  1646.                             height: 200px;
  1647.                             width: 200px;
  1648.                         }`
  1649.  
  1650.     const quickNotes = `#quickNotes {
  1651.                             pointer-events: none;
  1652.                             z-index: 9999;
  1653.                             display: flex;
  1654.                             position: fixed;
  1655.                             bottom: 0px;
  1656.                             right: 76px;
  1657.                             padding: 1.2rem;
  1658.                         }
  1659.                         .btnCirc {
  1660.                             pointer-events: visible;
  1661.                             background: #2392EC;
  1662.                             color: white;
  1663.                             border-radius: 100%;
  1664.                             margin-left: 0.75rem;
  1665.                             transition: 128ms;
  1666.                             height: 45px;
  1667.                             width: 45px;
  1668.                             box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.15);
  1669.                             cursor: pointer;
  1670.                         }
  1671.                         .btnCirc:hover {
  1672.                             filter: brightness(120%);
  1673.                             transform: scale(1.055, 1.055);
  1674.                         }
  1675.                         .btnCirc:active {
  1676.                             transition: 64ms;
  1677.                             filter: brightness(85%) saturate(75%) contrast(150%);
  1678.                             transform: scale(0.75, 0.75);
  1679.                         }
  1680.                         .btnCirc img{
  1681.                             pointer-events: visible;
  1682.                             padding: 8px;
  1683.                             -webkit-user-drag: none;
  1684.                             transition: 314ms;
  1685.                             width: 28px;
  1686.                             height: 28px;
  1687.                         }
  1688.                         .btnCirc img:hover{
  1689.                             transform: scale(1.1, 1.1);
  1690.                         }`
  1691.  
  1692.     const style = ` <style>
  1693.                         ${copyToast}
  1694.                         ${tenantHeaderTweaks}
  1695.                         ${tenantToolbox}
  1696.                         ${tenantSummaryTweaks}
  1697.                         ${tenantReadabilityTweaks}
  1698.                         ${statementReport}
  1699.                         ${modal}
  1700.                         ${modalInputs}
  1701.                         ${modalColorVariation}
  1702.                         ${disableAccess}
  1703.                         /* ${quickAccess} */
  1704.                         ${quickNotes}
  1705.                     </style>`
  1706.  
  1707.     $('head').append(style)
  1708. }