import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate } from 'react-router-dom';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { AlertCircle, Calendar, CheckCircle, DollarSign, Home, LogOut, Menu, User, Users, X } from 'lucide-react';

// Mock data - in a real application, this would come from an API
const initialBabysitters = [
  { id: 1, firstName: 'Jane', lastName: 'Doe', email: 'jane@example.com', phone: '0771234567', nin: 'CM12345678ABCDE', age: 25, nextOfKin: 'John Doe (Brother) - 0779876543' },
  { id: 2, firstName: 'Mary', lastName: 'Smith', email: 'mary@example.com', phone: '0782345678', nin: 'CM87654321FGHIJ', age: 28, nextOfKin: 'James Smith (Husband) - 0788765432' },
];

const initialChildren = [
  { id: 1, fullName: 'Emma Johnson', age: 3, parentName: 'Sarah Johnson', parentPhone: '0701234567', specialNeeds: 'Allergic to peanuts', duration: 'full-day' },
  { id: 2, fullName: 'Noah Williams', age: 2, parentName: 'Michael Williams', parentPhone: '0712345678', specialNeeds: 'None', duration: 'half-day' },
];

const initialFinances = {
  income: [
    { id: 1, date: '2023-05-01', source: 'Parent Payment', amount: 50000, description: 'Emma Johnson - Full day (10 days)' },
    { id: 2, date: '2023-05-02', source: 'Parent Payment', amount: 25000, description: 'Noah Williams - Half day (10 days)' },
  ],
  expenses: [
    { id: 1, date: '2023-05-15', category: 'Salaries', amount: 30000, description: 'Jane Doe - May first half' },
    { id: 2, date: '2023-05-15', category: 'Salaries', amount: 25000, description: 'Mary Smith - May first half' },
    { id: 3, date: '2023-05-10', category: 'Toys', amount: 15000, description: 'New educational toys' },
    { id: 4, date: '2023-05-05', category: 'Utilities', amount: 10000, description: 'Electricity bill - May' },
  ],
  budgets: [
    { category: 'Salaries', budgeted: 120000, spent: 55000 },
    { category: 'Toys', budgeted: 30000, spent: 15000 },
    { category: 'Utilities', budgeted: 25000, spent: 10000 },
    { category: 'Maintenance', budgeted: 20000, spent: 0 },
  ]
};

const initialAttendance = {
  children: [
    { id: 1, childId: 1, date: '2023-05-01', status: 'present', duration: 'full-day' },
    { id: 2, childId: 2, date: '2023-05-01', status: 'present', duration: 'half-day' },
    { id: 3, childId: 1, date: '2023-05-02', status: 'absent', duration: 'full-day' },
    { id: 4, childId: 2, date: '2023-05-02', status: 'present', duration: 'half-day' },
  ],
  babysitters: [
    { id: 1, babysitterId: 1, date: '2023-05-01', status: 'present' },
    { id: 2, babysitterId: 2, date: '2023-05-01', status: 'present' },
    { id: 3, babysitterId: 1, date: '2023-05-02', status: 'present' },
    { id: 4, babysitterId: 2, date: '2023-05-02', status: 'absent' },
  ]
};

const initialIncidents = [
  { id: 1, childId: 1, date: '2023-05-01', description: 'Minor fall during playtime. No injury observed.', reportedBy: 1 },
  { id: 2, childId: 2, date: '2023-05-02', description: 'Refused to eat lunch. Parents notified.', reportedBy: 2 },
];

const initialPayments = [
  { id: 1, babysitterId: 1, date: '2023-05-15', amount: 30000, childrenCount: 6, sessionType: 'full-day', status: 'cleared' },
  { id: 2, babysitterId: 2, date: '2023-05-15', amount: 25000, childrenCount: 5, sessionType: 'half-day', status: 'cleared' },
];

// Main App Component
function App() {
  const [user, setUser] = useState(null);
  const [babysitters, setBabysitters] = useState(initialBabysitters);
  const [children, setChildren] = useState(initialChildren);
  const [finances, setFinances] = useState(initialFinances);
  const [attendance, setAttendance] = useState(initialAttendance);
  const [incidents, setIncidents] = useState(initialIncidents);
  const [payments, setPayments] = useState(initialPayments);
  const [sidebarOpen, setSidebarOpen] = useState(true);

  // Mock login function
  const login = (username, password, role) => {
    // In a real app, this would validate credentials against a backend
    setUser({ username, role });
    return true;
  };

  // Mock logout function
  const logout = () => {
    setUser(null);
  };

  // Add babysitter function
  const addBabysitter = (babysitter) => {
    const newBabysitter = {
      ...babysitter,
      id: babysitters.length + 1,
    };
    setBabysitters([...babysitters, newBabysitter]);
  };

  // Add child function
  const addChild = (child) => {
    const newChild = {
      ...child,
      id: children.length + 1,
    };
    setChildren([...children, newChild]);
  };

  // Add income function
  const addIncome = (income) => {
    const newIncome = {
      ...income,
      id: finances.income.length + 1,
      date: new Date().toISOString().split('T')[0],
    };
    setFinances({
      ...finances,
      income: [...finances.income, newIncome],
    });
  };

  // Add expense function
  const addExpense = (expense) => {
    const newExpense = {
      ...expense,
      id: finances.expenses.length + 1,
      date: new Date().toISOString().split('T')[0],
    };
    setFinances({
      ...finances,
      expenses: [...finances.expenses, newExpense],
    });
  };

  // Add child attendance function
  const addChildAttendance = (attendance) => {
    const newAttendance = {
      ...attendance,
      id: initialAttendance.children.length + 1,
      date: new Date().toISOString().split('T')[0],
    };
    setAttendance({
      ...attendance,
      children: [...attendance.children, newAttendance],
    });
  };

  // Add babysitter attendance function
  const addBabysitterAttendance = (attendance) => {
    const newAttendance = {
      ...attendance,
      id: initialAttendance.babysitters.length + 1,
      date: new Date().toISOString().split('T')[0],
    };
    setAttendance({
      ...attendance,
      babysitters: [...attendance.babysitters, newAttendance],
    });
  };

  // Add incident function
  const addIncident = (incident) => {
    const newIncident = {
      ...incident,
      id: incidents.length + 1,
      date: new Date().toISOString().split('T')[0],
    };
    setIncidents([...incidents, newIncident]);
  };

  // Add payment function
  const addPayment = (payment) => {
    const newPayment = {
      ...payment,
      id: payments.length + 1,
      date: new Date().toISOString().split('T')[0],
      status: 'pending',
    };
    setPayments([...payments, newPayment]);
  };

  // Clear payment function
  const clearPayment = (id) => {
    const updatedPayments = payments.map(payment => 
      payment.id === id ? { ...payment, status: 'cleared' } : payment
    );
    setPayments(updatedPayments);
  };

  return (
    <Router>
      <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
        {user ? (
          <div className="flex h-screen overflow-hidden">
            {/* Sidebar */}
            <div className={`bg-white shadow-lg transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-20'} flex flex-col`}>
              <div className="p-4 flex items-center justify-between border-b">
                {sidebarOpen && <h1 className="text-xl font-bold text-[#4F7CAC]">Daystar Daycare</h1>}
                <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 rounded-full hover:bg-gray-100">
                  <Menu size={20} />
                </button>
              </div>
              <nav className="flex-1 overflow-y-auto py-4">
                <ul>
                  <li>
                    <Link to="/dashboard" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
                      <Home size={20} className="text-[#4F7CAC]" />
                      {sidebarOpen && <span className="ml-3">Dashboard</span>}
                    </Link>
                  </li>
                  <li>
                    <Link to="/babysitters" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
                      <User size={20} className="text-[#4F7CAC]" />
                      {sidebarOpen && <span className="ml-3">Babysitters</span>}
                    </Link>
                  </li>
                  <li>
                    <Link to="/children" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
                      <Users size={20} className="text-[#4F7CAC]" />
                      {sidebarOpen && <span className="ml-3">Children</span>}
                    </Link>
                  </li>
                  <li>
                    <Link to="/attendance" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
                      <Calendar size={20} className="text-[#4F7CAC]" />
                      {sidebarOpen && <span className="ml-3">Attendance</span>}
                    </Link>
                  </li>
                  <li>
                    <Link to="/finances" className="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100">
                      <DollarSign size={20} className="text-[#4F7CAC]" />
                      {sidebarOpen && <span className="ml-3">Finances</span>}
                    </Link>
                  </li>
                </ul>
              </nav>
              <div className="p-4 border-t">
                <button 
                  onClick={logout} 
                  className="flex items-center w-full px-4 py-2 text-gray-700 hover:bg-gray-100 rounded"
                >
                  <LogOut size={20} className="text-[#E88873]" />
                  {sidebarOpen && <span className="ml-3">Logout</span>}
                </button>
              </div>
            </div>

            {/* Main Content */}
            <div className="flex-1 overflow-y-auto">
              <header className="bg-white shadow-sm p-4 flex justify-between items-center">
                <h2 className="text-xl font-semibold text-gray-800">
                  {user && `Welcome, ${user.username} (${user.role})`}
                </h2>
                <div className="flex items-center space-x-4">
                  <span className="text-sm text-gray-600">
                    {new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                  </span>
                </div>
              </header>

              <main className="p-6">
                <Routes>
                  <Route path="/dashboard" element={<Dashboard finances={finances} children={children} babysitters={babysitters} incidents={incidents} />} />
                  <Route path="/babysitters" element={<BabysittersManagement babysitters={babysitters} addBabysitter={addBabysitter} payments={payments} addPayment={addPayment} clearPayment={clearPayment} />} />
                  <Route path="/children" element={<ChildrenManagement children={children} addChild={addChild} incidents={incidents} addIncident={addIncident} babysitters={babysitters} />} />
                  <Route path="/attendance" element={<AttendanceManagement attendance={attendance} children={children} babysitters={babysitters} addChildAttendance={addChildAttendance} addBabysitterAttendance={addBabysitterAttendance} />} />
                  <Route path="/finances" element={<FinancesManagement finances={finances} addIncome={addIncome} addExpense={addExpense} />} />
                  <Route path="/" element={<Navigate to="/dashboard" replace />} />
                </Routes>
              </main>
            </div>
          </div>
        ) : (
          <LoginPage login={login} />
        )}
      </div>
    </Router>
  );
}

// Login Page Component
function LoginPage({ login }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState('manager');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username || !password) {
      setError('Please enter both username and password');
      return;
    }
    
    const success = login(username, password, role);
    if (success) {
      navigate('/dashboard');
    } else {
      setError('Invalid credentials');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-[#4F7CAC]">Daystar Daycare</h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Sign in to access the management system
          </p>
        </div>
        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <div className="rounded-md shadow-sm -space-y-px">
            <div>
              <label htmlFor="username" className="sr-only">Username</label>
              <input
                id="username"
                name="username"
                type="text"
                required
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC] focus:z-10 sm:text-sm"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <div>
              <label htmlFor="password" className="sr-only">Password</label>
              <input
                id="password"
                name="password"
                type="password"
                required
                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC] focus:z-10 sm:text-sm"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                id="manager"
                name="role"
                type="radio"
                className="h-4 w-4 text-[#4F7CAC] focus:ring-[#4F7CAC] border-gray-300"
                checked={role === 'manager'}
                onChange={() => setRole('manager')}
              />
              <label htmlFor="manager" className="ml-2 block text-sm text-gray-900">
                Manager
              </label>
            </div>
            <div className="flex items-center">
              <input
                id="babysitter"
                name="role"
                type="radio"
                className="h-4 w-4 text-[#4F7CAC] focus:ring-[#4F7CAC] border-gray-300"
                checked={role === 'babysitter'}
                onChange={() => setRole('babysitter')}
              />
              <label htmlFor="babysitter" className="ml-2 block text-sm text-gray-900">
                Babysitter
              </label>
            </div>
          </div>

          {error && (
            <div className="text-red-500 text-sm text-center">{error}</div>
          )}

          <div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#4F7CAC] hover:bg-[#3D6A9C] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#4F7CAC]"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// Dashboard Component
function Dashboard({ finances, children, babysitters, incidents }) {
  // Calculate total income
  const totalIncome = finances.income.reduce((sum, item) => sum + item.amount, 0);
  
  // Calculate total expenses
  const totalExpenses = finances.expenses.reduce((sum, item) => sum + item.amount, 0);
  
  // Calculate balance
  const balance = totalIncome - totalExpenses;

  // Prepare data for expense by category chart
  const expensesByCategory = finances.expenses.reduce((acc, expense) => {
    if (!acc[expense.category]) {
      acc[expense.category] = 0;
    }
    acc[expense.category] += expense.amount;
    return acc;
  }, {});

  const expenseChartData = Object.keys(expensesByCategory).map(category => ({
    name: category,
    value: expensesByCategory[category]
  }));

  // Colors for pie chart
  const COLORS = ['#4F7CAC', '#F9C784', '#E88873', '#9DD9D2', '#7F7EFF'];

  // Recent incidents
  const recentIncidents = [...incidents].sort((a, b) => new Date(b.date) - new Date(a.date)).slice(0, 3);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
      
      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-gray-700">Total Children</h3>
            <Users size={24} className="text-[#4F7CAC]" />
          </div>
          <p className="text-3xl font-bold mt-2">{children.length}</p>
          <div className="mt-4 text-sm">
            <span className="text-gray-600">Full-day: </span>
            <span className="font-medium">{children.filter(child => child.duration === 'full-day').length}</span>
            <span className="text-gray-600 ml-2">Half-day: </span>
            <span className="font-medium">{children.filter(child => child.duration === 'half-day').length}</span>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-gray-700">Total Babysitters</h3>
            <User size={24} className="text-[#4F7CAC]" />
          </div>
          <p className="text-3xl font-bold mt-2">{babysitters.length}</p>
          <div className="mt-4 text-sm text-gray-600">
            Child to babysitter ratio: <span className="font-medium">{(children.length / babysitters.length).toFixed(1)}</span>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-gray-700">Financial Summary</h3>
            <DollarSign size={24} className="text-[#4F7CAC]" />
          </div>
          <p className="text-3xl font-bold mt-2">{balance.toLocaleString()} UGX</p>
          <div className="mt-4 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-600">Income:</span>
              <span className="font-medium text-green-600">{totalIncome.toLocaleString()} UGX</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Expenses:</span>
              <span className="font-medium text-red-600">{totalExpenses.toLocaleString()} UGX</span>
            </div>
          </div>
        </div>
      </div>
      
      {/* Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">Expenses by Category</h3>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={expenseChartData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                >
                  {expenseChartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => `${value.toLocaleString()} UGX`} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold text-gray-700 mb-4">Budget vs Actual</h3>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={finances.budgets}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="category" />
                <YAxis />
                <Tooltip formatter={(value) => `${value.toLocaleString()} UGX`} />
                <Legend />
                <Bar dataKey="budgeted" name="Budgeted" fill="#4F7CAC" />
                <Bar dataKey="spent" name="Actual" fill="#E88873" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
      
      {/* Recent Incidents */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold text-gray-700 mb-4">Recent Incidents</h3>
        {recentIncidents.length > 0 ? (
          <div className="space-y-4">
            {recentIncidents.map(incident => {
              const child = children.find(c => c.id === incident.childId);
              const babysitter = babysitters.find(b => b.id === incident.reportedBy);
              
              return (
                <div key={incident.id} className="border-l-4 border-[#E88873] pl-4 py-2">
                  <div className="flex justify-between">
                    <h4 className="font-medium">{child ? child.fullName : 'Unknown Child'}</h4>
                    <span className="text-sm text-gray-600">{new Date(incident.date).toLocaleDateString()}</span>
                  </div>
                  <p className="text-gray-700 mt-1">{incident.description}</p>
                  <p className="text-sm text-gray-600 mt-1">Reported by: {babysitter ? `${babysitter.firstName} ${babysitter.lastName}` : 'Unknown'}</p>
                </div>
              );
            })}
          </div>
        ) : (
          <p className="text-gray-600">No recent incidents reported.</p>
        )}
      </div>
    </div>
  );
}

// Babysitters Management Component
function BabysittersManagement({ babysitters, addBabysitter, payments, addPayment, clearPayment }) {
  const [showAddForm, setShowAddForm] = useState(false);
  const [showPaymentForm, setShowPaymentForm] = useState(false);
  const [activeTab, setActiveTab] = useState('list');
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    nin: '',
    age: '',
    nextOfKin: ''
  });
  const [paymentData, setPaymentData] = useState({
    babysitterId: '',
    childrenCount: '',
    sessionType: 'full-day',
    amount: 0
  });
  const [errors, setErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handlePaymentInputChange = (e) => {
    const { name, value } = e.target;
    
    // Calculate amount based on children count and session type
    let newPaymentData = {
      ...paymentData,
      [name]: value
    };
    
    if (name === 'childrenCount' || name === 'sessionType') {
      const rate = newPaymentData.sessionType === 'full-day' ? 5000 : 2000;
      newPaymentData.amount = newPaymentData.childrenCount ? parseInt(newPaymentData.childrenCount) * rate : 0;
    }
    
    setPaymentData(newPaymentData);
  };

  const validateForm = () => {
    const newErrors = {};
    
    if (!formData.firstName) newErrors.firstName = 'First name is required';
    if (!formData.lastName) newErrors.lastName = 'Last name is required';
    if (!formData.phone) newErrors.phone = 'Phone number is required';
    if (!formData.nin) newErrors.nin = 'NIN is required';
    if (!formData.age) {
      newErrors.age = 'Age is required';
    } else if (parseInt(formData.age) < 21 || parseInt(formData.age) > 35) {
      newErrors.age = 'Age must be between 21 and 35';
    }
    if (!formData.nextOfKin) newErrors.nextOfKin = 'Next of kin information is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validatePaymentForm = () => {
    const newErrors = {};
    
    if (!paymentData.babysitterId) newErrors.babysitterId = 'Babysitter is required';
    if (!paymentData.childrenCount) newErrors.childrenCount = 'Number of children is required';
    if (parseInt(paymentData.childrenCount) <= 0) newErrors.childrenCount = 'Number of children must be greater than 0';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      addBabysitter({
        ...formData,
        age: parseInt(formData.age)
      });
      setFormData({
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        nin: '',
        age: '',
        nextOfKin: ''
      });
      setShowAddForm(false);
    }
  };

  const handlePaymentSubmit = (e) => {
    e.preventDefault();
    
    if (validatePaymentForm()) {
      addPayment({
        ...paymentData,
        childrenCount: parseInt(paymentData.childrenCount),
        amount: parseInt(paymentData.amount)
      });
      setPaymentData({
        babysitterId: '',
        childrenCount: '',
        sessionType: 'full-day',
        amount: 0
      });
      setShowPaymentForm(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-800">Babysitters Management</h1>
        <div className="flex space-x-2">
          <button
            onClick={() => setActiveTab('list')}
            className={`px-4 py-2 rounded-md ${activeTab === 'list' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Babysitters List
          </button>
          <button
            onClick={() => setActiveTab('payments')}
            className={`px-4 py-2 rounded-md ${activeTab === 'payments' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Payments
          </button>
        </div>
      </div>

      {activeTab === 'list' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowAddForm(!showAddForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showAddForm ? 'Cancel' : 'Add Babysitter'}
            </button>
          </div>

          {showAddForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Add New Babysitter</h2>
              <form onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                    <input
                      type="text"
                      name="firstName"
                      value={formData.firstName}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.firstName && <p className="mt-1 text-sm text-red-500">{errors.firstName}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                    <input
                      type="text"
                      name="lastName"
                      value={formData.lastName}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.lastName && <p className="mt-1 text-sm text-red-500">{errors.lastName}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Email (Optional)</label>
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                    <input
                      type="text"
                      name="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.phone && <p className="mt-1 text-sm text-red-500">{errors.phone}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">National ID Number</label>
                    <input
                      type="text"
                      name="nin"
                      value={formData.nin}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.nin ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.nin && <p className="mt-1 text-sm text-red-500">{errors.nin}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Age</label>
                    <input
                      type="number"
                      name="age"
                      value={formData.age}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.age ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.age && <p className="mt-1 text-sm text-red-500">{errors.age}</p>}
                  </div>
                  
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Next of Kin Contact</label>
                    <input
                      type="text"
                      name="nextOfKin"
                      value={formData.nextOfKin}
                      onChange={handleInputChange}
                      placeholder="Name (Relationship) - Phone Number"
                      className={`w-full px-3 py-2 border ${errors.nextOfKin ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.nextOfKin && <p className="mt-1 text-sm text-red-500">{errors.nextOfKin}</p>}
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowAddForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Add Babysitter
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NIN</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next of Kin</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {babysitters.map(babysitter => (
                  <tr key={babysitter.id}>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium text-gray-900">{babysitter.firstName} {babysitter.lastName}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900">{babysitter.phone}</div>
                      {babysitter.email && <div className="text-sm text-gray-500">{babysitter.email}</div>}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {babysitter.nin}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {babysitter.age}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {babysitter.nextOfKin}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}

      {activeTab === 'payments' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowPaymentForm(!showPaymentForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showPaymentForm ? 'Cancel' : 'Add Payment'}
            </button>
          </div>

          {showPaymentForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Add New Payment</h2>
              <form onSubmit={handlePaymentSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Babysitter</label>
                    <select
                      name="babysitterId"
                      value={paymentData.babysitterId}
                      onChange={handlePaymentInputChange}
                      className={`w-full px-3 py-2 border ${errors.babysitterId ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    >
                      <option value="">Select Babysitter</option>
                      {babysitters.map(babysitter => (
                        <option key={babysitter.id} value={babysitter.id}>
                          {babysitter.firstName} {babysitter.lastName}
                        </option>
                      ))}
                    </select>
                    {errors.babysitterId && <p className="mt-1 text-sm text-red-500">{errors.babysitterId}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Number of Children</label>
                    <input
                      type="number"
                      name="childrenCount"
                      value={paymentData.childrenCount}
                      onChange={handlePaymentInputChange}
                      className={`w-full px-3 py-2 border ${errors.childrenCount ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.childrenCount && <p className="mt-1 text-sm text-red-500">{errors.childrenCount}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Session Type</label>
                    <select
                      name="sessionType"
                      value={paymentData.sessionType}
                      onChange={handlePaymentInputChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                    >
                      <option value="full-day">Full Day (5,000 UGX per child)</option>
                      <option value="half-day">Half Day (2,000 UGX per child)</option>
                    </select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Amount</label>
                    <input
                      type="text"
                      value={`${paymentData.amount.toLocaleString()} UGX`}
                      readOnly
                      className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50"
                    />
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowPaymentForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Add Payment
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Babysitter</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Children</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Session</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {payments.map(payment => {
                  const babysitter = babysitters.find(b => b.id === parseInt(payment.babysitterId));
                  
                  return (
                    <tr key={payment.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {new Date(payment.date).toLocaleDateString()}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">
                          {babysitter ? `${babysitter.firstName} ${babysitter.lastName}` : 'Unknown'}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {payment.childrenCount}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {payment.sessionType === 'full-day' ? 'Full Day' : 'Half Day'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {payment.amount.toLocaleString()} UGX
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${payment.status === 'cleared' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                          {payment.status === 'cleared' ? 'Cleared' : 'Pending'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        {payment.status === 'pending' && (
                          <button
                            onClick={() => clearPayment(payment.id)}
                            className="text-[#4F7CAC] hover:text-[#3D6A9C]"
                          >
                            Clear Payment
                          </button>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

// Children Management Component
function ChildrenManagement({ children, addChild, incidents, addIncident, babysitters }) {
  const [showAddForm, setShowAddForm] = useState(false);
  const [showIncidentForm, setShowIncidentForm] = useState(false);
  const [activeTab, setActiveTab] = useState('list');
  const [formData, setFormData] = useState({
    fullName: '',
    age: '',
    parentName: '',
    parentPhone: '',
    specialNeeds: '',
    duration: 'full-day'
  });
  const [incidentData, setIncidentData] = useState({
    childId: '',
    description: '',
    reportedBy: ''
  });
  const [errors, setErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleIncidentInputChange = (e) => {
    const { name, value } = e.target;
    setIncidentData({
      ...incidentData,
      [name]: value
    });
  };

  const validateForm = () => {
    const newErrors = {};
    
    if (!formData.fullName) newErrors.fullName = 'Full name is required';
    if (!formData.age) newErrors.age = 'Age is required';
    if (parseInt(formData.age) < 0) newErrors.age = 'Age must be a positive number';
    if (!formData.parentName) newErrors.parentName = 'Parent name is required';
    if (!formData.parentPhone) newErrors.parentPhone = 'Parent phone is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validateIncidentForm = () => {
    const newErrors = {};
    
    if (!incidentData.childId) newErrors.childId = 'Child is required';
    if (!incidentData.description) newErrors.description = 'Description is required';
    if (!incidentData.reportedBy) newErrors.reportedBy = 'Reporter is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      addChild({
        ...formData,
        age: parseInt(formData.age)
      });
      setFormData({
        fullName: '',
        age: '',
        parentName: '',
        parentPhone: '',
        specialNeeds: '',
        duration: 'full-day'
      });
      setShowAddForm(false);
    }
  };

  const handleIncidentSubmit = (e) => {
    e.preventDefault();
    
    if (validateIncidentForm()) {
      addIncident({
        ...incidentData,
        childId: parseInt(incidentData.childId),
        reportedBy: parseInt(incidentData.reportedBy)
      });
      setIncidentData({
        childId: '',
        description: '',
        reportedBy: ''
      });
      setShowIncidentForm(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-800">Children Management</h1>
        <div className="flex space-x-2">
          <button
            onClick={() => setActiveTab('list')}
            className={`px-4 py-2 rounded-md ${activeTab === 'list' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Children List
          </button>
          <button
            onClick={() => setActiveTab('incidents')}
            className={`px-4 py-2 rounded-md ${activeTab === 'incidents' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Incidents
          </button>
        </div>
      </div>

      {activeTab === 'list' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowAddForm(!showAddForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showAddForm ? 'Cancel' : 'Add Child'}
            </button>
          </div>

          {showAddForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Add New Child</h2>
              <form onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                    <input
                      type="text"
                      name="fullName"
                      value={formData.fullName}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.fullName ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.fullName && <p className="mt-1 text-sm text-red-500">{errors.fullName}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Age</label>
                    <input
                      type="number"
                      name="age"
                      value={formData.age}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.age ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.age && <p className="mt-1 text-sm text-red-500">{errors.age}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Parent/Guardian Name</label>
                    <input
                      type="text"
                      name="parentName"
                      value={formData.parentName}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.parentName ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.parentName && <p className="mt-1 text-sm text-red-500">{errors.parentName}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Parent/Guardian Phone</label>
                    <input
                      type="text"
                      name="parentPhone"
                      value={formData.parentPhone}
                      onChange={handleInputChange}
                      className={`w-full px-3 py-2 border ${errors.parentPhone ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.parentPhone && <p className="mt-1 text-sm text-red-500">{errors.parentPhone}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Special Needs/Allergies</label>
                    <textarea
                      name="specialNeeds"
                      value={formData.specialNeeds}
                      onChange={handleInputChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                      rows="3"
                    ></textarea>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Duration</label>
                    <select
                      name="duration"
                      value={formData.duration}
                      onChange={handleInputChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                    >
                      <option value="full-day">Full Day</option>
                      <option value="half-day">Half Day</option>
                    </select>
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowAddForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Add Child
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parent/Guardian</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Special Needs</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {children.map(child => (
                  <tr key={child.id}>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm font-medium text-gray-900">{child.fullName}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {child.age}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="text-sm text-gray-900">{child.parentName}</div>
                      <div className="text-sm text-gray-500">{child.parentPhone}</div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {child.specialNeeds || 'None'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {child.duration === 'full-day' ? 'Full Day' : 'Half Day'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}

      {activeTab === 'incidents' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowIncidentForm(!showIncidentForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showIncidentForm ? 'Cancel' : 'Report Incident'}
            </button>
          </div>

          {showIncidentForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Report New Incident</h2>
              <form onSubmit={handleIncidentSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Child</label>
                    <select
                      name="childId"
                      value={incidentData.childId}
                      onChange={handleIncidentInputChange}
                      className={`w-full px-3 py-2 border ${errors.childId ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    >
                      <option value="">Select Child</option>
                      {children.map(child => (
                        <option key={child.id} value={child.id}>
                          {child.fullName}
                        </option>
                      ))}
                    </select>
                    {errors.childId && <p className="mt-1 text-sm text-red-500">{errors.childId}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Reported By</label>
                    <select
                      name="reportedBy"
                      value={incidentData.reportedBy}
                      onChange={handleIncidentInputChange}
                      className={`w-full px-3 py-2 border ${errors.reportedBy ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    >
                      <option value="">Select Babysitter</option>
                      {babysitters.map(babysitter => (
                        <option key={babysitter.id} value={babysitter.id}>
                          {babysitter.firstName} {babysitter.lastName}
                        </option>
                      ))}
                    </select>
                    {errors.reportedBy && <p className="mt-1 text-sm text-red-500">{errors.reportedBy}</p>}
                  </div>
                  
                  <div className="md:col-span-2">
                    <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea
                      name="description"
                      value={incidentData.description}
                      onChange={handleIncidentInputChange}
                      className={`w-full px-3 py-2 border ${errors.description ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                      rows="4"
                    ></textarea>
                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowIncidentForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Report Incident
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Child</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reported By</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {incidents.map(incident => {
                  const child = children.find(c => c.id === incident.childId);
                  const babysitter = babysitters.find(b => b.id === incident.reportedBy);
                  
                  return (
                    <tr key={incident.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {new Date(incident.date).toLocaleDateString()}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium text-gray-900">
                          {child ? child.fullName : 'Unknown Child'}
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{incident.description}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {babysitter ? `${babysitter.firstName} ${babysitter.lastName}` : 'Unknown'}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

// Attendance Management Component
function AttendanceManagement({ attendance, children, babysitters, addChildAttendance, addBabysitterAttendance }) {
  const [activeTab, setActiveTab] = useState('children');
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [childAttendanceData, setChildAttendanceData] = useState({
    childId: '',
    status: 'present',
    duration: 'full-day'
  });
  const [babysitterAttendanceData, setBabysitterAttendanceData] = useState({
    babysitterId: '',
    status: 'present'
  });
  const [errors, setErrors] = useState({});

  const handleChildInputChange = (e) => {
    const { name, value } = e.target;
    setChildAttendanceData({
      ...childAttendanceData,
      [name]: value
    });
  };

  const handleBabysitterInputChange = (e) => {
    const { name, value } = e.target;
    setBabysitterAttendanceData({
      ...babysitterAttendanceData,
      [name]: value
    });
  };

  const validateChildForm = () => {
    const newErrors = {};
    
    if (!childAttendanceData.childId) newErrors.childId = 'Child is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validateBabysitterForm = () => {
    const newErrors = {};
    
    if (!babysitterAttendanceData.babysitterId) newErrors.babysitterId = 'Babysitter is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleChildSubmit = (e) => {
    e.preventDefault();
    
    if (validateChildForm()) {
      addChildAttendance({
        ...childAttendanceData,
        childId: parseInt(childAttendanceData.childId),
        date: selectedDate
      });
      setChildAttendanceData({
        childId: '',
        status: 'present',
        duration: 'full-day'
      });
    }
  };

  const handleBabysitterSubmit = (e) => {
    e.preventDefault();
    
    if (validateBabysitterForm()) {
      addBabysitterAttendance({
        ...babysitterAttendanceData,
        babysitterId: parseInt(babysitterAttendanceData.babysitterId),
        date: selectedDate
      });
      setBabysitterAttendanceData({
        babysitterId: '',
        status: 'present'
      });
    }
  };

  // Filter attendance records by selected date
  const filteredChildAttendance = attendance.children.filter(record => record.date === selectedDate);
  const filteredBabysitterAttendance = attendance.babysitters.filter(record => record.date === selectedDate);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-800">Attendance Management</h1>
        <div className="flex space-x-2">
          <button
            onClick={() => setActiveTab('children')}
            className={`px-4 py-2 rounded-md ${activeTab === 'children' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Children Attendance
          </button>
          <button
            onClick={() => setActiveTab('babysitters')}
            className={`px-4 py-2 rounded-md ${activeTab === 'babysitters' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Babysitters Attendance
          </button>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-gray-800">
            {activeTab === 'children' ? 'Children Attendance' : 'Babysitters Attendance'}
          </h2>
          <div className="flex items-center space-x-2">
            <label className="text-sm font-medium text-gray-700">Date:</label>
            <input
              type="date"
              value={selectedDate}
              onChange={(e) => setSelectedDate(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
            />
          </div>
        </div>

        {activeTab === 'children' && (
          <>
            <form onSubmit={handleChildSubmit} className="mb-6">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Child</label>
                  <select
                    name="childId"
                    value={childAttendanceData.childId}
                    onChange={handleChildInputChange}
                    className={`w-full px-3 py-2 border ${errors.childId ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                  >
                    <option value="">Select Child</option>
                    {children.map(child => (
                      <option key={child.id} value={child.id}>
                        {child.fullName}
                      </option>
                    ))}
                  </select>
                  {errors.childId && <p className="mt-1 text-sm text-red-500">{errors.childId}</p>}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                  <select
                    name="status"
                    value={childAttendanceData.status}
                    onChange={handleChildInputChange}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                  >
                    <option value="present">Present</option>
                    <option value="absent">Absent</option>
                  </select>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Duration</label>
                  <select
                    name="duration"
                    value={childAttendanceData.duration}
                    onChange={handleChildInputChange}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                  >
                    <option value="full-day">Full Day</option>
                    <option value="half-day">Half Day</option>
                  </select>
                </div>
                
                <div className="flex items-end">
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] w-full"
                  >
                    Record Attendance
                  </button>
                </div>
              </div>
            </form>

            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Child</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredChildAttendance.map(record => {
                    const child = children.find(c => c.id === record.childId);
                    
                    return (
                      <tr key={record.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">
                            {child ? child.fullName : 'Unknown Child'}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.status === 'present' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                            {record.status === 'present' ? 'Present' : 'Absent'}
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          {record.duration === 'full-day' ? 'Full Day' : 'Half Day'}
                        </td>
                      </tr>
                    );
                  })}
                  {filteredChildAttendance.length === 0 && (
                    <tr>
                      <td colSpan="3" className="px-6 py-4 text-center text-sm text-gray-500">
                        No attendance records for this date.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </>
        )}

        {activeTab === 'babysitters' && (
          <>
            <form onSubmit={handleBabysitterSubmit} className="mb-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Babysitter</label>
                  <select
                    name="babysitterId"
                    value={babysitterAttendanceData.babysitterId}
                    onChange={handleBabysitterInputChange}
                    className={`w-full px-3 py-2 border ${errors.babysitterId ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                  >
                    <option value="">Select Babysitter</option>
                    {babysitters.map(babysitter => (
                      <option key={babysitter.id} value={babysitter.id}>
                        {babysitter.firstName} {babysitter.lastName}
                      </option>
                    ))}
                  </select>
                  {errors.babysitterId && <p className="mt-1 text-sm text-red-500">{errors.babysitterId}</p>}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                  <select
                    name="status"
                    value={babysitterAttendanceData.status}
                    onChange={handleBabysitterInputChange}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]"
                  >
                    <option value="present">Present</option>
                    <option value="absent">Absent</option>
                  </select>
                </div>
                
                <div className="flex items-end">
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] w-full"
                  >
                    Record Attendance
                  </button>
                </div>
              </div>
            </form>

            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Babysitter</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {filteredBabysitterAttendance.map(record => {
                    const babysitter = babysitters.find(b => b.id === record.babysitterId);
                    
                    return (
                      <tr key={record.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">
                            {babysitter ? `${babysitter.firstName} ${babysitter.lastName}` : 'Unknown Babysitter'}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.status === 'present' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                            {record.status === 'present' ? 'Present' : 'Absent'}
                          </span>
                        </td>
                      </tr>
                    );
                  })}
                  {filteredBabysitterAttendance.length === 0 && (
                    <tr>
                      <td colSpan="2" className="px-6 py-4 text-center text-sm text-gray-500">
                        No attendance records for this date.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// Finances Management Component
function FinancesManagement({ finances, addIncome, addExpense }) {
  const [activeTab, setActiveTab] = useState('overview');
  const [showAddIncomeForm, setShowAddIncomeForm] = useState(false);
  const [showAddExpenseForm, setShowAddExpenseForm] = useState(false);
  const [incomeData, setIncomeData] = useState({
    source: 'Parent Payment',
    amount: '',
    description: ''
  });
  const [expenseData, setExpenseData] = useState({
    category: 'Salaries',
    amount: '',
    description: ''
  });
  const [errors, setErrors] = useState({});

  // Calculate total income
  const totalIncome = finances.income.reduce((sum, item) => sum + item.amount, 0);
  
  // Calculate total expenses
  const totalExpenses = finances.expenses.reduce((sum, item) => sum + item.amount, 0);
  
  // Calculate balance
  const balance = totalIncome - totalExpenses;

  // Prepare data for expense by category chart
  const expensesByCategory = finances.expenses.reduce((acc, expense) => {
    if (!acc[expense.category]) {
      acc[expense.category] = 0;
    }
    acc[expense.category] += expense.amount;
    return acc;
  }, {});

  const expenseChartData = Object.keys(expensesByCategory).map(category => ({
    name: category,
    value: expensesByCategory[category]
  }));

  // Colors for pie chart
  const COLORS = ['#4F7CAC', '#F9C784', '#E88873', '#9DD9D2', '#7F7EFF'];

  const handleIncomeInputChange = (e) => {
    const { name, value } = e.target;
    setIncomeData({
      ...incomeData,
      [name]: value
    });
  };

  const handleExpenseInputChange = (e) => {
    const { name, value } = e.target;
    setExpenseData({
      ...expenseData,
      [name]: value
    });
  };

  const validateIncomeForm = () => {
    const newErrors = {};
    
    if (!incomeData.source) newErrors.source = 'Source is required';
    if (!incomeData.amount) {
      newErrors.amount = 'Amount is required';
    } else if (isNaN(incomeData.amount) || parseInt(incomeData.amount) <= 0) {
      newErrors.amount = 'Amount must be a positive number';
    }
    if (!incomeData.description) newErrors.description = 'Description is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validateExpenseForm = () => {
    const newErrors = {};
    
    if (!expenseData.category) newErrors.category = 'Category is required';
    if (!expenseData.amount) {
      newErrors.amount = 'Amount is required';
    } else if (isNaN(expenseData.amount) || parseInt(expenseData.amount) <= 0) {
      newErrors.amount = 'Amount must be a positive number';
    }
    if (!expenseData.description) newErrors.description = 'Description is required';
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleIncomeSubmit = (e) => {
    e.preventDefault();
    
    if (validateIncomeForm()) {
      addIncome({
        ...incomeData,
        amount: parseInt(incomeData.amount)
      });
      setIncomeData({
        source: 'Parent Payment',
        amount: '',
        description: ''
      });
      setShowAddIncomeForm(false);
    }
  };

  const handleExpenseSubmit = (e) => {
    e.preventDefault();
    
    if (validateExpenseForm()) {
      addExpense({
        ...expenseData,
        amount: parseInt(expenseData.amount)
      });
      setExpenseData({
        category: 'Salaries',
        amount: '',
        description: ''
      });
      setShowAddExpenseForm(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-800">Financial Management</h1>
        <div className="flex space-x-2">
          <button
            onClick={() => setActiveTab('overview')}
            className={`px-4 py-2 rounded-md ${activeTab === 'overview' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Overview
          </button>
          <button
            onClick={() => setActiveTab('income')}
            className={`px-4 py-2 rounded-md ${activeTab === 'income' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Income
          </button>
          <button
            onClick={() => setActiveTab('expenses')}
            className={`px-4 py-2 rounded-md ${activeTab === 'expenses' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Expenses
          </button>
          <button
            onClick={() => setActiveTab('budget')}
            className={`px-4 py-2 rounded-md ${activeTab === 'budget' ? 'bg-[#4F7CAC] text-white' : 'bg-gray-200 text-gray-700'}`}
          >
            Budget
          </button>
        </div>
      </div>

      {activeTab === 'overview' && (
        <div className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-2">Total Income</h3>
              <p className="text-3xl font-bold text-green-600">{totalIncome.toLocaleString()} UGX</p>
            </div>
            
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-2">Total Expenses</h3>
              <p className="text-3xl font-bold text-red-600">{totalExpenses.toLocaleString()} UGX</p>
            </div>
            
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-2">Balance</h3>
              <p className={`text-3xl font-bold ${balance >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                {balance.toLocaleString()} UGX
              </p>
            </div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">Expenses by Category</h3>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={expenseChartData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                      label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                    >
                      {expenseChartData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(value) => `${value.toLocaleString()} UGX`} />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </div>
            
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-4">Budget vs Actual</h3>
              <div className="h-64">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={finances.budgets}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="category" />
                    <YAxis />
                    <Tooltip formatter={(value) => `${value.toLocaleString()} UGX`} />
                    <Legend />
                    <Bar dataKey="budgeted" name="Budgeted" fill="#4F7CAC" />
                    <Bar dataKey="spent" name="Actual" fill="#E88873" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>
          
          <div className="bg-white rounded-lg shadow p-6">
            <h3 className="text-lg font-semibold text-gray-700 mb-4">Recent Transactions</h3>
            <div className="overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {[...finances.income.map(item => ({ ...item, type: 'Income', category: item.source })), 
                    ...finances.expenses.map(item => ({ ...item, type: 'Expense' }))]
                    .sort((a, b) => new Date(b.date) - new Date(a.date))
                    .slice(0, 5)
                    .map((transaction, index) => (
                    <tr key={`${transaction.type}-${transaction.id}`}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {new Date(transaction.date).toLocaleDateString()}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${transaction.type === 'Income' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                          {transaction.type}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {transaction.category}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.description}
                      </td>
                      <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${transaction.type === 'Income' ? 'text-green-600' : 'text-red-600'}`}>
                        {transaction.type === 'Income' ? '+' : '-'}{transaction.amount.toLocaleString()} UGX
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'income' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowAddIncomeForm(!showAddIncomeForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showAddIncomeForm ? 'Cancel' : 'Add Income'}
            </button>
          </div>

          {showAddIncomeForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Add New Income</h2>
              <form onSubmit={handleIncomeSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Source</label>
                    <select
                      name="source"
                      value={incomeData.source}
                      onChange={handleIncomeInputChange}
                      className={`w-full px-3 py-2 border ${errors.source ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    >
                      <option value="Parent Payment">Parent Payment</option>
                      <option value="Donation">Donation</option>
                      <option value="Other">Other</option>
                    </select>
                    {errors.source && <p className="mt-1 text-sm text-red-500">{errors.source}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Amount (UGX)</label>
                    <input
                      type="number"
                      name="amount"
                      value={incomeData.amount}
                      onChange={handleIncomeInputChange}
                      className={`w-full px-3 py-2 border ${errors.amount ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.amount && <p className="mt-1 text-sm text-red-500">{errors.amount}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <input
                      type="text"
                      name="description"
                      value={incomeData.description}
                      onChange={handleIncomeInputChange}
                      className={`w-full px-3 py-2 border ${errors.description ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowAddIncomeForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Add Income
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {finances.income.map(income => (
                  <tr key={income.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {new Date(income.date).toLocaleDateString()}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {income.source}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {income.description}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">
                      {income.amount.toLocaleString()} UGX
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot className="bg-gray-50">
                <tr>
                  <td colSpan="3" className="px-6 py-4 text-sm font-medium text-gray-900 text-right">
                    Total Income:
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">
                    {totalIncome.toLocaleString()} UGX
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </>
      )}

      {activeTab === 'expenses' && (
        <>
          <div className="flex justify-end">
            <button
              onClick={() => setShowAddExpenseForm(!showAddExpenseForm)}
              className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C] transition-colors"
            >
              {showAddExpenseForm ? 'Cancel' : 'Add Expense'}
            </button>
          </div>

          {showAddExpenseForm && (
            <div className="bg-white rounded-lg shadow p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-800 mb-4">Add New Expense</h2>
              <form onSubmit={handleExpenseSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select
                      name="category"
                      value={expenseData.category}
                      onChange={handleExpenseInputChange}
                      className={`w-full px-3 py-2 border ${errors.category ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    >
                      <option value="Salaries">Salaries</option>
                      <option value="Toys">Toys</option>
                      <option value="Utilities">Utilities</option>
                      <option value="Maintenance">Maintenance</option>
                      <option value="Other">Other</option>
                    </select>
                    {errors.category && <p className="mt-1 text-sm text-red-500">{errors.category}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Amount (UGX)</label>
                    <input
                      type="number"
                      name="amount"
                      value={expenseData.amount}
                      onChange={handleExpenseInputChange}
                      className={`w-full px-3 py-2 border ${errors.amount ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.amount && <p className="mt-1 text-sm text-red-500">{errors.amount}</p>}
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <input
                      type="text"
                      name="description"
                      value={expenseData.description}
                      onChange={handleExpenseInputChange}
                      className={`w-full px-3 py-2 border ${errors.description ? 'border-red-500' : 'border-gray-300'} rounded-md focus:outline-none focus:ring-[#4F7CAC] focus:border-[#4F7CAC]`}
                    />
                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
                  </div>
                </div>
                
                <div className="mt-6 flex justify-end">
                  <button
                    type="button"
                    onClick={() => setShowAddExpenseForm(false)}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-4 py-2 bg-[#4F7CAC] text-white rounded-md hover:bg-[#3D6A9C]"
                  >
                    Add Expense
                  </button>
                </div>
              </form>
            </div>
          )}

          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {finances.expenses.map(expense => (
                  <tr key={expense.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {new Date(expense.date).toLocaleDateString()}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {expense.category}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {expense.description}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">
                      {expense.amount.toLocaleString()} UGX
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot className="bg-gray-50">
                <tr>
                  <td colSpan="3" className="px-6 py-4 text-sm font-medium text-gray-900 text-right">
                    Total Expenses:
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">
                    {totalExpenses.toLocaleString()} UGX
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </>
      )}

      {activeTab === 'budget' && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-semibold text-gray-800 mb-6">Budget Management</h2>
          
          <div className="overflow-hidden mb-6">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budgeted Amount</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual Spent</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Remaining</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {finances.budgets.map((budget, index) => {
                  const remaining = budget.budgeted - budget.spent;
                  const percentSpent = (budget.spent / budget.budgeted) * 100;
                  
                  return (
                    <tr key={index}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {budget.category}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {budget.budgeted.toLocaleString()} UGX
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {budget.spent.toLocaleString()} UGX
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {remaining.toLocaleString()} UGX
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                            <div 
                              className={`h-2.5 rounded-full ${percentSpent > 90 ? 'bg-red-600' : percentSpent > 70 ? 'bg-yellow-500' : 'bg-green-600'}`} 
                              style={{ width: `${Math.min(percentSpent, 100)}%` }}
                            ></div>
                          </div>
                          <span className="text-xs font-medium text-gray-900">{percentSpent.toFixed(0)}%</span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={finances.budgets}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="category" />
                <YAxis />
                <Tooltip formatter={(value) => `${value.toLocaleString()} UGX`} />
                <Legend />
                <Bar dataKey="budgeted" name="Budgeted" fill="#4F7CAC" />
                <Bar dataKey="spent" name="Actual" fill="#E88873" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;