Overview

HVC Web is a modern web application built with Svelte and various supporting technologies. It's designed to provide a robust and interactive user interface with features like calendar management, data tables, and real-time notifications.

Technology Stack

Core Technologies

• Frontend Framework: Svelte 3.x
• Build Tool: Vite
• Routing: Routify 2.x
• Styling: Tailwind CSS with DaisyUI components
• TypeScript Support: Enabled

Key Dependencies

UI Components:

• Carbon Components Svelte
• DaisyUI
• TW Elements
• Various Svelte-specific UI libraries and components

Data Management:

• URQL for GraphQL operations
• Felte for form management
• Yup for validation

Calendar & Date Handling:

• Event Calendar (@event-calendar/core)
• Dayjs for date manipulation
• Flatpickr for date picking

Notifications & Alerts:

• PNotify for notifications
• SignalR for real-time communications

Project Structure

src/
├── actions/      # Custom Svelte actions
├── assets/       # Static assets
├── atoms/        # Atomic components
├── cai/          # Custom related components
├── charts/       # Chart components and configurations
├── cmps/         # Common components
├── components/   # Main component library
├── data/         # Data management and API interfaces
├── forms/        # Form components and handlers
├── lib/          # Utility functions and shared libraries
├── model/        # Data models and types
├── pages/        # Page components and routing
└── stores/       # Svelte stores for state management

Key Features

Routing

• Uses Routify for file-system based routing
• Configuration in .routify/ directory
• Dynamic route handling with nested layouts

State Management

• Utilizes Svelte stores for global state
• Located in src/stores/ directory
• Supports reactive state updates

Component Architecture

• Modular component structure
• Atomic design principles
• Reusable UI components in src/components/

Styling

• Tailwind CSS for utility-first styling
• DaisyUI for pre-built components
• Custom CSS in src/global.css
• PostCSS configuration for optimization

API Integration

• GraphQL support via URQL
• Real-time updates with SignalR
• Multi-part file upload support