Створення web-системи адміністрування завдань по кафедрі

Ковтун, Денис Владиславович
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/9884
Назва:	Створення web-системи адміністрування завдань по кафедрі
Автори:	Тесля, Юрій Миколайович Ковтун, Денис Владиславович
Ключові слова:	web-система;Vite;адміністрування завдань;React;Tailwind CSS;frontend;користувачі, звіти;повідомлення;завдання;кафедра;календар
Дата публікації:	10-чер-2026
Короткий огляд (реферат):	Метою кваліфікаційної роботи є розробка web-системи адміністрування завдань по кафедрі, призначеної для створення, розподілу, контролю та аналізу виконання завдань у межах кафедри закладу вищої освіти, а також для керування користувачами, кафедрами, повідомленнями, календарем, звітами, особистим кабінетом і налаштуваннями системи. Актуальність роботи зумовлена потребою у цифровізації адміністративних процесів закладів вищої освіти та необхідністю створення зручних web-інструментів для організації роботи кафедри. Метою роботи є розробка демонстраційної web-системи адміністрування завдань із використанням сучасних frontend-технологій, яка забезпечує централізоване керування дорученнями, користувачами, кафедрами та аналітичними даними. Об’єкт дослідження – процес створення web-орієнтованих інформаційних систем для організації та контролю адміністративних завдань у структурних підрозділах закладу вищої освіти. Предмет дослідження – структура, функціональність, інтерфейс і програмна реалізація web-системи адміністрування завдань по кафедрі. У роботі використано методи аналізу предметної області, порівняння аналогів, проєктування структури web-системи, розробки користувацького інтерфейсу, моделювання сторінкової навігації, організації даних, візуалізації статистики та тестування web-ресурсу. Практичне значення полягає у створенні демонстраційної адміністративної web-системи, яка може бути основою для подальшого розвитку повноцінного ресурсу з авторизацією, базою даних, розширеною системою ролей, журналом дій користувачів, автоматичними сповіщеннями та експортом звітів.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/9884
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Файли цього матеріалу:
Файл	Опис	Розмір	Формат
РЕП_БАК_Ковтун _WEB-2211.pdf Restricted Access		3.87 MB	Adobe PDF	Переглянути/Відкрити Запит копії
Показати повний опис матеріалу Перегляд статистики
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
 
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ 
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ 
         
 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи бакалавра 
 
на тему: Створення web-системи адміністрування завдань по кафедрі 
 
 
 
 
 
 Виконав: здобувач першого 
(бакалаврського) рівня вищої освіти 
 4 курсу, групи WEB-2211 
Спеціальності 126 «Інформаційні 
системи та технології» 
 ОП «Web-технології, Web-дизайн» 
 
  
Ковтун Денис Владиславович 
  
Керівник: доктор техніних наук, 
професор 
Тесля Юрій Миколайович 
 
  
Рецензент: д.т.н., проф. Бабенко В. Г. 
 
 
 
 
 
 
 
 
  
  
  
 
 
Черкаси – 2026 року
 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ 
УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
(повна назва) 
Кафедра інформаційних технологій проектування 
(повна назва) 
Освітньо-кваліфікаційний рівень бакалавр 
(назва) 
Спеціальність 126 «Інформаційні системи та технології» 
(шифр і назва) 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри ІТП 
 Тетяна 
ПРОКОПЕНКО 
« »  20
 року 
 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА 
 
Ковтун Денис Владиславович 
(прізвище, ім’я, по батькові) 
1. Тема роботи Створення web-системи адміністрування завдань по кафедрі 
 
Керівник роботи  Тесля Юрій Миколайович, доктор технічних наук, професор 
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
Затверджено наказом Черкаського державного технологічного університету від 
«12» Березня 2026 року № 56/03-03 
 
2. Строк подання здобувачем роботи 4 червня 
 
3. Вихідні дані до роботи Методичні рекомендації до кваліфікаційної роботи 
бакалавра зі спеціальності 126 F6 «Інформаційні системи та технології», ОП 
«Web-технології, Web-дизайн»; матеріали з web-розробки, UX/UI-дизайну, 
адаптивної верстки та тестування web-застосунків; офіційна документація React, 
Vite, Tailwind CSS, React Router, Recharts, Vercel, JavaScript і TypeScript; аналіз 
web-систем керування завданнями Trello, Asana, Jira та Microsoft Planner; 
фактична структура й функціональність розробленої web-системи 
адміністрування завдань по кафедрі. 
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно 
розробити) 
Постановка задачі; аналіз предметної області web-систем адміністрування 
завдань; огляд аналогів; обґрунтування доцільності розробки; формування 
вимог до системи; проєктування структури, дизайну, навігації та 
функціональних модулів; розробка прототипу; техніко-економічне 
обґрунтування; вибір інструментальних засобів; реалізація основних сторінок 
web-системи; організація даних і логіки взаємодії сторінок; тестування 
працездатності, адаптивності, навігації, пошуку, фільтрації, календаря, звітів і 
повідомлень; порівняння розробленої системи з аналогами; висновки; додатки. 
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, 
плакатів) 
Навігаційна структура web-системи адміністрування завдань; модель наповнення 
 
сторінок системи; схема організації даних; схема взаємодії сторінок; структура 
основних розділів системи; порівняння аналогів web-систем керування 
завданнями; скріншоти головної сторінки, завдань, календаря, користувачів, 
кафедр, звітів, повідомлень, кабінету та налаштувань; таблиці трудомісткості й 
витрат; результати тестування web-системи. 
 
6. Консультанти розділів роботи 
 
Розділ Прізвище, ініціали та Підпис, дата 
посада 
консультанта 
  завдання видав завдання прийняв 
    
    
    
    
7. Дата видачі завдання 15 Лютого 2026 року 
 
КАЛЕНДАРНИЙ ПЛАН 
 
№ 
Назва етапів кваліфікаційної роботи Строк виконання 
з/
бакалавра етапів роботи Примітка 
п 
1 Видача завдання на кваліфікаційну роботу бакалавра 15.02.2026 Виконано 
Аналіз літературних джерел, об’єкта та предмета 
2 17.02.2026 Виконано 
дослідження 
Написання теоретичного розділу кваліфікаційної роботи 
3 04.03.2026 Виконано 
бакалавра 
Написання аналітичного розділу, аналіз існуючих 
4 03.04.2026 Виконано 
платформ онлайн-навчання програмуванню 
5 Проєктування структури та функціоналу web-сайту 16.04.2026 Виконано 
6 Практична реалізація web-сайту 17.04.2026 Виконано 
7 Тестування web-сайту та підготовка висновків 20.04.2026 Виконано 
Передзахист кваліфікаційної роботи бакалавра на 
8 22.04.2026 Виконано 
засіданні кафедри 
9 Подання роботи завідувачу кафедри 26.05.2026 Виконано 
10 Захист кваліфікаційної роботи бакалавра 10.06.2026 Виконано 
 
Здобувач вищої освіти 
  
  
(підпис) (прізвище та ініціали) 
Керівник 
роботи   
  
(підпис) (прізвище та ініціали) 
 
 
 
 
 
АНОТАЦІЯ 
 
Структура та обсяг роботи. Пояснювальна записка складається з трьох 
розділів, викладена на 88 сторінках, містить 24 рисунки, 0 таблиць, 43 
джерела використаної літератури, 2 додатки. 
Метою кваліфікаційної роботи є розробка web-системи 
адміністрування завдань по кафедрі, призначеної для створення, розподілу, 
контролю та аналізу виконання завдань у межах кафедри закладу вищої 
освіти, а також для керування користувачами, кафедрами, повідомленнями, 
календарем, звітами, особистим кабінетом і налаштуваннями системи. 
Актуальність роботи зумовлена потребою у цифровізації 
адміністративних процесів закладів вищої освіти та необхідністю створення 
зручних web-інструментів для організації роботи кафедри. Метою роботи є 
розробка демонстраційної web-системи адміністрування завдань із 
використанням сучасних frontend-технологій, яка забезпечує 
централізоване керування дорученнями, користувачами, кафедрами та 
аналітичними даними. 
Об’єкт дослідження – процес створення web-орієнтованих 
інформаційних систем для організації та контролю адміністративних 
завдань у структурних підрозділах закладу вищої освіти. Предмет 
дослідження – структура, функціональність, інтерфейс і програмна 
реалізація web-системи адміністрування завдань по кафедрі. 
У роботі використано методи аналізу предметної області, порівняння 
аналогів, проєктування структури web-системи, розробки користувацького 
інтерфейсу, моделювання сторінкової навігації, організації даних, 
візуалізації статистики та тестування web-ресурсу. 
Практичне значення полягає у створенні демонстраційної 
адміністративної web-системи, яка може бути основою для подальшого 
розвитку повноцінного ресурсу з авторизацією, базою даних, розширеною 
системою ролей, журналом дій користувачів, автоматичними сповіщеннями 
та експортом звітів. 
Ключові слова: web-система, адміністрування завдань, кафедра, 
завдання, користувачі, звіти, календар, повідомлення, React, Vite, Tailwind 
CSS, frontend. 
 
 
SUMMARY 
 
Structure and scope of the work. The explanatory note consists of three 
chapters, presented on 88 pages, contains 24 figures, 0 tables, 43 references and 
2 appendices. 
The aim of the qualification work is to develop a web-based task 
administration system for a department, designed to create, assign, control and 
analyze the performance of tasks within a department of a higher education 
institution, as well as to manage users, departments, notifications, calendar, 
reports, personal account and system settings. 
The relevance of the work is determined by the need to digitalize 
administrative processes in higher education institutions and to create convenient 
web tools for organizing the work of a department. The aim of the work is to 
develop a demonstration web-based task administration system using modern 
frontend technologies, which provides centralized management of assignments, 
users, departments and analytical data. 
The object of the research is the process of creating web-oriented 
information systems for organizing and controlling administrative tasks in 
structural units of a higher education institution. The subject of the research is the 
structure, functionality, interface and software implementation of the web-based 
task administration system for a department. 
The work uses methods of subject area analysis, comparison of analogues, 
design of the web system structure, development of the user interface, modeling 
of page navigation, data organization, statistics visualization and testing of the 
web resource. 
The practical significance lies in the creation of a demonstration 
administrative web system that can serve as a basis for the further development 
of a full-featured resource with authorization, a database, an extended role system, 
a user action log, automatic notifications and report export. 
Keywords: web system, task administration, department, tasks, users, 
reports, calendar, notifications, React, Vite, Tailwind CSS, frontend. 
 
 
ЗМІСТ 
 
ВСТУП ............................................................................................................. 2 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ .................................................................................................... 10 
1.1 Предметна область web-систем адміністрування завдань ......... 10 
1.2 Доцільність розробки web-системи адміністрування завдань по 
кафедрі ................................................................................................ 14 
1.3 Чинники, які впливають на розробку web-системи 
адміністрування завдань .................................................................... 18 
1.4 Аналітичний огляд існуючих web-систем керування 
завданнями
  ....................................................................................................... 20 
Висновки до розділу 1 ........................................................................ 28 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ............... 30 
2.1 Призначення web-системи адміністрування завдань по 
кафедрі
  ....................................................................................................... 30 
2.2 Вимоги до дизайну web-системи адміністрування завдань ....... 32 
2.3 Структура сторінок web-системи адміністрування завдань ....... 34 
2.4 Техніко-економічне обґрунтування доцільності розробки web-
системи адміністрування завдань ...................................................... 38 
Висновки до розділу 2 ........................................................................ 44 
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ .................................................. 47 
3.1 Обґрунтування вибору інструментальних засобів розробки ..... 47 
3.2 Опис програмної реалізації web-системи адміністрування 
завдань ................................................................................................ 51 
3.3 Організація даних у web-системі адміністрування завдань ....... 60 
3.4 Логіка маршрутів і взаємодії сторінок web-системи .................. 63 
3.5 Тестування web-системи адміністрування завдань .................... 67 
3.6 Порівняння розробленої web-системи з аналогами .................... 70 
Висновки до розділу 3 ........................................................................ 72 
ВИСНОВКИ ................................................................................................... 74 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ....................................................... 76 
ДОДАТОК А.................................................................................................. 80 
ДОДАТОК Б ................................................................................................... 82 
 
 
ЧДТУ 262211.11 ПЗ 
Змн. Арк. № докум. Підпис Дата  
 Розроб. Ковтун Д. В.   Літ. Арк. Аркушів 
 Перевір. Створення web-системи 
Тесля Ю. М.. 2 88 
адміністрування завдань по 
 Рецензент Бабенко В. Г. 
кафедрі ФІТІС, 
 Н. контр. Тесля Ю. М. 
Пояснювальна записка кафедра ІТП, WEB-2211 
 Затверд. Прокопенко Т.О. 
 
 
ВСТУП 
 
У сучасних умовах цифровізації освітнього середовища особливого 
значення набувають web-орієнтовані інформаційні системи, які 
забезпечують автоматизацію управлінських процесів, упорядкування 
даних, швидкий доступ до службової інформації та підвищення 
ефективності взаємодії між учасниками освітнього процесу. Для закладів 
вищої освіти важливим є не лише використання електронних навчальних 
ресурсів, а й впровадження інструментів для організації внутрішньої 
роботи кафедр, контролю виконання завдань, розподілу доручень між 
співробітниками, формування звітності та моніторингу поточного стану 
роботи. 
Актуальність теми кваліфікаційної роботи зумовлена потребою у 
створенні зручних і функціональних web-систем, призначених для 
адміністрування завдань у межах кафедри. У традиційній організації 
роботи значна частина інформації щодо доручень, дедлайнів, 
відповідальних осіб, статусів виконання та звітних показників може 
зберігатися у різних документах, таблицях, повідомленнях або усних 
домовленостях. Такий підхід ускладнює контроль виконання завдань, 
підвищує ризик втрати інформації та не забезпечує достатнього рівня 
прозорості управлінських процесів. Використання спеціалізованої web-
системи дозволяє централізувати ці дані, забезпечити оперативний доступ 
до них і підвищити якість організації роботи кафедри. 
Необхідність впровадження цифрових інструментів у сфері освіти 
підтверджується сучасними міжнародними підходами до розвитку 
цифрового середовища. У звіті UNESCO щодо використання технологій в 
освіті зазначено, що цифрові інструменти мають застосовуватися з 
урахуванням доцільності, доступності, масштабованості та реальної 
користі для освітнього процесу [1]. Європейський план дій з цифрової 
освіти Digital Education Action Plan 2021–2027 також визначає цифрову 
Арк. 
 ЧДТУ 262211.11 ПЗ 
2 
Змн. Арк. № Документа Підпис Дата  
 
трансформацію освіти як один із важливих напрямів формування якісного, 
інклюзивного та доступного освітнього середовища [2]. Це підтверджує 
доцільність розробки web-систем, які можуть використовуватися для 
організації не лише навчальної, а й адміністративної діяльності закладів 
освіти. 
Особливе значення такі системи мають для кафедр університету, де 
щоденно виконуються різні типи організаційних, навчально-методичних, 
наукових і звітних завдань. До таких завдань можуть належати підготовка 
навчальних матеріалів, оновлення освітніх програм, організація 
студентських заходів, перевірка курсових робіт, підготовка звітів, 
проведення консультацій, контроль дедлайнів та інші види діяльності. За 
відсутності єдиного цифрового середовища контроль таких процесів може 
бути недостатньо ефективним, оскільки відповідальна особа не завжди має 
повну інформацію про стан виконання доручень, завантаженість 
співробітників і кількість активних або прострочених завдань. 
На сьогодні існує значна кількість систем для керування завданнями та 
проєктами, серед яких Trello, Asana, Jira, Microsoft Planner та інші web-
сервіси [3–6]. Вони забезпечують створення завдань, призначення 
виконавців, відстеження статусів, роботу з календарями, дошками, 
коментарями та звітністю. Водночас більшість таких платформ є 
універсальними й орієнтованими переважно на комерційні команди, IT-
проєкти або корпоративне управління. Для кафедри закладу вищої освіти 
важливими є простота інтерфейсу, адаптація до внутрішньої структури 
університету, наявність ролей користувачів, зв’язок завдань із кафедрами, 
можливість перегляду статистики та швидкий доступ до основних 
адміністративних функцій. 
Саме тому доцільною є розробка web-системи адміністрування завдань 
по кафедрі, яка поєднує основні функції управління дорученнями, 
користувачами, кафедрами, календарем, повідомленнями, звітами та 
персональним кабінетом у межах єдиного інтерфейсу. Розроблювана 
Арк. 
 ЧДТУ 262211.11 ПЗ 
3 
Змн. Арк. № Документа Підпис Дата  
 
система призначена для організації роботи кафедри, розподілу завдань між 
співробітниками, контролю строків виконання, перегляду статистичних 
показників і підвищення прозорості адміністративної діяльності. Такий 
підхід дозволяє зменшити кількість розрізнених інструментів, спростити 
процес контролю та забезпечити більш зручну взаємодію між 
адміністратором, завідувачем кафедри, викладачами та співробітниками. 
Розроблена web-система має назву «Система адміністрування завдань» і 
містить набір основних сторінок, необхідних для виконання управлінських 
функцій. Головна сторінка відображає загальний огляд стану системи: 
кількість активних, виконаних і прострочених завдань, кількість 
користувачів, графік виконання завдань, блок швидких дій, перелік 
особистих завдань і список останніх завдань. Така структура дозволяє 
адміністратору швидко оцінити поточний стан роботи кафедри та перейти 
до потрібного розділу без зайвих дій. 
Сторінка керування завданнями призначена для перегляду, пошуку, 
фільтрації, створення, редагування та видалення завдань. Для кожного 
завдання відображаються назва, опис, виконавець, кафедра, дедлайн, 
статус, пріоритет і доступні дії. Наявність фільтрів за статусом і 
пріоритетом спрощує роботу з великим переліком доручень і дозволяє 
швидко знайти завдання, які потребують першочергової уваги. Це є 
важливим для адміністративної діяльності, оскільки своєчасне виявлення 
прострочених або важливих завдань безпосередньо впливає на якість 
організації роботи кафедри. 
Окремий розділ системи присвячено календарю завдань. Календар 
забезпечує перегляд доручень за датами та дедлайнами, що дає змогу краще 
планувати робоче навантаження, контролювати строки виконання й 
уникати накопичення завдань у межах одного періоду. Для зручності 
використовується легенда статусів, яка візуально розрізняє виконані, 
активні та прострочені завдання. Такий спосіб подання інформації є 
зручним для швидкого сприйняття та підвищує ефективність планування. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
4 
Змн. Арк. № Документа Підпис Дата  
 
Сторінка користувачів реалізує можливості керування обліковими 
записами співробітників системи. У ній передбачено пошук користувачів, 
фільтрацію за ролями, перегляд контактних даних, кафедри, статусу 
активності та ролі в системі. Основними ролями є адміністратор, завідувач 
кафедри, викладач і співробітник. Розмежування ролей є важливим 
елементом безпеки та організації доступу, оскільки різні категорії 
користувачів повинні мати різний рівень прав у системі. Наприклад, 
адміністратор має повний доступ до функцій керування, а співробітник 
може працювати переважно із призначеними йому завданнями. 
Розділ кафедр призначений для перегляду структурних підрозділів 
університету, інформації про завідувачів, кількість співробітників і 
кількість активних завдань. У системі передбачено можливість перегляду 
співробітників і завдань відповідної кафедри, а також редагування або 
видалення записів. Наявність цього розділу дозволяє пов’язати завдання не 
лише з окремими виконавцями, а й із конкретними кафедрами, що є 
важливим для аналізу навантаження та формування звітності. 
Важливою складовою web-системи є модуль звітів і статистики. Він 
містить аналітичні картки, графіки динаміки виконання завдань, розподіл 
завдань за статусами, пріоритетами та кафедрами, а також підсумкову 
таблицю. Використання візуалізації даних дає змогу швидко оцінити 
ефективність роботи, виявити найбільш завантажені кафедри, визначити 
кількість виконаних і поточних завдань, а також приймати обґрунтовані 
управлінські рішення. Можливість експорту звіту є додатковою перевагою, 
оскільки дозволяє використовувати отримані дані у подальшій 
документації або звітності. 
Сторінка повідомлень забезпечує інформування користувачів про нові 
завдання, зміну статусу доручень, наближення дедлайнів, прострочені 
завдання та системні повідомлення. Наявність сповіщень дозволяє 
своєчасно реагувати на зміни в системі та зменшує ймовірність пропуску 
Арк. 
 ЧДТУ 262211.11 ПЗ 
5 
Змн. Арк. № Документа Підпис Дата  
 
важливої інформації. Для зручності користувача передбачено фільтрацію 
повідомлень, позначення їх як прочитаних і видалення непотрібних записів. 
Особистий кабінет користувача містить інформацію про профіль, 
контактні дані, роль у системі, персональну статистику, останні завдання, 
форму редагування даних і зміну пароля. Такий розділ забезпечує 
персоналізацію роботи із системою та дозволяє користувачу контролювати 
власні дані й активність. Наявність особистого кабінету є важливою для 
систем, у яких передбачено роботу кількох користувачів із різними ролями 
та рівнями доступу. 
Розділ налаштувань системи призначений для керування ролями та 
правами доступу, сповіщеннями, зовнішнім виглядом, системними 
параметрами й користувачами. Також передбачено можливість скидання 
демонстраційних даних. Наявність цього розділу дозволяє адміністратору 
адаптувати систему до потреб конкретної кафедри або навчального 
закладу, визначити доступні функції для різних ролей і підтримувати 
належний порядок у роботі системи. 
Під час розробки web-системи важливим є використання сучасних 
підходів до побудови інтерфейсу користувача. Компонентний підхід, який 
використовується у сучасних frontend-бібліотеках, дозволяє розділяти 
інтерфейс на незалежні та повторно використовувані частини, що спрощує 
підтримку й розвиток web-додатків [7]. Використання інструментів 
швидкого збирання web-проєктів дає змогу ефективно організувати процес 
розробки, тестування та підготовки проєкту до розгортання [8]. Для 
формування адаптивного й візуально цілісного інтерфейсу доцільним є 
використання утилітарного підходу до стилізації, який дозволяє швидко 
створювати сучасні елементи дизайну без надмірного ускладнення CSS-
структури [9]. 
Під час проєктування інтерфейсу також необхідно враховувати 
принципи доступності web-контенту. Відповідно до рекомендацій WCAG, 
web-ресурс має бути сприйнятним, керованим, зрозумілим і надійним для 
Арк. 
 ЧДТУ 262211.11 ПЗ 
6 
Змн. Арк. № Документа Підпис Дата  
 
різних категорій користувачів [10]. Це особливо важливо для освітніх і 
адміністративних систем, оскільки ними можуть користуватися люди з 
різним рівнем цифрової підготовки. Саме тому інтерфейс розробленої 
системи побудовано у світлій мінімалістичній темі з чіткою структурою 
сторінок, зрозумілою навігацією, достатніми відступами, картковим 
поданням інформації та візуальним виділенням важливих елементів. 
Метою кваліфікаційної роботи є розробка web-системи адміністрування 
завдань по кафедрі, призначеної для створення, розподілу, контролю та 
аналізу виконання завдань у межах кафедри закладу вищої освіти, а також 
для керування користувачами, кафедрами, повідомленнями, календарем, 
звітами, особистим кабінетом і налаштуваннями системи. 
Для досягнення поставленої мети необхідно вирішити такі задачі: 
– проаналізувати предметну область web-систем адміністрування 
завдань та визначити особливості організації роботи кафедри закладу 
вищої освіти; 
– дослідити існуючі аналоги систем керування завданнями та проєктами, 
зокрема Trello, Asana, Jira і Microsoft Planner, визначити їхні переваги, 
недоліки та можливості використання окремих рішень у власній 
розробці; 
– сформувати функціональні та нефункціональні вимоги до web-системи 
адміністрування завдань по кафедрі; 
– спроєктувати структуру web-сайту, логіку навігації, основні сторінки, 
користувацькі ролі та сценарії взаємодії; 
– обґрунтувати вибір інструментальних засобів і технологій розробки 
web-системи; 
– реалізувати головну сторінку, сторінку завдань, календар, сторінку 
користувачів, розділ кафедр, модуль звітів, повідомлення, особистий 
кабінет і налаштування системи; 
– реалізувати функціональні можливості пошуку, фільтрації, створення, 
редагування, видалення та перегляду завдань; 
Арк. 
 ЧДТУ 262211.11 ПЗ 
7 
Змн. Арк. № Документа Підпис Дата  
 
– забезпечити розмежування користувачів за ролями та правами 
доступу; 
– реалізувати статистичне відображення даних, графіки, підсумкові 
таблиці та експорт звітів; 
– виконати тестування працездатності, адаптивності, зручності 
використання, коректності навігації та основних функцій системи; 
–  провести порівняння розробленої web-системи з існуючими аналогами 
та визначити її практичні переваги. 
Об’єкт дослідження – процес створення web-орієнтованих 
інформаційних систем для організації та контролю адміністративних 
завдань у структурних підрозділах закладу вищої освіти. 
Предмет дослідження – методи, засоби та технології проєктування і 
розробки web-системи адміністрування завдань по кафедрі, що забезпечує 
керування завданнями, користувачами, кафедрами, календарем, 
повідомленнями, звітністю та персональними даними користувачів. 
Методи дослідження. У процесі виконання кваліфікаційної роботи 
використано методи аналізу та узагальнення інформації для дослідження 
предметної області адміністрування завдань; методи порівняльного аналізу 
для визначення переваг і недоліків існуючих систем керування завданнями; 
методи структурного та функціонального проєктування для формування 
архітектури web-системи; методи моделювання користувацьких сценаріїв 
для опису взаємодії користувачів із системою; методи компонентного 
проєктування для побудови інтерфейсу; методи web-програмування для 
реалізації клієнтської частини ресурсу; методи візуалізації даних для 
подання статистичних показників; методи тестування програмного 
забезпечення для перевірки працездатності, адаптивності, коректності 
функціонування та зручності використання розробленої системи. 
Практичне значення одержаних результатів полягає у створенні 
демонстраційної web-системи адміністрування завдань по кафедрі, яка 
може бути використана як приклад інформаційного ресурсу для організації 
Арк. 
 ЧДТУ 262211.11 ПЗ 
8 
Змн. Арк. № Документа Підпис Дата  
 
внутрішньої роботи кафедри закладу вищої освіти. Розроблена система 
забезпечує централізоване створення та перегляд завдань, призначення 
виконавців, контроль дедлайнів, фільтрацію за статусами й пріоритетами, 
перегляд календаря, керування користувачами та кафедрами, формування 
звітів, перегляд повідомлень і роботу з особистим кабінетом. 
Розроблена система має практичну цінність завдяки поєднанню 
адміністративного функціоналу, статистичного аналізу та зручного 
інтерфейсу. Світлий мінімалістичний дизайн із зеленими акцентами 
забезпечує візуальну цілісність ресурсу, а бічне меню дозволяє швидко 
переходити між основними розділами системи. Карткова структура 
подання інформації полегшує сприйняття даних, а графіки та таблиці дають 
змогу швидко оцінювати ефективність виконання завдань. Надалі система 
може бути розширена шляхом інтеграції серверної частини, бази даних, 
повноцінної авторизації, системи журналювання дій користувачів, 
розширених звітів, експорту в різні формати та автоматичного надсилання 
сповіщень. 
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох 
розділів, висновків, списку використаних джерел та додатків. У першому 
розділі розглянуто предметну область web-систем адміністрування завдань, 
проаналізовано сучасні аналоги, зокрема Trello, Asana, Jira і Microsoft 
Planner, визначено їхні переваги та недоліки, а також сформульовано 
постановку задачі. У другому розділі обґрунтовано технічне завдання, 
визначено функціональні та нефункціональні вимоги до web-системи, 
описано структуру сайту, ролі користувачів, навігацію, основні сторінки, 
користувацькі сценарії, вимоги до дизайну та організації даних. У третьому 
розділі описано вибір засобів реалізації, процес розробки web-системи 
адміністрування завдань по кафедрі, реалізацію основних сторінок і 
функціональних модулів, тестування системи та порівняння отриманого 
результату з існуючими аналогами.  
Арк. 
 ЧДТУ 262211.11 ПЗ 
9 
Змн. Арк. № Документа Підпис Дата  
 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ 
 
1.1 Предметна область web-систем адміністрування завдань 
 
У сучасних умовах цифровізації освітнього середовища важливого 
значення набувають web-орієнтовані інформаційні системи, призначені для 
автоматизації організаційних, управлінських та аналітичних процесів у 
закладах вищої освіти. Такі системи дозволяють упорядкувати службову 
інформацію, забезпечити швидкий доступ до актуальних даних, спростити 
взаємодію між працівниками структурних підрозділів і підвищити 
ефективність контролю виконання завдань. Особливо актуальним є 
впровадження таких рішень на рівні кафедри, оскільки саме кафедра виконує 
значну частину навчально-методичної, організаційної, наукової та звітної 
роботи. 
Предметна область web-систем адміністрування завдань охоплює 
сукупність процесів, пов’язаних зі створенням, розподілом, контролем, 
редагуванням, обліком і аналізом виконання доручень. До таких процесів 
належать формування завдань, призначення відповідальних осіб, визначення 
дедлайнів, встановлення статусів і пріоритетів, перегляд календаря виконання, 
надсилання повідомлень, керування користувачами та формування 
статистичних звітів. У межах кафедри такі функції є важливими, оскільки 
дають змогу систематизувати роботу співробітників, уникати втрати 
інформації та своєчасно контролювати виконання доручень. 
Традиційна організація роботи кафедри часто передбачає використання 
окремих документів, електронних таблиць, листування, месенджерів або 
усних домовленостей. Такий підхід може бути зручним для невеликої кількості 
простих доручень, однак у разі збільшення кількості завдань він стає менш 
ефективним. Інформація може дублюватися, втрачатися або оновлюватися 
несвоєчасно. Крім того, керівнику кафедри або адміністратору складніше 
Арк. 
 ЧДТУ 262211.11 ПЗ 
10 
Змн. Арк. № Документа Підпис Дата  
 
отримати цілісне уявлення про стан виконання завдань, завантаженість 
співробітників і наявність прострочених доручень. 
Використання web-системи адміністрування завдань дозволяє вирішити 
зазначені проблеми шляхом створення єдиного цифрового середовища для 
управління робочими процесами. У такій системі всі завдання зберігаються 
централізовано, а користувачі мають змогу переглядати потрібну інформацію 
відповідно до своїх прав доступу. Адміністратор може створювати нові 
завдання, призначати виконавців, переглядати статистику та керувати 
користувачами. Завідувач кафедри може контролювати роботу співробітників 
кафедри, а викладачі й співробітники — переглядати та виконувати призначені 
їм завдання. 
Актуальність розробки таких систем підтверджується загальними 
тенденціями цифрової трансформації освіти. У звіті UNESCO щодо 
використання технологій в освіті зазначено, що цифрові інструменти мають 
застосовуватися доцільно, доступно та з урахуванням реальної користі для 
освітнього процесу [11]. Європейський план дій у сфері цифрової освіти 
Digital Education Action Plan 2021–2027 також визначає цифрові технології як 
один із ключових чинників формування якісного, інклюзивного та доступного 
освітнього середовища [12]. Це свідчить про доцільність використання web-
рішень не лише для навчання, а й для організації адміністративної діяльності 
закладів освіти. 
Для кафедри університету система адміністрування завдань може 
охоплювати різні види діяльності. До них належать оновлення навчальних 
програм, підготовка звітів, організація студентських заходів, перевірка 
курсових робіт, підготовка матеріалів до акредитації, проведення консультацій, 
контроль дедлайнів, планування роботи кафедри та моніторинг виконання 
доручень. За допомогою web-системи такі процеси можна зробити більш 
прозорими, контрольованими та зручними для всіх учасників. 
Важливою складовою предметної області є розмежування користувачів 
за ролями. У системі можуть бути передбачені ролі адміністратора, завідувача 
Арк. 
 ЧДТУ 262211.11 ПЗ 
11 
Змн. Арк. № Документа Підпис Дата  
 
кафедри, викладача та співробітника. Кожна роль має власний набір прав і 
функцій. Наприклад, адміністратор отримує доступ до всіх розділів системи, 
може керувати користувачами, кафедрами, завданнями, звітами та 
налаштуваннями. Завідувач кафедри може контролювати роботу своєї 
кафедри, а викладач або співробітник працює переважно із завданнями, які 
були йому призначені. Такий підхід дозволяє підвищити безпеку системи й 
уникнути несанкціонованої зміни даних. 
Сучасні web-системи адміністрування завдань мають містити зручний 
інтерфейс, адаптивну структуру сторінок, швидку навігацію, можливість 
пошуку та фільтрації інформації. Для ефективної роботи користувач повинен 
швидко розуміти, де знаходяться потрібні розділи, які завдання потребують 
уваги, які дедлайни наближаються та які дії необхідно виконати. Тому важливе 
значення має не лише функціональність системи, а й якість її користувацького 
інтерфейсу. 
Розроблювана web-система має назву «Система адміністрування 
завдань» і призначена для організації роботи кафедри. Вона містить основні 
розділи: головна сторінка, завдання, календар, користувачі, кафедри, звіти, 
повідомлення, кабінет і налаштування. Така структура відповідає типовим 
потребам адміністрування завдань у межах кафедри та забезпечує логічний 
поділ функцій між окремими сторінками. 
Головна сторінка системи виконує роль інформаційної панелі, на якій 
відображаються основні статистичні показники: кількість активних, 
виконаних і прострочених завдань, кількість користувачів, графік виконання 
завдань, блок швидких дій, список особистих завдань і перелік останніх 
доручень. Такий підхід дозволяє адміністратору швидко оцінити стан роботи 
системи й перейти до потрібного розділу. 
Сторінка завдань є основним функціональним модулем системи. Вона 
забезпечує перегляд усіх завдань, пошук за назвою або описом, фільтрацію за 
статусом і пріоритетом, створення нових доручень, редагування наявних 
записів, перегляд деталей і видалення завдань. Для кожного завдання 
Арк. 
 ЧДТУ 262211.11 ПЗ 
12 
Змн. Арк. № Документа Підпис Дата  
 
відображаються назва, опис, виконавець, кафедра, дедлайн, статус, пріоритет і 
доступні дії. Це дозволяє зручно контролювати виконання доручень і швидко 
знаходити потрібну інформацію. 
Окремим важливим модулем є календар завдань. Він дозволяє 
переглядати завдання за датами та дедлайнами, що спрощує планування 
роботи кафедри. Використання календарного подання є доцільним, оскільки 
воно дає змогу візуально оцінити завантаженість певного періоду, визначити 
наближення важливих строків і своєчасно реагувати на потенційні затримки. 
Розділ користувачів призначений для керування обліковими записами 
працівників, які взаємодіють із системою. У ньому передбачено пошук 
користувачів, фільтрацію за ролями, перегляд контактних даних, кафедри, 
статусу активності та можливість редагування або видалення записів. 
Наявність цього розділу дозволяє адміністратору підтримувати актуальність 
інформації про співробітників і розмежовувати доступ до функцій системи. 
Розділ кафедр забезпечує перегляд структурних підрозділів 
університету, інформації про завідувачів, кількість співробітників і активних 
завдань. Також передбачено можливість перегляду співробітників і завдань 
конкретної кафедри. Це дозволяє аналізувати навантаження за підрозділами та 
отримувати узагальнену інформацію щодо організаційної роботи. 
Модуль звітів і статистики забезпечує аналітичне подання інформації. 
Він містить картки з ключовими показниками, графіки динаміки виконання 
завдань, розподіл за статусами, пріоритетами та кафедрами, а також 
підсумкову таблицю. Завдяки цьому адміністратор може оцінити ефективність 
роботи, виявити найбільш завантажені кафедри та прийняти обґрунтовані 
управлінські рішення. 
Сторінка повідомлень призначена для інформування користувачів про 
нові завдання, зміну статусів, наближення дедлайнів, прострочені доручення 
та системні події. Такий модуль є важливим для своєчасної комунікації в межах 
системи, оскільки дозволяє користувачам оперативно реагувати на зміни та не 
пропускати важливу інформацію. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
13 
Змн. Арк. № Документа Підпис Дата  
 
Особистий кабінет користувача забезпечує перегляд персональних 
даних, контактної інформації, ролі в системі, особистої статистики, останніх 
завдань, а також можливість редагування даних і зміни пароля. Наявність 
такого розділу підвищує зручність роботи із системою та забезпечує 
персоналізований доступ до інформації. 
Розділ налаштувань системи призначений для керування ролями та 
правами доступу, сповіщеннями, зовнішнім виглядом, системними 
параметрами й користувачами. Також передбачено можливість скидання 
демонстраційних даних. Такий функціонал є важливим для адміністрування 
системи та її адаптації до потреб конкретної кафедри. 
Отже, предметна область web-систем адміністрування завдань охоплює 
широкий комплекс процесів, пов’язаних з організацією, контролем і аналізом 
виконання доручень. Розробка такої системи для кафедри є актуальною, 
оскільки дозволяє централізувати управлінську інформацію, підвищити 
прозорість роботи, зменшити ризик втрати даних і забезпечити зручну 
взаємодію між учасниками адміністративного процесу. 
 
1.2 Доцільність розробки web-системи адміністрування завдань по 
кафедрі 
 
Розробка web-системи адміністрування завдань по кафедрі є доцільною у 
зв’язку з необхідністю підвищення ефективності організаційної роботи в 
закладах вищої освіти. Кафедра як структурний підрозділ університету 
виконує значну кількість поточних завдань, пов’язаних із навчальною, 
методичною, науковою, організаційною та звітною діяльністю. Для якісного 
виконання цих завдань потрібні засоби, які дозволяють централізовано 
створювати доручення, призначати відповідальних осіб, контролювати строки 
виконання та аналізувати результати роботи. 
Доцільність розробки системи пояснюється тим, що використання 
розрізнених інструментів не завжди забезпечує достатній рівень контролю. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
14 
Змн. Арк. № Документа Підпис Дата  
 
Наприклад, частина завдань може фіксуватися в електронних таблицях, інша 
— у листуванні або месенджерах, а окремі доручення можуть передаватися 
усно. У такій ситуації складно забезпечити єдине джерело актуальної 
інформації. Web-система дозволяє об’єднати всі основні процеси в межах 
одного ресурсу та надати користувачам доступ до інформації відповідно до 
їхніх ролей. 
Серед основних проблем, які можуть виникати під час традиційної 
організації завдань на кафедрі, можна виділити: 
– відсутність єдиного середовища для зберігання інформації про 
доручення; 
– складність контролю дедлайнів і статусів виконання; 
– ризик втрати або дублювання інформації; 
– недостатню прозорість розподілу завдань між співробітниками; 
– складність аналізу завантаженості кафедр і працівників; 
– обмежені можливості швидкого формування звітів; 
– несвоєчасне інформування користувачів про зміни, нові завдання або 
наближення строків виконання. 
Розроблювана система дозволяє частково або повністю вирішити ці 
проблеми завдяки впровадженню структурованого цифрового середовища. Усі 
завдання відображаються у відповідному розділі, мають виконавця, кафедру, 
дедлайн, статус і пріоритет. Це дозволяє швидко визначити, які завдання є 
новими, які перебувають у роботі, які виконано, а які потребують додаткової 
уваги. Наявність фільтрів і пошуку спрощує роботу з великою кількістю 
доручень. 
Важливою перевагою системи є наявність календаря, який дозволяє 
переглядати завдання за датами. Такий функціонал є корисним для планування 
роботи кафедри, оскільки користувач може бачити дедлайни в календарному 
форматі. Це допомагає уникати ситуацій, коли кілька важливих завдань 
накопичуються в один період без попереднього планування. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
15 
Змн. Арк. № Документа Підпис Дата  
 
Доцільність розробки також підтверджується наявністю модуля звітів. 
Звіти та статистика дозволяють не лише переглядати кількість завдань, а й 
оцінювати динаміку їх виконання, розподіл за статусами, пріоритетами та 
кафедрами. Для адміністратора або керівника кафедри така інформація є 
важливою, оскільки вона допомагає приймати управлінські рішення на основі 
фактичних даних. Візуалізація інформації у вигляді графіків і таблиць спрощує 
аналіз і робить систему більш корисною для практичного застосування. 
Окреме значення має керування користувачами та ролями. У системі 
передбачено декілька типів користувачів: адміністратор, завідувач кафедри, 
викладач і співробітник. Така структура дозволяє організувати доступ до 
функцій системи відповідно до посадових обов’язків. Рольова модель доступу 
є важливою для адміністративних web-систем, оскільки вона дозволяє 
захистити дані від випадкових або несанкціонованих змін. 
Система також має практичну цінність завдяки модулю повідомлень. 
Повідомлення інформують користувача про нові завдання, зміну статусу, 
наближення дедлайнів і системні події. Завдяки цьому підвищується 
оперативність взаємодії між користувачами, а ризик пропуску важливої 
інформації зменшується. 
З технічної точки зору розробка web-системи є доцільною, оскільки сучасні 
frontend-технології дозволяють створювати зручні, адаптивні та швидкі 
інтерфейси. React забезпечує компонентний підхід до розробки інтерфейсу, що 
спрощує створення повторно використовуваних елементів і підтримку проєкту 
[17]. Vite може застосовуватися для швидкого запуску, розробки та збирання 
web-додатків [18]. Tailwind CSS дає змогу формувати сучасний адаптивний 
дизайн за допомогою утилітарних класів [19]. Використання таких 
інструментів відповідає сучасним підходам до frontend-розробки та дозволяє 
реалізувати систему з чіткою структурою сторінок. 
Дизайн розробленої системи також впливає на її доцільність. Світла 
мінімалістична тема з зеленими акцентами, бічна навігація, карткова 
структура, зрозумілі кнопки та графічні елементи забезпечують зручність 
Арк. 
 ЧДТУ 262211.11 ПЗ 
16 
Змн. Арк. № Документа Підпис Дата  
 
роботи користувача. Для адміністративної системи важливо, щоб інтерфейс не 
відволікав від основних завдань, а допомагав швидко знайти потрібну 
інформацію та виконати необхідну дію. 
 
 
Рисунок 1.1 – Структура основних розділів web-системи адміністрування 
завдань 
 
Таким чином, створення web-системи адміністрування завдань по 
кафедрі є актуальним і практично обґрунтованим рішенням. Розробка дозволяє 
централізувати управління завданнями, забезпечити контроль строків 
виконання, організувати роботу користувачів за ролями, переглядати календар, 
формувати звіти, отримувати повідомлення та працювати з персональним 
кабінетом. Це створює основу для підвищення ефективності адміністративної 
діяльності кафедри та подальшого розвитку системи. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
17 
Змн. Арк. № Документа Підпис Дата  
 
1.3 Чинники, які впливають на розробку web-системи 
адміністрування завдань 
 
Процес розробки web-системи адміністрування завдань залежить від 
сукупності функціональних, технічних, організаційних, дизайнерських і 
безпекових чинників. Їх урахування дозволяє створити систему, яка буде не 
лише візуально привабливою, а й зручною для практичного використання в 
умовах роботи кафедри. 
Одним із головних чинників є визначення цільової аудиторії. Розроблювана 
система орієнтована на працівників кафедри та адміністративний персонал, які 
беруть участь у створенні, виконанні, контролі та аналізі завдань. До 
користувачів системи можуть належати адміністратори, завідувачі кафедр, 
викладачі та співробітники. Для кожної групи користувачів важливо 
забезпечити зрозумілий інтерфейс і доступ лише до тих функцій, які 
відповідають їхнім обов’язкам. 
Наступним чинником є структура системи. Web-ресурс повинен мати 
логічний поділ на сторінки та модулі. У розробленій системі передбачено такі 
розділи: головна сторінка, завдання, календар, користувачі, кафедри, звіти, 
повідомлення, кабінет і налаштування. Така структура дозволяє розділити 
функціональність за напрямами й уникнути перевантаження однієї сторінки 
великою кількістю елементів. 
Важливим чинником є якість користувацького інтерфейсу. Система 
адміністрування завдань повинна бути простою для сприйняття, оскільки нею 
можуть користуватися люди з різним рівнем цифрової підготовки. Інтерфейс 
має бути зрозумілим без додаткових пояснень, а основні дії — доступними з 
мінімальною кількістю переходів. Для цього доцільно використовувати чітке 
меню, зрозумілі назви розділів, карткове подання інформації, логічне 
групування елементів і візуальне виділення важливих показників. 
Окреме значення має адаптивність. Користувачі можуть працювати із 
системою не лише з настільного комп’ютера, а й із ноутбука, планшета або 
Арк. 
 ЧДТУ 262211.11 ПЗ 
18 
Змн. Арк. № Документа Підпис Дата  
 
смартфона. Тому інтерфейс повинен коректно відображатися на різних 
екранах. Адаптивність є важливою вимогою до сучасних web-додатків, 
оскільки вона впливає на доступність ресурсу та зручність його використання. 
Технічним чинником є компонентна організація інтерфейсу. Оскільки система 
містить багато повторюваних елементів, таких як картки статистики, кнопки, 
форми, списки завдань, блоки користувачів, таблиці та графіки, доцільно 
будувати інтерфейс за компонентним принципом. React дозволяє створювати 
інтерфейс із незалежних компонентів, які можна повторно використовувати на 
різних сторінках [17]. Це спрощує підтримку системи, зменшує дублювання 
коду та забезпечує єдність оформлення. 
Важливим чинником є організація даних. Для системи адміністрування 
завдань необхідно зберігати інформацію про користувачів, кафедри, завдання, 
статуси, пріоритети, дедлайни, повідомлення та статистичні показники. У 
демонстраційній реалізації частина даних може зберігатися локально або 
імітувати роботу з базою даних. У подальшому розвитку системи доцільним є 
підключення серверної частини та повноцінної бази даних, що забезпечить 
надійніше збереження інформації, авторизацію користувачів і централізовану 
роботу з даними. 
Безпека є одним із ключових чинників для адміністративної web-
системи. Оскільки система працює з інформацією про користувачів, завдання 
та структурні підрозділи, необхідно передбачити контроль доступу, захист 
персональних даних і обмеження прав відповідно до ролі користувача. 
Рекомендації OWASP звертають увагу на типові ризики безпеки web-додатків, 
зокрема порушення контролю доступу, помилки ідентифікації та некоректну 
обробку даних [21]. Тому навіть у демонстраційному проєкті важливо 
враховувати базові принципи безпечної роботи із системою. 
Ще одним чинником є доступність інтерфейсу. Відповідно до 
рекомендацій WCAG, web-контент має бути сприйнятним, керованим, 
зрозумілим і надійним для різних категорій користувачів [20]. Для розробленої 
системи це означає необхідність використання читабельних шрифтів, 
Арк. 
 ЧДТУ 262211.11 ПЗ 
19 
Змн. Арк. № Документа Підпис Дата  
 
достатнього контрасту, зрозумілих кнопок, логічної навігації та 
передбачуваного розташування елементів. Доступність є важливою не лише з 
технічної, а й з практичної точки зору, оскільки система повинна бути зручною 
для широкого кола користувачів. 
На розробку також впливає швидкодія системи. Адміністративна web-
система повинна швидко завантажувати сторінки, реагувати на дії 
користувача, обробляти пошук і фільтрацію без помітних затримок. Для цього 
потрібно оптимізувати структуру компонентів, уникати надмірного обсягу 
непотрібного коду, раціонально використовувати графічні елементи та 
застосовувати інструменти сучасного збирання проєкту. Vite є одним з 
інструментів, який дозволяє ефективно організувати розробку та збирання 
сучасних frontend-додатків [18]. 
Важливим організаційним чинником є можливість масштабування 
системи. На початковому етапі система може мати демонстраційний характер, 
однак у майбутньому її можна розширити. Наприклад, можна додати 
повноцінну авторизацію, базу даних, журнал дій користувачів, експорт звітів у 
різні формати, автоматичне надсилання email-сповіщень, інтеграцію з 
календарями та розширені аналітичні панелі. 
Отже, розробка web-системи адміністрування завдань потребує 
комплексного підходу. Необхідно враховувати потреби користувачів, 
структуру кафедри, функціональні вимоги, якість інтерфейсу, адаптивність, 
безпеку, доступність, швидкодію та можливість подальшого розвитку. 
Урахування цих чинників дозволяє створити систему, яка відповідає сучасним 
вимогам до web-додатків і може бути використана як основа для організації 
роботи кафедри. 
 
1.4 Аналітичний огляд існуючих web-систем керування завданнями 
 
Проведення аналітичного огляду існуючих web-систем керування 
завданнями дозволяє визначити основні підходи до організації роботи з 
Арк. 
 ЧДТУ 262211.11 ПЗ 
20 
Змн. Арк. № Документа Підпис Дата  
 
дорученнями, виявити переваги й недоліки аналогів, а також сформувати 
вимоги до власної розробки. Для аналізу було обрано популярні сервіси, які 
виконують подібні або частково подібні функції: Trello, Asana, Jira та Microsoft 
Planner. 
Обрані аналоги відрізняються за функціональністю, цільовою аудиторією 
та підходом до управління завданнями. Trello орієнтований на візуальну 
організацію роботи за допомогою дошок, списків і карток [13]. Asana 
забезпечує планування командної роботи, призначення завдань, відстеження 
строків і керування проєктами [14]. Jira широко використовується для 
управління задачами в командах розробки програмного забезпечення та 
підтримує підходи Agile [15]. Microsoft Planner є частиною екосистеми 
Microsoft 365 і призначений для організації командної роботи, створення 
планів і відстеження виконання завдань [16]. 
Під час аналізу web-систем керування завданнями доцільно використати 
такі критерії: 
– наявність створення та редагування завдань; 
– можливість призначення виконавців; 
– підтримка дедлайнів; 
– наявність статусів виконання; 
– підтримка пріоритетів; 
– календар або планування за датами; 
– повідомлення про зміни та дедлайни; 
– звіти або аналітичні панелі; 
– розмежування користувачів за ролями; 
– простота інтерфейсу; 
– адаптивність; 
– можливість використання в освітньому середовищі; 
– відповідність потребам кафедри. 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
21 
Змн. Арк. № Документа Підпис Дата  
 
Trello 
Рисунок 1.2 – Головна сторінка сервісу Trello 
 
Trello є web-сервісом для організації завдань за допомогою дошок, 
списків і карток. Його перевагою є простота візуального подання інформації. 
Користувачі можуть створювати дошки для окремих проєктів, додавати картки 
завдань, переміщувати їх між списками та відстежувати стан виконання. Такий 
підхід є зручним для невеликих команд і простих робочих процесів. 
Перевагою Trello є інтуїтивний інтерфейс і швидкий початок роботи. 
Користувачу не потрібно витрачати багато часу на вивчення системи, оскільки 
логіка дошок і карток є зрозумілою.  
Водночас для потреб кафедри Trello може бути недостатньо 
спеціалізованим, оскільки він не має вбудованої прив’язки завдань до кафедр, 
ролей університетських користувачів або звітів за структурними підрозділами. 
Тому для розроблюваної системи доцільно врахувати візуальну простоту 
Trello, але адаптувати функціонал саме до адміністративної роботи кафедри. 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
22 
Змн. Арк. № Документа Підпис Дата  
 
Asana 
Рисунок 1.3 – Головна сторінка сервісу Asana 
 
Asana є платформою для керування командною роботою та проєктами. 
Вона дозволяє створювати завдання, призначати відповідальних осіб, 
визначати строки виконання, об’єднувати завдання в проєкти та відстежувати 
прогрес. Сервіс має ширші можливості, ніж прості дошки завдань, і може 
використовуватися для складніших командних процесів. 
Перевагою Asana є розвинена система організації роботи, наявність 
різних режимів перегляду, підтримка командної взаємодії та контроль строків. 
Однак для невеликої кафедри частина можливостей Asana може бути 
надмірною.  
Крім того, система не орієнтована саме на структуру закладу вищої 
освіти. У розроблюваній web-системі доцільно використати ідею 
структурованого управління завданнями, але зробити інтерфейс простішим і 
ближчим до потреб кафедри. 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
23 
Змн. Арк. № Документа Підпис Дата  
 
Jira 
Рисунок 1.4 – Головна сторінка сервісу Jira 
 
Jira є потужним інструментом для керування завданнями, який широко 
використовується у сфері розробки програмного забезпечення. Сервіс 
підтримує дошки Scrum і Kanban, спринти, задачі, підзадачі, статуси, 
пріоритети, звіти та інтеграції з іншими інструментами. Jira добре підходить 
для IT-команд, які працюють за гнучкими методологіями. 
Перевагою Jira є широка функціональність і гнучке налаштування 
робочих процесів.  
Водночас саме ця гнучкість може бути недоліком для користувачів, яким 
потрібна проста система для адміністративних завдань кафедри. Інтерфейс Jira 
може бути складним для користувачів без досвіду роботи з подібними 
платформами. Тому для власної розробки доцільно врахувати можливості Jira 
щодо статусів, пріоритетів і звітності, але уникнути надмірного ускладнення 
інтерфейсу. 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
24 
Змн. Арк. № Документа Підпис Дата  
 
Microsoft Planner 
Рисунок 1.5 – Головна сторінка сервісу Microsoft Planner 
 
Microsoft Planner є інструментом для планування командної роботи в 
екосистемі Microsoft 365. Він дозволяє створювати плани, додавати завдання, 
призначати виконавців, встановлювати строки та відстежувати виконання.  
Перевагою цього сервісу є інтеграція з іншими продуктами Microsoft, що 
є зручним для організацій, які вже використовують Microsoft 365. 
Для кафедри Microsoft Planner може бути корисним інструментом, однак його 
використання залежить від наявності відповідної інфраструктури та облікових 
записів Microsoft.  
Крім того, сервіс не має спеціалізованих модулів для кафедр, звітів за 
структурними підрозділами або ролей, характерних для університетського 
середовища. Тому власна web-система має перевагу в тому, що її структуру 
можна одразу адаптувати до потреб кафедри. 
 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
25 
Змн. Арк. № Документа Підпис Дата  
 
Web-система адміністрування завдань 
Рисунок 1.6 – Web-система адміністрування завдань по кафедрі 
 
Розроблювана web-система адміністрування завдань по кафедрі 
орієнтована на потреби структурного підрозділу закладу вищої освіти. Вона 
має більш вузьку й прикладну спрямованість порівняно з універсальними 
сервісами керування проєктами. Основними розділами системи є головна 
сторінка, завдання, календар, користувачі, кафедри, звіти, повідомлення, 
кабінет і налаштування. 
Перевагою розроблюваної системи є адаптація до предметної області 
кафедри. У системі передбачено зв’язок завдань із кафедрами, ролі 
користувачів, перегляд статистики за кафедрами, календар дедлайнів, 
повідомлення та особистий кабінет. Такий підхід робить систему більш 
придатною для використання в освітньому середовищі, ніж універсальні 
сервіси, які не враховують специфіку роботи кафедри. 
 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
26 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 1.7 – Порівняння аналогів web-систем керування завданнями 
 
За результатами аналізу встановлено, що всі розглянуті аналоги мають 
корисні функціональні можливості. Trello вирізняється простотою візуального 
подання завдань, Asana забезпечує структуроване керування командною 
роботою, Jira має розвинені засоби роботи зі статусами, пріоритетами та 
звітністю, а Microsoft Planner є зручним інструментом для організацій, які 
використовують Microsoft 365. Водночас жодна з цих систем не орієнтована 
безпосередньо на адміністрування завдань кафедри. 
Порівняно з аналогами, розроблювана web-система має перевагу у 
тематичній спрямованості, простій структурі та наявності модулів, пов’язаних 
із кафедрами, користувачами, ролями, звітами й повідомленнями. Вона не є 
повною заміною великих корпоративних платформ, однак краще відповідає 
задачам демонстраційної системи для організації роботи кафедри. 
Таким чином, аналіз існуючих web-систем керування завданнями показав, що 
розробка власної системи є обґрунтованою. Вона дозволяє поєднати сильні 
Арк. 
 ЧДТУ 262211.11 ПЗ 
27 
Змн. Арк. № Документа Підпис Дата  
 
сторони аналогів: простоту Trello, структурованість Asana, статуси й аналітику 
Jira, планування Microsoft Planner, але адаптувати ці можливості до потреб 
кафедри закладу вищої освіти. 
 
Висновки до розділу 1 
 
У першому розділі кваліфікаційної роботи було розглянуто предметну 
область web-систем адміністрування завдань і визначено їх основне 
призначення. Було встановлено, що такі системи забезпечують централізоване 
створення, розподіл, контроль і аналіз виконання доручень, що є важливим для 
організації роботи кафедри закладу вищої освіти. 
Також було обґрунтовано доцільність розробки web-системи 
адміністрування завдань по кафедрі. Визначено, що потреба у такій системі 
зумовлена необхідністю упорядкування інформації про завдання, контролю 
дедлайнів, розмежування ролей користувачів, формування звітів, перегляду 
календаря та своєчасного інформування учасників системи про важливі події. 
У процесі аналізу було визначено основні чинники, які впливають на розробку 
web-системи. До них належать цільова аудиторія, структура сайту, якість 
користувацького інтерфейсу, адаптивність, компонентна організація, безпека, 
доступність, швидкодія, організація даних і можливість подальшого 
масштабування. Урахування цих чинників дозволяє створити систему, яка буде 
зручною, зрозумілою та придатною для практичного використання. 
У межах аналітичного огляду було досліджено існуючі web-системи 
керування завданнями: Trello, Asana, Jira та Microsoft Planner. Для порівняння 
було використано критерії наявності створення завдань, призначення 
виконавців, дедлайнів, статусів, пріоритетів, календаря, повідомлень, звітів, 
ролей користувачів, адаптивності та придатності до використання в освітньому 
середовищі. 
За результатами порівняння встановлено, що кожен із розглянутих 
аналогів має власні переваги. Trello є простим і зручним для візуального 
Арк. 
 ЧДТУ 262211.11 ПЗ 
28 
Змн. Арк. № Документа Підпис Дата  
 
керування завданнями, Asana забезпечує розвинене планування командної 
роботи, Jira має потужні засоби контролю задач і звітності, а Microsoft Planner 
інтегрується з екосистемою Microsoft 365. Водночас ці системи є 
універсальними та не враховують повною мірою специфіку роботи кафедри 
закладу вищої освіти. 
Отже, результати першого розділу дозволили сформувати основні 
напрями подальшої розробки web-системи адміністрування завдань по 
кафедрі. Доцільно реалізувати головну сторінку зі статистикою, сторінку 
завдань із пошуком і фільтрами, календар дедлайнів, керування користувачами 
й кафедрами, модуль звітів, повідомлення, особистий кабінет і налаштування 
системи. Отримані результати є основою для подальшого обґрунтування 
технічного завдання, проєктування структури системи та реалізації її 
функціональних модулів. 
 
  
Арк. 
 ЧДТУ 262211.11 ПЗ 
29 
Змн. Арк. № Документа Підпис Дата  
 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 
 
2.1 Призначення web-системи адміністрування завдань по кафедрі 
 
Розробка web-системи адміністрування завдань по кафедрі спрямована на 
створення сучасного інформаційного ресурсу, який забезпечує централізоване 
керування завданнями, користувачами, кафедрами, календарем, 
повідомленнями, звітністю та налаштуваннями системи. Такий ресурс має 
поєднувати адміністративну, інформаційну, аналітичну та організаційну 
функції, що дозволяє підвищити ефективність роботи кафедри закладу вищої 
освіти. 
Основне призначення web-системи полягає в упорядкуванні процесів 
створення, розподілу, контролю та аналізу виконання завдань. У межах роботи 
кафедри регулярно виникають доручення, пов’язані з навчально-методичною 
діяльністю, підготовкою звітів, організацією заходів, перевіркою робіт 
студентів, оновленням навчальних програм, підготовкою до акредитації та 
іншими адміністративними процесами. Без єдиного цифрового середовища 
такі завдання можуть фіксуватися в різних документах, таблицях, 
повідомленнях або передаватися усно, що ускладнює контроль їх виконання. 
Розроблювана система дозволяє зберігати інформацію про завдання в 
одному середовищі, призначати виконавців, визначати кафедру, встановлювати 
дедлайн, статус і пріоритет. Це дає змогу адміністратору або відповідальній 
особі швидко оцінити стан виконання доручень, виявити прострочені завдання 
та проконтролювати навантаження між співробітниками. 
Актуальність створення такої системи підтверджується загальними 
тенденціями цифрової трансформації освіти. У сучасному освітньому 
середовищі цифрові інструменти застосовуються не лише для організації 
навчання, а й для підвищення ефективності управлінських процесів. У звіті 
UNESCO щодо використання технологій в освіті зазначено, що цифрові 
інструменти мають застосовуватися з урахуванням доступності, доцільності та 
Арк. 
 ЧДТУ 262211.11 ПЗ 
30 
Змн. Арк. № Документа Підпис Дата  
 
практичної користі для освітнього процесу [11]. Також Digital Education Action 
Plan 2021–2027 визначає цифрову освіту як важливий напрям розвитку 
сучасного освітнього середовища [12]. 
Особливістю розробленої web-системи є поєднання кількох 
функціональних блоків у межах єдиного інтерфейсу. До них належать головна 
сторінка, завдання, календар, користувачі, кафедри, звіти, повідомлення, 
особистий кабінет і налаштування. Кожен розділ виконує окрему функцію, але 
всі вони пов’язані між собою єдиною логікою адміністрування завдань. 
Web-система може бути корисною для адміністратора, завідувача кафедри, 
викладача та співробітника. Адміністратор отримує повний доступ до 
керування системою, завідувач кафедри може контролювати роботу свого 
підрозділу, викладачі та співробітники можуть переглядати призначені їм 
завдання й виконувати відповідні дії. Такий підхід дозволяє розмежувати права 
доступу й забезпечити більш організовану взаємодію між користувачами. 
Цінність web-системи адміністрування завдань полягає в таких 
можливостях: 
– централізоване створення, перегляд, редагування та видалення завдань; 
– призначення виконавців і прив’язка завдань до кафедр; 
– встановлення дедлайнів, статусів і пріоритетів; 
– пошук і фільтрація завдань за заданими параметрами; 
– перегляд календаря завдань за датами та дедлайнами; 
– керування користувачами та їхніми ролями; 
– перегляд інформації про кафедри, завідувачів, співробітників і активні 
завдання; 
– формування статистичних звітів і графіків; 
– отримання системних повідомлень, нагадувань і сповіщень про 
дедлайни; 
– робота з особистим кабінетом користувача; 
– налаштування ролей, прав доступу, сповіщень і параметрів системи. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
31 
Змн. Арк. № Документа Підпис Дата  
 
Отже, web-система адміністрування завдань по кафедрі є інструментом для 
впорядкування адміністративної роботи, підвищення прозорості виконання 
доручень, контролю дедлайнів і формування аналітичної інформації щодо 
діяльності кафедри. Розробка такої системи є доцільною, оскільки вона 
дозволяє об’єднати основні процеси керування завданнями в межах одного 
зручного web-ресурсу. 
 
2.2 Вимоги до дизайну web-системи адміністрування завдань 
 
Дизайн web-системи адміністрування завдань має важливе значення, 
оскільки саме інтерфейс визначає зручність роботи користувача із системою. 
Для адміністративного web-ресурсу недостатньо лише привабливого 
зовнішнього вигляду. Інтерфейс повинен бути зрозумілим, логічним, 
адаптивним, читабельним і не перевантаженим зайвими елементами. 
Розроблена система оформлена у світлій мінімалістичній стилістиці з 
використанням білого та світло-сірого фону, темного тексту й зелених 
акцентів. Такий підхід є доцільним для адміністративної системи, оскільки 
світлий інтерфейс забезпечує хорошу читабельність, а зелені акценти 
використовуються для виділення активних елементів, кнопок, статусів і 
навігаційних пунктів. 
Основними вимогами до дизайну web-системи адміністрування завдань є: 
– зрозуміла структура інтерфейсу, яка дозволяє швидко знаходити потрібні 
розділи; 
– єдиний візуальний стиль для всіх сторінок системи; 
– наявність бічного меню з основними розділами; 
– чітке виділення активного пункту навігації; 
– використання карткової структури для подання статистики, користувачів, 
кафедр і завдань; 
– зручне розміщення кнопок основних дій; 
Арк. 
 ЧДТУ 262211.11 ПЗ 
32 
Змн. Арк. № Документа Підпис Дата  
 
– достатній контраст між текстом, фоном і елементами керування; 
– адаптивність інтерфейсу для різних розмірів екрана; 
– візуальне розмежування статусів, пріоритетів і типів повідомлень; 
– мінімізація зайвих декоративних елементів; 
– логічне групування інформації за функціональними блоками; 
– доступність інтерфейсу для користувачів із різним рівнем цифрової 
підготовки. 
Особливістю дизайну системи є використання лівої бічної навігаційної 
панелі. Вона містить основні розділи: «Головна», «Завдання», «Календар», 
«Користувачі», «Кафедри», «Звіти», «Повідомлення», «Кабінет», 
«Налаштування». Такий спосіб навігації є зручним для адміністративних 
систем, оскільки користувач постійно бачить доступні розділи та може швидко 
переходити між ними. 
Верхня панель системи містить інформацію про поточного користувача, 
його роль, іконку сповіщень і кнопку виходу. Це дозволяє користувачеві 
швидко ідентифікувати свій профіль і виконати основні службові дії. У системі 
використовується профіль користувача «Денис» із роллю «Адміністратор», що 
демонструє роботу адміністративного акаунта. 
Важливим елементом дизайну є карткова структура. На головній сторінці 
картки використовуються для відображення ключових показників: активних 
завдань, виконаних завдань, прострочених завдань і кількості користувачів. На 
сторінці користувачів картки містять інформацію про співробітників, їхні ролі, 
контакти та кафедри. На сторінці кафедр картки використовуються для 
подання інформації про структурні підрозділи, кількість співробітників і 
активних завдань. 
Колірні акценти в системі виконують не лише декоративну, а й 
функціональну роль. Зелений колір використовується для позначення активних 
елементів, виконаних завдань і позитивних показників. Червоний колір 
застосовується для прострочених завдань або високого пріоритету, жовтий — 
для середнього пріоритету або попереджень, фіолетовий — для окремих 
Арк. 
 ЧДТУ 262211.11 ПЗ 
33 
Змн. Арк. № Документа Підпис Дата  
 
аналітичних або допоміжних блоків. Такий підхід полегшує візуальне 
сприйняття інформації. 
Під час проєктування інтерфейсу важливо враховувати принципи 
доступності web-контенту. Відповідно до рекомендацій WCAG, web-інтерфейс 
повинен бути сприйнятним, керованим, зрозумілим і надійним для різних 
категорій користувачів [20]. Для розробленої системи це означає необхідність 
використання читабельних шрифтів, достатнього контрасту, зрозумілих 
кнопок і передбачуваного розміщення елементів. 
Таким чином, дизайн web-системи адміністрування завдань повинен 
забезпечувати швидкий доступ до основних функцій, зручне подання 
інформації, просту навігацію та комфортну роботу користувача. Світла 
мінімалістична тема з зеленими акцентами відповідає призначенню системи й 
дозволяє зосередити увагу користувача на завданнях, статистиці та 
адміністративних діях. 
 
2.3 Структура сторінок web-системи адміністрування завдань 
 
Структура web-системи визначає логіку розміщення сторінок, 
функціональних модулів і зв’язків між ними. Для системи адміністрування 
завдань важливо, щоб користувач міг швидко перейти від загального огляду до 
створення завдання, перегляду календаря, керування користувачами, аналізу 
звітів або налаштування параметрів системи. 
Основна структура web-системи адміністрування завдань включає такі 
сторінки: «Головна», «Завдання», «Календар», «Користувачі», «Кафедри», 
«Звіти», «Повідомлення», «Кабінет» і «Налаштування». У верхній частині 
системи передбачено панель із профілем користувача, роллю адміністратора, 
іконкою сповіщень і кнопкою виходу. Така структура відповідає типовій логіці 
адміністративного ресурсу, де основні функції розподілені між окремими 
розділами. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
34 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 2.1 – Навігаційна структура web-системи адміністрування завдань 
 
Головна сторінка виконує функцію інформаційної панелі. Вона містить 
вітальний блок, статистичні картки, графік виконання завдань, блок швидких 
дій, перелік особистих завдань і список останніх завдань. Завдяки цьому 
адміністратор може швидко оцінити поточний стан системи та перейти до 
потрібної дії. 
Сторінка «Завдання» є центральним функціональним розділом системи. 
Вона містить пошук, фільтри за статусом і пріоритетом, кнопку створення 
нового завдання та список завдань. Для кожного завдання відображаються 
назва, опис, виконавець, кафедра, дедлайн, статус, пріоритет і кнопки дій. Така 
структура дозволяє ефективно керувати дорученнями й контролювати їх 
виконання. 
Сторінка «Календар» призначена для перегляду завдань за датами та 
дедлайнами. Вона містить календарну сітку, перемикач місяців, блок вибору 
Арк. 
 ЧДТУ 262211.11 ПЗ 
35 
Змн. Арк. № Документа Підпис Дата  
 
дати та легенду статусів. Такий розділ дозволяє планувати роботу, виявляти 
періоди високого навантаження та контролювати строки виконання доручень. 
Сторінка «Користувачі» забезпечує керування працівниками системи. У 
ній передбачено пошук за ім’ям або email, фільтр за роллю, картки 
користувачів, інформацію про контакти, кафедру, роль і статус активності. 
Також передбачено кнопки редагування й видалення користувачів. Такий 
розділ є важливим для підтримки актуальної інформації про учасників 
системи. 
Сторінка «Кафедри» містить інформацію про структурні підрозділи 
університету. Для кожної кафедри відображається назва, завідувач, кількість 
співробітників, кількість активних завдань і доступні дії. Також на сторінці 
подано загальну статистику за кафедрами. Такий підхід дозволяє аналізувати 
роботу не лише окремих користувачів, а й цілих підрозділів. 
Сторінка «Звіти» призначена для аналітичного подання інформації. Вона 
містить статистичні картки, графік динаміки виконання завдань, кругову 
діаграму розподілу за статусами, графік завдань за кафедрами, розподіл за 
пріоритетами та підсумкову таблицю. Також передбачено кнопку експорту 
звіту. Цей розділ дозволяє отримувати узагальнену інформацію про 
ефективність роботи системи. 
Сторінка «Повідомлення» забезпечує інформування користувачів про 
важливі події. У ній відображаються нові завдання, зміни статусів, наближення 
дедлайнів, прострочені завдання та системні повідомлення. Передбачено 
фільтрацію повідомлень, позначення як прочитаних і видалення. Такий розділ 
підвищує оперативність взаємодії користувачів із системою. 
Сторінка «Кабінет» призначена для перегляду та редагування особистих 
даних користувача. Вона містить профіль, email, телефон, роль у системі, 
статистику користувача, форму редагування даних і форму зміни пароля. 
Наявність такого розділу забезпечує персоналізовану роботу із системою. 
Сторінка «Налаштування» призначена для керування параметрами 
системи. Вона містить розділи ролей і прав доступу, сповіщень, зовнішнього 
Арк. 
 ЧДТУ 262211.11 ПЗ 
36 
Змн. Арк. № Документа Підпис Дата  
 
вигляду, системних параметрів і користувачів. Також передбачено кнопку 
скидання демонстраційних даних. Цей розділ є важливим для адміністрування 
системи й адаптації її до потреб конкретної кафедри. 
Узагальнено структура web-системи адміністрування завдань може бути 
представлена такими сторінками та модулями: 
– головна сторінка; 
– модуль керування завданнями; 
– календар завдань; 
– модуль керування користувачами; 
– модуль керування кафедрами; 
– модуль звітів і статистики; 
– модуль повідомлень; 
– особистий кабінет користувача; 
– налаштування системи; 
– бічне навігаційне меню; 
– верхня панель профілю та сповіщень; 
– пошук, фільтри, кнопки дій і графічні елементи. 
 
 
Рисунок 2.2 – Модель наповнення web-системи адміністрування завдань 
Арк. 
 ЧДТУ 262211.11 ПЗ 
37 
Змн. Арк. № Документа Підпис Дата  
 
2.4 Техніко-економічне обґрунтування доцільності розробки web-
системи адміністрування завдань 
 
Техніко-економічне обґрунтування є важливим етапом під час розробки 
web-орієнтованої інформаційної системи, оскільки дозволяє оцінити 
доцільність створення ресурсу з погляду технічної реалізації, трудомісткості, 
витрат часу, очікуваної користі та перспектив подальшого розвитку. Для web-
системи адміністрування завдань таке обґрунтування має особливе значення, 
оскільки система поєднує керування завданнями, користувачами, кафедрами, 
календарем, повідомленнями, звітами та налаштуваннями. 
Розробка web-системи передбачає створення сучасного адміністративного 
ресурсу, який забезпечує користувачам доступ до основних інструментів 
керування завданнями. Саме тому під час оцінювання доцільності розробки 
необхідно враховувати створення інтерфейсу, реалізацію окремих 
функціональних модулів, організацію даних, побудову графіків, налаштування 
навігації, тестування та розгортання ресурсу. 
З технічної точки зору доцільність створення web-системи полягає в 
можливості реалізації зручного, адаптивного й швидкого frontend-додатка 
засобами сучасних web-технологій. Використання React забезпечує 
компонентну структуру інтерфейсу, що дозволяє створювати повторно 
використовувані елементи сторінок [25]. Vite спрощує запуск, розробку та 
збирання frontend-проєкту [26]. Tailwind CSS дозволяє швидко формувати 
адаптивний дизайн за допомогою утилітарних класів [27]. React Router може 
використовуватися для організації маршрутизації між сторінками системи [23].  
З економічної точки зору web-система має практичну цінність завдяки 
можливості багаторазового використання, оновлення даних, поступового 
розширення функціоналу та демонстрації готового адміністративного ресурсу 
без значних витрат на складну інфраструктуру. У межах демонстраційної 
реалізації система може працювати як frontend-проєкт, що зменшує витрати на 
серверну частину, базу даних і платне програмне забезпечення. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
38 
Змн. Арк. № Документа Підпис Дата  
 
Розробка web-системи виконується послідовно та охоплює кілька 
взаємопов’язаних етапів. На першому етапі здійснюється аналіз предметної 
області, під час якого визначаються особливості адміністрування завдань по 
кафедрі, потреби користувачів, основні функції системи та проблеми, які вона 
повинна вирішувати. 
Наступним етапом є формування функціональних і нефункціональних 
вимог. До функціональних вимог належать створення й редагування завдань, 
пошук, фільтрація, календар, керування користувачами, кафедрами, 
повідомленнями, звітами, особистим кабінетом і налаштуваннями. До 
нефункціональних вимог належать адаптивність, швидкодія, зручність 
інтерфейсу, доступність, стабільність роботи, безпека та можливість 
подальшого масштабування. 
Після визначення вимог виконується проєктування структури системи. На 
цьому етапі визначаються основні сторінки ресурсу, логіка навігації, 
взаємозв’язки між модулями та структура даних. Для web-системи 
адміністрування завдань передбачено такі основні розділи: головна сторінка, 
завдання, календар, користувачі, кафедри, звіти, повідомлення, кабінет і 
налаштування. 
Окремим етапом є розробка дизайну інтерфейсу. Для адміністративної 
системи важливо створити зручний, світлий і мінімалістичний інтерфейс, який 
не відволікає користувача від виконання основних дій. Під час розробки 
дизайну враховуються кольорова гама, типографіка, розміщення меню, карток, 
кнопок, форм, таблиць, графіків і повідомлень. 
Після підготовки структури та дизайну виконується реалізація 
користувацької частини сайту. У межах цього етапу створюються основні 
сторінки системи, бічна навігація, верхня панель, картки статистики, список 
завдань, календар, сторінки користувачів і кафедр, блок звітів, повідомлення, 
кабінет і налаштування. 
Важливим етапом є реалізація аналітичної частини. На сторінці звітів 
відображаються графіки, діаграми та підсумкова таблиця. Це дозволяє 
Арк. 
 ЧДТУ 262211.11 ПЗ 
39 
Змн. Арк. № Документа Підпис Дата  
 
користувачу швидко оцінити стан виконання завдань, розподіл за статусами, 
пріоритетами та кафедрами. Для побудови таких елементів можуть 
використовуватися бібліотеки візуалізації даних, наприклад Recharts [24]. 
Після реалізації основних модулів проводиться тестування web-системи. 
Перевіряється коректність роботи сторінок, кнопок, форм, пошуку, фільтрів, 
календаря, повідомлень, графіків, навігації, адаптивності та відображення 
даних. Для оцінювання якості web-сторінок можна використовувати 
інструменти аудиту, зокрема Lighthouse, який дозволяє аналізувати 
продуктивність, доступність, SEO та найкращі практики web-розробки [28]. 
Для більш повного обґрунтування доцільності розробки web-системи було 
виконано орієнтовну оцінку трудомісткості створення проєкту. 
 
Рисунок 2.3 – Орієнтовна трудомісткість розробки web-системи 
адміністрування завдань 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
40 
Змн. Арк. № Документа Підпис Дата  
 
Загальна орієнтовна трудомісткість розробки web-системи 
адміністрування завдань становить 150 годин. Найбільше часу припадає на 
реалізацію функціональних сторінок, оскільки система містить значну 
кількість розділів: завдання, календар, користувачі, кафедри, звіти, 
повідомлення, кабінет і налаштування. 
Для визначення приблизної вартості розробки було прийнято умовну 
вартість однієї години роботи розробника — 100 грн. Також враховано 
додаткові витрати, пов’язані з використанням комп’ютерної техніки, 
електроенергії, доступом до мережі Інтернет і розгортанням web-проєкту. 
 
 
Рисунок 2.4 – Орієнтовний розрахунок витрат на розробку web-системи 
адміністрування завдань 
 
Отже, орієнтовна вартість розробки web-системи адміністрування 
завдань становить 0 грн. Це значення є приблизним, оскільки фактичні витрати 
Арк. 
 ЧДТУ 262211.11 ПЗ 
41 
Змн. Арк. № Документа Підпис Дата  
 
можуть змінюватися залежно від тривалості розробки, вартості робочого часу, 
технічного забезпечення, складності функціоналу й умов подальшого 
розгортання. 
Важливим елементом технічного обґрунтування є визначення маршрутів 
web-сайту та логіки переходів між сторінками. У межах користувацької 
частини web-системи передбачено такі основні маршрути: головна сторінка 
«/», сторінка завдань «/tasks», календар «/calendar», сторінка користувачів 
«/users», сторінка кафедр «/departments», звіти «/reports», повідомлення 
«/notifications», кабінет «/profile» та налаштування «/settings». Така структура 
маршрутів забезпечує зрозумілу організацію сторінок і спрощує подальше 
масштабування системи. 
У разі подальшого розвитку системи можна передбачити окремі API-
маршрути або серверні запити для роботи із завданнями, користувачами, 
кафедрами, повідомленнями та звітами. Наприклад, маршрут «/api/tasks» може 
відповідати за отримання та створення завдань, «/api/users» — за роботу з 
користувачами, «/api/departments» — за роботу з кафедрами, «/api/reports» — 
за формування звітів, «/api/notifications» — за повідомлення. У поточній 
демонстраційній реалізації такі дії можуть бути замінені локальною логікою 
або демонстраційними даними. 
Наявність чіткої системи маршрутів і логіки роботи з даними підвищує 
структурованість розробки та спрощує подальше вдосконалення web-системи. 
У майбутньому до системи можна додати повноцінну серверну частину, базу 
даних, реальну авторизацію, журнал дій користувачів, розширені звіти, 
експорт у різні формати, email-сповіщення та інтеграцію з календарними 
сервісами. Для розгортання frontend-додатків може використовуватися Vercel, 
який підтримує сучасні frontend-фреймворки та забезпечує зручне розміщення 
web-проєктів [29]. 
Економічна доцільність розробки полягає в тому, що для створення web-
системи використано безкоштовні або відкриті інструменти: React, Vite, 
Tailwind CSS, React Router, Recharts і Vercel. Завдяки цьому не потрібно 
Арк. 
 ЧДТУ 262211.11 ПЗ 
42 
Змн. Арк. № Документа Підпис Дата  
 
витрачати кошти на ліцензійне програмне забезпечення або складну серверну 
інфраструктуру на етапі демонстраційної реалізації. 
Порівняно з розробкою повноцінної корпоративної системи із 
серверною частиною, базою даних, складною авторизацією, журналом подій 
та інтеграціями, демонстраційна frontend-реалізація потребує менших витрат 
часу й ресурсів. Водночас вона дозволяє показати основні принципи роботи 
адміністративного web-ресурсу: керування завданнями, користувачами, 
кафедрами, календарем, повідомленнями, звітами та налаштуваннями. 
Окремою перевагою розробленої web-системи є можливість подальшого 
розвитку. У майбутньому сайт можна доповнити базою даних, серверною 
авторизацією, ролями доступу, журналом активності, розширеними 
аналітичними панелями, автоматичними повідомленнями, інтеграцією з 
Google Calendar або Microsoft Outlook, експортом звітів у PDF та Excel, а також 
мобільною адаптацією для зручнішої роботи з телефона. 
До можливих напрямів подальшого розвитку web-системи належать: 
– підключення серверної частини; 
– використання повноцінної бази даних; 
– реалізація авторизації та автентифікації користувачів; 
– розширення системи ролей і прав доступу; 
– додавання журналу дій користувачів; 
– автоматичне надсилання email-сповіщень; 
– експорт звітів у PDF та Excel; 
– інтеграція з календарними сервісами; 
– розширення аналітичних графіків; 
– покращення адаптивності для мобільних пристроїв. 
З технічної точки зору web-система є придатною до масштабування, 
оскільки її структура передбачає окремі функціональні модулі: головну 
сторінку, завдання, календар, користувачів, кафедри, звіти, повідомлення, 
кабінет і налаштування. Такий модульний підхід дозволяє доповнювати 
систему новими можливостями без повної зміни її архітектури. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
43 
Змн. Арк. № Документа Підпис Дата  
 
З практичної точки зору розроблений ресурс може використовуватися як 
демонстраційна система для організації роботи кафедри, приклад 
адміністративного frontend-додатка або основа для подальшого розширення до 
повноцінної інформаційної системи. Його використання дозволяє 
систематизувати завдання, контролювати дедлайни, переглядати статистику й 
забезпечувати зручну взаємодію між користувачами. 
Отже, розробка web-системи адміністрування завдань по кафедрі є 
технічно можливою, економічно обґрунтованою та практично доцільною. 
Створений ресурс може використовуватися для демонстрації структури 
адміністративної системи, керування завданнями, користувачами, кафедрами, 
календарем, повідомленнями, звітами й налаштуваннями. Наявність зручного 
інтерфейсу, аналітичних блоків, календаря та рольової структури забезпечує 
функціональну завершеність системи, а можливість подальшого розширення 
підвищує її практичну цінність. 
 
Висновки до розділу 2 
 
У другому розділі кваліфікаційної роботи було розглянуто призначення 
web-системи адміністрування завдань по кафедрі, визначено її основні функції 
та роль в організації адміністративної роботи структурного підрозділу закладу 
вищої освіти. Було встановлено, що розроблюваний ресурс має забезпечувати 
централізоване створення, розподіл, контроль і аналіз виконання завдань. 
У процесі аналізу було сформовано вимоги до дизайну, структури сторінок, 
навігації, наповнення, прототипу та техніко-економічного обґрунтування web-
системи. Особливу увагу було приділено зручності користувацького 
інтерфейсу, оскільки для адміністративної системи важливо забезпечити 
швидкий доступ до завдань, календаря, користувачів, кафедр, звітів, 
повідомлень, кабінету й налаштувань. 
Під час розробки структури сайту було враховано фактичну реалізацію 
web-системи, яка включає головну сторінку, сторінку завдань, календар, 
Арк. 
 ЧДТУ 262211.11 ПЗ 
44 
Змн. Арк. № Документа Підпис Дата  
 
користувачів, кафедри, звіти, повідомлення, кабінет і налаштування. Кожен із 
цих розділів виконує окрему функцію в межах адміністративної системи. 
Головна сторінка забезпечує загальний огляд, сторінка завдань дозволяє 
керувати дорученнями, календар допомагає контролювати дедлайни, а звіти 
забезпечують аналітичне подання інформації. 
Також було описано наповнення сторінок системи. Визначено, що сторінка 
завдань повинна містити назву, опис, виконавця, кафедру, дедлайн, статус, 
пріоритет і кнопки дій. Сторінка користувачів має містити інформацію про 
співробітників, ролі, контакти та кафедри. Сторінка кафедр повинна 
відображати назви кафедр, завідувачів, кількість співробітників і активних 
завдань. Сторінка звітів має містити статистичні картки, графіки, діаграми й 
підсумкову таблицю. 
Важливою складовою web-системи є модуль повідомлень, який забезпечує 
інформування користувачів про нові завдання, зміну статусів, наближення 
дедлайнів, прострочені завдання та системні події. Окремо було розглянуто 
особистий кабінет користувача, який містить профіль, контактні дані, 
персональну статистику, останні завдання, форму редагування даних і зміну 
пароля. 
Також було обґрунтовано доцільність створення такої системи з технічної 
та економічної точок зору. З технічної точки зору реалізація web-системи є 
доцільною, оскільки сучасні frontend-технології дозволяють створити 
адаптивний, швидкий і зручний ресурс із можливістю подальшого 
розширення. З економічної точки зору система може бути реалізована з 
використанням безкоштовних інструментів і не потребує значних витрат на 
етапі демонстраційної розробки. 
Проведений аналіз дозволив сформувати основу для подальшої реалізації 
web-системи адміністрування завдань по кафедрі та визначити ключові 
напрями її розвитку. У межах другого розділу було уточнено призначення 
ресурсу, його основні функції, вимоги до дизайну, структури сторінок, 
навігації, наповнення, прототипу й економічної доцільності. Це дало змогу 
Арк. 
 ЧДТУ 262211.11 ПЗ 
45 
Змн. Арк. № Документа Підпис Дата  
 
визначити логіку побудови системи та встановити, які саме елементи 
необхідно реалізувати для забезпечення зручної роботи користувача. 
У майбутньому ресурс може бути доповнений серверною частиною, базою 
даних, повноцінною авторизацією, журналом дій користувачів, розширеними 
звітами, експортом у різні формати, автоматичними сповіщеннями та 
інтеграцією з календарними сервісами. Таке розширення дозволить 
перетворити демонстраційний frontend-проєкт на повноцінну інформаційну 
систему для організації роботи кафедри. 
 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
46 
Змн. Арк. № Документа Підпис Дата  
 
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ 
 
3.1 Обґрунтування вибору інструментальних засобів розробки 
 
Розробка web-системи адміністрування завдань по кафедрі потребувала 
вибору таких інструментальних засобів, які забезпечують зручну реалізацію 
користувацького інтерфейсу, швидке створення окремих сторінок, 
адаптивність, стабільну роботу в браузері та можливість подальшого 
розширення функціональності. Оскільки система має демонстраційний 
характер і призначена для відображення структури адміністративного web-
ресурсу, особливу увагу було приділено frontend-технологіям, організації 
компонентів, навігації між сторінками, візуалізації статистичних даних і 
зручності розгортання проєкту в мережі Інтернет. 
Під час вибору технологій враховувалися такі критерії: підтримка 
компонентного підходу до побудови інтерфейсу, швидкість створення 
сторінок, зручність підтримки коду, можливість повторного використання 
елементів, підтримка адаптивного дизайну, простота тестування, стабільність 
роботи в сучасних браузерах і можливість публікації готового проєкту на 
хостинговій платформі. Також важливим було використання таких засобів, які 
дозволяють реалізувати систему без надмірного ускладнення архітектури, 
оскільки основною метою роботи є демонстрація функціоналу web-системи 
адміністрування завдань. 
Основним середовищем розробки було обрано Visual Studio Code. Це 
середовище є зручним для створення web-додатків, оскільки підтримує роботу 
з HTML, CSS, JavaScript, TypeScript, JSX, сучасними frontend-бібліотеками та 
системами керування версіями. Завдяки розширенням Visual Studio Code 
спрощується форматування коду, підсвічування синтаксису, пошук помилок, 
робота з терміналом, організація структури проєкту та швидке переміщення 
між файлами [32]. Для дипломного web-проєкту це є важливим, оскільки 
Арк. 
 ЧДТУ 262211.11 ПЗ 
47 
Змн. Арк. № Документа Підпис Дата  
 
система містить багато окремих сторінок, компонентів, стилів і допоміжних 
файлів. 
Для реалізації інтерфейсу використано бібліотеку React. Її перевагою є 
компонентний підхід, за якого сторінки web-системи формуються з окремих 
незалежних елементів. У межах розробленої системи такими компонентами є 
бічне меню, верхня панель користувача, статистичні картки, список завдань, 
картки користувачів, картки кафедр, календар, повідомлення, графіки, таблиці, 
форми редагування та кнопки дій. React дозволяє створювати інтерфейс із 
багаторазових компонентів, що спрощує підтримку й подальший розвиток 
проєкту [33]. 
Для локальної розробки та збирання проєкту використано Vite. Цей 
інструмент забезпечує швидкий запуск frontend-додатка, оперативне 
оновлення змін під час редагування коду та оптимізоване формування 
фінальної версії сайту. Використання Vite дозволяє прискорити процес 
розробки, оскільки зміни в інтерфейсі відображаються без тривалого 
очікування. Це є зручним під час створення сторінок, перевірки адаптивності, 
налаштування стилів і тестування окремих функціональних блоків [34]. 
Для стилізації інтерфейсу використано Tailwind CSS. Його перевагою є 
можливість швидко створювати адаптивний дизайн за допомогою утилітарних 
CSS-класів. У web-системі адміністрування завдань Tailwind CSS може 
використовуватися для оформлення світлого фону, зелених акцентів, карток, 
кнопок, форм, таблиць, блоків статистики, сторінок користувачів, кафедр і 
звітів. Такий підхід дозволяє підтримувати єдиний стиль сайту та швидко 
змінювати зовнішній вигляд окремих елементів без створення великої 
кількості окремих CSS-файлів [35]. 
Для реалізації логіки роботи інтерфейсу використано JavaScript і 
TypeScript. JavaScript є основною мовою програмування для створення 
інтерактивних web-сторінок, а TypeScript дає змогу доповнити код системою 
типів, що полегшує підтримку проєкту та зменшує ймовірність частини 
помилок під час розробки [36; 37]. У межах розробленої системи ці засоби 
Арк. 
 ЧДТУ 262211.11 ПЗ 
48 
Змн. Арк. № Документа Підпис Дата  
 
можуть застосовуватися для роботи зі списками завдань, фільтрами, пошуком, 
календарем, повідомленнями, статистичними показниками, обробкою подій 
користувача та відображенням відповідних елементів інтерфейсу. 
Для маршрутизації між сторінками може використовуватися React 
Router. Він дозволяє організувати переходи між головною сторінкою, 
завданнями, календарем, користувачами, кафедрами, звітами, 
повідомленнями, кабінетом і налаштуваннями без повного перезавантаження 
web-додатка [38]. Такий підхід відповідає логіці сучасних односторінкових 
застосунків, де зміна сторінки відбувається швидко, а користувач не відчуває 
значних затримок під час навігації. 
Для побудови графіків і діаграм на сторінці звітів доцільним є 
використання бібліотеки Recharts. Вона дозволяє створювати лінійні графіки, 
стовпчикові діаграми, кругові діаграми та інші елементи візуалізації даних у 
React-додатках [39]. У розробленій системі графіки використовуються для 
відображення динаміки виконання завдань, розподілу завдань за статусами, 
пріоритетами та кафедрами. Такий спосіб подання інформації полегшує аналіз 
і допомагає адміністратору швидше оцінити стан роботи системи. 
Для перевірки роботи сайту використовувалися браузерні інструменти 
розробника, зокрема Chrome DevTools. Вони дозволяють переглядати 
структуру HTML-елементів, перевіряти стилі, тестувати адаптивність, 
аналізувати повідомлення в консолі, контролювати стан сторінок і оцінювати 
поведінку інтерфейсу під час взаємодії користувача із системою [40]. Для 
додаткової оцінки якості сторінок може використовуватися Lighthouse, який 
допомагає перевіряти продуктивність, доступність, SEO та відповідність web-
сторінок кращим практикам [41]. 
Для розміщення готового сайту в мережі Інтернет використано 
платформу Vercel. Вона підтримує розгортання сучасних frontend-проєктів і 
дозволяє швидко отримати публічне посилання на web-додаток [42]. Це є 
зручним для дипломного проєкту, оскільки дає змогу перевіряти роботу 
Арк. 
 ЧДТУ 262211.11 ПЗ 
49 
Змн. Арк. № Документа Підпис Дата  
 
системи не лише локально, а й у реальному браузерному середовищі з різних 
пристроїв. 
Отже, обраний стек технологій є доцільним для реалізації web-системи 
адміністрування завдань по кафедрі. Поєднання Visual Studio Code, React, Vite, 
Tailwind CSS, JavaScript, TypeScript, React Router, Recharts, Chrome DevTools, 
Lighthouse і Vercel дозволяє створити адаптивний, сучасний і функціонально 
завершений frontend-проєкт, який демонструє основні можливості 
адміністративної системи для організації роботи кафедри. 
 
 
Рисунок 3.1 – Структура проєкту web-системи адміністрування завдань у 
середовищі Visual Studio Code 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
50 
Змн. Арк. № Документа Підпис Дата  
 
3.2 Опис програмної реалізації web-системи адміністрування 
завдань 
 
Web-систему адміністрування завдань по кафедрі реалізовано як 
демонстраційний адміністративний web-ресурс, призначений для створення, 
перегляду, редагування, фільтрації та контролю виконання завдань. Основна 
ідея програмної реалізації полягає у створенні зручного frontend-додатка, який 
об’єднує головну сторінку, модуль завдань, календар, керування 
користувачами, кафедрами, звіти, повідомлення, особистий кабінет і 
налаштування системи. 
Користувацький інтерфейс web-системи побудований за принципом 
простої та зрозумілої навігації. У лівій частині сайту розміщено бічне меню з 
основними розділами: «Головна», «Завдання», «Календар», «Користувачі», 
«Кафедри», «Звіти», «Повідомлення», «Кабінет», «Налаштування». У верхній 
частині інтерфейсу розміщено панель користувача, іконку сповіщень, ім’я 
користувача, роль «Адміністратор» і кнопку виходу. Така структура дозволяє 
швидко переходити між основними сторінками системи й не перевантажує 
інтерфейс зайвими елементами. 
Головна сторінка виконує функцію інформаційної панелі. На ній 
розміщено вітальний блок «Вітаємо, Денис!», короткий опис призначення 
системи, статистичні картки, графік виконання завдань, блок швидких дій, 
список особистих завдань і перелік останніх завдань. Завдяки такій структурі 
адміністратор одразу отримує загальне уявлення про поточний стан системи та 
може перейти до створення завдання, додавання користувача або перегляду 
звітів. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
51 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.2 – Головна сторінка web-системи адміністрування завдань 
 
Сторінка «Завдання» є одним із центральних функціональних модулів 
web-системи. Вона містить заголовок «Управління завданнями», кнопку 
створення нового завдання, блок пошуку, фільтри за статусом і пріоритетом, а 
також список завдань. Кожне завдання подається у вигляді окремого блоку, у 
якому відображаються назва, опис, виконавець, кафедра, дедлайн, статус, 
пріоритет і кнопки дій. 
Для покращення роботи зі списком завдань реалізовано пошук і 
фільтрацію. Пошук дозволяє знаходити завдання за назвою або описом, а 
фільтри дають змогу відбирати записи за статусом і пріоритетом. Це спрощує 
користувацький сценарій і зменшує кількість зайвих дій під час роботи з 
великою кількістю доручень. Особливо важливими ці можливості є для 
адміністратора, який повинен швидко знаходити активні, виконані, 
прострочені або пріоритетні завдання. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
52 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.3 – Сторінка керування завданнями 
 
Сторінка «Календар» призначена для перегляду завдань за датами та 
дедлайнами. Вона містить календарну сітку, кнопки переходу між місяцями, 
блок вибору дати та легенду статусів. Завдяки календарному поданню 
користувач може швидко визначити, на які дати заплановано завдання, які 
строки наближаються та які доручення потребують контролю. Такий модуль є 
важливим для планування роботи кафедри. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
53 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.4 – Календар завдань web-системи 
 
Сторінка «Користувачі» реалізує функції керування обліковими 
записами користувачів. У цьому розділі передбачено пошук за ім’ям або email, 
фільтр за роллю, кнопку додавання користувача та картки співробітників. 
Кожна картка містить ім’я, роль, email, телефон, кафедру, індикатор активності 
та кнопки редагування й видалення. Такий підхід дозволяє адміністратору 
швидко переглядати інформацію про учасників системи та підтримувати 
актуальність даних. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
54 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.5 – Сторінка користувачів web-системи 
 
Сторінка «Кафедри» призначена для керування структурними 
підрозділами університету. На ній відображаються картки кафедр із назвою, 
завідувачем, кількістю співробітників і кількістю активних завдань. Також 
передбачено кнопки перегляду співробітників і завдань кафедри, а в нижній 
частині сторінки розміщено загальну статистику. Завдяки цьому адміністратор 
може оцінити навантаження окремих кафедр і швидко перейти до пов’язаної 
інформації. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
55 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.6 – Сторінка кафедр університету 
 
Сторінка «Звіти» створена для аналітичного подання інформації про 
виконання завдань. У цьому розділі розміщено статистичні картки, графік 
динаміки виконання завдань, кругову діаграму розподілу за статусами, графік 
завдань за кафедрами, розподіл за пріоритетами та підсумкову таблицю. Також 
передбачено кнопку експорту звіту. Така структура дозволяє адміністратору 
швидко оцінювати ефективність роботи та використовувати дані для 
подальшого аналізу. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
56 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.7 – Сторінка звітів і статистики 
 
Сторінка «Повідомлення» призначена для інформування користувачів 
про важливі події в системі. Тут відображаються нові завдання, зміни статусів, 
наближення дедлайнів, прострочені завдання та системні повідомлення. Для 
зручності передбачено фільтри за типами повідомлень, кнопки позначення як 
прочитаних і видалення. Наявність такого модуля дозволяє оперативно 
реагувати на зміни та не пропускати важливу інформацію. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
57 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.8 – Сторінка повідомлень web-системи 
 
Сторінка «Кабінет» створена для персоналізованої взаємодії користувача 
із системою. У цьому розділі відображається профіль користувача, роль у 
системі, email, телефон, персональна статистика, останні завдання, форма 
редагування даних і форма зміни пароля. Наявність особистого кабінету 
дозволяє користувачеві переглядати власні дані й контролювати персональну 
активність у системі. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
58 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.9 – Особистий кабінет користувача 
 
Сторінка «Налаштування» призначена для керування параметрами 
системи. У ній передбачено розділи ролей і прав доступу, сповіщень, 
зовнішнього вигляду, системних параметрів і користувачів. Також на сторінці 
розміщено кнопку скидання демонстраційних даних. Цей розділ демонструє 
можливість адміністративного налаштування системи відповідно до потреб 
користувачів і структурних підрозділів. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
59 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.10 – Сторінка налаштувань web-системи 
 
Таким чином, розроблена web-система має кілька основних частин: 
інформаційну, адміністративну, аналітичну та персоналізовану. Інформаційна 
частина представлена головною сторінкою та повідомленнями, 
адміністративна — сторінками завдань, користувачів, кафедр і налаштувань, 
аналітична — сторінкою звітів, а персоналізована — особистим кабінетом 
користувача. Така структура відповідає типовим сценаріям використання 
адміністративних web-систем і дозволяє продемонструвати основні принципи 
організації роботи кафедри. 
 
3.3 Організація даних у web-системі адміністрування завдань 
 
У web-системі адміністрування завдань дані організовано у 
демонстраційному форматі. Такий підхід відповідає характеру дипломного 
проєкту, оскільки сайт є прикладом готової frontend-реалізації 
адміністративної системи. Основна увага приділяється інтерфейсу, структурі 
Арк. 
 ЧДТУ 262211.11 ПЗ 
60 
Змн. Арк. № Документа Підпис Дата  
 
сторінок, логіці взаємодії, поданню завдань, користувачів, кафедр, 
повідомлень і статистичних показників. 
Основними інформаційними сутностями web-системи є завдання, 
користувач, кафедра, повідомлення, звіт і налаштування. Сутність «Завдання» 
містить назву, опис, виконавця, кафедру, дедлайн, статус, пріоритет і доступні 
дії. Сутність «Користувач» може містити ім’я, email, телефон, роль, кафедру та 
статус активності. Сутність «Кафедра» містить назву, завідувача, кількість 
співробітників і кількість активних завдань. Сутність «Повідомлення» описує 
тип повідомлення, текст, дату, статус прочитання та доступні дії. Сутність 
«Звіт» містить статистичні показники, графіки, діаграми та підсумкові таблиці. 
Під час відкриття сторінки завдань система відображає список 
доступних доручень із локального набору даних або підготовленого масиву 
об’єктів. Користувач може застосовувати пошук і фільтри, після чого 
інтерфейс оновлює відображення списку відповідно до вибраних параметрів. 
Наприклад, можна відобразити лише завдання з високим пріоритетом або 
лише завдання зі статусом «В роботі». 
Сторінка користувачів працює з даними про співробітників системи. Для 
кожного користувача відображається ім’я, роль, email, телефон, кафедра й 
індикатор активності. Дані можуть бути представлені у вигляді масиву 
об’єктів, що дозволяє зручно формувати картки користувачів, виконувати 
пошук і застосовувати фільтрацію за ролями. 
Сторінка кафедр використовує дані про структурні підрозділи 
університету. Для кожної кафедри відображається завідувач, кількість 
співробітників і кількість активних завдань. Також на основі цих даних 
формується загальна статистика, яка дозволяє оцінити кількість кафедр, 
співробітників і активних завдань у системі. 
Сторінка звітів використовує узагальнені дані про виконання завдань. На 
основі списку завдань можуть формуватися показники кількості виконаних, 
поточних, нових і прострочених доручень. Також ці дані використовуються для 
побудови графіків динаміки, діаграм розподілу за статусами, пріоритетами й 
Арк. 
 ЧДТУ 262211.11 ПЗ 
61 
Змн. Арк. № Документа Підпис Дата  
 
кафедрами. Завдяки цьому система надає адміністратору не лише список 
завдань, а й аналітичну інформацію для прийняття рішень. 
Сторінка повідомлень працює з даними про системні події. 
Повідомлення можуть формуватися під час створення нового завдання, зміни 
статусу, наближення дедлайну або появи простроченого доручення. У межах 
демонстраційної реалізації ці дані можуть бути підготовлені заздалегідь, проте 
в подальшому розвитку системи їх можна формувати автоматично на основі 
дій користувачів. 
 
 
Рисунок 3.11 – Схема організації даних web-системи адміністрування завдань 
 
Важливо зазначити, що демонстраційна організація даних не є 
повноцінною заміною серверної бази даних. У разі реального впровадження 
системи доцільно використовувати серверну частину та базу даних, які 
Арк. 
 ЧДТУ 262211.11 ПЗ 
62 
Змн. Арк. № Документа Підпис Дата  
 
забезпечать централізоване зберігання інформації, авторизацію користувачів, 
синхронізацію між пристроями, журнал дій і захист даних. 
У майбутньому систему можна розширити шляхом створення окремих 
таблиць або колекцій для завдань, користувачів, кафедр, повідомлень, ролей, 
прав доступу та звітів. Це дозволить зробити систему придатною для реальної 
роботи кількох користувачів і забезпечити надійне збереження 
адміністративної інформації. 
Отже, організація даних у web-системі адміністрування завдань 
побудована навколо основних сутностей: завдань, користувачів, кафедр, 
повідомлень, звітів і налаштувань. Такий підхід дозволяє логічно 
структурувати інформацію, підтримувати роботу основних сторінок і 
забезпечити основу для подальшого масштабування системи. 
 
3.4 Логіка маршрутів і взаємодії сторінок web-системи 
 
У web-системі адміністрування завдань взаємодія користувача із сайтом 
може бути описана через логіку сторінкових маршрутів і обміну даними між 
компонентами. Оскільки проєкт є frontend-орієнтованим, основна логіка 
роботи реалізується на стороні клієнта. Це означає, що переходи між 
сторінками, відображення завдань, фільтрація, робота з календарем, 
користувачами, кафедрами, повідомленнями та звітами виконуються в межах 
інтерфейсу web-додатка. 
У межах користувацької частини web-системи доцільно виділити такі 
основні сторінкові маршрути: 
– «/» — головна сторінка системи; 
– «/tasks» — сторінка керування завданнями; 
– «/calendar» — календар завдань; 
– «/users» — сторінка користувачів; 
– «/departments» — сторінка кафедр; 
Арк. 
 ЧДТУ 262211.11 ПЗ 
63 
Змн. Арк. № Документа Підпис Дата  
 
– «/reports» — звіти та статистика; 
– «/notifications» — повідомлення; 
– «/profile» — особистий кабінет користувача; 
– «/settings» — налаштування системи. 
Головна сторінка є стартовою точкою взаємодії користувача із системою. 
З неї адміністратор може перейти до створення завдання, додавання 
користувача або перегляду звітів за допомогою блоку швидких дій. Також з 
головної сторінки можна перейти до списку особистих або останніх завдань. 
Маршрут «/tasks» відповідає за відображення сторінки керування 
завданнями. На цій сторінці користувач може переглядати всі завдання, 
застосовувати пошук, фільтри за статусом і пріоритетом, створювати нові 
завдання, редагувати, переглядати або видаляти наявні записи. Цей маршрут є 
одним із найважливіших у системі, оскільки саме він забезпечує основну 
функцію адміністрування доручень. 
Маршрут «/calendar» використовується для календарного подання 
завдань. На цій сторінці користувач може переглядати дедлайни за датами, 
перемикати місяці, вибирати дату й орієнтуватися за легендою статусів. 
Календарна структура є корисною для планування роботи та контролю строків 
виконання. 
Маршрут «/users» відповідає за сторінку користувачів. Тут адміністратор 
може переглядати картки співробітників, виконувати пошук, фільтрувати 
користувачів за ролями, додавати, редагувати або видаляти записи. Такий 
маршрут пов’язаний із рольовою структурою системи та забезпечує керування 
учасниками адміністративного процесу. 
Маршрут «/departments» призначений для сторінки кафедр. Він 
забезпечує перегляд структурних підрозділів університету, інформації про 
завідувачів, кількість співробітників і активних завдань. Через цей розділ 
можна перейти до перегляду співробітників або завдань конкретної кафедри. 
Маршрут «/reports» відповідає за аналітичний розділ. На цій сторінці 
відображаються статистичні картки, графіки, діаграми, розподіл завдань за 
Арк. 
 ЧДТУ 262211.11 ПЗ 
64 
Змн. Арк. № Документа Підпис Дата  
 
статусами, пріоритетами й кафедрами, а також підсумкова таблиця. Цей 
маршрут допомагає адміністратору отримати узагальнену інформацію про 
стан виконання завдань. 
Маршрут «/notifications» використовується для перегляду повідомлень. 
У цьому розділі користувач бачить нові завдання, зміни статусів, наближення 
дедлайнів, прострочені завдання та системні повідомлення. Також 
передбачено можливість фільтрації, позначення повідомлень як прочитаних і 
видалення. 
Маршрут «/profile» відповідає за особистий кабінет користувача. Тут 
відображаються персональні дані, роль, контактна інформація, персональна 
статистика, останні завдання, форма редагування профілю та форма зміни 
пароля. 
Маршрут «/settings» призначений для керування налаштуваннями 
системи. У цьому розділі користувач може переглядати ролі та права доступу, 
параметри сповіщень, зовнішнього вигляду, системні налаштування та 
користувачів системи. 
Узагальнено логіку взаємодії можна описати так: користувач обирає 
потрібний розділ у бічному меню, система змінює активну сторінку, 
відповідний компонент отримує набір даних і відображає їх у потрібному 
форматі. Якщо користувач виконує дію, наприклад фільтрує завдання або 
натискає кнопку редагування, компонент оновлює стан інтерфейсу й показує 
актуальну інформацію. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
65 
Змн. Арк. № Документа Підпис Дата  
 
 
Рисунок 3.12 – Схема взаємодії сторінок web-системи адміністрування 
завдань 
 
Описана логіка маршрутів робить архітектуру web-системи зрозумілою 
та підготовленою до подальшого масштабування. У майбутньому локальні 
операції можна замінити API-запитами до серверної частини. Наприклад, 
замість локального списку завдань можна використовувати маршрут 
«/api/tasks», для користувачів — «/api/users», для кафедр — «/api/departments», 
для звітів — «/api/reports», а для повідомлень — «/api/notifications». Це 
дозволить поступово перетворити демонстраційний frontend-проєкт на 
повноцінну інформаційну систему. 
 
 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
66 
Змн. Арк. № Документа Підпис Дата  
 
3.5 Тестування web-системи адміністрування завдань 
 
Тестування web-системи є необхідним етапом розробки, оскільки воно 
дозволяє перевірити відповідність реалізованої системи поставленим вимогам. 
Для web-системи адміністрування завдань тестування було спрямоване на 
перевірку коректності роботи сторінок, зручності навігації, відображення 
завдань, роботи пошуку та фільтрів, календаря, користувачів, кафедр, звітів, 
повідомлень, особистого кабінету та налаштувань. 
Під час перевірки враховувалися такі напрями: тестування верстки, 
функціональне тестування, UX-тестування, адаптивне тестування, перевірка 
графіків і таблиць, оцінка демонстраційної логіки та тестування 
продуктивності. Такий підхід дозволяє оцінити не лише технічну 
працездатність сайту, а й зручність його використання з погляду користувача. 
Тестування верстки передбачало перевірку правильності відображення 
основних елементів інтерфейсу. Було перевірено наявність логотипу, бічного 
меню, верхньої панелі, статистичних карток, списків завдань, календарної 
сітки, карток користувачів, карток кафедр, графіків, повідомлень, форм 
профілю та налаштувань. Також оцінювалося коректне розміщення блоків, 
читабельність тексту, відповідність кольорів загальному стилю й відсутність 
візуальних помилок. 
Функціональне тестування було спрямоване на перевірку основних 
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками, 
відкриття розділу завдань, пошук доручень, фільтрація за статусом і 
пріоритетом, перегляд календаря, відкриття сторінки користувачів, робота 
сторінки кафедр, відображення звітів, перегляд повідомлень, редагування 
даних у кабінеті та перехід до налаштувань системи. 
UX-тестування дозволило оцінити зручність використання сайту. Було 
перевірено зрозумілість назв пунктів меню, логічність структури сторінок, 
помітність кнопок, зручність карток, простоту використання фільтрів, 
читабельність статистичних показників і зрозумілість повідомлень. Для 
Арк. 
 ЧДТУ 262211.11 ПЗ 
67 
Змн. Арк. № Документа Підпис Дата  
 
адміністративної системи це є важливим, оскільки користувач повинен швидко 
знаходити потрібну функцію та не витрачати зайвий час на розуміння 
структури сайту. 
Адаптивне тестування передбачало перевірку відображення сайту на 
різних пристроях і розмірах екрана. Було оцінено роботу головної сторінки, 
сторінки завдань, календаря, користувачів, кафедр, звітів, повідомлень, 
кабінету та налаштувань на екранах комп’ютера, ноутбука, планшета й 
смартфона. Особлива увага приділялася коректному відображенню бічного 
меню, карток, таблиць, графіків, форм і кнопок дій. 
Окремо було виконано перевірку сторінки звітів. Було перевірено 
відображення статистичних карток, лінійного графіка динаміки виконання 
завдань, кругової діаграми розподілу за статусами, графіка завдань за 
кафедрами, розподілу за пріоритетами та підсумкової таблиці. Також 
оцінювалася зрозумілість кольорових позначень і відповідність даних 
загальному змісту сторінки. 
Сторінка повідомлень перевірялася за такими параметрами: наявність 
повідомлень різних типів, коректність відображення непрочитаних 
повідомлень, наявність фільтрів, кнопок позначення як прочитаних і 
видалення. Було встановлено, що такий модуль є корисним для інформування 
користувача про нові завдання, зміни статусів і наближення дедлайнів. 
Безпекова оцінка була спрямована на перевірку того, що демонстраційна 
система не позиціонується як повноцінна корпоративна система із захищеним 
серверним зберіганням даних. Для реального впровадження необхідно 
реалізувати серверну автентифікацію, захист API, ролі користувачів, 
централізоване зберігання даних і журнал дій. Під час розробки web-додатків 
важливо враховувати типові ризики безпеки, зокрема порушення контролю 
доступу та помилки ідентифікації, на які звертає увагу OWASP Top 10 [43]. 
Тестування продуктивності передбачало перевірку швидкості 
завантаження основних сторінок, стабільності роботи фільтрів, реакції 
інтерфейсу на дії користувача та відсутності критичних помилок у консолі 
Арк. 
 ЧДТУ 262211.11 ПЗ 
68 
Змн. Арк. № Документа Підпис Дата  
 
браузера. Для цього можуть використовуватися Chrome DevTools і Lighthouse. 
Такі інструменти дозволяють оцінити продуктивність сторінки, доступність, 
найкращі практики та загальну якість реалізації web-ресурсу [40; 41]. 
Тестування web-системи було виконано шляхом ручної перевірки 
основних сценаріїв користувача. Було перевірено відкриття головної сторінки, 
перехід до завдань, пошук і фільтрацію, відкриття календаря, перегляд 
користувачів і кафедр, аналіз звітів, перегляд повідомлень, роботу кабінету, 
зміну пароля в демонстраційному інтерфейсі, перегляд налаштувань і кнопку 
виходу. Також було перевірено відображення сайту в браузері після 
розгортання на Vercel. 
 
 
Рисунок 3.13 – Результати тестування web-системи адміністрування завдань 
 
За результатами тестування встановлено, що web-система 
адміністрування завдань відповідає основним вимогам до демонстраційного 
адміністративного web-ресурсу. Основні сторінки відображаються коректно, 
навігація є зрозумілою, сторінка завдань працює відповідно до призначення, 
Арк. 
 ЧДТУ 262211.11 ПЗ 
69 
Змн. Арк. № Документа Підпис Дата  
 
пошук і фільтри спрощують роботу зі списком доручень, календар допомагає 
контролювати дедлайни, а звіти забезпечують аналітичне подання інформації. 
 
3.6 Порівняння розробленої web-системи з аналогами 
 
Порівняння розробленої web-системи з аналогічними рішеннями 
дозволяє визначити її переваги та оцінити практичну значущість створеної 
системи. У межах кваліфікаційної роботи доцільно порівняти розроблену 
систему з такими web-сервісами керування завданнями, як Trello, Asana, Jira та 
Microsoft Planner. Ці ресурси виконують подібні або частково подібні функції, 
оскільки надають можливість створювати завдання, призначати виконавців, 
встановлювати дедлайни, контролювати статуси та організовувати командну 
роботу [13–16]. 
Trello має перевагу у вигляді простого візуального підходу до організації 
завдань за допомогою дошок, списків і карток. Така модель є зрозумілою для 
користувача й добре підходить для невеликих команд. Водночас Trello не 
орієнтований саме на структуру кафедри закладу вищої освіти, не містить 
спеціалізованих модулів для кафедр, ролей університетських працівників і 
звітів за структурними підрозділами. 
Asana має ширші можливості для керування командною роботою, 
проєктами та строками виконання. Вона дозволяє організовувати завдання, 
визначати відповідальних осіб і контролювати прогрес. Однак для невеликої 
кафедри частина функцій Asana може бути надмірною, а сама система не 
враховує специфіку навчального закладу та внутрішньої кафедральної 
структури. 
Jira є потужним інструментом для керування задачами, який часто 
використовується у сфері розробки програмного забезпечення. Його 
перевагами є гнучкі робочі процеси, статуси, пріоритети, звіти та підтримка 
Agile-підходів. Водночас для користувачів без досвіду роботи з подібними 
Арк. 
 ЧДТУ 262211.11 ПЗ 
70 
Змн. Арк. № Документа Підпис Дата  
 
системами Jira може бути складною. Для потреб кафедри її функціонал може 
бути надмірним, оскільки система орієнтована переважно на команди 
розробки та технічні проєкти. 
Microsoft Planner є зручним інструментом для планування командної 
роботи в екосистемі Microsoft 365. Його перевагою є інтеграція з іншими 
сервісами Microsoft. Проте використання Planner залежить від відповідної 
інфраструктури й облікових записів Microsoft. Крім того, система не містить 
окремої логіки для кафедр, завідувачів, викладачів і співробітників, що 
обмежує її використання саме в контексті дипломної теми. 
Перевагою розробленої web-системи є її тематична спрямованість на 
адміністрування завдань по кафедрі. Система містить не лише сторінку 
завдань, а й календар, користувачів, кафедри, звіти, повідомлення, кабінет і 
налаштування. Завдяки цьому вона краще відповідає потребам структурного 
підрозділу закладу вищої освіти, ніж універсальні сервіси керування 
завданнями. 
Водночас необхідно враховувати, що розроблена система має 
демонстраційний характер. На відміну від великих корпоративних платформ, 
вона не використовує повноцінну серверну базу даних, складну систему 
авторизації, інтеграції з іншими сервісами та розширене керування правами 
доступу на рівні реальної організації. Проте для дипломного проєкту така 
реалізація є достатньою, оскільки вона демонструє основні принципи 
побудови адміністративної web-системи. 
Отже, розроблена web-система не дублює повністю функціональність 
великих сервісів керування проєктами, а створює компактне, зрозуміле й 
тематично спрямоване середовище для організації роботи кафедри. 
Основними перевагами системи є проста структура, світлий мінімалістичний 
дизайн, бічна навігація, сторінка завдань, календар, модуль кафедр, звіти, 
повідомлення, особистий кабінет і налаштування. 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
71 
Змн. Арк. № Документа Підпис Дата  
 
Висновки до розділу 3 
 
У третьому розділі було розроблено web-систему адміністрування 
завдань по кафедрі. Було обґрунтовано вибір інструментальних засобів 
розробки, зокрема Visual Studio Code, React, Vite, Tailwind CSS, JavaScript, 
TypeScript, React Router, Recharts, Chrome DevTools, Lighthouse і Vercel. Обрані 
технології дозволили реалізувати адаптивний інтерфейс, організувати 
компонентну структуру проєкту, забезпечити логічну навігацію між 
сторінками та розгорнути сайт у мережі Інтернет. 
Було описано реалізацію основних сторінок web-системи: головної 
сторінки, завдань, календаря, користувачів, кафедр, звітів, повідомлень, 
особистого кабінету та налаштувань. Кожен розділ виконує окрему функцію та 
забезпечує логічну взаємодію користувача із системою. Особливу увагу 
приділено сторінці завдань, пошуку, фільтрації, календарю дедлайнів, звітам, 
повідомленням і ролі адміністратора в системі. 
Окремо розглянуто організацію даних у web-системі. Було визначено 
основні інформаційні сутності, необхідні для роботи системи: завдання, 
користувач, кафедра, повідомлення, звіт і налаштування. Така структура 
дозволяє реалізувати базові демонстраційні сценарії без використання 
складної серверної архітектури. Водночас зазначено, що для реального 
впровадження системи потрібно передбачити серверну частину, базу даних, 
авторизацію користувачів і централізоване зберігання даних. 
Також було описано логіку сторінкових маршрутів і взаємодії між 
сторінками. Було показано, як користувацькі дії можуть бути пов’язані з 
переходами між розділами, оновленням стану інтерфейсу та відображенням 
відповідних даних. Це дає змогу краще зрозуміти архітектуру системи та 
визначити напрями її подальшого масштабування. 
У межах розділу було розглянуто тестування web-системи за кількома 
напрямами: перевірка верстки, функціональне тестування, UX-тестування, 
адаптивність, перевірка графіків і таблиць, оцінка демонстраційної логіки та 
Арк. 
 ЧДТУ 262211.11 ПЗ 
72 
Змн. Арк. № Документа Підпис Дата  
 
тестування продуктивності. За результатами тестування встановлено, що сайт 
має логічну структуру, коректно відображає основні сторінки, забезпечує 
роботу пошуку, фільтрів, календаря, звітів, повідомлень, кабінету та 
налаштувань. 
Порівняння з аналогами показало, що web-система адміністрування 
завдань має практичну цінність завдяки тематичній орієнтації на роботу 
кафедри, простому інтерфейсу, модулю завдань, календарю, користувачам, 
кафедрам, звітам і повідомленням. Таким чином, розроблений сайт можна 
вважати функціонально завершеним демонстраційним web-ресурсом, який 
відповідає поставленій меті кваліфікаційної роботи та може бути основою для 
подальшого розвитку повноцінної інформаційної системи. 
  
Арк. 
 ЧДТУ 262211.11 ПЗ 
73 
Змн. Арк. № Документа Підпис Дата  
 
ВИСНОВКИ 
 
У кваліфікаційній роботі було розроблено демонстраційну web-систему 
адміністрування завдань по кафедрі. Ресурс призначений для створення, 
перегляду, редагування та контролю виконання завдань, керування 
користувачами й кафедрами, перегляду календаря, формування звітів, 
отримання повідомлень, роботи з особистим кабінетом і налаштуваннями 
системи. 
У процесі виконання роботи було проаналізовано предметну область 
web-систем керування завданнями, розглянуто аналоги Trello, Asana, Jira та 
Microsoft Planner, визначено їхні переваги й недоліки. На основі аналізу було 
обґрунтовано доцільність створення власної web-системи, орієнтованої на 
потреби кафедри закладу вищої освіти, просту навігацію, зрозумілий 
інтерфейс і централізоване подання адміністративної інформації. 
Було сформовано технічне завдання, визначено структуру сайту, вимоги 
до дизайну, навігації, наповнення, прототипу та функціональних можливостей. 
Для реалізації проєкту використано Visual Studio Code, React, Vite, Tailwind 
CSS, JavaScript, TypeScript, React Router, Recharts, Chrome DevTools, Lighthouse 
і Vercel. У результаті створено головну сторінку, сторінку завдань, календар, 
сторінку користувачів, розділ кафедр, звіти, повідомлення, особистий кабінет 
і налаштування системи. 
Окрему увагу приділено організації даних, що дозволило визначити 
основні сутності системи: завдання, користувач, кафедра, повідомлення, звіт і 
налаштування. Такий підхід є доцільним для дипломного frontend-проєкту та 
водночас залишає можливість подальшого розширення системи шляхом 
підключення серверної частини й бази даних. 
Проведене тестування підтвердило працездатність основних сторінок, 
коректність навігації, роботу пошуку, фільтрації, календаря, звітів, 
повідомлень, особистого кабінету та налаштувань. Розроблена web-система 
Арк. 
 ЧДТУ 262211.11 ПЗ 
74 
Змн. Арк. № Документа Підпис Дата  
 
відповідає поставленій меті, має практичну цінність як приклад 
адміністративного web-ресурсу та може бути використана як основа для 
подальшого розвитку. 
У перспективі систему можна доповнити серверною частиною, базою 
даних, реальною авторизацією, розширеною системою ролей, журналом дій 
користувачів, автоматичними email-сповіщеннями, експортом звітів у PDF та 
Excel, інтеграцією з календарними сервісами й розширеною аналітикою. Це 
дозволить перетворити демонстраційний frontend-проєкт на повноцінну web-
систему для організації роботи кафедри. 
Подальше розширення системи також дасть змогу забезпечити 
централізоване збереження даних користувачів, синхронізацію інформації між 
різними пристроями, контроль виконання завдань у реальному часі та 
формування детальної звітності за діяльністю кафедри. Завдяки цьому система 
зможе підтримувати не лише демонстраційний перегляд завдань, а й 
повноцінний процес адміністрування доручень у межах структурного 
підрозділу закладу вищої освіти. 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
75 
Змн. Арк. № Документа Підпис Дата  
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
 
1. Global Education Monitoring Report 2023: Technology in education: A 
tool on whose terms? [Електронний ресурс]. – Paris : UNESCO, 2023. 
– Режим доступу: https://unesdoc.unesco.org/ark:/48223/pf0000385723 
(дата звернення: 04.06.2026). 
2. Digital Education Action Plan 2021–2027 [Електронний ресурс]. – 
European Commission. – Режим доступу: 
https://education.ec.europa.eu/focus-topics/digital-education/actions 
(дата звернення: 04.06.2026). 
3. Trello [Електронний ресурс]. – Atlassian. – Режим доступу: 
https://trello.com/ (дата звернення: 04.06.2026). 
4. Asana [Електронний ресурс]. – Asana, Inc. – Режим доступу: 
https://asana.com/ (дата звернення: 04.06.2026). 
5. Jira Software [Електронний ресурс]. – Atlassian. – Режим доступу: 
https://www.atlassian.com/software/jira (дата звернення: 04.06.2026). 
6. Microsoft Planner [Електронний ресурс]. – Microsoft. – Режим 
доступу: https://www.microsoft.com/en-us/microsoft-
365/planner/microsoft-planner (дата звернення: 04.06.2026). 
7. React Documentation [Електронний ресурс]. – Meta Open Source. – 
Режим доступу: https://react.dev/ (дата звернення: 04.06.2026). 
8. Vite Documentation [Електронний ресурс]. – Vite. – Режим доступу: 
https://vite.dev/guide/ (дата звернення: 04.06.2026). 
9. Tailwind CSS Documentation [Електронний ресурс]. – Tailwind Labs. 
– Режим доступу: https://tailwindcss.com/docs (дата звернення: 
04.06.2026). 
10. Web Storage API [Електронний ресурс]. – MDN Web Docs. – Режим 
доступу: https://developer.mozilla.org/en-
US/docs/Web/API/Web_Storage_API (дата звернення: 04.06.2026). 
Арк. 
 ЧДТУ 262211.11 ПЗ 
76 
Змн. Арк. № Документа Підпис Дата  
 
11. Global Education Monitoring Report 2023: Technology in education: A 
tool on whose terms? [Електронний ресурс]. – Paris : UNESCO, 2023. 
– Режим доступу: https://unesdoc.unesco.org/ark:/48223/pf0000385723 
(дата звернення: 04.06.2026). 
12. Digital Education Action Plan 2021–2027 [Електронний ресурс]. – 
European Commission. – Режим доступу: 
https://education.ec.europa.eu/focus-topics/digital-education/actions 
(дата звернення: 04.06.2026). 
13. Trello [Електронний ресурс]. – Atlassian. – Режим доступу: 
https://trello.com/ (дата звернення: 04.06.2026). 
14. Asana [Електронний ресурс]. – Asana, Inc. – Режим доступу: 
https://asana.com/ (дата звернення: 04.06.2026). 
15. Jira Software [Електронний ресурс]. – Atlassian. – Режим доступу: 
https://www.atlassian.com/software/jira (дата звернення: 04.06.2026). 
16. Microsoft Planner [Електронний ресурс]. – Microsoft. – Режим 
доступу: https://www.microsoft.com/en-us/microsoft-
365/planner/microsoft-planner (дата звернення: 04.06.2026). 
17. React Documentation [Електронний ресурс]. – Meta Open Source. – 
Режим доступу: https://react.dev/ (дата звернення: 04.06.2026). 
18. Vite Documentation [Електронний ресурс]. – Vite. – Режим доступу: 
https://vite.dev/guide/ (дата звернення: 04.06.2026). 
19. Tailwind CSS Documentation [Електронний ресурс]. – Tailwind Labs. 
– Режим доступу: https://tailwindcss.com/docs (дата звернення: 
04.06.2026). 
20. Web Content Accessibility Guidelines (WCAG) 2.2 [Електронний 
ресурс]. – W3C, 2024. – Режим доступу: 
https://www.w3.org/TR/WCAG22/ (дата звернення: 04.06.2026). 
21. OWASP Top 10: The Ten Most Critical Web Application Security Risks 
[Електронний ресурс]. – OWASP Foundation. – Режим доступу: 
https://owasp.org/www-project-top-ten/ (дата звернення: 04.06.2026). 
Арк. 
 ЧДТУ 262211.11 ПЗ 
77 
Змн. Арк. № Документа Підпис Дата  
 
22. ISO/IEC/IEEE 29148:2018 Systems and software engineering — Life 
cycle processes — Requirements engineering [Електронний ресурс]. – 
ISO. – Режим доступу: https://www.iso.org/standard/72089.html (дата 
звернення: 04.06.2026). 
23. React Router Documentation [Електронний ресурс]. – React Router. – 
Режим доступу: https://reactrouter.com/ (дата звернення: 04.06.2026). 
24. Recharts Documentation [Електронний ресурс]. – Recharts. – Режим 
доступу: https://recharts.org/en-US/ (дата звернення: 04.06.2026). 
25. React Documentation [Електронний ресурс]. – Meta Open Source. – 
Режим доступу: https://react.dev/ (дата звернення: 04.06.2026). 
26. Vite Documentation [Електронний ресурс]. – Vite. – Режим доступу: 
https://vite.dev/guide/ (дата звернення: 04.06.2026). 
27. Tailwind CSS Documentation [Електронний ресурс]. – Tailwind Labs. 
– Режим доступу: https://tailwindcss.com/docs (дата звернення: 
04.06.2026). 
28. Lighthouse [Електронний ресурс]. – Chrome for Developers. – Режим 
доступу: https://developer.chrome.com/docs/lighthouse/overview (дата 
звернення: 04.06.2026). 
29. Vercel Documentation [Електронний ресурс]. – Vercel. – Режим 
доступу: https://vercel.com/docs (дата звернення: 04.06.2026). 
30. Web Content Accessibility Guidelines (WCAG) 2.2 [Електронний 
ресурс]. – W3C, 2024. – Режим доступу: 
https://www.w3.org/TR/WCAG22/ (дата звернення: 04.06.2026). 
31. OWASP Top 10: The Ten Most Critical Web Application Security Risks 
[Електронний ресурс]. – OWASP Foundation. – Режим доступу: 
https://owasp.org/www-project-top-ten/ (дата звернення: 04.06.2026). 
32. Visual Studio Code Documentation [Електронний ресурс]. – Microsoft. 
– Режим доступу: https://code.visualstudio.com/docs (дата звернення: 
04.06.2026). 
Арк. 
 ЧДТУ 262211.11 ПЗ 
78 
Змн. Арк. № Документа Підпис Дата  
 
33. React Documentation [Електронний ресурс]. – Meta Open Source. – 
Режим доступу: https://react.dev/ (дата звернення: 04.06.2026). 
34. Vite Documentation [Електронний ресурс]. – Vite. – Режим доступу: 
https://vite.dev/guide/ (дата звернення: 04.06.2026). 
35. Tailwind CSS Documentation [Електронний ресурс]. – Tailwind Labs. 
– Режим доступу: https://tailwindcss.com/docs (дата звернення: 
04.06.2026). 
36. JavaScript Guide [Електронний ресурс]. – MDN Web Docs. – Режим 
доступу: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide (дата звернення: 04.06.2026). 
37. TypeScript Documentation [Електронний ресурс]. – Microsoft. – 
Режим доступу: https://www.typescriptlang.org/docs/ (дата звернення: 
04.06.2026). 
38. React Router Documentation [Електронний ресурс]. – React Router. – 
Режим доступу: https://reactrouter.com/ (дата звернення: 04.06.2026). 
39. Recharts Documentation [Електронний ресурс]. – Recharts. – Режим 
доступу: https://recharts.org/en-US/ (дата звернення: 04.06.2026). 
40. Chrome DevTools Documentation [Електронний ресурс]. – Chrome for 
Developers. – Режим доступу: 
https://developer.chrome.com/docs/devtools (дата звернення: 
04.06.2026). 
41. Lighthouse [Електронний ресурс]. – Chrome for Developers. – Режим 
доступу: https://developer.chrome.com/docs/lighthouse/overview (дата 
звернення: 04.06.2026). 
42. Vercel Documentation [Електронний ресурс]. – Vercel. – Режим 
доступу: https://vercel.com/docs (дата звернення: 04.06.2026). 
43. OWASP Top 10: The Ten Most Critical Web Application Security Risks 
[Електронний ресурс]. – OWASP Foundation. – Режим доступу: 
https://owasp.org/www-project-top-ten/ (дата звернення: 04.06.2026). 
. 
Арк. 
 ЧДТУ 262211.11 ПЗ 
79 
Змн. Арк. № Документа Підпис Дата  
 
ДОДАТОК А 
 
 
 
 ЗАТВЕРДЖУЮ 
 Зав. кафедри ІТП  
 _________________  Прокопенко Т.О. 
 «____»  ________________ 2026 р. 
 
 
 
 
 
 
«САЙТ ОНЛАЙН — КУРСІВ З ПРОГРАМУВАННЯ, РЕАЛІЗОВАНИЙ ЗА 
ДОПОМОГОЮ ФРЕЙМВОРКУ REACT» 
 
 
 
Специфікація 
482 ЧДТУ 262223 – 01  
Аркушів 2 
 
 
 
 
Розробник ________________ Даніл ЧЕРНЕНКО  
Керівник ________________ Ольга ЛАВДАНСЬКА 
Н. контроль ________________  
 
    
     
 
2026 
Арк. 
 ЧДТУ 262211.11 ПЗ 
80 
Змн. Арк. № Документа Підпис Дата  
 
Позначення Найменування Примітка 
   
 Документація  
   
482 ЧДТУ 262211-01 12 01 Лістинг коду  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
81 
Змн. Арк. № Документа Підпис Дата  
 
ДОДАТОК Б 
 
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ  
«Створення web-системи адміністрування завдань по кафедрі» 
 
 
 
 
 
 
ТЕКСТ ПРОГРАМИ 
 
 
482 ЧДТУ 262211 – 01 12 01 
Аркушів 7 
 
 
 
 
Розробник             ________________          Денис КОВТУН                  
 
    
         
  
 
 
 
Черкаси, 2026
Арк. 
 ЧДТУ 262211.11 ПЗ 
82 
Змн. Арк. № Документа Підпис Дата  
83 
482 ЧДТУ 262211 – 01 12 01 
 
import { useState } from 'react'; 
import { User, Mail, Phone, Building2, Shield, Key, Save } from 'lucide-react'; 
import { useAppData } from '../data/AppDataContext'; 
 
export function Profile() { 
  const { currentUser, tasks, updateCurrentUser, changePassword } = useAppData(); 
  const [profileForm, setProfileForm] = useState({ 
    name: currentUser.name, 
    email: currentUser.email, 
    phone: currentUser.phone || '', 
  }); 
  const [passwords, setPasswords] = useState({ current: '', next: '', confirm: '' }); 
  const myTasks = tasks.filter(t => t.assigneeId === currentUser.id); 
  const completedTasks = myTasks.filter(t => t.status === 'completed').length; 
  const inProgressTasks = myTasks.filter(t => t.status === 'in-progress').length; 
 
  return ( 
    <div className="space-y-6"> 
      {/* Заголовок */} 
      <div> 
        <h1 className="text-3xl font-bold text-gray-900">Особистий кабінет</h1> 
        <p className="text-gray-600 mt-1">Перегляд та редагування особистих даних</p> 
      </div> 
 
      <div className="grid lg:grid-cols-3 gap-6"> 
        {/* Основна інформація */} 
        <div className="lg:col-span-2 space-y-6"> 
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> 
            <div className="flex items-start gap-6 mb-6"> 
              <div className="app-user-avatar w-24 h-24 rounded-2xl flex items-center justify-
center text-white text-4xl font-semibold shadow-lg"> 
                {currentUser.name.charAt(0)} 
              </div> 
              <div className="flex-1"> 
                <h2 className="text-2xl font-bold text-gray-900 mb-2">{currentUser.name}</h2> 
                <span className="inline-block px-4 py-2 rounded-lg bg-blue-100 text-blue-700 font-
medium"> 
                  {currentUser.role === 'admin' && 'Адміністратор'} 
                  {currentUser.role === 'head' && 'Завідувач кафедри'} 
                  {currentUser.role === 'teacher' && 'Викладач'} 
                  {currentUser.role === 'employee' && 'Співробітник'} 
                </span> 
                <div className="flex items-center gap-2 mt-3"> 
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div> 
                  <span className="text-sm text-gray-600">Активний</span> 
                </div> 
              </div> 
            </div> 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
83 
Змн. Арк. № Документа Підпис Дата  
84 
482 ЧДТУ 262211 – 01 12 01 
 
            <div className="space-y-4"> 
              <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg"> 
                <Mail className="w-5 h-5 text-gray-600" /> 
                <div className="flex-1"> 
                  <p className="text-sm text-gray-600">Email адреса</p> 
                  <p className="text-gray-900 font-medium">{currentUser.email}</p> 
                </div> 
              </div> 
 
              {currentUser.phone && ( 
                <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg"> 
                  <Phone className="w-5 h-5 text-gray-600" /> 
                  <div className="flex-1"> 
                    <p className="text-sm text-gray-600">Телефон</p> 
                    <p className="text-gray-900 font-medium">{currentUser.phone}</p> 
                  </div> 
                </div> 
              )} 
 
              {currentUser.department && ( 
                <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg"> 
                  <Building2 className="w-5 h-5 text-gray-600" /> 
                  <div className="flex-1"> 
                    <p className="text-sm text-gray-600">Кафедра</p> 
                    <p className="text-gray-900 font-medium">{currentUser.department}</p> 
                  </div> 
                </div> 
              )} 
 
              <div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg"> 
                <Shield className="w-5 h-5 text-gray-600" /> 
                <div className="flex-1"> 
                  <p className="text-sm text-gray-600">Роль в системі</p> 
                  <p className="text-gray-900 font-medium"> 
                    {currentUser.role === 'admin' && 'Повний доступ до адміністрування системи'} 
                    {currentUser.role === 'head' && 'Управління кафедрою та завданнями'} 
                    {currentUser.role === 'teacher' && 'Виконання та перегляд завдань'} 
                    {currentUser.role === 'employee' && 'Виконання призначених завдань'} 
                  </p> 
                </div> 
              </div> 
            </div> 
          </div> 
 
          {/* Редагування профілю */} 
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> 
            <h3 className="text-xl font-semibold text-gray-900 mb-4">Редагування даних</h3> 
            <form 
              className="space-y-4" 
Арк. 
 ЧДТУ 262211.11 ПЗ 
84 
Змн. Арк. № Документа Підпис Дата  
85 
482 ЧДТУ 262211 – 01 12 01 
 
              onSubmit={(event) => { 
                event.preventDefault(); 
                updateCurrentUser(profileForm); 
                window.alert('Профіль збережено'); 
              }} 
            > 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Повне ім'я 
                </label> 
                <input 
                  type="text" 
                  value={profileForm.name} 
                  onChange={(event) => setProfileForm({ ...profileForm, name: event.target.value 
})} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                /> 
              </div> 
 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Email адреса 
                </label> 
                <input 
                  type="email" 
                  value={profileForm.email} 
                  onChange={(event) => setProfileForm({ ...profileForm, email: event.target.value 
})} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                /> 
              </div> 
 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Телефон 
                </label> 
                <input 
                  type="tel" 
                  value={profileForm.phone} 
                  onChange={(event) => setProfileForm({ ...profileForm, phone: event.target.value 
})} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                /> 
              </div> 
 
              <button 
Арк. 
 ЧДТУ 262211.11 ПЗ 
85 
Змн. Арк. № Документа Підпис Дата  
86 
482 ЧДТУ 262211 – 01 12 01 
 
                type="submit" 
                className="app-primary-action flex items-center gap-2 px-6 py-3 text-white font-
medium rounded-lg transition-all" 
              > 
                <Save className="w-5 h-5" /> 
                Зберегти зміни 
              </button> 
            </form> 
          </div> 
 
          {/* Зміна пароля */} 
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6"> 
            <h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2"> 
              <Key className="w-5 h-5" /> 
              Зміна пароля 
            </h3> 
            <form 
              className="space-y-4" 
              onSubmit={(event) => { 
                event.preventDefault(); 
                if (!passwords.current || !passwords.next) { 
                  window.alert('Заповніть поточний і новий пароль'); 
                  return; 
                } 
                if (passwords.next !== passwords.confirm) { 
                  window.alert('Підтвердження пароля не збігається'); 
                  return; 
                } 
                const result = changePassword(passwords.current, passwords.next); 
                if (!result.ok) { 
                  window.alert(result.error); 
                  return; 
                } 
                setPasswords({ current: '', next: '', confirm: '' }); 
                window.alert('Пароль змінено'); 
              }} 
            > 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Поточний пароль 
                </label> 
                <input 
                  type="password" 
                  value={passwords.current} 
                  onChange={(event) => setPasswords({ ...passwords, current: event.target.value })} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                  placeholder="Введіть поточний пароль" 
                /> 
Арк. 
 ЧДТУ 262211.11 ПЗ 
86 
Змн. Арк. № Документа Підпис Дата  
87 
482 ЧДТУ 262211 – 01 12 01 
 
              </div> 
 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Новий пароль 
                </label> 
                <input 
                  type="password" 
                  value={passwords.next} 
                  onChange={(event) => setPasswords({ ...passwords, next: event.target.value })} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                  placeholder="Введіть новий пароль" 
                /> 
              </div> 
 
              <div> 
                <label className="block text-sm font-medium text-gray-700 mb-2"> 
                  Підтвердження пароля 
                </label> 
                <input 
                  type="password" 
                  value={passwords.confirm} 
                  onChange={(event) => setPasswords({ ...passwords, confirm: event.target.value })} 
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 
focus:ring-blue-500 focus:border-transparent outline-none" 
                  placeholder="Повторіть новий пароль" 
                /> 
              </div> 
 
              <button 
                type="submit" 
                className="px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-
gray-800 transition-colors" 
              > 
                Змінити пароль 
              </button> 
            </form> 
          </div> 
        </div> 
 
        {/* Бічна панель зі статистикою */} 
        <div className="space-y-6"> 
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sticky top-
6"> 
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Моя статистика</h3> 
             
            <div className="space-y-4"> 
              <div className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg"> 
Арк. 
 ЧДТУ 262211.11 ПЗ 
87 
Змн. Арк. № Документа Підпис Дата  
88 
482 ЧДТУ 262211 – 01 12 01 
 
                <p className="text-sm text-gray-600 mb-1">Всього завдань</p> 
                <p className="text-3xl font-bold text-blue-600">{myTasks.length}</p> 
              </div> 
 
              <div className="p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg"> 
                <p className="text-sm text-gray-600 mb-1">Виконано</p> 
                <p className="text-3xl font-bold text-green-600">{completedTasks}</p> 
              </div> 
 
              <div className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg"> 
                <p className="text-sm text-gray-600 mb-1">В роботі</p> 
                <p className="text-3xl font-bold text-purple-600">{inProgressTasks}</p> 
              </div> 
 
              <div className="p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg"> 
                <p className="text-sm text-gray-600 mb-1">Ефективність</p> 
                <p className="text-3xl font-bold text-orange-600"> 
                  {myTasks.length > 0  
                    ? Math.round((completedTasks / myTasks.length) * 100) 
                    : 0}% 
                </p> 
              </div> 
            </div> 
 
            <div className="mt-6 pt-6 border-t border-gray-200"> 
              <h4 className="text-sm font-semibold text-gray-900 mb-3">Останні завдання</h4> 
              <div className="space-y-2"> 
                {myTasks.slice(0, 3).map((task) => ( 
                  <div key={task.id} className="p-3 bg-gray-50 rounded-lg"> 
                    <p className="text-sm font-medium text-gray-900 truncate">{task.title}</p> 
                    <p className="text-xs text-gray-600 mt-1">Дедлайн: {task.deadline}</p> 
                  </div> 
                ))} 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  ); 
} 
 
 
Арк. 
 ЧДТУ 262211.11 ПЗ 
88 
Змн. Арк. № Документа Підпис Дата
Репозиторій ЧДТУ
