import React, { useState, useEffect } from 'react';
import { User, Lock, Mail, Baby, Calendar, DollarSign, Clock, Phone } from 'lucide-react';
const ParentPortalDemo = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [user, setUser] = useState(null);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
// Mock data that would come from Supabase
const mockStudentData = {
children: [
{
id: 'child1',
name: 'Emma Johnson',
classroom: 'Mountain Laurel',
program: 'Primary',
schedule: 'Extended Day',
checkins: [
{ date: '2025-08-09', checkinTime: '8:30 AM', checkoutTime: '5:15 PM', checkinParent: 'Sarah Johnson' },
{ date: '2025-08-08', checkinTime: '8:45 AM', checkoutTime: '5:30 PM', checkinParent: 'Mike Johnson' },
]
},
{
id: 'child2',
name: 'Lucas Johnson',
classroom: 'Elementary',
program: 'Elementary',
schedule: 'Morning',
checkins: [
{ date: '2025-08-09', checkinTime: '8:15 AM', checkoutTime: '12:00 PM', checkinParent: 'Sarah Johnson' },
{ date: '2025-08-08', checkinTime: '8:20 AM', checkoutTime: '12:15 PM', checkinParent: 'Mike Johnson' },
]
}
],
paymentProjections: [
{ month: 'August 2025', amount: 1200, status: 'Due', dueDate: '2025-08-01' },
{ month: 'September 2025', amount: 1200, status: 'Upcoming', dueDate: '2025-09-01' },
{ month: 'October 2025', amount: 1200, status: 'Upcoming', dueDate: '2025-10-01' },
]
};
const handleLogin = async (e) => {
e.preventDefault();
setLoading(true);
// Simulate authentication
setTimeout(() => {
if (email && password) {
setIsAuthenticated(true);
setUser({ email, name: 'Sarah Johnson' });
}
setLoading(false);
}, 1000);
};
const handleLogout = () => {
setIsAuthenticated(false);
setUser(null);
setEmail('');
setPassword('');
};
if (!isAuthenticated) {
return (
Bluebonnet Parent Portal
Sign in to access your child's information
Demo credentials: any email/password combination
{/* Header */}
);
};
export default ParentPortalDemo;
Parent Portal
Welcome, {user.name}
{/* Children Cards */}
{/* Recent Check-ins */}
{/* Payment Projections */}
Your Children
{mockStudentData.children.map((child) => (
{child.name}
{child.classroom} • {child.program}
Schedule:
{child.schedule}
Last Check-in:
{child.checkins[0]?.checkinTime || 'N/A'}
Last Check-out:
{child.checkins[0]?.checkoutTime || 'N/A'}
Recent Check-ins
| Child | Date | Check-in | Check-out | Parent |
|---|---|---|---|---|
| {child.name} | {checkin.date} |
|
|
{checkin.checkinParent} |
Payment Schedule
{mockStudentData.paymentProjections.map((payment, idx) => (
{payment.month}
Due: {payment.dueDate}
${payment.amount}
{payment.status}