Фіскальний календар України 🇺🇦

Сучасний веб-додаток з календарем, що показує фіскальні тижні за стандартами ISO 8601 та GfK, з усіма українськими святами. Ідеальний інструмент для бізнесу, планування та аналітики.

Основні можливості

Календарні методології

📊 ISO 8601 - міжнародний стандарт (тиждень починається з понеділка, перший тиждень містить четвер)
📈 GfK Period Mapping - методологія для роздрібної торгівлі та маркетингу (4-5 тижнів на місяць, патерн 5-4-4 по кварталах)
🔄 Швидке перемикання між режимами одним кліком

Свята та події

🇺🇦 Національні свята - День Незалежності, Новий рік, День Конституції
⛪ Релігійні свята - Великдень (авто-розрахунок за алгоритмом Гауса), Трійця, Різдво
💝 Міжнародні свята - 8 Березня, День Валентина, День матері
🛍️ Комерційні події - Чорна п'ятниця, Cyber Monday (авто-розрахунок)

Зручність використання

🎨 Кольорове кодування - кожен тип свята має унікальний градієнтний колір та лінійний індикатор
📱 Адаптивний дизайн - ідеально виглядає на телефонах, планшетах та комп'ютерах
🔝 Scroll-to-top - кнопка з круговим індикатором прогресу
⏮️⏭️ Навігація роками - легкий перехід між роками з дублюванням в header при прокрутці
💡 Підказки - наведіть на день зі святом, щоб побачити назву
🌙 Система тем - світла, темна або автоматична (слідує за системними налаштуваннями)
📊 Google Analytics - відстеження використання (тільки в production)

SEO та PWA

🔍 Повна SEO-оптимізація - structured data, meta tags, sitemap
📲 PWA підтримка - можна встановити як додаток
⚡ Швидкість - оптимізований білд з Next.js standalone output

Технології

Next.js 16 з App Router та Turbopack
React 19 з TypeScript
Tailwind CSS v4 для стилізації
shadcn/ui - сучасні UI компоненти (New York style)
Zustand з persist middleware - управління станом (календар, теми)
date-fns v4 - робота з датами (locale: uk)
TanStack Query v5 - state management
Lucide React - іконки
@next/third-parties - Google Analytics інтеграція

Запуск локально

# Встановити залежності
npm install

# Запустити dev server з Turbopack
npm run dev

# Відкрити http://localhost:3000

Білд для продакшн

# Створити production build
npm run build

# Запустити production server
npm start

# Лінтинг коду
npm run lint

Додавання компонентів shadcn/ui

# Додати новий компонент з бібліотеки shadcn/ui
npx shadcn@latest add [component-name]

# Наприклад:
npx shadcn@latest add dialog
npx shadcn@latest add select

SEO та PWA

Проект включає повну підтримку SEO та PWA:

Автоматично генеровані файли:

✅ Favicon (app/icon.svg) - SVG іконка календаря
✅ robots.txt (app/robots.ts) - правила для пошукових роботів
✅ sitemap.xml (app/sitemap.ts) - карта сайту з усіма сторінками (/, /privacy, /terms)
✅ manifest.json (app/manifest.ts) - PWA manifest
✅ Open Graph image (app/opengraph-image.tsx) - динамічне зображення з роком для соціальних мереж
✅ Viewport (app/viewport.ts) - налаштування viewport з theme colors

Генерація PWA іконок:

# Автоматично згенерувати icon-192.png та icon-512.png з app/icon.svg
npm run generate:icons

Іконки автоматично створюються в public/. Для зміни дизайну відредагуйте app/icon.svg та запустіть команду знову.

Конфігурація для production:

Створіть .env.local або встановіть змінні середовища:

# Обов'язково для правильної роботи SEO
NEXT_PUBLIC_SITE_URL=https://your-domain.com

# Опціонально - для Google Analytics (тільки в production)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

Деплой через Coolify

1. Підготовка репозиторію

Створіть git репозиторій та запуште код:

git init
git add .
git commit -m "Initial commit"
git remote add origin YOUR_REPO_URL
git push -u origin main

2. Налаштування в Coolify

Створіть новий проект в Coolify Dashboard
Підключіть Git репозиторій
Виберіть Build Pack: Dockerfile
Налаштування:
- Build Context: /
- Dockerfile Location: ./Dockerfile
- Port: 3000

3. Environment Variables

Обов'язкові змінні для production:

В Coolify Dashboard → Settings → Environment Variables додайте:

# Production URL для SEO (sitemap, robots.txt, Open Graph)
NEXT_PUBLIC_SITE_URL=https://your-domain.com

# Google Analytics Measurement ID (опціонально)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

# Node environment (автоматично встановлюється)
NODE_ENV=production

Примітка:

Без NEXT_PUBLIC_SITE_URL буде використано http://localhost:3000 як fallback
Без NEXT_PUBLIC_GA_ID Analytics не буде завантажуватись

4. Деплой

Натисніть Deploy і Coolify автоматично:

Склонує репозиторій
Встановить залежності (включаючи sharp для генерації іконок)
Згенерує PWA іконки з app/icon.svg
Збудує Next.js з standalone output
Створить оптимізований Docker image
Запустить контейнер на порту 3000
Налаштує домен

5. Після деплою

Переконайтеся, що:

✅ Сайт доступний за вашим доменом
✅ PWA іконки завантажуються (/icon-192.png, /icon-512.png)
✅ Manifest доступний (/manifest.webmanifest)
✅ Sitemap генерується (/sitemap.xml)
✅ Robots.txt доступний (/robots.txt)
✅ Open Graph зображення генерується (/opengraph-image)

Тестування Docker білду локально

Перед деплоєм на Coolify, рекомендується протестувати білд локально:

# Збудувати Docker image
docker build -t calendar-app .

# Запустити контейнер
docker run -p 3000:3000 -e NEXT_PUBLIC_SITE_URL=http://localhost:3000 calendar-app

# Перевірити в браузері
# http://localhost:3000

Перевірте:

Білд проходить без помилок
PWA іконки генеруються (/icon-192.png, /icon-512.png)
Календар відображається правильно
Toggle між ISO та GfK працює
Свята відображаються

Dockerfile

Проект використовує multi-stage Dockerfile для оптимізації:

Stage 1: Встановлення залежностей
Stage 2: Білд Next.js з standalone output (включає генерацію іконок)
Stage 3: Production image з мінімальним розміром

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

calendar/
├── app/                                # Next.js App Router
│   ├── layout.tsx                     # Головний layout з SEO, structured data, Analytics
│   ├── page.tsx                       # Головна сторінка
│   ├── providers.tsx                  # TanStack Query + ThemeProvider
│   ├── globals.css                    # Tailwind CSS v4
│   ├── icon.svg                       # SVG іконка (favicon)
│   ├── opengraph-image.tsx            # Динамічне OG зображення з роком
│   ├── manifest.ts                    # PWA manifest
│   ├── viewport.ts                    # Viewport + theme colors
│   ├── robots.ts                      # Правила для пошукових ботів
│   ├── sitemap.ts                     # XML sitemap
│   ├── privacy/page.tsx               # Privacy Policy
│   └── terms/page.tsx                 # Terms of Service
│
├── components/
│   ├── calendar/                      # Компоненти календаря
│   │   ├── year-calendar.tsx         # Головний компонент з IntersectionObserver
│   │   ├── year-navigation-controls.tsx  # Навігація з Analytics tracking
│   │   ├── month-calendar.tsx        # Карточка місяця
│   │   ├── week-row.tsx              # Рядок тижня
│   │   └── day-cell.tsx              # Клітинка дня з Tooltip
│   │
│   ├── layout/                        # Layout компоненти
│   │   ├── header.tsx                # Header з динамічною навігацією
│   │   └── footer.tsx                # Footer з посиланнями
│   │
│   ├── ui/                            # shadcn/ui компоненти (New York)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── badge.tsx
│   │   ├── tooltip.tsx
│   │   ├── accordion.tsx
│   │   ├── dropdown-menu.tsx
│   │   ├── switch.tsx
│   │   └── label.tsx
│   │
│   ├── analytics.tsx                  # Google Analytics wrapper
│   ├── theme-provider.tsx             # Система тем з matchMedia
│   ├── theme-toggle.tsx               # Dropdown menu перемикач
│   ├── seo-content.tsx                # SEO-контент з FAQ
│   └── scroll-to-top.tsx              # Кнопка з круговим прогресом
│
├── lib/
│   ├── stores/                        # Zustand з persist
│   │   ├── calendar-store.ts         # mode, year, navigationVisible
│   │   └── theme-store.ts            # theme preference
│   │
│   ├── constants/
│   │   └── holiday-styles.ts         # Градієнти та індикатори свят
│   │
│   ├── utils.ts                      # cn() утиліта
│   ├── calendar.ts                   # ISO 8601 логіка
│   ├── gfk-calendar.ts               # GfK Period Mapping
│   ├── holidays.ts                   # Обчислення свят (Gauss algorithm)
│   ├── analytics.ts                  # Type-safe event tracking
│   └── env.ts                        # Environment variables validation
│
├── public/                            # Статичні файли
│   ├── icon-192.png                  # PWA іконка (auto-generated)
│   └── icon-512.png                  # PWA іконка (auto-generated)
│
├── scripts/
│   └── generate-icons.mjs            # PWA icons generator (Sharp)
│
├── Dockerfile                         # Multi-stage Docker build
├── components.json                    # shadcn/ui config (New York)
├── next.config.ts                     # standalone output
└── tailwind.config.ts                 # Tailwind CSS v4

Методології обліку тижнів

ISO 8601 (за замовчуванням)

Міжнародний стандарт для нумерації тижнів:

Тиждень починається з понеділка
Перший тиждень року містить перший четвер року
Кожен тиждень належить до року, в якому більшість його днів
Нумерація: 1-52 (іноді 53)

GfK Period Mapping

Методологія для маркетингових досліджень та роздрібної торгівлі:

Місяці мають фіксовану кількість тижнів: 4 або 5
Розподіл по кварталах: 5-4-4, 4-5-4, 4-4-5
Зручно для порівняння продажів та аналітики
Використовується компаніями GfK, Nielsen та іншими

Приклад розподілу на 2024 рік:

Q1: Січень (5т), Лютий (4т), Березень (4т)
Q2: Квітень (4т), Травень (5т), Червень (4т)
Q3: Липень (4т), Серпень (4т), Вересень (5т)
Q4: Жовтень (5т), Листопад (4т), Грудень (4т)

Свята

Національні свята України

Новий рік (1 січня)
День праці (1 травня)
День пам'яті та перемоги над нацизмом у Другій світовій війні (8 травня)
День Конституції України (28 червня)
День Української Державності (15 липня)
День незалежності України (24 серпня)
День захисників і захисниць України (1 жовтня)

Релігійні свята

Великдень (плаваюча дата)
Трійця (плаваюча дата)
Різдво Христове (25 грудня)

Міжнародні свята

День Святого Валентина (14 лютого)
Міжнародний жіночий день (8 березня)

Комерційні свята

Чорна п'ятниця (день після 4-го четверга листопада - День подяки в США)
Кіберпонеділок (через 3 дні після Чорної п'ятниці)

Обчислення плаваючих дат

Великдень — розраховується за алгоритмом Гауса
Трійця — 49 днів після Великодня
Чорна п'ятниця — автоматично визначається для кожного року
Кіберпонеділок — автоматично визначається на основі Чорної п'ятниці

Ліцензія

Цей проект ліцензовано під Apache License 2.0. Дивіться LICENSE для детальної інформації.

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
app		app
components		components
lib		lib
public		public
scripts		scripts
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

License

starychenko/calendar

Folders and files

Latest commit

History

Repository files navigation

Фіскальний календар України 🇺🇦

Основні можливості

Календарні методології

Свята та події

Зручність використання

SEO та PWA

Технології

Запуск локально

Білд для продакшн

Додавання компонентів shadcn/ui

SEO та PWA

Автоматично генеровані файли:

Генерація PWA іконок:

Конфігурація для production:

Деплой через Coolify

1. Підготовка репозиторію

2. Налаштування в Coolify

3. Environment Variables

4. Деплой

5. Після деплою

Тестування Docker білду локально

Dockerfile

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

Методології обліку тижнів

ISO 8601 (за замовчуванням)

GfK Period Mapping

Свята

Національні свята України

Релігійні свята

Міжнародні свята

Комерційні свята

Обчислення плаваючих дат

Ліцензія

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Contributors 2

Uh oh!

Languages

Packages