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

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

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

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

• 🔍 Повна 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
npx shadcn@latest add [component-name]
# Наприклад:
npx shadcn@latest add dialog
npx shadcn@latest add select

Проект включає повну підтримку 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

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

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

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

# Обов'язково для правильної роботи SEO
NEXT_PUBLIC_SITE_URL=https://your-domain.com
# Опціонально - для Google Analytics (тільки в production)
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

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

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

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

Обов'язкові змінні для 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 не буде завантажуватись

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

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

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

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

Перед деплоєм на 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 працює
• Свята відображаються

Проект використовує 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

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

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

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

• Місяці мають фіксовану кількість тижнів: 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 для детальної інформації.