Feature: Add User Statistics and Information to Settings Page

[IgorShadurin]

Overview

Enhance the /settings page to display comprehensive user information and statistics from the database, providing users with better visibility of their account details and platform usage.

Required Information to Display

User Details Section

• Blockchain Address
• Database User ID
• Account Creation Date

Usage Statistics

• Total Apps Created
• Total Templates Created
• Last Activity Date

UI/UX Requirements

Layout

1. User Identity Card

   ┌─────────────────────────────┐
   │ User Details                │
   │ ────────────────────────    │
   │ Address: 0x1234...5678      │
   │ User ID: #123456            │
   │ Member since: Jan 1, 2024   │
   └─────────────────────────────┘
   

2. Statistics Dashboard

   ┌─────────────┐ ┌─────────────┐
   │   Apps      │ │  Templates  │
   │    12       │ │     5       │
   └─────────────┘ └─────────────┘
   

Design Requirements

• Clean, minimal design
• Easy to read typography
• Copy button next to address and ID
• Proper spacing between sections
• Mobile-responsive layout
• Loading states for data fetching

Technical Implementation

Backend Tasks

• Create API endpoint to fetch user statistics
• Implement database queries for:
  • User details
  • Apps count
  • Templates count
  • Activity timestamps

Frontend Tasks

• Create new components:
  • UserDetailsCard
  • StatisticsPanel
• Implement data fetching and state management
• Add loading states
• Implement copy-to-clipboard functionality
• Add error handling for failed data fetches

Database Schema Updates (if needed)

• Verify all required fields exist
• Add any missing tracking fields
• Create necessary indexes for performance

API Endpoint Specification

GET /api/user/statistics

interface UserStatistics {
  user: {
    address: string;
    userId: string;
    createdAt: string;
  };
  statistics: {
    totalApps: number;
    totalTemplates: number;
    lastActive: string;
  };
}

Error Handling

• Handle cases when database is unavailable
• Show appropriate error messages
• Implement retry mechanism for failed requests
• Graceful degradation if certain stats are unavailable

Mobile Considerations

• Responsive layout for all screen sizes
• Touch-friendly copy buttons
• Appropriate font sizes for mobile
• Optimized spacing for smaller screens

Testing Requirements

• Unit tests for new components
• API endpoint tests
• Database query tests
• Mobile responsiveness tests
• Copy functionality tests
• Error handling tests

Accessibility Requirements

• Proper ARIA labels
• Keyboard navigation support
• Screen reader friendly
• Sufficient color contrast
• Clear focus indicators

Performance Considerations

• Optimize database queries
• Implement caching where appropriate
• Lazy loading of components
• Minimize unnecessary re-renders

Documentation

• Update API documentation
• Add new component documentation
• Update database schema documentation
• Add usage examples

Mockup

/settings
┌────────────────────────────────────────┐
│ User Details                           │
├────────────────────────────────────────┤
│ Address: 0x1234...5678   [Copy]       │
│ User ID: #123456         [Copy]       │
│ Member since: January 1, 2024          │
├────────────────────────────────────────┤
│ Statistics                             │
├────────────────────────────────────────┤
│ ┌─────────────┐  ┌─────────────────┐  │
│ │ Total Apps  │  │ Total Templates │  │
│ │     12      │  │        5        │  │
│ └─────────────┘  └─────────────────┘  │
│                                        │
│ Last Activity: March 10, 2024         │
└────────────────────────────────────────┘

Success Criteria

• All user information is correctly displayed
• Statistics are accurate and up-to-date
• Copy functionality works as expected
• Mobile layout is functional and attractive
• All tests pass
• Performance metrics meet targets
• Accessibility requirements are met

Related Issues

• None

Timeline

• Backend implementation: 2-3 days
• Frontend implementation: 2-3 days
• Testing and refinement: 1-2 days
• Documentation: 1 day