Feat/129/Implement Timeline Management UI for Chronology Block

[LausDio]

Base branch: dev

GitHub

• Closes #129

Code reviewers

• @Ammoniy
• @LekhivOleh
• @shribakb1
• @VolodymyrShapoval

Description

This PR implements the admin interface for managing chronology/timeline events in the Streetcode application. Admins can now add, edit, and delete historical timeline items with various date formats and contextual information.

New Features

• ✅ ChronologyPage Component - Main admin page for timeline management

  • Displays all timeline events in a sortable table
  • Add new events via "+" button
  • Edit existing events via pencil icon
  • Delete events via trash icon with confirmation dialog
  • Pagination support (10 items per page)

• ✅ ChronologyModal Component - Modal for creating/editing timeline events

  • Form with title, date, context, and description fields
  • Character counters for all text fields (Title: 28, Description: 400)
  • Multiple date format support:
    • Year only (e.g., "1891")
    • Month + Year (e.g., "1880, серпень")
    • Season + Year (e.g., "1902, осінь")
    • Full date (e.g., "1906, 2 серпня")
  • Context management with dropdown and custom input
  • Form validation with all required fields

Updated Files

• AdminBar.component.tsx - Added "Хронологія" navigation link
• frontend-routes.constants.ts - Added chronology route
• Routes.tsx - Registered chronology admin route
• timeline-store.ts - Added fetchAll() method for timeline items

New Files

• ChronologyPage.component.tsx
• ChronologyPage.styles.scss
• ChronologyModal.component.tsx
• ChronologyModal.styles.scss

✅ Acceptance Criteria Met

• AC 1.1: Modal window opens on "+" button with all required fields
• AC 1.2: Character counter displays remaining symbols (Title: 28, Description: 400)
• AC 1.3: Title limited to 28 characters with validation
• AC 1.4: Context dropdown with custom input support
  • Unique title validation
  • Max 50 characters
  • No numerals allowed
  • No special characters (except space, hyphen, apostrophe)
• AC 2: Edit functionality via pencil icon
• AC 3: Delete functionality via trash icon with confirmation
• AC 4: Events displayed in table format with all information
• Date Formats: All 4 date formats supported (Year, Season, Month, Full Date)

Technical Details

Tech Stack:

• React with TypeScript
• MobX for state management
• Ant Design components
• Day.js for date handling
• SCSS for styling

Architecture:

• Follows existing admin page patterns
• Uses MobX stores (timelineItemStore, historicalContextStore)
• Integrates with existing API layer

✅ Checklist

• CI passed
• PR is reviewed manually again (to make sure you have 100% ready code)
• All reviewers agreed to merge the PR
• I've checked new feature as logged in and logged out user if needed
• PR meets all conventions

[sonarqubecloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-tree-07bdde603-8.westeurope.4.azurestaticapps.net