17 KiB
PRD — Дашборд клинической кафедры медицинского университета
Версия документа: 1.0 Дата: 26.06.2026 Владелец продукта: Issida Ashirmatova Живая страница: https://pages.git.vibe42.kz/Issida_Ashirmatova/clinical-dashboard/ Репозиторий: https://git.vibe42.kz/Issida_Ashirmatova/clinical-dashboard
1. Обзор продукта
Веб-дашборд для учёта преподавателей клинической кафедры медицинского университета. Представляет собой редактируемую таблицу, где каждый преподаватель — отдельная строка, а каждый параметр (ФИО, дата рождения, образование, научная степень, категория, сертификат специалиста, членство в ассоциациях, клиническая база) — вводимое поле. Дашборд строит многопараметрические отчёты и выгружает их в CSV.
Продукт реализован как статический сайт (HTML + CSS + JS) без сервера, базы данных и авторизации. Данные хранятся в браузере (localStorage).
2. Цели и задачи
Цели
- Дать кафедре единое место для учёта кадрового состава преподавателей.
- Обеспечить ввод и редактирование данных непосредственно в таблице, без форм и модальных окон.
- Позволить получать аналитические отчёты по нескольким параметрам одновременно (например, «сколько преподавателей с научной степенью и какой категорией»).
Задачи (метрики успеха)
- Ввод строки преподавателя занимает < 1 минуты.
- Отчёт по любому набору параметров строится мгновенно, без ручного подсчёта.
- Данные не теряются между перезагрузками страницы.
3. Целевые пользователи
| Роль | Сценарий |
|---|---|
| Ответственный по кафедре (администратор) | Ведёт общую таблицу, собирает анкеты преподавателей, формирует отчёты для руководства. |
| Преподаватель | Вводит собственные данные в свою строку, выгружает анкету файлом и отправляет администратору. |
⚠️ Ограничение платформы: настоящая многопользовательская авторизация с общим хранилищем в статической песочнице невозможна. Поэтому совместная работа организована через экспорт/импорт файлов (см. раздел 9).
4. Контекст и ограничения платформы
Платформа — учебная песочница Vibe42 (только статические сайты). Жёсткие ограничения:
- ✅ Статика: HTML + CSS + JS в браузере.
- ❌ Нет бэкенда, базы данных, Redis, Docker, nginx.
- ❌ Нет авторизации / OAuth / JWT.
- ❌ Нет тяжёлых сборщиков (npm-зависимостей).
- 📦 Данные хранятся в
localStorageбраузера (персонально для устройства и браузера).
5. Границы продукта (Scope)
В объёме (In scope)
- Редактируемая таблица преподавателей со всеми параметрами.
- Расширяемый набор параметров (пользовательские поля).
- Статистические карточки (сводка по кафедре).
- Поиск и фильтрация.
- Многопараметрические отчёты с диаграммами и перекрёстной таблицей.
- Экспорт в CSV, импорт/экспорт JSON (резервные копии, сбор анкет).
Вне объёма (Out of scope)
- Многопользовательский вход и общее серверное хранилище.
- Загрузка файлов/фотографий на сервер.
- Сложная бизнес-логика (расчёт стажа, автозаполнение из внешних баз).
- Уведомления и email-рассылки (возможно добавление позже через Formspree).
6. Пользовательские истории
- Как администратор, я хочу добавить преподавателя и заполнить все его параметры прямо в таблице, чтобы не открывать отдельные формы.
- Как администратор, я хочу редактировать любое поле строки одним кликом, чтобы быстро исправлять данные.
- Как администратор, я хочу видеть сводку: сколько всего преподавателей, сколько с научной степенью, сколько с сертификатом.
- Как администратор, я хочу построить отчёт одновременно по нескольким параметрам, чтобы анализировать состав кафедры.
- Как администратор, я хочу выгрузить отчёт в CSV для предоставления руководству.
- Как преподаватель, я хочу ввести свои данные и выгрузить анкету файлом, чтобы передать её администратору.
- Как администратор, я хочу импортировать полученные анкеты, чтобы они добавились в общую таблицу без дубликатов.
- Как администратор, я хочу добавлять собственные параметры (например, «стаж», «учёное звание»), чтобы учитывать специфику кафедры.
7. Функциональные требования
7.1. Структура интерфейса
- Верхняя панель: название, кнопки «+ Преподаватель», «⚙ Настроить поля», «⤓ Экспорт CSV», «⤒ Импорт».
- Вкладки: «Преподаватели» и «Отчёты».
- Вкладка «Преподаватели»: карточки статистики → панель поиска/фильтров → таблица.
- Вкладка «Отчёты»: выбор параметров → графики распределения → перекрёстная таблица → сводка.
7.2. Таблица преподавателей (инлайн-редактирование)
- Каждая строка = один преподаватель.
- Каждый параметр = поле ввода прямо в ячейке.
- Типы полей зависят от параметра (см. раздел 8).
- Автосохранение в
localStorageпри вводе (с debounce ~350 мс). - Действия по строке:
⤓— выгрузить анкету одного преподавателя в JSON.🗑— удалить строку (с подтверждением).
- Кнопка «+ Преподаватель» добавляет пустую строку, фокус на поле «ФИО».
- Все базовые поля свободно вводимы (выпадающие поля — редактируемые комбобоксы: выбор из подсказок или ввод своего значения).
7.3. Параметры преподавателя (модель данных)
Базовые поля (нельзя удалить):
| Ключ | Название | Тип | Обязательное | Варианты |
|---|---|---|---|---|
fullName |
ФИО | text | да | — |
birthDate |
Дата рождения | date | нет | — |
education |
Образование | textarea | нет | — |
academicDegree |
Научная степень | select (комбобокс) | нет | Нет / Кандидат наук / Доктор наук + свободный ввод |
category |
Категория | select (комбобокс) | нет | Нет / Вторая / Первая / Высшая + свободный ввод |
specialistCertificate |
Сертификат специалиста | text | нет | — |
associations |
Членство в ассоциациях | text | нет | — |
clinicalBase |
Клиническая база | text | нет | — |
Пользовательские поля: добавляются через «⚙ Настроить поля». Доступные типы: текст, дата, число, выпадающий список (комбобокс), длинный текст, да/нет (чекбокс). Удаляемы (с подтверждением; значения у всех преподавателей теряются).
7.4. Статистика (карточки)
- Всего преподавателей.
- С научной степенью (кандидат / доктор).
- Докторов наук.
- С сертификатом специалиста.
- Члены ассоциаций. Обновляется автоматически при редактировании таблицы.
7.5. Поиск и фильтрация
- Полнотекстовый поиск по всем полям.
- Фильтры: по научной степени, по категории, по клинической базе.
- Счётчик «Показано: X из Y».
7.6. Отчёты (многопараметрические)
- Выбор нескольких параметров чекбоксами.
- По каждому выбранному параметру — диаграмма распределения (количество по значениям).
- По первым двум выбранным — перекрёстная таблица (pivot): строки × столбцы, в ячейках количество преподавателей, с итогами по строкам/столбцам и общим.
- Сводка: всего преподавателей, % с научной степенью, число параметров в отчёте.
- Экспорт отчёта в CSV (все распределения + перекрёстная таблица).
- Пустые значения отображаются как «(не указано)».
7.7. Экспорт и импорт
- Экспорт CSV — вся таблица преподавателей (заголовок из актуальных названий полей).
- Резервная копия JSON — полное состояние (преподаватели + пользовательские поля), двойной клик по кнопке «Экспорт CSV».
- Выгрузка анкеты (⤓ в строке) — JSON одного преподавателя.
- Импорт — добавление анкет из файла с защитой от дублей по ФИО (регистронезависимо). Поддерживаемые форматы:
{teachers:[...], customFields:[...]}, массив преподавателей, один объект-преподаватель. Пользовательские поля из файла тоже сливаются.
8. Модель данных
state = {
teachers: [
{
id: "t_...",
fullName: "...",
birthDate: "ГГГГ-ММ-ДД",
education: "...",
academicDegree: "Доктор наук",
category: "Высшая",
specialistCertificate: "...",
associations: "...",
clinicalBase: "...",
<customFieldKey>: <value>
}
],
customFields: [
{ key, label, type, options?, locked:false }
]
}
Хранение: localStorage["clinical_dashboard_v1"] = JSON.stringify(state).
9. Сценарий совместной работы (сбор анкет)
Поскольку общего сервера нет, используется файловый обмен:
- Преподаватель открывает ссылку дашборда.
- Вводит свои данные в новую строку.
- Жмёт
⤓в конце строки → получает файлanketa_ФИО.json. - Отправляет файл администратору (email/мессенджер).
- Администратор жмёт «⤒ Импорт» → анкета добавляется в таблицу (дубли по ФИО отбрасываются).
10. Нефункциональные требования
- Доступность: работает в любом современном браузере, адаптивная вёрстка (десктоп/планшет/телефон), таблица скроллится по горизонтали на узких экранах.
- Производительность: таблица до ~200 строк работает без задержек; автосохранение дебаунсится.
- Приватность: данные не покидают браузер пользователя (кроме случаев ручного экспорта).
- Отказоустойчивость: при ошибке чтения localStorage приложение не падает, начинает с пустого состояния.
- Интернационализация: интерфейс на русском языке.
- Палитра: клиническая тема — белый фон, тёмный текст, бирюзовый акцент (
#0891B2).
11. Техническая реализация
| Файл | Назначение |
|---|---|
index.html |
Структура страницы, вкладки, модальные окна. |
styles.css |
Оформление (клиническая тема, таблицы, карточки, отчёты). |
app.js |
Вся логика: состояние, рендеринг, автосохранение, отчёты, экспорт/импорт. |
Стек: чистый vanilla JS, без фреймворков и сборщиков. Публикация — push в ветку pages Gitea, Caddy обслуживает статике мгновенно.
12. Дорожная карта (Roadmap)
| Приоритет | Возможность |
|---|---|
| Высокий | Форма самостоятельной подачи анкеты преподавателем через Formspree/Getform (без файлов, отправка на email администратора). |
| Высокий | Общее хранилище через опубликованный Google Sheets CSV для настоящей многопользовательской работы. |
| Средний | Экспорт отчётов в PDF / печать. |
| Средний | Загрузка фото преподавателя (avatar, base64 в localStorage). |
| Средний | Валидация полей (формат даты, обязательность). |
| Низкий | Журнал изменений (audit log). |
| Низкий | Роли: просмотр только для преподавателей, редактирование для администратора. |
13. Глоссарий
- Комбобокс — поле, совмещающее выпадающий список подсказок и свободный ввод текста.
- Перекрёстная таблица (pivot) — таблица сопряжённости: строки и столбцы — значения двух параметров, в ячейках количество объектов с данной комбинацией.
- localStorage — хранилище данных в браузере пользователя.
- CSV — текстовый формат таблицы, открывается в Excel/Numbers.
- JSON — формат для резервных копий и обмена анкетами.