robinhood/docs/FRONTEND_INTEGRATION_GUIDE.md

Frontend Integration Guide - Phase 1 Daily Helper

This guide explains how to integrate Phase 1 Daily Helper components into your React application.

Quick Start

1. Import Components

import NotificationCenter from './components/NotificationCenter'
import UserProfileSetup from './components/UserProfileSetup'
import HabitTracker from './components/HabitTracker'
import DailyChecklistPanel from './components/DailyChecklistPanel'

2. Add Notification Center to Header

The NotificationCenter should be displayed in your main header/navbar:

<header>
  <h1>Trading Dashboard</h1>
  <NotificationCenter />  {/* Bell icon with unread count */}
</header>

3. Create Daily Helper Tab

Add a new tab to your application that displays the daily helper components:

{activeTab === 'Daily Helper' && (
  <div style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))' }}>
    <div>
      <button onClick={() => setShowProfileSetup(true)}>
        ⚙️ Setup Profile
      </button>
      <DailyChecklistPanel checklistType="morning" />
    </div>
    <div>
      <HabitTracker />
    </div>
  </div>
)}

{showProfileSetup && (
  <UserProfileSetup
    onClose={() => setShowProfileSetup(false)}
    onSaved={() => {
      // Handle successful profile save
    }}
  />
)}

Component Details

NotificationCenter

Location: Top-right of your header

Features:

• Bell icon with unread badge
• Dropdown notification panel
• Auto-refreshes every 30 seconds
• Mark as read/unread
• Delete notifications

Props:

• None (uses API directly)

Example:

<NotificationCenter />

UserProfileSetup

Location: Modal dialog

Features:

• Complete user profile configuration
• Timezone selection
• Trading style selection
• Risk tolerance configuration
• Notification preferences
• Email and phone settings

Props:

interface UserProfileSetupProps {
  onClose: () => void
  onSaved?: (profile: UserProfile) => void
}

Example:

const [showSetup, setShowSetup] = useState(false)

{showSetup && (
  <UserProfileSetup
    onClose={() => setShowSetup(false)}
    onSaved={(profile) => console.log('Profile saved:', profile)}
  />
)}

DailyChecklistPanel

Location: Main content area

Features:

• Interactive checklist with toggleable items
• Completion percentage progress bar
• Add/remove items
• Notes section
• Default templates for morning/active/evening

Props:

interface DailyChecklistPanelProps {
  checklistType?: 'morning' | 'active_trading' | 'evening' | 'all'
}

Example:

<DailyChecklistPanel checklistType="morning" />
<DailyChecklistPanel checklistType="evening" />
<DailyChecklistPanel checklistType="active_trading" />

HabitTracker

Location: Main content area

Features:

• Create and manage habits
• Streak counter with 🔥 emojis
• Completion logging
• Statistics display
• Motivational messages

Props:

• None (uses API directly)

Example:

<HabitTracker />

API Endpoints Used

All components communicate with these API endpoints:

User Profile

POST   /api/daily-helper/profile
GET    /api/daily-helper/profile
PUT    /api/daily-helper/profile
DELETE /api/daily-helper/profile

Notifications

POST   /api/daily-helper/notifications
GET    /api/daily-helper/notifications
GET    /api/daily-helper/notifications/{id}
PUT    /api/daily-helper/notifications/{id}/read
POST   /api/daily-helper/notifications/mark-all-read
DELETE /api/daily-helper/notifications/{id}

Checklists

POST   /api/daily-helper/checklists
GET    /api/daily-helper/checklists/today
GET    /api/daily-helper/checklists
GET    /api/daily-helper/checklists/{id}
PUT    /api/daily-helper/checklists/{id}
PUT    /api/daily-helper/checklists/{id}/items/{item_id}
DELETE /api/daily-helper/checklists/{id}

Habits

POST   /api/daily-helper/habits
GET    /api/daily-helper/habits
GET    /api/daily-helper/habits/{id}
POST   /api/daily-helper/habits/{id}/log
DELETE /api/daily-helper/habits/{id}

Complete Example App.tsx

import { useEffect, useState } from 'react'
import NotificationCenter from './components/NotificationCenter'
import UserProfileSetup from './components/UserProfileSetup'
import HabitTracker from './components/HabitTracker'
import DailyChecklistPanel from './components/DailyChecklistPanel'
import LiveMarketPanel from './components/LiveMarketPanel'

export default function App() {
  const [activeTab, setActiveTab] = useState<
    'Live' | 'Daily Helper' | 'Settings'
  >('Live')
  const [showProfileSetup, setShowProfileSetup] = useState(false)

  return (
    <div className="min-h-screen bg-dark-bg p-6">
      <div className="max-w-[1400px] mx-auto">
        {/* Header */}
        <header className="mb-6 flex items-center justify-between">
          <h1 className="text-3xl font-bold">Trading Dashboard</h1>
          <NotificationCenter />
        </header>

        {/* Tabs */}
        <div className="flex gap-4 mb-6">
          {['Live', 'Daily Helper', 'Settings'].map(tab => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab as any)}
              className={`px-4 py-2 rounded ${
                activeTab === tab
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-700 text-gray-300'
              }`}
            >
              {tab}
            </button>
          ))}
        </div>

        {/* Content */}
        {activeTab === 'Live' && <LiveMarketPanel />}

        {activeTab === 'Daily Helper' && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <button
                onClick={() => setShowProfileSetup(true)}
                className="mb-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded"
              >
                ⚙️ Setup Profile
              </button>
              <DailyChecklistPanel checklistType="morning" />
            </div>
            <div>
              <HabitTracker />
            </div>
          </div>
        )}

        {/* Profile Setup Modal */}
        {showProfileSetup && (
          <UserProfileSetup
            onClose={() => setShowProfileSetup(false)}
            onSaved={() => {
              setShowProfileSetup(false)
              // Refresh any related data if needed
            }}
          />
        )}
      </div>
    </div>
  )
}

Styling

All Phase 1 components use:

• TailwindCSS for styling
• Dark theme (gray-900, gray-800 backgrounds)
• Blue accents (#667eea primary color)
• Responsive design (mobile-friendly)

Custom CSS (if needed)

/* Dark theme */
:root {
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-border: #374151;
  --color-text: #f3f4f6;
  --color-primary: #667eea;
}

.daily-helper-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}

.daily-helper-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
}

Error Handling

All components have built-in error handling with user-friendly messages. If an API call fails:

1. User sees an error message
2. Components remain functional
3. Retry buttons are provided
4. No silent failures

Performance Tips

1. Lazy Load Components

   const NotificationCenter = React.lazy(
     () => import('./components/NotificationCenter')
   )
   

2. Use Suspense

   <Suspense fallback={<div>Loading...</div>}>
     <NotificationCenter />
   </Suspense>
   

3. Memoize Components

   export default React.memo(DailyChecklistPanel)
   

Customization

Change Default Checklist Type

<DailyChecklistPanel checklistType="evening" />

Customize Colors

Modify component imports and update color classes:

// Change from gray-900 to custom color
className="bg-custom-dark"

Add Custom Callbacks

const [checklist, setChecklist] = useState(null)

<DailyChecklistPanel
  checklistType="morning"
  onItemComplete={(itemId) => {
    console.log('Item completed:', itemId)
  }}
/>

Troubleshooting

Notifications Not Showing?

• Check that backend is running
• Verify API endpoint: http://localhost:8000/api/daily-helper/notifications
• Check browser console for errors

Checklist Not Persisting?

• Ensure database is initialized (run migration)
• Check that API is responding with 200
• Clear browser cache and reload

Profile Not Saving?

• Verify email format is valid
• Check backend logs for validation errors
• Ensure profile API is accessible

Next Steps

1. Customize the components to match your branding
2. Add more features like custom checklist items
3. Integrate with your existing dashboard
4. Set up automated routines (Phase 2)
5. Implement email reports (Phase 2)

Support

For issues or questions:

1. Check API responses in browser DevTools
2. Review backend logs at backend/app/main.py
3. Verify database is initialized
4. See MIGRATION_INSTRUCTIONS.md for database setup

---

Ready to go! Your Daily Helper components are now fully integrated. 🚀