{"version":3,"sources":["webpack:///./src/views/Dashboard.vue?cd81","webpack:///src/views/Dashboard.vue","webpack:///./src/views/Dashboard.vue?ae5e","webpack:///./src/views/Dashboard.vue","webpack:///./src/views/Dashboard.vue?0217"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_s","username","staticRenderFns","data","dataTransaction","pageOfItems","currentPage","perPage","lengthData","trade_id","offset","time_stamp","loadingData","today","role","form","startDate","endDate","formExcel","showToggle","toggleExcel","clientType","brokerCode","bankCode","dataExcel","hideExcel","liveTime","currentDate","dataClient","mounted","sessionStorage","getItem","$store","dispatch","Date","toISOString","split","getData","console","log","transactionDatas","created","setInterval","like","showLiveTime","methods","inputToExcel","bank_code","client_type","$emit","$root","tableToExcel","wscols","wb","tableToCsv","toggle","handlePageChange","window","scrollTo","filterDate","filterBroker","filterBank","filterClienType","resetFilter","url","computed","rows","state","kmiModule","component"],"mappings":"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","file":"js/chunk-af84679a.7fa4c619.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrap-dashboard\"},[_c('div',{staticClass:\"main-content\"},[_c('div',{staticClass:\"wrap-content\"},[_c('div',{staticClass:\"welcome-container\"},[_c('h1',[_vm._v(\"Welcome, \"+_vm._s(_vm.username)+\" !\")])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"wrap-dashboard\">\n    <div class=\"main-content\">\n      <div class=\"wrap-content\">\n        <div class=\"welcome-container\">\n          <h1>Welcome,  {{ username }} !</h1>\n        </div>\n        <!-- <div class=\"top-title\"> -->\n        <!-- <div class=\"title-page\">Welcome Back </div> -->\n        <!-- <div class=\"title-page\">Clearing and Settlement</div>\n                    <img src=\"@/assets/logo_agi.png\" alt=\"\" v-show=\"role == 13\" class=\"bagi\" /> -->\n        <!-- </div> -->\n        <!-- <div class=\"top-menu\">\n                    <div class=\"filter\">\n                        <button class=\"btn-filter\" @click=\"showToggle = !showToggle\">Sort by Date: {{ form.startDate + \" - \" + form.endDate }}</button>\n                        <div class=\"dropdown\" v-show=\"showToggle\">\n                            <input\n                                placeholder=\"Pilih tanggal awal\"\n                                type=\"text\"\n                                onfocus=\"(this.type='date')\"\n                                onblur=\"(this.type='text')\"\n                                id=\"start-date\"\n                                :max=\"today\"\n                                class=\"form-input\"\n                                v-model=\"form.startDate\"\n                            />\n                            <input\n                                placeholder=\"Pilih tanggal akhir\"\n                                type=\"text\"\n                                onfocus=\"(this.type='date')\"\n                                onblur=\"(this.type='text')\"\n                                id=\"start-date\"\n                                class=\"form-input\"\n                                v-model=\"form.endDate\"\n                                :min=\"form.startDate\"\n                                :max=\"today\"\n                                :disabled=\"form.startDate == ''\"\n                            />\n                            <input type=\"submit\" value=\"Apply\" class=\"btn-primer\" @click=\"filterDate\" />\n                        </div>\n                        <div class=\"sort-pialang\">\n                            <select name=\"\" id=\"\" class=\"filter-select\" v-model=\"clientType\" @click=\"filterClienType\">\n                                <option value=\"\" selected disabled>Client Type</option>\n                                <option value=\"pc-pc\">PC - PC</option>\n                                <option value=\"mm-pc\">MM - PC</option>\n                                <option value=\"pc-mm\">PC - MM</option>\n                            </select>\n                        </div>\n                        <div class=\"sort-pialang\">\n                            <select name=\"\" id=\"\" class=\"filter-select\" v-model=\"brokerCode\" @click=\"filterBroker\">\n                                <option value=\"\" selected disabled>Broker Code</option>\n                                <option value=\"001\">001 - ABI</option>\n                            </select>\n                        </div>\n                        <div class=\"sort-bank\" v-show=\"role != 13\">\n                            <select name=\"\" id=\"\" class=\"filter-select\" v-model=\"bankCode\" @click=\"filterBank\">\n                                <option value=\"\" selected disabled>Bank Code</option>\n                                <option value=\"037\">BAGI</option>\n                            </select>\n                        </div>\n                        <div class=\"reset-filter\">\n                            <button type=\"button\" @click=\"resetFilter\" v-show=\"form.endDate != '' || clientType != ''\">Reset Filter</button>\n                        </div>\n                    </div>\n                    <div class=\"wrap-excel\">\n                        <ExportExcel v-show=\"hideExcel\" />\n                        <button class=\"btn btn-filter\" @click=\"toggleExcel = !toggleExcel\">Download</button>\n                        <div v-show=\"toggleExcel\" class=\"dropdown-excel\">\n                            <input\n                                placeholder=\"Pilih tanggal awal excel\"\n                                type=\"text\"\n                                onfocus=\"(this.type='date')\"\n                                onblur=\"(this.type='text')\"\n                                id=\"start-date\"\n                                :max=\"today\"\n                                class=\"form-input\"\n                                v-model=\"formExcel.startDate\"\n                            />\n                            <input\n                                placeholder=\"Pilih tanggal akhir\"\n                                type=\"text\"\n                                onfocus=\"(this.type='date')\"\n                                onblur=\"(this.type='text')\"\n                                id=\"start-date\"\n                                class=\"form-input\"\n                                v-model=\"formExcel.endDate\"\n                                :min=\"formExcel.startDate\"\n                                :max=\"today\"\n                                :disabled=\"formExcel.startDate == ''\"\n                                @input=\"inputToExcel\"\n                            />\n                            <input type=\"submit\" value=\"Apply\" class=\"btn-primer\" @click=\"tableToExcel\" />\n                        </div>\n                    </div>\n                </div>\n                <div class=\"content\">\n                    <table id=\"testTable1\">\n                        <thead>\n                            <tr id=\"top\">\n                                <th scope=\"col\" rowspan=\"2\" style=\"width: 70px\">No</th>\n                                <th scope=\"col\" rowspan=\"2\" style=\"width: 120px\">Trade Matched Id</th>\n                                <th scope=\"col\" rowspan=\"2\">TimeStamp</th>\n                                <th scope=\"col\" rowspan=\"2\">Rate</th>\n                                <th scope=\"col\" colspan=\"8\">Buyer</th>\n                                <th scope=\"col\" colspan=\"8\">Seller</th>\n                            </tr>\n                            <tr>\n                                <th scope=\"col\">Order Id</th>\n                                <th scope=\"col\">Trade Id</th>\n                                <th scope=\"col\">VA Code</th>\n                                <th scope=\"col\">Weight (gr)</th>\n                                <th scope=\"col\">Amount</th>\n                                <th scope=\"col\">Fee</th>\n                                <th scope=\"col\">Tax</th>\n                                <th scope=\"col\">Total Amount</th>\n                                <th scope=\"col\">Order Id</th>\n                                <th scope=\"col\">Trade Id</th>\n                                <th scope=\"col\">VA Code</th>\n                                <th scope=\"col\">Weight (gr)</th>\n                                <th scope=\"col\">Amount</th>\n                                <th scope=\"col\">Fee</th>\n                                <th scope=\"col\">Tax</th>\n                                <th scope=\"col\">Total Amount</th>\n                            </tr>\n                        </thead>\n                        <tbody v-if=\"loadingData\">\n                            <tr>\n                                <td class=\"text-center\" colspan=\"20\">\n                                    <b-spinner label=\"Loading...\"></b-spinner>\n                                </td>\n                            </tr>\n                        </tbody>\n                        <tbody v-else>\n                            <tr v-for=\"(data, i) in data\" :key=\"i\" v-show=\"data.length != 0\">\n                                <td data-label=\"No\" style=\"border-right: 1px solid #ededed\">\n                                    {{ (currentPage - 1) * perPage + (i + 1) }}\n                                </td>\n                                <td data-label=\"Trade Match Id\" style=\"border-right: 1px solid #ededed\">\n                                    {{ data._id.order_match_id }}\n                                </td>\n                                <td data-label=\"Time Stamp\" style=\"border-right: 1px solid #ededed\">\n                                    {{ data.timestamp | formatDateTimeReal }}\n                                </td>\n                                <td data-label=\"Rate\" style=\"border-right: 1px solid #ededed\">\n                                    <div v-if=\"data.type_client == 'PC-LP' || data.type_client == 'PC-CP'\">\n                                        Buy\n                                        {{ data.direction[0] ? \" Rp\" + data.direction[0].payment_info.rate.toLocaleString() : \"\" }}\n                                    </div>\n                                    <div v-else-if=\"data.type_client == 'LP-PC' || data.type_client == 'CP-PC'\">\n                                        Sell\n                                        {{ data.direction[1] ? \" Rp\" + data.direction[1].payment_info.rate.toLocaleString() : \"\" }}\n                                    </div>\n                                    <div v-else>-</div>\n                                </td>\n                                <td data-label=\"Order Id\" class=\"description\">\n                                    {{ data.direction[0] ? data.direction[0].order_id : \"-\" }}\n                                </td>\n                                <td data-label=\"Remarks\">\n                                    <div v-show=\"data.direction[0].tradebuy\">\n                                        <span v-if=\"role == 1 || role == 6\">\n                                            <img src=\"../assets/cimb.png\" alt=\"\" class=\"icon-trade\" v-show=\"data.direction[0].payment_info.bank_code == '022'\" />\n                                            <img src=\"../assets/bagi.png\" alt=\"\" class=\"icon-trade\" v-show=\"data.direction[0].payment_info.bank_code == '037'\" />\n                                        </span>\n                                        <span v-else>\n                                            {{ data.direction[0].tradebuy[1] }}\n                                        </span>\n                                        <span>\n                                            {{ \" \" + data.direction[0].tradebuy[0] + \"-\" }}\n                                        </span>\n                                        <span>{{ data.direction[0].tradebuy[2] }}</span>\n                                    </div>\n                                </td>\n                                <td data-label=\"VA Code\">\n                                    {{ data.direction[0] ? data.direction[0].va_code : \"\" }}\n                                </td>\n                                <td data-label=\"weight\">\n                                    {{ data.direction[0].gold_info ? data.direction[0].gold_info.total_gram : \"-\" }}\n                                </td>\n                                <td data-label=\"Amount\">\n                                    <div>\n                                        {{ data.direction[0] ? \"IDR \" + data.direction[0].payment_info.amount_idr.toLocaleString() : \"-\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[0] ? \"USD \" + data.direction[0].payment_info.amount.toLocaleString() : \"-\" }}\n                                    </div>\n                                </td>\n                                <td data-label=\"fee\">\n                                    <div>\n                                        {{ data.direction[0].payment_info.fee_idr ? \"IDR \" + data.direction[0].payment_info.fee_idr : \"IDR -\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[0] ? \"USD \" + data.direction[0].payment_info.fee : \"-\" }}\n                                    </div>\n                                </td>\n                                <td data-label=\"tax\">\n                                    <div>\n                                        {{ data.direction[0].payment_info.tax_idr ? \"IDR \" + data.direction[0].payment_info.tax_idr.toFixed(2) : \"IDR -\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[0] ? \"USD \" + data.direction[0].payment_info.tax.toFixed(2) : \"-\" }}\n                                    </div>\n                                </td>\n\n                                <td data-label=\"Total Amount\" style=\"border-right: 1px solid #ededed\">\n                                    <div>\n                                        {{ data.direction[0] ? \"IDR \" + data.direction[0].payment_info.payment_idr.toLocaleString() : \"-\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[0] ? \"USD \" + data.direction[0].payment_info.payment_usd.toLocaleString() : \"-\" }}\n                                    </div>\n                                </td>\n                                <td data-label=\"Order Id\">\n                                    {{ data.direction[1] ? data.direction[1].order_id : \"-\" }}\n                                </td>\n                                <td data-label=\"Remarks\">\n                                    <div v-show=\"data.direction[1] ? data.direction[1].tradeSell : '-'\">\n                                        <span v-if=\"role == 1 || role == 6\">\n                                            <img\n                                                src=\"../assets/cimb.png\"\n                                                alt=\"\"\n                                                class=\"icon-trade\"\n                                                v-show=\"data.direction[1] ? data.direction[1].payment_info.bank_code == '022' : ''\"\n                                            />\n                                            <img\n                                                src=\"../assets/bagi.png\"\n                                                alt=\"\"\n                                                class=\"icon-trade\"\n                                                v-show=\"data.direction[1] ? data.direction[1].payment_info.bank_code == '037' : ''\"\n                                            />\n                                        </span>\n                                        <span v-else>{{ data.direction[1].tradeSell[1] }} </span>\n                                        <span>\n                                            {{ data.direction[1] ? \" \" + data.direction[1].tradeSell[0] + \"-\" : \"\" }}\n                                        </span>\n                                        <span>{{ data.direction[1] ? data.direction[1].tradeSell[2] : \"-\" }}</span>\n                                    </div>\n                                </td>\n                                <td data-label=\"VA Code\">\n                                    {{ data.direction[1] ? data.direction[1].va_code : \"\" }}\n                                </td>\n                                <td data-label=\"weight\">\n                                    {{ data.direction[1].gold_info ? data.direction[1].gold_info.total_gram : \"-\" }}\n                                </td>\n                                <td data-label=\"Amount\">\n                                    <div>\n                                        {{ data.direction[1] ? \"IDR \" + data.direction[1].payment_info.amount_idr.toLocaleString() : \"-\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[1] ? \"USD \" + data.direction[1].payment_info.amount.toLocaleString() : \"-\" }}\n                                    </div>\n                                </td>\n                                <td data-label=\"fee\">\n                                    <div>\n                                        {{ data.direction[1].payment_info.fee_idr ? \"IDR \" + data.direction[1].payment_info.fee_idr.toFixed(2) : \"IDR -\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[1] ? \"USD \" + data.direction[1].payment_info.fee.toFixed(2) : \"-\" }}\n                                    </div>\n                                </td>\n                                <td data-label=\"Tax\">\n                                    <div>\n                                        {{ data.direction[1].payment_info.tax_idr ? \"IDR \" + data.direction[1].payment_info.tax_idr.toFixed(2) : \"IDR -\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[1] ? \"USD \" + data.direction[1].payment_info.tax.toFixed(2) : \"-\" }}\n                                    </div>\n                                </td>\n\n                                <td data-label=\"Total Amount\">\n                                    <div>\n                                        {{ data.direction[1] ? \"IDR \" + data.direction[1].payment_info.payment_idr.toLocaleString() : \"-\" }}\n                                    </div>\n                                    <div>\n                                        {{ data.direction[1] ? \"USD \" + data.direction[1].payment_info.payment_usd.toLocaleString() : \"-\" }}\n                                    </div>\n                                </td>\n                            </tr>\n                            <tr v-show=\"data.length == 0\">\n                                <td colspan=\"20\">No Data Available</td>\n                            </tr>\n                        </tbody>\n                    </table>\n                    <b-pagination\n                        v-model=\"currentPage\"\n                        :total-rows=\"lengthData\"\n                        :per-page=\"perPage\"\n                        @change=\"handlePageChange\"\n                        aria-controls=\"new-table\"\n                        first-number\n                        last-number\n                        v-show=\"lengthData > 10\"\n                    ></b-pagination>\n                </div> -->\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport axios from \"axios\";\n//import ExportExcel from \"../components/export/ExportExcel.vue\";\nimport moment from \"moment\";\nimport * as XLSX from \"xlsx\";\n\nexport default {\n  // components: {\n  //   ExportExcel,\n  // },\n  data() {\n    return {\n      dataTransaction: [],\n      pageOfItems: [],\n      currentPage: 1,\n      perPage: 10,\n      lengthData: 1,\n      trade_id: [],\n      offset: 0,\n      data: [],\n      time_stamp: \"\",\n      loadingData: false,\n      today: \"\",\n      role: \"\",\n      form: {\n        startDate: \"\",\n        endDate: \"\",\n      },\n      formExcel: {\n        startDate: \"\",\n        endDate: \"\",\n      },\n      showToggle: false,\n      toggleExcel: false,\n      clientType: \"\",\n      brokerCode: \"001\",\n      bankCode: \"037\",\n      dataExcel: [],\n      hideExcel: false,\n      liveTime: null,\n      currentDate: null,\n      dataClient: [],\n      username: \"\",\n    };\n  },\n  mounted() {\n    this.username = sessionStorage.getItem(\"username\");\n    this.$store.dispatch(\"getTransaction\", {\n      startDate: this.startDate,\n      endDate: this.endDate,\n      currentPage: this.currentPage,\n      perPage: this.perPage,\n      clientType: this.clientType,\n      bankCode: this.bankCode,\n    });\n    this.today = new Date().toISOString().split(\"T\")[0];\n    this.getData(\n      this.currentPage,\n      this.form.startDate,\n      this.form.endDate,\n      this.clientType,\n      this.bankCode\n    );\n    this.role = sessionStorage.getItem(\"role\");\n    console.log(this.transactionDatas);\n\n    // axios.get(\"/v1/clearing/admin/get/list_client?exchange=jfx\").then((res) => {\n    //   this.dataClient = res.data.data;\n    // });\n\n    let date = new Date();\n    this.currentDate = moment(date).format(\"dddd, DD MMMM YYYY\");\n  },\n  created() {\n    let like = this;\n    setInterval(function () {\n      let startDate = like.form.startDate;\n      let endDate = like.form.endDate;\n      like.getData(\n        like.currentPage,\n        startDate,\n        endDate,\n        like.clientType,\n        like.bankCode\n      );\n\n      // location.reload();\n    }, 60000);\n\n    setInterval(() => {\n      like.showLiveTime();\n    }, 1000);\n  },\n\n  methods: {\n    showLiveTime() {\n      let date = new Date();\n      this.liveTime = moment(date).format(\"HH:mm:ss\");\n    },\n    inputToExcel() {\n      var data = {\n        startDate: this.formExcel.startDate,\n        endDate: this.formExcel.endDate,\n        bank_code: this.bankCode,\n        client_type: this.clientType,\n        offset: 0,\n      };\n      this.$emit(\"inputExcel\", data);\n      this.$root.$emit(\"inputExcel\", data);\n    },\n    tableToExcel() {\n      const table = document.getElementById(\"testTable\");\n      const wb = XLSX.utils.table_to_book(table);\n      // var wscols = [{ wch: 20 }, { wch: 30 }, { wch: 40 }, { wch: 30 }, { wch: 10 }, { wch: 10 }];\n      var wscols = [\n        { wch: 5 }, //A\n        { wch: 15 }, //B\n        { wch: 20 }, //C\n        { wch: 15 }, //D\n        { wch: 10 }, //E\n        { wch: 20 }, //F\n        { wch: 20 }, //G\n        { wch: 20 }, //H\n        { wch: 10 }, //I\n        { wch: 15 }, //J\n        { wch: 10 }, //K\n        { wch: 15 }, //L\n        { wch: 10 }, //M\n        { wch: 15 }, //N\n        { wch: 10 }, //O\n        { wch: 15 }, //P\n        { wch: 10 }, //Q\n        { wch: 10 }, //R\n        { wch: 20 }, //S\n        { wch: 20 }, //T\n        { wch: 20 }, //U\n        { wch: 10 }, //V\n        { wch: 15 }, //W\n        { wch: 10 }, //X\n        { wch: 15 }, //Y\n        { wch: 10 }, //Z\n        { wch: 15 }, //AA\n        { wch: 10 }, //AB\n        { wch: 15 }, //AC\n        { wch: 10 }, //AD\n      ];\n      wb[\"Sheets\"][\"Sheet1\"][\"!cols\"] = wscols;\n      delete wb[\"D1\"];\n      XLSX.utils.format_cell(wb[\"D1\"]);\n      let filename =\n        \"Data_transaksi \" +\n        this.formExcel.startDate +\n        \" - \" +\n        this.formExcel.endDate +\n        \".xlsx\";\n      XLSX.writeFile(wb, filename, { cellText: true });\n      this.toggleExcel = false;\n    },\n    tableToCsv() {\n      var data = {\n        startDate: this.formExcel.startDate,\n        endDate: this.formExcel.endDate,\n      };\n      this.$emit(\"toggleDownload\", data);\n      this.$root.$emit(\"toggleDownload\", data);\n      this.toggleExcel = false;\n    },\n\n    toggle() {\n      this.showToggle = !this.showToggle;\n    },\n    handlePageChange(value) {\n      this.getData(\n        value,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n      window.scrollTo({ top: 0, behavior: \"smooth\" });\n    },\n    filterDate() {\n      this.getData(\n        this.currentPage,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n      this.showToggle = false;\n    },\n    filterBroker() {\n      this.getData(\n        this.currentPage,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n    },\n    filterBank() {\n      this.getData(\n        this.currentPage,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n    },\n    filterClienType() {\n      this.getData(\n        this.currentPage,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n    },\n    resetFilter() {\n      this.form.startDate = \"\";\n      this.form.endDate = \"\";\n      this.clientType = \"\";\n      // this.bankCode = \"\";\n\n      this.getData(\n        this.currentPage,\n        this.form.startDate,\n        this.form.endDate,\n        this.clientType,\n        this.bankCode\n      );\n    },\n    getData(value, startDate, endDate, clientType, bankCode) {\n      let offset = (value - 1) * this.perPage;\n      let url;\n      let role = sessionStorage.getItem(\"role\");\n      if (role == 2) {\n        url =\n          \"/v2/clearing/admin/abx/get/customer/transaction?startDate=\" +\n          startDate +\n          \"&endDate=\" +\n          endDate +\n          \"&offset=\" +\n          offset +\n          \"&limit=10&code=\" +\n          clientType +\n          \"&bank_code=\" +\n          bankCode;\n      } else if (role == 6) {\n        url =\n          \"/v2/clearing/admin/pos/get/customer/transaction?startDate=\" +\n          startDate +\n          \"&endDate=\" +\n          endDate +\n          \"&offset=\" +\n          offset +\n          \"&limit=10&code=\" +\n          clientType +\n          \"&bank_code=\" +\n          bankCode;\n      } else if (role == 4) {\n        url =\n          \"/v2/clearing/admin/bank/get/customer/transaction?startDate=\" +\n          startDate +\n          \"&endDate=\" +\n          endDate +\n          \"&offset=\" +\n          offset +\n          \"&limit=10&code=\" +\n          clientType +\n          \"&bank_code=\" +\n          bankCode;\n      } else {\n        url =\n          \"/v2/clearing/admin/get/customer/transaction?limit=10&code=\" +\n          clientType +\n          \"&bank_code=\" +\n          bankCode +\n          \"&startDate=\" +\n          startDate +\n          \"&endDate=\" +\n          endDate +\n          \"&offset=\" +\n          offset;\n      }\n\n      this.loadingData = true;\n      axios\n        .get(url)\n        .then((res) => {\n          this.loadingData = false;\n          this.data = res.data.data.body;\n          this.lengthData = res.data.data.count;\n          for (let i = 0; i < this.data.length; i++) {\n            let trade;\n            let tradeSell;\n            let buy = {};\n            let sell = {};\n\n            if (this.data[i].direction.length < 2) {\n              if (this.data[i].direction[0].direction == \"sell\") {\n                tradeSell = this.data[i].direction[0].trade_id;\n                this.data[i].direction[1] = this.data[i].direction[0];\n                this.data[i].direction[1].tradeSell = tradeSell.split(\";\");\n                this.data[i].direction[0] = {\n                  date_pay: \"2021-12-27T15:15:09.599Z\",\n                  direction: \"buy\",\n                  order_id: \"-\",\n                  order_match_id: \"-\",\n                  total_amount_idr: 0,\n                  trade_id: \"0;037;0\",\n                  tradebuy: [\"0\", \"037\", \"0\"],\n                  va_code: \"-\",\n                  _id: \"61c9760d46d2db0025758775\",\n                };\n              } else {\n                trade = this.data[i].direction[0].trade_id;\n                this.data[i].direction[0].tradebuy = trade.split(\";\");\n                this.data[i].direction[1] = \"\";\n              }\n            } else {\n              if (this.data[i].direction[0].direction == \"sell\") {\n                buy = this.data[i].direction[1];\n                sell = this.data[i].direction[0];\n              } else {\n                buy = this.data[i].direction[0];\n                sell = this.data[i].direction[1];\n              }\n\n              this.data[i].direction[1] = sell;\n              tradeSell = this.data[i].direction[1].trade_id;\n              this.data[i].direction[1].tradeSell = tradeSell.split(\";\");\n              this.data[i].direction[0] = buy;\n              trade = this.data[i].direction[0].trade_id;\n              this.data[i].direction[0].tradebuy = trade.split(\";\");\n              this.data[i].type_client =\n                trade.slice(0, 2) + \"-\" + tradeSell.slice(0, 2);\n            }\n          }\n        })\n        .catch((error) => {\n          this.loadingData = false;\n          console.log(error);\n        });\n    },\n  },\n  computed: {\n    rows() {\n      return (this.currentPage - 1) * this.perPage;\n    },\n    transactionDatas() {\n      return this.$store.state.kmiModule.dataTransaction;\n    },\n  },\n};\n</script>\n\n<style scoped>\n/*.wrap-dashboard {\n  min-height: 100vh;\n  margin: 0;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n}*/\n\n.top-title {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 4rem;\n}\n\n.bagi {\n  height: 30px;\n}\n\n.top-menu {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 50px;\n  background: #fff;\n  box-shadow: 0px 5px 16px 1px rgb(0 0 0 / 15%);\n  padding: 25px 20px;\n  border-radius: 5px;\n  position: relative;\n}\n\n.title-page {\n  font-size: 26px;\n  font-weight: bold;\n}\n\n.title-page div {\n  font-size: 18px;\n  font-weight: normal;\n  margin-top: -20px;\n}\n\n/* .wrap-content {\n  width: 98%;\n  height: 100%;\n  margin: 0 auto;\n  padding: 20px 25px;\n} */\n\n.content {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.icon-trade {\n  width: 25px;\n}\n\ntable {\n  display: block;\n  overflow-x: auto;\n}\n\n.footer {\n  background: var(--primary-color);\n  color: white;\n  padding: 20px 47px;\n  display: flex;\n  justify-content: space-between;\n  margin-top: auto;\n  height: 62px;\n}\n\n.form-input {\n  border: solid 1px #ccc;\n  height: 31px;\n  padding: 5px 10px;\n  border-radius: 5px;\n  color: #aaa;\n  font-size: 12px;\n  margin-right: 10px;\n}\n\n.filter {\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  font-size: 12px;\n  flex-wrap: wrap;\n  position: relative;\n  width: 48%;\n}\n\n.card {\n  width: 314px;\n  font-size: 14px;\n  border-radius: 10px;\n}\n\n.card-header {\n  padding: 1rem;\n}\n\n.buyer,\n.seller,\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.title {\n  font-size: 12px;\n  position: relative;\n  left: 20px;\n}\n\n.title::before {\n  content: \"\";\n  position: absolute;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background: var(--scondary-color);\n  left: -17px;\n  top: 3px;\n}\n\n.buyer {\n  margin-bottom: 20px;\n}\n\n.content-right {\n  text-align: right;\n}\n\n.amount {\n  font-weight: bold;\n}\n\n.btn-primer {\n  background: var(--scondary-color);\n  border: none;\n  color: #ffffff;\n  padding: 5px 20px;\n  font-size: 13px;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n}\n\n.btn-primer:hover,\n.btn-filter:hover {\n  box-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);\n  transform: translateY(-1px);\n}\n\n.btn-filter {\n  border: none;\n  background: #fff;\n  color: var(--scondary-color);\n  padding: 5px 20px;\n  font-size: 13px;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n}\n\n.reset-filter button {\n  border: none;\n  color: #fff;\n  background: #f75676;\n  padding: 5px 10px;\n  font-size: 13px;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n  cursor: pointer;\n}\n\n.btn-filter:focus {\n  outline: 1px solid;\n}\n\n.description {\n  text-align: left !important;\n}\n\n.sort-date {\n  position: relative;\n}\n\n/* .wrap-excel {\n  position: relative;\n} */\n\n.filter-select {\n  border: none;\n  background: #fff;\n  color: var(--scondary-color);\n  padding: 5px;\n  font-size: 13px;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n}\n\n.dropdown {\n  position: absolute;\n  left: 0;\n  top: 2.5rem;\n  background: #fff;\n  padding: 10px 20px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n  border-radius: 5px;\n  width: 29.1rem;\n}\n\n.dropdown-excel {\n  background: #fff;\n  padding: 10px 20px;\n  box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n  border-radius: 5px;\n  right: 18px;\n  position: absolute;\n  top: 5.5rem;\n}\n\n.excel {\n  top: 58px;\n}\n\ninput:disabled {\n  cursor: not-allowed;\n}\n\n.welcome-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh; /* Sesuaikan dengan kebutuhan */\n}\n\nh1 {\n  text-align: center;\n}\n</style>\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Dashboard.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Dashboard.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Dashboard.vue?vue&type=template&id=e4888488&scoped=true&\"\nimport script from \"./Dashboard.vue?vue&type=script&lang=js&\"\nexport * from \"./Dashboard.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Dashboard.vue?vue&type=style&index=0&id=e4888488&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"e4888488\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Dashboard.vue?vue&type=style&index=0&id=e4888488&scoped=true&lang=css&\""],"sourceRoot":""}