$(document).on('page:init', '.page[data-name="product_trx"]', async function (e) {

  console.log('app product detail (trx) ready')

  var i = e.detail.route.params.id;

  //console.log(i)

  //console.log(pid)

  var view = app.views.current

  let js = JSON.parse(localStorage.getItem('t01_product'));

  let dt = js.data.by_id[i];

  console.log(dt)

  var strHtml = ``;

  strHtml +=`<div class="data-table">

      <table>

        <thead>

          <tr>

            <th class="label-cell">Date</th>

            <th class="numeric-cell">In</th>

            <th class="numeric-cell">Out</th>

            <th class="numeric-cell">Balance</th>

          </tr>

        </thead>

        <tbody>`;

  for(let i=0;i<dt.trx.length;i++) {

    strHtml +=`<tr>

            <td class="label-cell">`+dt.trx[i].tgl+`</td>

            <td class="numeric-cell">`+dt.trx[i].item_in+`</td>

            <td class="numeric-cell">`+dt.trx[i].item_out+`</td>

            <td class="numeric-cell">`+dt.trx[i].balance+`</td>

          </tr>`;

  }

    strHtml +=`</tbody>

      </table></div>

    `;

  //console.log(strHtml)

  $$("#product_trx_content").html(strHtml);

})