I'll create a comprehensive KaiCure medical platform for doctor-patient assistance with all the features you've requested. { "name": "kaicure", "version": "0.1.0", "private": true, "dependencies": { "@stripe/react-stripe-js": "^2.1.0", "@stripe/stripe-js": "^1.54.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.4.0", "bootstrap": "^5.3.0", "chart.js": "^4.3.0", "deepgram-sdk": "^2.4.0", "file-saver": "^2.0.5", "firebase": "^9.22.2", "formik": "^2.4.1", "html-to-docx": "^1.8.0", "jspdf": "^2.5.1", "openai": "^3.3.0", "react": "^18.2.0", "react-bootstrap": "^2.7.4", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-icons": "^4.9.0", "react-router-dom": "^6.12.1", "react-scripts": "5.0.1", "react-share": "^4.4.1", "web-vitals": "^2.1.4", "yup": "^1.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; import { AuthProvider } from './contexts/AuthContext'; import { SessionProvider } from './contexts/SessionContext'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary-color: #0066CC; --secondary-color: #4ECDC4; --accent-color: #31B44B; --support-color: #357FBE; --light-gray: #f8f9fa; --medium-gray: #e9ecef; --dark-gray: #343a40; --danger: #dc3545; --success: #28a745; --warning: #ffc107; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--light-gray); color: var(--dark-gray); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--support-color); border-color: var(--support-color); } .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); } .btn-accent { background-color: var(--accent-color); border-color: var(--accent-color); color: white; } .text-primary { color: var(--primary-color) !important; } .text-secondary { color: var(--secondary-color) !important; } .text-accent { color: var(--accent-color) !important; } .bg-primary-light { background-color: rgba(0, 102, 204, 0.1); } .card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: none; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25); } import React from 'react'; import { Routes, Route, Navigate } from 'react-router-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; // Auth Components import Login from './components/auth/Login'; import Register from './components/auth/Register'; import ForgotPassword from './components/auth/ForgotPassword'; import ResetPassword from './components/auth/ResetPassword'; // Main Components import LandingPage from './components/landing/LandingPage'; import DoctorDashboard from './components/doctor/DoctorDashboard'; import SessionPage from './components/doctor/SessionPage'; import SessionHistory from './components/doctor/SessionHistory'; import Profile from './components/doctor/Profile'; import UsageStats from './components/doctor/UsageStats'; // Admin Components import AdminDashboard from './components/admin/AdminDashboard'; import ManageSubscriptions from './components/admin/ManageSubscriptions'; import ManageUsers from './components/admin/ManageUsers'; import ApiSettings from './components/admin/ApiSettings'; // Context and Utilities import { useAuth } from './contexts/AuthContext'; import PrivateRoute from './components/common/PrivateRoute'; import AdminRoute from './components/common/AdminRoute'; function App() { const { currentUser } = useAuth(); return (

{/* Public Routes */} } /> } /> } /> } /> } /> {/* Doctor Routes */} } /> } /> } /> } /> } /> {/* Admin Routes */} } /> } /> } /> } /> {/* Fallback */} } />

); } export default App; .App { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; padding: 20px; } .page-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .section-title { color: var(--primary-color); margin-bottom: 20px; font-weight: 600; } .card-header { background-color: var(--primary-color); color: white; font-weight: 500; } .action-btn { margin-right: 8px; } .form-label { font-weight: 500; } .alert { border-radius: 8px; } .table-responsive { border-radius: 10px; overflow: hidden; } .nav-tabs .nav-link.active { color: var(--primary-color); font-weight: 500; border-bottom: 2px solid var(--primary-color); } .nav-tabs .nav-link { color: var(--dark-gray); } .badge-subscription { background-color: var(--accent-color); color: white; padding: 5px 10px; border-radius: 20px; font-weight: 500; } .badge-free { background-color: var(--secondary-color); } .badge-paid { background-color: var(--primary-color); } .loading-spinner { display: flex; justify-content: center; align-items: center; height: 100px; } const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals; import React, { createContext, useContext, useState, useEffect } from 'react'; import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, sendPasswordResetEmail, onAuthStateChanged, updateProfile } from 'firebase/auth'; import { doc, setDoc, getDoc } from 'firebase/firestore'; import { auth, db } from '../firebase'; const AuthContext = createContext(); export function useAuth() { return useContext(AuthContext); } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState(null); const [userRole, setUserRole] = useState(null); const [loading, setLoading] = useState(true); async function signup(email, password, name) { try { const userCredential = await createUserWithEmailAndPassword(auth, email, password); await updateProfile(userCredential.user, { displayName: name }); // Create user document in Firestore await setDoc(doc(db, 'users', userCredential.user.uid), { name, email, role: 'doctor', // Default role createdAt: new Date().toISOString(), subscriptionTier: 'free', // Default tier minutesUsed: 0, minutesRemaining: 10, // Free tier daily limit lastResetDate: new Date().toISOString() }); return userCredential.user; } catch (error) { throw error; } } function login(email, password) { return signInWithEmailAndPassword(auth, email, password); } function logout() { return signOut(auth); } function resetPassword(email) { return sendPasswordResetEmail(auth, email); } async function getUserData(uid) { try { const userDoc = await getDoc(doc(db, 'users', uid)); if (userDoc.exists()) { return userDoc.data(); } return null; } catch (error) { console.error("Error fetching user data:", error); return null; } } useEffect(() => { const unsubscribe = onAuthStateChanged(auth, async (user) => { setCurrentUser(user); if (user) { const userData = await getUserData(user.uid); if (userData) { setUserRole(userData.role); } } else { setUserRole(null); } setLoading(false); }); return unsubscribe; }, []); const value = { currentUser, userRole, signup, login, logout, resetPassword, getUserData }; return ( {!loading && children} ); } import React, { createContext, useContext, useState, useEffect } from 'react'; import { collection, addDoc, updateDoc, doc, getDocs, query, where, orderBy, serverTimestamp } from 'firebase/firestore'; import { db } from '../firebase'; import { useAuth } from './AuthContext'; const SessionContext = createContext(); export function useSession() { return useContext(SessionContext); } export function SessionProvider({ children }) { const [sessions, setSessions] = useState([]); const [currentSession, setCurrentSession] = useState(null); const [loading, setLoading] = useState(true); const { currentUser } = useAuth(); useEffect(() => { if (currentUser) { fetchSessions(); } else { setSessions([]); setLoading(false); } }, [currentUser]); async function fetchSessions() { try { setLoading(true); const sessionsRef = collection(db, 'sessions'); const q = query( sessionsRef, where('doctorId', '==', currentUser.uid), orderBy('createdAt', 'desc') ); const querySnapshot = await getDocs(q); const sessionsList = []; querySnapshot.forEach((doc) => { sessionsList.push({ id: doc.id, ...doc.data() }); }); setSessions(sessionsList); } catch (error) { console.error("Error fetching sessions:", error); } finally { setLoading(false); } } async function createSession(patientName, dateOfBirth) { try { const newSession = { patientName, dateOfBirth, doctorId: currentUser.uid, doctorName: currentUser.displayName, status: 'active', transcript: [], soapNotes: '', duration: 0, createdAt: serverTimestamp() }; const docRef = await addDoc(collection(db, 'sessions'), newSession); const createdSession = { id: docRef.id, ...newSession, createdAt: new Date().toISOString() }; setSessions([createdSession, ...sessions]); return createdSession; } catch (error) { console.error("Error creating session:", error); throw error; } } async function updateSession(sessionId, data) { try { const sessionRef = doc(db, 'sessions', sessionId); await updateDoc(sessionRef, { ...data, updatedAt: serverTimestamp() }); // Update local state setSessions(sessions.map(session => session.id === sessionId ? { ...session, ...data, updatedAt: new Date().toISOString() } : session )); if (currentSession && currentSession.id === sessionId) { setCurrentSession({ ...currentSession, ...data, updatedAt: new Date().toISOString() }); } } catch (error) { console.error("Error updating session:", error); throw error; } } async function getSessionById(sessionId) { try { const sessionDoc = await getDoc(doc(db, 'sessions', sessionId)); if (sessionDoc.exists()) { const sessionData = { id: sessionDoc.id, ...sessionDoc.data() }; setCurrentSession(sessionData); return sessionData; } return null; } catch (error) { console.error("Error fetching session:", error); return null; } } const value = { sessions, currentSession, loading, createSession, updateSession, getSessionById, fetchSessions, setCurrentSession }; return ( {children} ); } import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; import { getStorage } from 'firebase/storage'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID }; const app = initializeApp(firebaseConfig); export const auth = getAuth(app); export const db = getFirestore(app); export const storage = getStorage(app); export default app; import React from 'react'; import { Link } from 'react-router-dom'; import { Container, Row, Col, Button, Card } from 'react-bootstrap'; import { FaStethoscope, FaMicrophone, FaFileAlt, FaLock } from 'react-icons/fa'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './LandingPage.css'; const LandingPage = () => { return ( <>

KaiCure

Revolutionizing Doctor-Patient Interactions

Streamline your clinical workflow with AI-powered transcription and SOAP note generation. Save time, reduce administrative burden, and focus more on patient care.

Key Features

Live Transcription Real-time medical conversation transcription powered by Deepgram's medical AI.

SOAP Notes Generation Automatically generate professional clinical notes using OpenAI's GPT-4o.

Clinical Workflow Streamlined session management with patient history and searchable records.

HIPAA Compliant Secure, HIPAA-compliant storage and handling of all patient data.

Pricing Plans

Free Tier

$ 0 /month

10 minutes of sessions daily
Basic transcription
SOAP notes generation
Session history
PDF export

Premium

$ 50 /month

120 minutes of sessions daily
Advanced medical transcription
Enhanced SOAP notes
Comprehensive session history
Multiple export formats
WhatsApp & Email sharing
Priority support

Ready to Transform Your Clinical Practice?

Join thousands of healthcare professionals who are saving time and improving patient care with KaiCure.

); }; export default LandingPage; .hero-section { padding: 80px 0; background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%); } .hero-title { font-size: 3.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .hero-subtitle { font-size: 2rem; font-weight: 600; color: var(--dark-gray); margin-bottom: 20px; } .hero-text { font-size: 1.1rem; margin-bottom: 30px; color: var(--dark-gray); } .hero-image { display: flex; justify-content: center; align-items: center; } .hero-image img { max-width: 100%; height: auto; } .features-section { padding: 80px 0; background-color: white; } .feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .feature-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; } .pricing-section { padding: 80px 0; background-color: var(--light-gray); } .pricing-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .pricing-card .card-header { padding: 20px; background-color: var(--primary-color); color: white; } .premium-card .card-header { background-color: var(--accent-color); } .price { margin: 20px 0; } .price .currency { font-size: 1.5rem; font-weight: 600; vertical-align: top; position: relative; top: 10px; } .price .amount { font-size: 4rem; font-weight: 700; } .price .period { font-size: 1rem; color: var(--dark-gray); } .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { padding: 10px 0; border-bottom: 1px solid var(--medium-gray); position: relative; padding-left: 25px; } .feature-list li:before { content: "✓"; color: var(--accent-color); position: absolute; left: 0; font-weight: bold; } .feature-list li:last-child { border-bottom: none; } .cta-section { padding: 80px 0; background: linear-gradient(135deg, var(--primary-color) 0%, var(--support-color) 100%); color: white; } .cta-section h2 { font-size: 2.5rem; font-weight: 600; margin-bottom: 20px; } .cta-section p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; } @media (max-width: 768px) { .hero-section { padding: 50px 0; text-align: center; } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.5rem; } .hero-image { margin-top: 30px; } .features-section, .pricing-section, .cta-section { padding: 50px 0; } } import React, { useState } from 'react'; import { Navbar, Nav, Container, Button, Dropdown } from 'react-bootstrap'; import { Link, useNavigate } from 'react-router-dom'; import { FaUser, FaSignOutAlt, FaChartBar, FaHistory, FaUserMd } from 'react-icons/fa'; import { useAuth } from '../../contexts/AuthContext'; import './Header.css'; const Header = () => { const [expanded, setExpanded] = useState(false); const { currentUser, logout, userRole } = useAuth(); const navigate = useNavigate(); const handleLogout = async () => { try { await logout(); navigate('/login'); } catch (error) { console.error("Failed to log out", error); } }; return (

KaiCure setExpanded(expanded ? false : true)} />

{!currentUser ? ( <> setExpanded(false)}>Home setExpanded(false)}>Features setExpanded(false)}>Pricing setExpanded(false)}>Contact setExpanded(false)}> setExpanded(false)}> ) : ( <> {userRole === 'admin' ? ( setExpanded(false)}>Admin Dashboard ) : ( setExpanded(false)}>Dashboard )} setExpanded(false)}> Profile {userRole !== 'admin' && ( <> setExpanded(false)}> Session History setExpanded(false)}> Usage Stats )} {userRole === 'admin' && ( setExpanded(false)}> Manage Users )} { handleLogout(); setExpanded(false); }}> Logout )}

); }; export default Header; .navbar { padding: 15px 0; } .brand-text { font-weight: 700; font-size: 1.5rem; color: var(--primary-color); } .nav-link { font-weight: 500; color: var(--dark-gray); margin: 0 5px; transition: color 0.3s ease; } .nav-link:hover { color: var(--primary-color); } .user-dropdown { display: flex; align-items: center; background: transparent; border: none; color: var(--dark-gray); font-weight: 500; } .user-dropdown:hover, .user-dropdown:focus, .user-dropdown:active { background: transparent; color: var(--primary-color); box-shadow: none; } .dropdown-menu { border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: none; padding: 8px; } .dropdown-item { padding: 8px 15px; border-radius: 5px; display: flex; align-items: center; } .dropdown-item:hover { background-color: rgba(0, 102, 204, 0.1); color: var(--primary-color); } @media (max-width: 991px) { .navbar-nav { padding: 15px 0; } .nav-link { padding: 10px 0; } .dropdown-menu { border: none; box-shadow: none; padding: 0; margin-left: 15px; } .dropdown-item { padding: 10px 15px; } } import React from 'react'; import { Container, Row, Col } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import { FaTwitter, FaFacebook, FaLinkedin, FaInstagram } from 'react-icons/fa'; import './Footer.css'; const Footer = () => { const currentYear = new Date().getFullYear(); return ( ); }; export default Footer; .footer { background-color: #f8f9fa; padding: 60px 0 30px; color: var(--dark-gray); } .footer-brand { display: flex; align-items: center; margin-bottom: 20px; } .footer-brand span { font-weight: 700; font-size: 1.5rem; color: var(--primary-color); } .footer-description { margin-bottom: 25px; opacity: 0.8; } .social-links { display: flex; gap: 15px; margin-bottom: 30px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--light-gray); color: var(--primary-color); font-size: 1.2rem; transition: all 0.3s ease; } .social-links a:hover { background-color: var(--primary-color); color: white; transform: translateY(-3px); } .footer-heading { font-weight: 600; margin-bottom: 20px; color: var(--dark-gray); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: var(--dark-gray); text-decoration: none; transition: color 0.3s ease; opacity: 0.8; } .footer-links a:hover { color: var(--primary-color); opacity: 1; } .footer-divider { margin: 30px 0; border-color: rgba(0, 0, 0, 0.1); } .copyright { font-size: 0.9rem; opacity: 0.7; } @media (max-width: 768px) { .footer { padding: 40px 0 20px; } .footer-heading { margin-top: 20px; } } import React from 'react'; import { Navigate } from 'react-router-dom'; import { useAuth } from '../../contexts/AuthContext'; const PrivateRoute = ({ children }) => { const { currentUser } = useAuth(); return currentUser ? children : ; }; export default PrivateRoute; import React from 'react'; import { Navigate } from 'react-router-dom'; import { useAuth } from '../../contexts/AuthContext'; const AdminRoute = ({ children }) => { const { currentUser, userRole } = useAuth(); return currentUser && userRole === 'admin' ? children : ; }; export default AdminRoute; import React, { useState } from 'react'; import { Container, Row, Col, Card, Form, Button, Alert } from 'react-bootstrap'; import { Link, useNavigate } from 'react-router-dom'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { useAuth } from '../../contexts/AuthContext'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './Auth.css'; const Login = () => { const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const { login } = useAuth(); const navigate = useNavigate(); const validationSchema = Yup.object().shape({ email: Yup.string() .email('Invalid email address') .required('Email is required'), password: Yup.string() .required('Password is required') }); const handleSubmit = async (values, { setSubmitting }) => { try { setError(''); setLoading(true); await login(values.email, values.password); navigate('/dashboard'); } catch (err) { console.error("Login error:", err); setError('Failed to log in. Please check your credentials.'); } finally { setLoading(false); setSubmitting(false); } }; return ( <>

Welcome Back

{error && {error}} {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (

Email Address {errors.email}

Password Forgot Password?

{errors.password}

Don't have an account?{' '} Sign Up

)}

); }; export default Login; import React, { useState } from 'react'; import { Container, Row, Col, Card, Form, Button, Alert } from 'react-bootstrap'; import { Link, useNavigate } from 'react-router-dom'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { useAuth } from '../../contexts/AuthContext'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './Auth.css'; const Register = () => { const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const { signup } = useAuth(); const navigate = useNavigate(); const validationSchema = Yup.object().shape({ name: Yup.string() .required('Full name is required') .min(2, 'Name is too short'), email: Yup.string() .email('Invalid email address') .required('Email is required'), password: Yup.string() .required('Password is required') .min(8, 'Password must be at least 8 characters') .matches( /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, 'Password must contain at least one uppercase letter, one lowercase letter, and one number' ), confirmPassword: Yup.string() .oneOf([Yup.ref('password'), null], 'Passwords must match') .required('Confirm password is required'), terms: Yup.boolean() .oneOf([true], 'You must accept the terms and conditions') }); const handleSubmit = async (values, { setSubmitting }) => { try { setError(''); setLoading(true); await signup(values.email, values.password, values.name); navigate('/dashboard'); } catch (err) { console.error("Registration error:", err); setError('Failed to create an account. ' + (err.message || '')); } finally { setLoading(false); setSubmitting(false); } }; return ( <>

Create Account

Join KaiCure to streamline your clinical workflow

{error && {error}} {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (

Full Name {errors.name} Email Address {errors.email} Password {errors.password} Confirm Password {errors.confirmPassword} I agree to the{' '} Terms of Service {' '} and{' '} Privacy Policy } checked={values.terms} onChange={handleChange} onBlur={handleBlur} isInvalid={touched.terms && errors.terms} /> {errors.terms}

Already have an account?{' '} Log In

)}

); }; export default Register; import React, { useState } from 'react'; import { Container, Row, Col, Card, Form, Button, Alert } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { useAuth } from '../../contexts/AuthContext'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './Auth.css'; const ForgotPassword = () => { const [error, setError] = useState(''); const [message, setMessage] = useState(''); const [loading, setLoading] = useState(false); const { resetPassword } = useAuth(); const validationSchema = Yup.object().shape({ email: Yup.string() .email('Invalid email address') .required('Email is required') }); const handleSubmit = async (values, { setSubmitting }) => { try { setMessage(''); setError(''); setLoading(true); await resetPassword(values.email); setMessage('Check your email for password reset instructions'); } catch (err) { console.error("Password reset error:", err); setError('Failed to reset password. Please check if the email is correct.'); } finally { setLoading(false); setSubmitting(false); } }; return ( <>

Reset Password

Enter your email to receive reset instructions

{error && {error}} {message && {message}} {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( )}

); }; export default ForgotPassword; import React, { useState, useEffect } from 'react'; import { Container, Row, Col, Card, Form, Button, Alert } from 'react-bootstrap'; import { Link, useNavigate, useLocation } from 'react-router-dom'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { useAuth } from '../../contexts/AuthContext'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './Auth.css'; const ResetPassword = () => { const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const [oobCode, setOobCode] = useState(''); const navigate = useNavigate(); const location = useLocation(); const { confirmPasswordReset } = useAuth(); useEffect(() => { const queryParams = new URLSearchParams(location.search); const code = queryParams.get('oobCode'); if (code) { setOobCode(code); } else { setError('Invalid or expired password reset link.'); } }, [location]); const validationSchema = Yup.object().shape({ password: Yup.string() .required('Password is required') .min(8, 'Password must be at least 8 characters') .matches( /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, 'Password must contain at least one uppercase letter, one lowercase letter, and one number' ), confirmPassword: Yup.string() .oneOf([Yup.ref('password'), null], 'Passwords must match') .required('Confirm password is required') }); const handleSubmit = async (values, { setSubmitting }) => { if (!oobCode) { setError('Invalid or expired password reset link.'); setSubmitting(false); return; } try { setError(''); setLoading(true); await confirmPasswordReset(oobCode, values.password); navigate('/login', { state: { message: 'Password has been reset successfully. You can now log in with your new password.' } }); } catch (err) { console.error("Password reset confirmation error:", err); setError('Failed to reset password. The link may be invalid or expired.'); } finally { setLoading(false); setSubmitting(false); } }; return ( <>

Create New Password

Enter your new password below

{error && {error}} {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( )}

); }; export default ResetPassword; .auth-container { min-height: calc(100vh - 160px); display: flex; align-items: center; padding: 40px 0; } .auth-card { border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .auth-title { color: var(--primary-color); font-weight: 700; margin-bottom: 10px; } .auth-subtitle { color: var(--dark-gray); opacity: 0.7; margin-bottom: 0; } .auth-link { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .auth-link:hover { color: var(--support-color); text-decoration: underline; } .forgot-password { font-size: 0.9rem; color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } .forgot-password:hover { color: var(--support-color); text-decoration: underline; } .form-label { font-weight: 500; color: var(--dark-gray); } .form-control { padding: 12px; border-radius: 8px; } .form-check-label { font-size: 0.9rem; } @media (max-width: 768px) { .auth-container { padding: 20px 0; } .auth-card { margin: 0 10px; } } import React, { useState, useEffect } from 'react'; import { Container, Row, Col, Card, Button, Form, Table, Badge, Modal } from 'react-bootstrap'; import { Link, useNavigate } from 'react-router-dom'; import { FaPlus, FaSearch, FaCalendarAlt, FaClock, FaUser } from 'react-icons/fa'; import { useAuth } from '../../contexts/AuthContext'; import { useSession } from '../../contexts/SessionContext'; import Header from '../common/Header'; import Footer from '../common/Footer'; import './DoctorDashboard.css'; const DoctorDashboard = () => { const [userData, setUserData] = useState(null); const [loading, setLoading] = useState(true); const [searchTerm, setSearchTerm] = useState(''); const [showNewSessionModal, setShowNewSessionModal] = useState(false); const [newSessionData, setNewSessionData] = useState({ patientName: '', dateOfBirth: '' }); const [formError, setFormError] = useState(''); const { currentUser, getUserData } = useAuth(); const { sessions, fetchSessions, createSession } = useSession(); const navigate = useNavigate(); useEffect(() => { const loadUserData = async () => { if (currentUser) { const data = await getUserData(currentUser.uid); setUserData(data); setLoading(false); } }; loadUserData(); fetchSessions(); }, [currentUser, getUserData, fetchSessions]); const handleNewSessionClick = () => { setShowNewSessionModal(true); setFormError(''); setNewSessionData({ patientName: '', dateOfBirth: '' }); }; const handleCloseModal = () => { setShowNewSessionModal(false); }; const handleInputChange = (e) => { const { name, value } = e.target; setNewSessionData({ ...newSessionData, [name]: value }); }; const handleCreateSession = async () => { if (!newSessionData.patientName.trim()) { setFormError('Patient name is required'); return; } if (!newSessionData.dateOfBirth) { setFormError('Date of birth is required'); return; } try { const session = await createSession( newSessionData.patientName, newSessionData.dateOfBirth ); setShowNewSessionModal(false); navigate(`/session/${session.id}`); } catch (error) { console.error("Error creating session:", error); setFormError('Failed to create session. Please try again.'); } }; const handleSearchChange = (e) => { setSearchTerm(e.target.value); }; const filteredSessions = sessions.filter(session => { const searchLower = searchTerm.toLowerCase(); return ( session.patientName.toLowerCase().includes(searchLower) || session.dateOfBirth.includes(searchTerm) ); }); const recentSessions = filteredSessions.slice(0, 5); const formatDate = (dateString) => { const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }; return new Date(dateString).toLocaleDateString(undefined, options); }; if (loading) { return ( <>

Loading dashboard...

); } return ( <>

Welcome, Dr. {currentUser.displayName}

Subscription

{userData?.subscriptionTier === 'paid' ? 'Premium' : 'Free Tier'}

{userData?.subscriptionTier === 'paid' ? 'Premium' : 'Free'}

Minutes Used

{userData?.minutesUsed || 0}

Minutes Remaining

{userData?.minutesRemaining || 0}

Recent Sessions

{recentSessions.length > 0 ? (

{recentSessions.map((session) => (

Patient Name	Date of Birth	Created	Status	Action
{session.patientName}	{session.dateOfBirth}	{formatDate(session.createdAt)}	{session.status === 'active' ? 'Active' : 'Completed'}

{session.patientName}