Пример визуализации: Монитор налогов и отчетности

<div id="monitor">
  <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>
    <table class="table table-sm table-bordered">
      <tr v-for="el in monitor.rows">
        <td class="px-2 align-middle" style="border: white solid 5px !important;">
          <h5 class="font-weight-normal text-"> {{ el.title }} </h5>
        </td>
        <td :class="el.tax.type == 'header' ? 'px-4 text-center ' : 'p-4' + ' align-top table-'+el.tax.type" style="border: white solid 5px !important; width: 45%;">
          <h5 class="font-weight-normal"> {{ el.tax.title | smile }}
            <span v-if="el.report.title && el.tax.title.indexOf('{{smile}}') + 1" class="fa-layers fa-fw">
              <i class="fas fa-circle text-warning"></i>
              <i class="far fa-smile"></i>
            </span>
          </h5>
          <p>{{ el.tax.description }}</p>
          <div v-for="link in el.tax.links">
            <a :href="'#'+link.name" data-toggle="#" :data-target="'#'+link.name" :data-date="link.settings.date" :data-inn="link.settings.organization.inn">{{ link.title }}</a>
          </div>
        </td>
        <td :class="el.report.type == 'header' ? 'px-4 text-center ' : 'p-4' + ' align-top table-'+el.report.type" style="border: white solid 5px !important; width: 45%;">
          <h5 class="font-weight-normal"> {{ el.report.title | smile }}
            <span v-if="el.report.title && el.report.title.indexOf('{{smile}}') + 1" class="fa-layers fa-fw">
              <i class="fas fa-circle text-warning"></i>
              <i class="far fa-smile"></i>
            </span>
          </h5>
          <p>{{ el.report.description }}</p>
          <div v-for="link in el.report.links">
            <a v-if="link.settings" :href="'#'+link.name" data-toggle="#" :data-target="'#'+link.name" :data-date="('date' in link.settings) ? link.settings.date : ''"
              :data-inn="link.settings.organization.inn">{{ link.title }}</a>
            <a v-else :href="'#'+link.name" data-toggle="modal" :data-target="'#'+link.name">{{ link.title }}</a>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>
<script src="./res/ex/monitor.js?_=1731688237"></script>

"use strict";

new Vue({
  el: "#monitor",
  data: {
    monitor: [],
    link: [],
    user: [],
    user_settings: [],
    status: initialStatus()
  },
  created: function created() {
    var self = this;
    getUserData(self);
    $.get("./res/ex/monitor.json", function(data) {
      self.monitor = data;
      self.link = data.link;
      self.status.ready = true;
    }).fail(function(error) {
      self.status = errorStatus(error);
    });
  },

  filters: {
    smile: function smile(text) {
      if (text) {
        text = text.replace("{{smile}}", "");
      }
      return text;
    }
  }
});

{
  "link": {
    "name": "goto1C",
    "type": "anchor",
    "title": "Монитор налогов и отчетности",
    "address": "e1cib/data/РегистрСведений.ПубликуемыеНавигационныеСсылки?Идентификатор=8cd2c1cd-b0fa-4cdb-98e5-55a1fd5c5a2e"
  },
  "rows": [
    {
      "item": 0,
      "title": "",
      "tax": {
        "type": "header",
        "title": "Оплата налогов"
      },
      "report": {
        "type": "header",
        "title": "Сдача отчетности"
      }
    },
    {
      "item": 1,
      "title": "УСН",
      "tax": {
        "type": "danger",
        "title": "Мы должны 23 860 руб.",
        "description": "Задолженность могла образоваться за один или несколько прошлых периодов",
        "deadline": "2024-05-02", 
        "links": [
          {
            "name": "tax_usn_calculator",
            "type": "endpoint",
            "title": "Погашение задолженности",
            "address": "hs/dt/storage/async/tax_usn_calculator",
            "settings": {
              "organization": {
                "inn": "783900281039",
                "kpp": ""
              },
              "date": "2018-03-31T23:59:59"
            }
          }
        ]
      },
      "report": {
        "type": "success",
        "title": "Отчетность сдана {{smile}}",
        "description": "Следующая декларация не позднее 30 апреля 2019 г.\n(за 2018 г.)",
        "deadline": "2019-04-30",
        "links": []
      }
    },
    {
      "item": 2,
      "title": "Взносы за себя",
      "tax": {
        "type": "warning",
        "title": "Пора оплатить 61 351,71 руб.",
        "description": "Не позднее 31 декабря 2018 г.",
        "deadline": "2018-07-01",
        "links": [
          {
            "name": "self_insurance_payments",
            "type": "endpoint",
            "title": "Оплата за 2 квартал 2018 г.",
            "address": "hs/dt/storage/async/self_insurance_payments",
            "settings": {
              "organization": {
                "inn": "783900281039",
                "kpp": ""
              },
              "date": "2018-06-30T23:59:59"
            }
          }
        ]
      },
      "report": {
        "type": "null"
      }
    }
  ]
}