Spaces:
Running
Running
| <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> | |