Пример визуализации: Помощник уплаты страховых взносов

<div id="self_insurance_payments">
  <h4 class="font-weight-normal">Помощник уплаты страховых взносов</h4>
    <div v-if="!status.ready" class="align-middle">
      <img width='25' height='25' :src="status.img" />&nbsp;&nbsp;{{ status.message }}</div>
    <div v-else>
      <p>ИНН: {{ param.inn }}
        <br> За период: {{ param.date }}
      </p>
      <h5 class="font-weight-normal text-success">Страховые взносы к уплате</h5>
      <table class="table table-sm table-hover">
        <tr v-for="(el, index) in insurance.payments">
          <td scope="row">
            {{ el.title }}
            <small v-if="el.description">
              <br>{{ el.description }}</small>
          </td>
          <td class="text-right">{{ el.sum | currency }}</td>
          <td>
            <button class="btn btn-primary btn-sm" :href="'#'+el.link.name"
                data-toggle="modal" :data-target="'#'+el.link.name" :title="el.link.title" :data-inn="el.link.settings.organization.inn"
                :data-kpp="el.link.settings.organization.kpp" :data-date="el.link.settings.date" :data-tax="el.link.settings.tax" :data-liability="el.link.settings.liability"
                data-backdrop="">Оплатить</button>
          </td>
        </tr>
        <tr>
          <td>
            <strong>Итого</strong>
          </td>
          <td class="text-right">
            <strong>{{ insurance.total | currency }}</strong>
          </td>
          <td></td>
        </tr>
      </table>
      <span v-for="(el, index) in insurance.links">
          <a v-if="el.type == 'anchor'" class="btn-warning m-1 btn btn-sm" :href='"#user="+user_settings.email+"&tenant="+user_settings.app_tenant+"&anchor="+el.address'
            target="_blank">{{ el.title }}</a>
          <button v-else class="btn-success m-1 btn btn-sm" :data-id="el.id" v-on:click="close_task(el.id)" :href="'#'+el.name">{{ el.title }}</button>
      </span>
    </div>
</div>
<script src="./res/ex/pfr.js?_=1733243010"></script>

"use strict";

var insuranceURL = "./res/ex/pfr.json";

new Vue({
  el: "#self_insurance_payments",
  data: {
    insurance: [],
    user: [],
    user_settings: [],
    status: initialStatus(),
    param: {
      inn: "783900281039",
      date: "Июнь 2018"
    }
  },
  created: function created() {
    var _this = this;
    getUserData(_this);
    $.get(insuranceURL, function(data) {
      _this.insurance = data;
      _this.status.ready = true;
    }).fail(function(error) {
      _this.status = errorStatus(error);
    });
  },

  methods: {
    close_task: function close_task(task_id) {}
  }
});

{
  "links": [{
      "name": "goto1C",
      "type": "anchor",
      "title": "Проверить расчет в 1С",
      "address": "e1cib/data/РегистрСведений.ПубликуемыеНавигационныеСсылки?Идентификатор=2044203c-bacf-4832-bc90-f4c01786a1dd"
    },
    {
      "name": "tasks_status",
      "type": "endpoint",
      "title": "Уже оплачено",
      "address": "hs/api/v1/tasks/status",
      "settings": {
        "id": "4FAADF44D45480745DE7CB2F397D1874",
        "done": true
      }
    }
  ],
  "payments": [{
      "type": "ПФР",
      "title": "ПФР фиксированный",
      "sum": 6636.25,
      "link": {
        "name": "tax_payment_details",
        "type": "endpoint",
        "title": "Оплатить взнос ПФР",
        "address": "hs/dt/storage/async/tax_payment_details",
        "settings": {
          "organization": {
            "inn": "779955555519",
            "kpp": ""
          },
          "date": "2018-03-31T23:59:59",
          "tax": "ФиксированныеВзносы_ПФР_СтраховаяЧасть",
          "liability": "Налог"
        }
      }
    },
    {
      "type": "ПФРсДоходов",
      "title": "ПФР с доходов",
      "description": "Рассчитывается как 1% от дохода свыше 300 000 рублей ( 2 000 000,00 - 300 000,00 ) x 1%",
      "sum": 17000,
      "link": {
        "name": "tax_payment_details",
        "type": "endpoint",
        "title": "Оплатить взнос ПФР с доходов",
        "address": "hs/dt/storage/async/tax_payment_details",
        "settings": {
          "organization": {
            "inn": "779955555519",
            "kpp": ""
          },
          "date": "2018-03-31T23:59:59",
          "tax": "ФиксированныеВзносы_ПФР_СтраховаяЧасть",
          "liability": "ВзносыСвышеПредела"
        }
      }
    },
    {
      "type": "ФФОМС",
      "title": "ФФОМС",
      "sum": 1460,
      "link": {
        "name": "tax_payment_details",
        "type": "endpoint",
        "title": "Оплатить взнос ФФОМС",
        "address": "hs/dt/storage/async/tax_payment_details",
        "settings": {
          "organization": {
            "inn": "779955555519",
            "kpp": ""
          },
          "date": "2018-03-31T23:59:59",
          "tax": "ФиксированныеВзносы_ФФОМС",
          "liability": "Налог"
        }
      }
    }
  ],
  "total": 25096.25
}