​

CicloVital Features

​

AI-Powered Chatbot

​

Key Capabilities

• Real-time Messaging: WebSocket-based communication using STOMP and SockJS for instant responses
• Chat Management: Create, view, and manage multiple chat sessions
• Contextual Support: The AI analyzes your daily records to provide personalized insights
• User-Friendly Interface: Clean, intuitive chat interface built with Ionic React components

​

Technical Implementation

// Chat context manages conversations
import ChatContext from '../../contexts/ChatContext';

const { currentChat } = useContext(ChatContext);

​

Daily Habit Tracking

​

Tracked Metrics

​

Recording Interface

• Range Sliders: Interactive sliders for energy, mood, and motivation (0-10 scale)
• Numeric Inputs: Precise entry for sleep hours and exercise duration
• Text Area: Free-form comments to capture additional context
• Date Display: Automatic date stamping for each record
• Validation: Real-time validation ensures data stays within acceptable ranges

// Daily record structure
const form = {
  date: today(),
  horasSueno: 8,        // Sleep hours (0-24)
  energia: 5,           // Energy level (0-10)
  estadoAnimo: 5,       // Mood (0-10)
  motivacion: 5,        // Motivation (0-10)
  ejercicio: 0,         // Exercise hours (0-6)
  comentario: ""        // Optional comment
};

​

Interactive Calendar

​

Calendar Features

• Month View: See all your recorded days at a glance
• Event Display: Each recorded day appears as an event on the calendar
• Click to View: Click any day to view detailed information about that record
• Edit & Delete: Modify or remove records directly from the calendar view
• Visual Organization: Quickly identify patterns and gaps in your tracking

​

Record Management

• View Details: See all metrics for the selected day
• Edit Record: Update any values using the same intuitive form
• Delete Record: Remove records you no longer need
• Add Comments: Include or update notes for additional context

// Calendar displays formatted daily records
const eventosFormateados = registros.map(reg => ({
  id: reg.id,
  title: 'Registro Diarios',
  date: reg.date,
  extendedProps: {
    horasSueno, ejercicio, energia, 
    estadoAnimo, motivacion, comentario
  }
}));

​

Statistics Dashboard

​

Dashboard Components

​

1. Date Range Selection

• Flexible Filtering: Choose custom start and end dates for analysis
• Date Validation: Ensures start date is before end date
• Default Period: Initially shows the last 7 days of data

​

2. Key Performance Indicators (KPIs)

​

3. Mood Line Chart

• Trend Visualization: See how your mood changes over time
• Interactive: Powered by Recharts for smooth, responsive charts
• Time Series: X-axis shows dates, Y-axis shows mood values

​

4. Habits Radar Chart

• Multi-Dimensional View: Visualize all habits simultaneously
• Pattern Recognition: Identify which areas are strong or need attention
• Balanced Overview: See how different wellness metrics relate to each other

​

5. AI-Generated Insights

• Summary Card: Receive AI-generated summaries of your wellness patterns
• Contextual Analysis: Insights based on your specific data for the selected period
• Actionable Recommendations: Get suggestions for improvement

// Statistics response structure
const statsResponse = {
  kpis: {
    promedioAnimo: 0.0,
    promedioEnergia: 0.0,
    promedioEjercicio: 0.0,
    promedioSueno: 0.0,
    promedioMotivacion: 0.0,
    diasConstantes: 0
  },
  moodTrend: [],
  summary: "AI-generated insights..."
};

​

User Authentication

​

Authentication Features

• User Registration: Create accounts with email and password
• Secure Login: Password-protected access to your data
• Session Management: Persistent sessions using local storage
• Auto-Login: Automatic login after successful registration
• Logout: Secure session termination

​

User Context

// User authentication hook
const { user, setUser } = useContext(UserContext);
const { registerUser, login, logout } = useAuth();

​

Mobile App Support

​

Mobile Features

• Cross-Platform: Deploy to Android devices as a native app
• Ionic Framework: Native-feeling UI components optimized for mobile
• Responsive Design: Adapts seamlessly to different screen sizes
• Touch Optimized: Gestures and interactions designed for mobile use

​

Configuration

{
  "appId": "com.ciclovital.app",
  "appName": "CicloVital",
  "webDir": "dist",
  "bundledWebRuntime": false
}

​

Additional Features

​

Theme Support

​

Side Menu Navigation

• Quick Access: Side menu with easy navigation to all features
• Chat History: View and manage all your chat sessions
• Settings: Access user settings and preferences

​

Form Validation

• Real-time Validation: Instant feedback on form inputs
• Range Enforcement: Ensures all values stay within valid ranges
• Error Messages: Clear, helpful error messages when validation fails

​

Local Storage Integration

• Persistent Data: User preferences and session data stored locally
• Fast Loading: Quick access to frequently used data
• Offline Capability: Core features work even without network connectivity

​

Feature Integration

1. Track your daily habits using the recording form
2. View your records in the interactive calendar
3. Analyze your data through the statistics dashboard
4. Discuss your patterns with the AI chatbot
5. Improve based on insights and recommendations