I'll create a comprehensive dashboard system based on your wireframes, including pages for weekly plans, targets, and settings. The design will follow the structure shown in your sketches with a clean, professional interface.

I've created a comprehensive dashboard system based on your wireframes with four main pages:

Dashboard Features:

1. Home Page (/)

• Welcome message and user stats
• Search functionality with filters (ZIP, Area, Specialty, Product)
• Doctor profile cards with engagement metrics (TRx, NRx)
• Upcoming weekly plans section
• Quick action buttons

2. Weekly Plan Page (/weekly-plan)

• Week navigation with current week indicator
• Alert banner for HCP overlaps (as shown in your wireframe)
• Weekly plan cards with priority levels and status
• Export and print functionality
• Weekly summary statistics

3. Targets Page (/targets)

• Selected targets section with detailed contact information
• Remove functionality for each target
• Available targets grid with engagement metrics
• Add to targets functionality
• Search capability

4. Settings Page (/settings)

• Profile information management
• Notification preferences
• Appearance settings (theme, language, timezone)
• Privacy and security controls
• Account deletion option

Key Features:

• Responsive Design: Works on desktop and mobile devices
• Navigation: Consistent header navigation across all pages
• Search & Filters: Implemented as shown in wireframes
• Card-based Layout: Clean card design for doctors/targets
• Interactive Elements: Buttons, switches, and form controls
• Alert System: Warning banners for important notifications
• Professional Styling: Clean, modern interface suitable for healthcare professionals

The dashboard matches your wireframe specifications while providing a polished, production-ready interface for managing healthcare professional targets and weekly planning activities.

Here's a comprehensive prompt to generate the complete Momentum dashboard system:

Create a comprehensive healthcare professional targeting dashboard called "Momentum" with the following specifications:

Overall Requirements:

• Modern, professional React/Next.js dashboard with TypeScript
• Clean, responsive design using Tailwind CSS and shadcn/ui components
• Healthcare/pharmaceutical industry focus for sales representatives
• Consistent navigation header across all pages with logo and user controls

Navigation Structure:

Create a header with:

• "Momentum" logo with trending up icon in blue
• Navigation tabs: Home, Weekly Plan, Targets, Settings
• Right side: notification bell and user profile icons
• Active page highlighting in blue

Page 1: Dashboard/Home (/)

• Welcome message: "Welcome back, Sarah"
• Three metric cards showing: Tasks Completed (23), Plans Created (5), Active Projects (3)
• Search bar with filter buttons: ZIP, Area, Specialty, Product, Sort By

• Grid of doctor profile cards displaying:

  • Doctor name and specialty (Dermatology focus)
  • Engagement count, TRx number, NRx number
  • Location badge (Texas cities)

• "Upcoming Weekly Plans" section with project cards showing:

  • Project titles with due dates
  • Brief descriptions
  • Priority badges
• "Quick Actions" section with "Create New Plan" and "View All Plans" buttons

Page 2: Weekly Plan (/weekly-plan)

• Page title with week navigation (Week 20 with prev/next arrows)
• Action buttons: Export, Print, New Plan
• Alert banner: "HCP Overlap: Dr. Jusha Case is already being targeted by Sarah. Contact to coordinate"

• Grid of weekly plan cards showing:

  • Plan titles and descriptions
  • Due dates, status badges, priority levels
  • Assignee information
  • Edit and View Details buttons
• Weekly summary statistics at bottom

Page 3: Targets (/targets)

• "Selected Targets" section with detailed target cards:

  • Doctor names with specialty badges
  • Full contact information (address, phone, email)
  • Status indicators
  • Remove buttons for each target

• "Available Targets" section with:

  • Search functionality
  • Doctor cards showing engagement metrics (like home page)
  • "Add to Targets" buttons
  • Grid layout for browsing potential targets

Page 4: Settings (/settings)

Create comprehensive settings with these sections:

• Profile Information: First name, last name, email, phone, bio textarea
• Notifications: Toggle switches for email notifications, push notifications, weekly reports, target alerts
• Appearance: Dropdowns for theme (light/dark/system), language, timezone
• Privacy & Security: Profile visibility dropdown, data sharing toggle, analytics tracking toggle
• Danger Zone: Red-bordered section with account deletion option

Design Specifications:

• Use blue (#2563eb) as primary color
• Gray backgrounds (#f9fafb) for pages
• White cards with subtle shadows and hover effects
• Professional typography with proper hierarchy
• Responsive grid layouts (1-3 columns based on screen size)
• Consistent spacing and padding throughout
• Badge components for status, priority, and specialty indicators

Interactive Features:

• Functional navigation between pages
• Search functionality with state management
• Filter toggles and dropdowns
• Add/remove target functionality
• Week navigation controls
• Form inputs and switches in settings
• Hover effects on cards and buttons

Sample Data:

Include realistic healthcare data:

• Doctor names with dermatology/immunology specialties
• Texas locations (Austin, Dallas, Houston)
• Engagement numbers (10-25), TRx (200-500), NRx (40-100)
• Professional email addresses and phone numbers
• Realistic project names and descriptions

Generate a complete, functional dashboard system with all four pages, proper routing, and professional styling suitable for pharmaceutical sales representatives managing healthcare professional relationships.

This prompt provides comprehensive specifications for recreating the entire Momentum dashboard system with all pages, features, and styling details included.