Complete Application Prompt: Service Coordinator Platform

Application Overview
Create a comprehensive Service Coordinator platform called "Service Coordinator Hub" designed for professionals who coordinate services for families in areas such as autism support, behavioral therapy, educational support, and medical coordination.

Core Architecture & Design
Theme: Modern glassmorphism design with dark mode as default and light mode toggle
Layout: Collapsible sidebar navigation with main content area
Color Scheme: Dark backgrounds with bright accent colors that work well in both themes
UI Framework: React with Tailwind CSS, shadcn/ui components
Icons: Lucide React icons only
Essential Entities
1. Project Entity
{
"title": "string (Case name)",
"client_name": "string (Family/client name)",
"case_type": "enum [autism_support, behavioral_therapy, family_coordination, educational_support, medical_coordination, other]",
"priority": "enum [Low, Medium, High, Urgent]",
"status": "enum [Active, On Hold, Completed, Cancelled]",
"start_date": "date",
"deadline": "date",
"total_units_allocated": "number",
"units_used": "number (default: 0)",
"hourly_rate": "number (default: 10.00)",
"color_code": "enum [blue, green, purple, orange, pink, cyan, yellow, red]",
"description": "string",
"source_content": "string (original content that generated project)",
"auto_generated": "boolean (default: false)"
}
2. Task Entity
{
"title": "string",
"description": "string",
"priority": "enum [Low, Medium, High, Critical]",
"status": "enum [Backlog, In Progress, Review, Completed]",
"project_id": "string (linked to Project)",
"due_date": "date",
"estimated_hours": "number",
"tags": "array of strings"
}
3. Note Entity
{
"project_id": "string (linked to Project)",
"title": "string",
"content": "string",
"contact_type": "enum [parent_meeting, coordinator_call, team_meeting, client_session, documentation, other]",
"duration_minutes": "number",
"units_spent": "number (billable units)",
"participants": "array of strings",
"note_date": "date-time",
"tags": "array of strings"
}
4. Reminder Entity
{
"title": "string",
"description": "string",
"due_date": "date-time",
"priority": "enum [Low, Medium, High, Critical]",
"project_id": "string (optional)",
"reminder_type": "enum [note_deadline, meeting, documentation, billing, follow_up, other]",
"is_completed": "boolean (default: false)",
"notification_time": "date-time"
}
5. Document Entity
{
"title": "string",
"file_url": "string",
"file_type": "enum [pdf, doc, docx, txt, image, email, google_doc]",
"content_summary": "string (AI-generated)",
"extracted_tasks": "array of strings",
"checklist_items": "array of objects with item, completed, priority",
"tags": "array of strings",
"processing_status": "enum [pending, processing, completed, failed]"
}
Core Pages & Features
1. Dashboard (Home Page)
Overview Cards: Active projects, pending tasks, units used this month, revenue generated
Modern Calendar Component:
Bright colors for different case types
Shows tasks and reminders for each day
Click on dates to see detailed agenda
Color-coded by project/case type
Important Reminders Widget:
Glowing alerts for note deadlines
Critical reminders that require immediate attention
Based on user's calendar entries
Recent Activity Feed: Latest notes, completed tasks, new projects
Quick Stats: Charts showing project status distribution, case type breakdown
2. Projects Page
Project Cards: Display all projects with progress bars, revenue tracking, task counts
Drag & Drop Zone:
Accept URLs, text, emails, images, documents
AI automatically generates projects with associated tasks
Smart content analysis to determine case type and priority
Filter & Sort: By status, priority, case type, deadline
Quick Actions: Edit project details, add notes, view tasks
Revenue Tracking: Units used vs. allocated, billing information
3. Tasks Page
Kanban Board: Backlog, In Progress, Review, Completed columns
Task Cards: Priority indicators, due dates, project association
Quick Edit: Inline editing of task details
Batch Operations: Assign multiple tasks, change status
AI Task Suggestions: Based on project content and similar cases
4. Notes Page
Time-Based Entry: Log duration and billable units for each note
Meeting Types: Different templates for parent meetings, coordinator calls, etc.
Unit Tracking: Automatic calculation of billable units (@ $10/unit)
Participant Management: Track who was involved in each interaction
Search & Filter: By project, date range, contact type
Export Options: Generate reports for billing purposes
5. AI Agent Page
Conversational Interface: Chat-style interaction with AI assistant
Context Awareness: Access to all project data, tasks, notes
Web Search Integration: Real-time information from internet
Smart Suggestions: Proactive recommendations based on workload
Voice Integration: (Future) Voice-to-text note taking
Quick Actions: Create tasks, schedule reminders, generate reports
6. Smart Documents Page
Advanced Drag & Drop:
Multi-file upload support
URL processing for web content
Email parsing and analysis
Image OCR for text extraction
AI Processing:
Content summarization
Task extraction
Checklist generation
Tag suggestions
Interactive Visualizations:
Checklist pie charts with completion tracking
3D mind maps showing document structure
Progress indicators for action items
Bulk Operations: Process multiple documents simultaneously
7. Calendar Page
Full-Featured Calendar: Month, week, day views
Event Management: Tasks, appointments, reminders, deadlines
Color Coding: Different colors for each project/case type
Google Calendar Integration: Sync with existing calendars
Reminder System: Visual and notification alerts
Scheduling Assistant: AI-powered meeting scheduling
Recurring Events: Support for regular meetings and check-ins
8. Billing Page
Unit Tracking: Detailed breakdown of units by project
Revenue Dashboard: Monthly/quarterly revenue reports
Invoice Generation: Automated billing based on logged units
Rate Management: Different rates for different service types
Payment Tracking: Status of invoices and payments
Time Analytics: Efficiency metrics and utilization rates
Export Features: PDF reports, CSV exports for accounting
9. Integrations Page
Available Integrations Display:
Google Workspace (Calendar, Drive, Gmail)
Microsoft Office 365
Zoom/Teams for meeting integration
Slack/Discord for team communication
QuickBooks for accounting
Salesforce for CRM
Electronic Health Records (EHR) systems
Setup Wizards: Step-by-step integration configuration
API Management: Custom integrations and webhooks
Data Sync Status: Real-time sync status indicators
Advanced Features
Google OAuth Integration
Single Sign-On: Google authentication for easy access
Calendar Sync: Two-way sync with Google Calendar
Email Integration: Gmail widget showing recent emails
Drive Access: Direct access to Google Drive documents
Contact Sync: Import contact information
Email Widget
Inbox Preview: Recent emails relevant to projects
Quick Actions: Create projects/tasks from emails
Smart Filtering: AI-powered email categorization
Response Templates: Pre-written responses for common scenarios
Email-to-Note: Convert emails directly into project notes
Reminder System
Smart Alerts: Context-aware reminder notifications
Escalation Rules: Increasingly urgent notifications
Multiple Channels: Email, in-app, browser notifications
Deadline Tracking: Visual indicators for approaching deadlines
Completion Tracking: Mark reminders as completed
Settings & Preferences
Theme Toggle: Dark/light mode with smooth transitions
Notification Preferences: Customize alert types and timing
Default Values: Set standard rates, project templates
Privacy Controls: Data retention and sharing settings
Backup & Export: Data export and backup options
Technical Implementation Requirements
Frontend
React with functional components and hooks
Tailwind CSS for styling with custom design system
Framer Motion for animations and transitions
React Router for navigation
Date-fns for date manipulation
Recharts for data visualization
Three.js for 3D visualizations
Integrations & APIs
Google OAuth 2.0 for authentication
Google Calendar API for calendar sync
Gmail API for email integration
File upload and processing APIs
AI/ML APIs for content analysis
Payment processing APIs for billing
Data Flow
Authentication: Google OAuth login
Data Sync: Regular sync with external services
Real-time Updates: Live updates for collaborative features
Offline Support: Basic offline functionality
Data Security: Encrypted data storage and transmission
Performance Considerations
Lazy loading for large datasets
Efficient caching strategies
Optimized bundle sizes
Progressive Web App (PWA) features
Mobile-responsive design
User Experience Guidelines
Intuitive Navigation: Clear, consistent navigation patterns
Responsive Design: Works perfectly on desktop, tablet, mobile
Accessibility: Full WCAG compliance
Loading States: Smooth loading animations and skeleton screens
Error Handling: Graceful error messages and recovery options
Onboarding: Guided tour for new users
This comprehensive platform will serve as a complete solution for service coordinators, streamlining their workflow from initial client contact through project completion and billing - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Dash
-emoji: 📉
+title: dash
+emoji: 🐳
 colorFrom: pink
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,446 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Service Coordinator Hub</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        accent: {
+                            blue: '#3b82f6',
+                            green: '#10b981',
+                            purple: '#8b5cf6',
+                            orange: '#f97316',
+                            pink: '#ec4899',
+                            cyan: '#06b6d4',
+                            yellow: '#fbbf24',
+                            red: '#ef4444'
+                        }
+                    },
+                    backdropBlur: {
+                        xs: '2px',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .glassmorphism {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        .glassmorphism-dark {
+            background: rgba(0, 0, 0, 0.25);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        .priority-high { border-left: 4px solid #ef4444; }
+        .priority-medium { border-left: 4px solid #fbbf24; }
+        .priority-low { border-left: 4px solid #10b981; }
+        .status-active { border-left: 4px solid #10b981; }
+        .status-onhold { border-left: 4px solid #fbbf24; }
+        .status-completed { border-left: 4px solid #3b82f6; }
+        .status-cancelled { border-left: 4px solid #6b7280; }
+        .case-autism { border-left: 4px solid #8b5cf6; }
+        .case-behavioral { border-left: 4px solid #ec4899; }
+        .case-educational { border-left: 4px solid #06b6d4; }
+        .case-medical { border-left: 4px solid #3b82f6; }
+        .case-family { border-left: 4px solid #f97316; }
+        .case-other { border-left: 4px solid #6b7280; }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="flex">
+        <!-- Sidebar -->
+        <aside class="w-64 glassmorphism-dark h-screen fixed left-0 top-0 z-50 transition-all duration-300" id="sidebar">
+            <div class="p-5 border-b border-gray-700">
+                <h1 class="text-xl font-bold flex items-center">
+                    <i data-feather="compass" class="mr-2"></i>
+                    Service Coordinator Hub
+                </h1>
+            </div>
+            <nav class="p-4">
+                <ul class="space-y-2">
+                    <li>
+                        <a href="#dashboard" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="home" class="mr-3"></i> Dashboard
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#projects" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="briefcase" class="mr-3"></i> Projects
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#tasks" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="check-square" class="mr-3"></i> Tasks
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#notes" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="file-text" class="mr-3"></i> Notes
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#ai-agent" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="cpu" class="mr-3"></i> AI Agent
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#documents" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="file" class="mr-3"></i> Documents
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#calendar" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="calendar" class="mr-3"></i> Calendar
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#billing" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="dollar-sign" class="mr-3"></i> Billing
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#integrations" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition-colors">
+                            <i data-feather="settings" class="mr-3"></i> Integrations
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="absolute bottom-0 w-full p-4 border-t border-gray-700">
+                <div class="flex items-center justify-between mb-4">
+                    <span>Dark Mode</span>
+                    <button id="theme-toggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-700">
+                        <span class="sr-only">Toggle theme</span>
+                        <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
+                    </button>
+                </div>
+                <button class="w-full glassmorphism-dark py-2 px-4 rounded-lg flex items-center justify-center">
+                    <i data-feather="log-out" class="mr-2"></i> Sign Out
+                </button>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="ml-64 flex-1 p-8 transition-all duration-300">
+            <!-- Header -->
+            <header class="flex justify-between items-center mb-8">
+                <div>
+                    <h2 class="text-2xl font-bold">Dashboard</h2>
+                    <p class="text-gray-400">Welcome back, Coordinator! Here's your overview.</p>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <input type="text" placeholder="Search..." class="glassmorphism-dark py-2 px-4 pr-10 rounded-full w-64">
+                        <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
+                    </div>
+                    <button class="glassmorphism-dark p-2 rounded-full">
+                        <i data-feather="bell"></i>
+                    </button>
+                    <div class="glassmorphism-dark p-2 rounded-full">
+                        <img src="http://static.photos/people/40x40/1" alt="Profile" class="w-8 h-8 rounded-full">
+                    </div>
+                </div>
+            </header>
+
+            <!-- Stats Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <p class="text-gray-400">Active Projects</p>
+                            <h3 class="text-2xl font-bold mt-1">12</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-accent-blue/20">
+                            <i data-feather="briefcase" class="text-accent-blue"></i>
+                        </div>
+                    </div>
+                    <p class="text-sm text-green-400 mt-2"><i data-feather="trending-up" class="inline w-4 h-4 mr-1"></i> +2 from last week</p>
+                </div>
+
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <p class="text-gray-400">Pending Tasks</p>
+                            <h3 class="text-2xl font-bold mt-1">27</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-accent-orange/20">
+                            <i data-feather="check-square" class="text-accent-orange"></i>
+                        </div>
+                    </div>
+                    <p class="text-sm text-red-400 mt-2"><i data-feather="trending-down" class="inline w-4 h-4 mr-1"></i> -5 from yesterday</p>
+                </div>
+
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <p class="text-gray-400">Units Used</p>
+                            <h3 class="text-2xl font-bold mt-1">84</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-accent-green/20">
+                            <i data-feather="clock" class="text-accent-green"></i>
+                        </div>
+                    </div>
+                    <p class="text-sm text-green-400 mt-2"><i data-feather="trending-up" class="inline w-4 h-4 mr-1"></i> 12 this week</p>
+                </div>
+
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <p class="text-gray-400">Revenue</p>
+                            <h3 class="text-2xl font-bold mt-1">$840</h3>
+                        </div>
+                        <div class="p-3 rounded-full bg-accent-purple/20">
+                            <i data-feather="dollar-sign" class="text-accent-purple"></i>
+                        </div>
+                    </div>
+                    <p class="text-sm text-green-400 mt-2"><i data-feather="trending-up" class="inline w-4 h-4 mr-1"></i> $120 this week</p>
+                </div>
+            </div>
+
+            <!-- Calendar & Reminders Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                <!-- Calendar -->
+                <div class="glassmorphism-dark p-6 rounded-xl lg:col-span-2" data-aos="fade-right">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-xl font-bold">Calendar</h3>
+                        <div class="flex space-x-2">
+                            <button class="p-2 rounded-lg glassmorphism-dark"><i data-feather="chevron-left"></i></button>
+                            <button class="p-2 rounded-lg glassmorphism-dark"><i data-feather="calendar"></i></button>
+                            <button class="p-2 rounded-lg glassmorphism-dark"><i data-feather="chevron-right"></i></button>
+                        </div>
+                    </div>
+                    
+                    <div class="grid grid-cols-7 gap-2 text-center mb-4">
+                        <div class="p-2 text-gray-400">Sun</div>
+                        <div class="p-2 text-gray-400">Mon</div>
+                        <div class="p-2 text-gray-400">Tue</div>
+                        <div class="p-2 text-gray-400">Wed</div>
+                        <div class="p-2 text-gray-400">Thu</div>
+                        <div class="p-2 text-gray-400">Fri</div>
+                        <div class="p-2 text-gray-400">Sat</div>
+                    </div>
+                    
+                    <div class="grid grid-cols-7 gap-2">
+                        <!-- Calendar days would be generated here -->
+                        <div class="p-2 text-center text-gray-400">26</div>
+                        <div class="p-2 text-center text-gray-400">27</div>
+                        <div class="p-2 text-center text-gray-400">28</div>
+                        <div class="p-2 text-center text-gray-400">29</div>
+                        <div class="p-2 text-center text-gray-400">30</div>
+                        <div class="p-2 text-center">1</div>
+                        <div class="p-2 text-center">2</div>
+                        
+                        <!-- This week -->
+                        <div class="p-2 text-center">3</div>
+                        <div class="p-2 text-center">
+                            <span class="block mx-auto w-8 h-8 rounded-full bg-accent-blue/20 text-accent-blue flex items-center justify-center">4</span>
+                        </div>
+                        <div class="p-2 text-center">5</div>
+                        <div class="p-2 text-center">6</div>
+                        <div class="p-2 text-center">7</div>
+                        <div class="p-2 text-center">8</div>
+                        <div class="p-2 text-center">9</div>
+                        
+                        <!-- More days -->
+                        <div class="p-2 text-center">10</div>
+                        <div class="p-2 text-center">11</div>
+                        <div class="p-2 text-center">12</div>
+                        <div class="p-2 text-center">13</div>
+                        <div class="p-2 text-center">14</div>
+                        <div class="p-2 text-center">15</div>
+                        <div class="p-2 text-center">16</div>
+                    </div>
+                </div>
+
+                <!-- Important Reminders -->
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-left">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-xl font-bold">Important Reminders</h3>
+                        <button class="p-2 rounded-lg glassmorphism-dark"><i data-feather="plus"></i></button>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div class="p-4 rounded-lg bg-red-500/10 border-l-4 border-red-500">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h4 class="font-semibold">Smith Family Meeting</h4>
+                                    <p class="text-sm text-gray-300">Today, 2:00 PM</p>
+                                </div>
+                                <i data-feather="bell" class="text-red-400"></i>
+                            </div>
+                            <p class="text-sm mt-2">Quarterly review with parents and therapists</p>
+                        </div>
+                        
+                        <div class="p-4 rounded-lg bg-yellow-500/10 border-l-4 border-yellow-500">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h4 class="font-semibold">Documentation Deadline</h4>
+                                    <p class="text-sm text-gray-300">Tomorrow, 5:00 PM</p>
+                                </div>
+                                <i data-feather="alert-circle" class="text-yellow-400"></i>
+                            </div>
+                            <p class="text-sm mt-2">Submit progress reports for Johnson case</p>
+                        </div>
+                        
+                        <div class="p-4 rounded-lg bg-blue-500/10 border-l-4 border-blue-500">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h4 class="font-semibold">Therapist Coordination</h4>
+                                    <p class="text-sm text-gray-300">Dec 7, 10:00 AM</p>
+                                </div>
+                                <i data-feather="users" class="text-blue-400"></i>
+                            </div>
+                            <p class="text-sm mt-2">Schedule meeting with new speech therapist</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Activity & Charts -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Recent Activity -->
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up">
+                    <h3 class="text-xl font-bold mb-6">Recent Activity</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="p-2 rounded-full bg-green-500/20 mr-4">
+                                <i data-feather="check-circle" class="text-green-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Completed task: Initial assessment</p>
+                                <p class="text-sm text-gray-400">Wilson Project • 2 hours ago</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="p-2 rounded-full bg-blue-500/20 mr-4">
+                                <i data-feather="file-text" class="text-blue-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Added meeting notes</p>
+                                <p class="text-sm text-gray-400">Smith Family • 4 hours ago</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="p-2 rounded-full bg-purple-500/20 mr-4">
+                                <i data-feather="briefcase" class="text-purple-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Created new project</p>
+                                <p class="text-sm text-gray-400">Davis Case • 6 hours ago</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="p-2 rounded-full bg-orange-500/20 mr-4">
+                                <i data-feather="upload" class="text-orange-400"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Uploaded document</p>
+                                <p class="text-sm text-gray-400">Educational Plan • 8 hours ago</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Project Status Chart -->
+                <div class="glassmorphism-dark p-6 rounded-xl" data-aos="fade-up" data-aos-delay="100">
+                    <h3 class="text-xl font-bold mb-6">Project Status</h3>
+                    <div class="flex items-center justify-center h-64">
+                        <div class="relative">
+                            <div class="w-40 h-40 rounded-full border-8 border-green-500"></div>
+                            <div class="w-40 h-40 rounded-full border-8 border-blue-500 absolute top-0 left-0 -rotate-45"></div>
+                            <div class="w-40 h-40 rounded-full border-8 border-yellow-500 absolute top-0 left-0 -rotate-90"></div>
+                            <div class="w-40 h-40 rounded-full border-8 border-gray-500 absolute top-0 left-0 -rotate-135"></div>
+                            
+                            <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+                                <div class="text-center">
+                                    <p class="text-2xl font-bold">12</p>
+                                    <p class="text-sm text-gray-400">Projects</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4 mt-6">
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
+                            <span>Active (6)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
+                            <span>Completed (3)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
+                            <span>On Hold (2)</span>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div>
+                            <span>Cancelled (1)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        // Initialize AOS
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('light');
+            if (html.classList.contains('light')) {
+                html.classList.remove('dark');
+                themeToggle.querySelector('span').classList.remove('translate-x-1');
+                themeToggle.querySelector('span').classList.add('translate-x-6');
+            } else {
+                html.classList.add('dark');
+                themeToggle.querySelector('span').classList.remove('translate-x-6');
+                themeToggle.querySelector('span').classList.add('translate-x-1');
+            }
+        });
+
+        // Sidebar toggle for mobile (would need additional implementation)
+    </script>
+</body>
 </html>

prompts.txt

@@ -0,0 +1,221 @@
+Complete Application Prompt: Service Coordinator Platform
+Application Overview
+Create a comprehensive Service Coordinator platform called "Service Coordinator Hub" designed for professionals who coordinate services for families in areas such as autism support, behavioral therapy, educational support, and medical coordination.
+
+Core Architecture & Design
+Theme: Modern glassmorphism design with dark mode as default and light mode toggle
+Layout: Collapsible sidebar navigation with main content area
+Color Scheme: Dark backgrounds with bright accent colors that work well in both themes
+UI Framework: React with Tailwind CSS, shadcn/ui components
+Icons: Lucide React icons only
+Essential Entities
+1. Project Entity
+{
+  "title": "string (Case name)",
+  "client_name": "string (Family/client name)",
+  "case_type": "enum [autism_support, behavioral_therapy, family_coordination, educational_support, medical_coordination, other]",
+  "priority": "enum [Low, Medium, High, Urgent]",
+  "status": "enum [Active, On Hold, Completed, Cancelled]",
+  "start_date": "date",
+  "deadline": "date",
+  "total_units_allocated": "number",
+  "units_used": "number (default: 0)",
+  "hourly_rate": "number (default: 10.00)",
+  "color_code": "enum [blue, green, purple, orange, pink, cyan, yellow, red]",
+  "description": "string",
+  "source_content": "string (original content that generated project)",
+  "auto_generated": "boolean (default: false)"
+}
+2. Task Entity
+{
+  "title": "string",
+  "description": "string",
+  "priority": "enum [Low, Medium, High, Critical]",
+  "status": "enum [Backlog, In Progress, Review, Completed]",
+  "project_id": "string (linked to Project)",
+  "due_date": "date",
+  "estimated_hours": "number",
+  "tags": "array of strings"
+}
+3. Note Entity
+{
+  "project_id": "string (linked to Project)",
+  "title": "string",
+  "content": "string",
+  "contact_type": "enum [parent_meeting, coordinator_call, team_meeting, client_session, documentation, other]",
+  "duration_minutes": "number",
+  "units_spent": "number (billable units)",
+  "participants": "array of strings",
+  "note_date": "date-time",
+  "tags": "array of strings"
+}
+4. Reminder Entity
+{
+  "title": "string",
+  "description": "string",
+  "due_date": "date-time",
+  "priority": "enum [Low, Medium, High, Critical]",
+  "project_id": "string (optional)",
+  "reminder_type": "enum [note_deadline, meeting, documentation, billing, follow_up, other]",
+  "is_completed": "boolean (default: false)",
+  "notification_time": "date-time"
+}
+5. Document Entity
+{
+  "title": "string",
+  "file_url": "string",
+  "file_type": "enum [pdf, doc, docx, txt, image, email, google_doc]",
+  "content_summary": "string (AI-generated)",
+  "extracted_tasks": "array of strings",
+  "checklist_items": "array of objects with item, completed, priority",
+  "tags": "array of strings",
+  "processing_status": "enum [pending, processing, completed, failed]"
+}
+Core Pages & Features
+1. Dashboard (Home Page)
+Overview Cards: Active projects, pending tasks, units used this month, revenue generated
+Modern Calendar Component:
+Bright colors for different case types
+Shows tasks and reminders for each day
+Click on dates to see detailed agenda
+Color-coded by project/case type
+Important Reminders Widget:
+Glowing alerts for note deadlines
+Critical reminders that require immediate attention
+Based on user's calendar entries
+Recent Activity Feed: Latest notes, completed tasks, new projects
+Quick Stats: Charts showing project status distribution, case type breakdown
+2. Projects Page
+Project Cards: Display all projects with progress bars, revenue tracking, task counts
+Drag & Drop Zone:
+Accept URLs, text, emails, images, documents
+AI automatically generates projects with associated tasks
+Smart content analysis to determine case type and priority
+Filter & Sort: By status, priority, case type, deadline
+Quick Actions: Edit project details, add notes, view tasks
+Revenue Tracking: Units used vs. allocated, billing information
+3. Tasks Page
+Kanban Board: Backlog, In Progress, Review, Completed columns
+Task Cards: Priority indicators, due dates, project association
+Quick Edit: Inline editing of task details
+Batch Operations: Assign multiple tasks, change status
+AI Task Suggestions: Based on project content and similar cases
+4. Notes Page
+Time-Based Entry: Log duration and billable units for each note
+Meeting Types: Different templates for parent meetings, coordinator calls, etc.
+Unit Tracking: Automatic calculation of billable units (@ $10/unit)
+Participant Management: Track who was involved in each interaction
+Search & Filter: By project, date range, contact type
+Export Options: Generate reports for billing purposes
+5. AI Agent Page
+Conversational Interface: Chat-style interaction with AI assistant
+Context Awareness: Access to all project data, tasks, notes
+Web Search Integration: Real-time information from internet
+Smart Suggestions: Proactive recommendations based on workload
+Voice Integration: (Future) Voice-to-text note taking
+Quick Actions: Create tasks, schedule reminders, generate reports
+6. Smart Documents Page
+Advanced Drag & Drop:
+Multi-file upload support
+URL processing for web content
+Email parsing and analysis
+Image OCR for text extraction
+AI Processing:
+Content summarization
+Task extraction
+Checklist generation
+Tag suggestions
+Interactive Visualizations:
+Checklist pie charts with completion tracking
+3D mind maps showing document structure
+Progress indicators for action items
+Bulk Operations: Process multiple documents simultaneously
+7. Calendar Page
+Full-Featured Calendar: Month, week, day views
+Event Management: Tasks, appointments, reminders, deadlines
+Color Coding: Different colors for each project/case type
+Google Calendar Integration: Sync with existing calendars
+Reminder System: Visual and notification alerts
+Scheduling Assistant: AI-powered meeting scheduling
+Recurring Events: Support for regular meetings and check-ins
+8. Billing Page
+Unit Tracking: Detailed breakdown of units by project
+Revenue Dashboard: Monthly/quarterly revenue reports
+Invoice Generation: Automated billing based on logged units
+Rate Management: Different rates for different service types
+Payment Tracking: Status of invoices and payments
+Time Analytics: Efficiency metrics and utilization rates
+Export Features: PDF reports, CSV exports for accounting
+9. Integrations Page
+Available Integrations Display:
+Google Workspace (Calendar, Drive, Gmail)
+Microsoft Office 365
+Zoom/Teams for meeting integration
+Slack/Discord for team communication
+QuickBooks for accounting
+Salesforce for CRM
+Electronic Health Records (EHR) systems
+Setup Wizards: Step-by-step integration configuration
+API Management: Custom integrations and webhooks
+Data Sync Status: Real-time sync status indicators
+Advanced Features
+Google OAuth Integration
+Single Sign-On: Google authentication for easy access
+Calendar Sync: Two-way sync with Google Calendar
+Email Integration: Gmail widget showing recent emails
+Drive Access: Direct access to Google Drive documents
+Contact Sync: Import contact information
+Email Widget
+Inbox Preview: Recent emails relevant to projects
+Quick Actions: Create projects/tasks from emails
+Smart Filtering: AI-powered email categorization
+Response Templates: Pre-written responses for common scenarios
+Email-to-Note: Convert emails directly into project notes
+Reminder System
+Smart Alerts: Context-aware reminder notifications
+Escalation Rules: Increasingly urgent notifications
+Multiple Channels: Email, in-app, browser notifications
+Deadline Tracking: Visual indicators for approaching deadlines
+Completion Tracking: Mark reminders as completed
+Settings & Preferences
+Theme Toggle: Dark/light mode with smooth transitions
+Notification Preferences: Customize alert types and timing
+Default Values: Set standard rates, project templates
+Privacy Controls: Data retention and sharing settings
+Backup & Export: Data export and backup options
+Technical Implementation Requirements
+Frontend
+React with functional components and hooks
+Tailwind CSS for styling with custom design system
+Framer Motion for animations and transitions
+React Router for navigation
+Date-fns for date manipulation
+Recharts for data visualization
+Three.js for 3D visualizations
+Integrations & APIs
+Google OAuth 2.0 for authentication
+Google Calendar API for calendar sync
+Gmail API for email integration
+File upload and processing APIs
+AI/ML APIs for content analysis
+Payment processing APIs for billing
+Data Flow
+Authentication: Google OAuth login
+Data Sync: Regular sync with external services
+Real-time Updates: Live updates for collaborative features
+Offline Support: Basic offline functionality
+Data Security: Encrypted data storage and transmission
+Performance Considerations
+Lazy loading for large datasets
+Efficient caching strategies
+Optimized bundle sizes
+Progressive Web App (PWA) features
+Mobile-responsive design
+User Experience Guidelines
+Intuitive Navigation: Clear, consistent navigation patterns
+Responsive Design: Works perfectly on desktop, tablet, mobile
+Accessibility: Full WCAG compliance
+Loading States: Smooth loading animations and skeleton screens
+Error Handling: Graceful error messages and recovery options
+Onboarding: Guided tour for new users
+This comprehensive platform will serve as a complete solution for service coordinators, streamlining their workflow from initial client contact through project completion and billing