Front test.md

Необходимо разработать часть админ панели по управлению контрагентами.

1. Вывести список всех контрагентов. В таблице должны быть поля: id, Company name, Responsable name, Credit repayment, Bills, Repayment last date, Repayment last amount. Credit repayment это сумма всех счетов. Repayment last date, Repayment last amount берем последний по дате счет. Bills список номеров счетов через запятую

• Пагинатор по 10 и 20 контрагентов.
• Фильтры по имени ответственного/контрагента(Company name, Responsable name), дате(Repayment last date), Номеру счета(bills.number)
• Сортировка по суммам(Repayment last amount, Credit repayment) и дате(Repayment last date)

2. На второй странице необходимо вывести 2 графика:

• график по всем ответственным по общим суммам задолженности https://prnt.sc/21e85j8
• график по всем контрагентам с процентным соотношением их суммы к общей сумме долга https://prnt.sc/21dxpbh

API

https://61a8992033e9df0017ea39dc.mockapi.io/api/counterparties

 {
  "id": "1",
  "company": {
   "id": 12342,
   "name": "Christiansen, Trantow and Bergnaum"
  },
  "responsable": {
   "id": 32410,
   "name": "Turkish Angora"
  },
  "bills": [
   {
    "id": 52219,
    "number": "LJFB-moszU",
    "date": "2014-11-24T05:06:57.834Z",
    "amount": 15268.28
   },
   {
    "id": 76327,
    "number": "{Ug=5!>$2q",
    "date": "2025-09-16T16:28:08.112Z",
    "amount": 77077.21
   },
   {
    "id": 3656,
    "number": "EJn-[x]9fI",
    "date": "1995-04-01T03:18:07.773Z",
    "amount": 77618.74
   }
  ]
 }

Технологии

Дизайн произвольный. Стек на выбор:

1. vue2 + vuex + vue-router
2. vue3 + vuex4 + vue-router + typescript(опционально)