🟡 Yellow Card Dashboard

Веб-додаток для відстеження жовтих карток співробітників компанії. Система дозволяє менеджерам видавати жовті картки за порушення, відстежувати статистику та керувати командою.

🚀 Живий сайт

GitHub Pages: https://adminrhs.github.io/Dashboard/
Vercel API: https://dashboard-eight-beta-59.vercel.app/api/update-data

✨ Функції

📊 Статистика порушень - відстеження жовтих карток по співробітниках
📅 Календар порушень - візуалізація порушень по датах
🏆 Рейтинг команди - топ співробітників та статистика
🌙 Темна тема - підтримка світлої та темної теми
💾 Локальне збереження - OPFS для офлайн роботи
🔄 Синхронізація - автоматичне оновлення з GitHub

🏗️ Архітектура

Frontend (GitHub Pages) → Vercel API → GitHub Actions → GitHub Repository

Компоненти:

Frontend: Статичний HTML/JS/CSS сайт
API Layer: Vercel serverless functions
Data Storage: GitHub repository (data.json)
Automation: GitHub Actions workflows
Hosting: GitHub Pages

📁 Структура проекту

Dashboard/
├── index.html                 # Основний файл додатку
├── data.json                  # База даних співробітників
├── vercel.json               # Конфігурація Vercel
├── api/
│   └── update-data.js        # API endpoint для оновлення даних
├── .github/
│   └── workflows/
│       ├── update-data-dispatch.yml  # Workflow для оновлення data.json
│       └── sync-data-json.yml        # Workflow для синхронізації
├── logo_hor_light.png        # Логотип (світла тема)
├── logo_hor_dark.png         # Логотип (темна тема)
├── Logo.svg                  # Основний логотип
├── Logo_dark.svg            # Логотип для темної теми
└── discord_2.png            # Discord іконка

🛠️ Технології

Frontend

HTML5 - структура
CSS3 - стилізація
JavaScript (ES6+) - логіка
Tailwind CSS - CSS фреймворк
Lucide Icons - іконки

Backend

Vercel Functions - serverless API
Node.js - runtime
GitHub API - інтеграція з GitHub

DevOps

GitHub Actions - автоматизація
GitHub Pages - хостинг
Vercel - API hosting

📊 Структура даних

Employee Object

{
  "name": "Ім'я Прізвище",
  "role": "посада",
  "dept": "відділ",
  "email": "email@example.com",
  "discordId": "username#1234",
  "violations": [
    {
      "date": "2025-01-15",
      "type": "Documentation|Workflow|Communication",
      "comment": "опис порушення"
    }
  ],
  "joinDate": "2025-01-01"
}

Типи порушень:

Documentation - проблеми з документацією
Workflow - порушення робочих процесів
Communication - проблеми з комунікацією

🚀 Швидкий старт

1. Клонування репозиторію

git clone https://github.com/AdminRHS/Dashboard.git
cd Dashboard

2. Встановлення залежностей

npm install

3. Локальний запуск (Vite)

npm run dev
# Відкрити http://localhost:5173

4. Збірка для продакшену

npm run build
# Для перевірки
npm run preview

📚 Документація

DOCUMENTATION.md - Повна документація проекту
ARCHITECTURE.md - Архітектура системи
API_REFERENCE.md - API документація
DEPLOYMENT_GUIDE.md - Гайд по деплою
TROUBLESHOOTING.md - Вирішення проблем

🔧 Налаштування

Environment Variables (Vercel)

GITHUB_TOKEN=ghp_xxxxxxxxxxxx
GITHUB_OWNER=AdminRHS
GITHUB_REPO=Dashboard

GitHub Token

Тип: Personal Access Token (classic)
Права: repo (повний доступ до репозиторіїв)
Зберігання: Vercel Environment Variables

🔄 Workflow

Видача жовтої картки

Користувач натискає "Give Yellow Card"
Заповнює форму (співробітник, тип порушення, коментар)
JavaScript збирає дані
Відправляє POST запит на Vercel API
Vercel API валідує дані
Запускає GitHub Actions workflow
Workflow оновлює data.json
GitHub Pages автоматично оновлюється

Завантаження даних

GitHub Pages (data.json?v=timestamp) - основний джерело
OPFS (локальне збереження) - fallback

🚨 Troubleshooting

Поширені проблеми:

API не працює - перевірити URL та токен
Дані не оновлюються - жорстке оновлення (Ctrl+Shift+R)
GitHub Actions не запускається - перевірити права токена
Локальні дані не синхронізуються - очистити OPFS

Дивіться TROUBLESHOOTING.md для детальних рішень.

📈 Моніторинг

Vercel Logs

Functions → update-data → Logs
Показує всі запити до API

GitHub Actions Logs

Actions → Update data.json via API
Показує виконання workflow

Browser Console

JavaScript помилки
API запити (Network tab)

🔐 Безпека

GitHub Token - зберігається в Vercel Environment Variables
HTTPS - всі з'єднання зашифровані
Input Validation - JSON schema validation
Rate Limiting - Vercel + GitHub limits

🤝 Внесок

Fork проекту
Створити feature branch (git checkout -b feature/AmazingFeature)
Commit зміни (git commit -m 'Add some AmazingFeature')
Push в branch (git push origin feature/AmazingFeature)
Відкрити Pull Request

📝 Ліцензія

Цей проект розповсюджується під ліцензією MIT. Дивіться LICENSE для деталей.

👨‍💻 Автор

Matviy Zasyadko

GitHub: @MatviyZasyadko

🙏 Подяки

Vercel - за безкоштовний хостинг API
GitHub - за Pages та Actions
Tailwind CSS - за CSS фреймворк
Lucide - за іконки

Версія: 1.0.0
Останнє оновлення: 2025-01-15

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
api		api
node_modules		node_modules
public		public
src		src
.DS_Store		.DS_Store
.dockerignore		.dockerignore
.env		.env
.env.example		.env.example
.env.local		.env.local
.gitignore		.gitignore
Dockerfile		Dockerfile
Logo.svg		Logo.svg
Logo_dark.svg		Logo_dark.svg
README.md		README.md
data.json		data.json
discord_2.png		discord_2.png
docker-compose.yml		docker-compose.yml
index.html		index.html
init.sql		init.sql
logo_hor_dark.png		logo_hor_dark.png
logo_hor_light.png		logo_hor_light.png
package-lock.json		package-lock.json
package.json		package.json
server.js		server.js
sqript.md		sqript.md
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation