Therapist Interface for Exercise Configuration and Progress Analytics

Part of the Jinkobot Project - Therapeutic Robot for Children with Autism Spectrum Disorder (ASD)

This web application provides therapists with an intuitive interface to configure therapeutic exercises, monitor therapy sessions in real-time, and analyze children's progress through detailed analytics and visualizations. Built with Next.js and Firebase, it serves as the command center for the Jinkobot therapeutic robot system.

The web application enables therapists to:

• Prepare personalized therapy sessions with customized exercises and difficulty levels
• Monitor real-time progress during active therapy sessions
• Analyze historical data through graphs and statistics
• Track individual patient progress over multiple sessions
• Configure robot behavior for different therapeutic scenarios

• Next.js: React framework for server-side rendering and optimal performance
• TypeScript: Type-safe development for reliability
• React: Component-based UI architecture
• Styled Components: CSS-in-JS for modular, maintainable styling

• Firebase Realtime Database: Real-time data synchronization with the robot
• Firebase Authentication: Secure therapist login and session management
• Firebase Hosting: Fast, secure web hosting

• Firebase Realtime Database: Bi-directional communication between web app and ROS system
• WebSocket-like sync: Instant updates during therapy sessions

• Patient Setup: Register patient information and preferences
• Exercise Selection: Choose between Emotion and Orientation exercises
• Difficulty Adjustment: Set appropriate challenge levels for each child
• Custom Questions: Configure specific emotion recognition questions from the database

• Live Session View: Watch therapy progress in real-time
• Current Exercise Status: See which question/task is active
• Response Tracking: Monitor correct/incorrect answers as they happen
• Robot Status: Check robot state and connectivity

• Session History: Complete record of all therapy sessions
• Progress Graphs: Visual representation of improvement over time
• Performance Metrics:
  • Time spent on each task
  • Number of correct answers
  • Number of unanswered questions
  • Success rate trends
• Comparative Analysis: Compare performance across sessions

• Interactive Charts: Built with charting libraries for clear insights
• Customizable Time Ranges: Filter data by date, week, or month
• Export Capabilities: Generate reports for clinical records

jinkobot/
├── components/     # React components (UI elements, charts, forms)
├── pages/          # Next.js pages (routes and views)
├── firebase/       # Firebase configuration and services
├── models/         # TypeScript interfaces and data models
├── services/       # Business logic and API calls
├── Hooks/          # Custom React hooks
├── styles/         # Global styles and theme configuration
├── public/         # Static assets (images, icons)
└── package.json    # Dependencies and scripts

• Next.js: ^12.x
• React: ^18.x
• TypeScript: ^4.x
• Firebase: ^9.x
• Styled Components: ^5.x

# Clone the repository
git clone https://github.com/DianaIT/jinkobot.git

# Install dependencies
npm install

# Configure Firebase
# Add your Firebase configuration to firebase/config.js

npm run dev
# Open http://localhost:3000

npm run build
npm start

1. Therapist Configuration: Therapist sets up session parameters in web app
2. Firebase Sync: Configuration data is written to Firebase Realtime Database
3. ROS Listener: Robot's ROS system listens for configuration changes
4. Session Execution: Robot executes exercises based on configuration
5. Real-time Updates: Robot writes progress data back to Firebase
6. Live Dashboard: Web app displays updates instantly

interface Session {
  patientId: string;
  patientName: string;
  emotionQuestions: number;
  orientationDifficulty: 'easy' | 'medium';
  timestamp: Date;
  results: {
    correctAnswers: number;
    incorrectAnswers: number;
    unansweredQuestions: number;
    timePerQuestion: number[];
  };
}

Web App → Firebase → ROS System → Robot Actions
                  ↓
Robot Results → Firebase → Web App Display

• Jinkobot Main: Core ROS system and state machine
• Emotion Exercise: Computer vision module
• Orientation Exercise: Autonomous navigation module

This web application was developed as part of a Bachelor's thesis project (Honors Distinction) at Universitat Politècnica de València for the Interactive Technologies program. It demonstrates full-stack development skills with real-time data synchronization and integration with robotics systems.

• Firebase Authentication for secure therapist access
• Database rules to protect patient data
• Session-based access control
• HIPAA-compliant data handling considerations

Diana Hernández Soler

• GitHub: @dianait
• LinkedIn: linkedin.com/in/dianait
• Blog: dianait.blog

This project was developed for academic purposes as part of the Jinkobot therapeutic robot system.

For more information about the complete Jinkobot system, visit the main repository.