exister 1.0.0

package/frontend-project/src/App.jsx

@@ -0,0 +1,1888 @@
+// // import { useState, useEffect, useCallback } from 'react';
+// // import axios from 'axios';
+
+// // function App() {
+// //   const [activeTab, setActiveTab] = useState('dashboard');
+// //   const [isAuthenticated, setIsAuthenticated] = useState(false);
+// //   const [loginData, setLoginData] = useState({ username: '', password: '' });
+// //   const [user, setUser] = useState(null);
+
+// //   // Data States
+// //   const [patients, setPatients] = useState([]);
+// //   const [doctors, setDoctors] = useState([]);
+// //   const [appointments, setAppointments] = useState([]);
+// //   const [payments, setPayments] = useState([]);
+
+// //   // Form States
+// //   const [patientForm, setPatientForm] = useState({ PatientID: null, Name: '', Age: '', Phone: '' });
+// //   const [doctorForm, setDoctorForm] = useState({ DoctorID: null, Name: '', Specialization: '' });
+// //   const [appointmentForm, setAppointmentForm] = useState({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+// //   const [paymentForm, setPaymentForm] = useState({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+
+// //   // Authentication
+// //   const handleLogin = async (e) => {
+// //     e.preventDefault();
+// //     try {
+// //       const response = await axios.post('http://localhost:5000/api/login', loginData, {
+// //         headers: { 'Content-Type': 'application/json' }
+// //       });
+// //       if (response.data.success) {
+// //         setIsAuthenticated(true);
+// //         setUser(response.data.user);
+// //         setLoginData({ username: '', password: '' });
+// //       } else {
+// //         alert(response.data.message);
+// //       }
+// //     } catch (error) {
+// //       if (error.response && error.response.data && error.response.data.message) {
+// //         alert(error.response.data.message);
+// //       } else {
+// //         alert('Login failed. Please check backend connection.');
+// //       }
+// //     }
+// //   };
+
+// //   const handleLogout = () => {
+// //     setIsAuthenticated(false);
+// //     setUser(null);
+// //     setActiveTab('dashboard');
+// //   };
+
+// //   // Fetch Data Functions
+// //   const fetchPatients = useCallback(async () => {
+// //     try {
+// //       const response = await axios.get('http://localhost:5000/api/patients');
+// //       setPatients(response.data);
+// //     } catch (err) { console.error(err); }
+// //   }, []);
+
+// //   const fetchDoctors = useCallback(async () => {
+// //     try {
+// //       const response = await axios.get('http://localhost:5000/api/doctors');
+// //       setDoctors(response.data);
+// //     } catch (err) { console.error(err); }
+// //   }, []);
+
+// //   const fetchAppointments = useCallback(async () => {
+// //     try {
+// //       const response = await axios.get('http://localhost:5000/api/appointments');
+// //       setAppointments(response.data);
+// //     } catch (err) { console.error(err); }
+// //   }, []);
+
+// //   const fetchPayments = useCallback(async () => {
+// //     try {
+// //       const response = await axios.get('http://localhost:5000/api/payments');
+// //       setPayments(response.data);
+// //     } catch (err) { console.error(err); }
+// //   }, []);
+
+// //   const fetchAllData = useCallback(() => {
+// //     fetchPatients();
+// //     fetchDoctors();
+// //     fetchAppointments();
+// //     fetchPayments();
+// //   }, [fetchPatients, fetchDoctors, fetchAppointments, fetchPayments]);
+
+// //   useEffect(() => {
+// //     if (isAuthenticated) {
+// //       fetchAllData();
+// //     }
+// //   }, [isAuthenticated, fetchAllData]);
+
+// //   // Total Revenue Calculation
+// //   const totalRevenue = payments.reduce((sum, p) => sum + Number(p.Amount || 0), 0);
+
+// //   // Patient Actions
+// //   const handlePatientSubmit = async (e) => {
+// //     e.preventDefault();
+// //     if (!patientForm.Name || !patientForm.Age || !patientForm.Phone) return alert('Fill all fields');
+// //     try {
+// //       if (patientForm.PatientID) {
+// //         await axios.put(`http://localhost:5000/api/patients/${patientForm.PatientID}`, patientForm);
+// //       } else {
+// //         await axios.post('http://localhost:5000/api/patients', patientForm);
+// //       }
+// //       setPatientForm({ PatientID: null, Name: '', Age: '', Phone: '' });
+// //       fetchAllData();
+// //     } catch (err) { alert('Operation failed'); }
+// //   };
+
+// //   const handlePatientDelete = async (id) => {
+// //     if (window.confirm('Delete this patient?')) {
+// //       try {
+// //         await axios.delete(`http://localhost:5000/api/patients/${id}`);
+// //         fetchAllData();
+// //       } catch (err) { alert('Could not delete patient.'); }
+// //     }
+// //   };
+
+// //   // Doctor Actions
+// //   const handleDoctorSubmit = async (e) => {
+// //     e.preventDefault();
+// //     if (!doctorForm.Name || !doctorForm.Specialization) return alert('Fill all fields');
+// //     try {
+// //       if (doctorForm.DoctorID) {
+// //         await axios.put(`http://localhost:5000/api/doctors/${doctorForm.DoctorID}`, doctorForm);
+// //       } else {
+// //         await axios.post('http://localhost:5000/api/doctors', doctorForm);
+// //       }
+// //       setDoctorForm({ DoctorID: null, Name: '', Specialization: '' });
+// //       fetchAllData();
+// //     } catch (err) { alert('Operation failed'); }
+// //   };
+
+// //   const handleDoctorDelete = async (id) => {
+// //     if (window.confirm('Delete this doctor?')) {
+// //       try {
+// //         await axios.delete(`http://localhost:5000/api/doctors/${id}`);
+// //         fetchAllData();
+// //       } catch (err) { alert('Could not delete doctor.'); }
+// //     }
+// //   };
+
+// //   // Appointment Actions
+// //   const handleAppointmentSubmit = async (e) => {
+// //     e.preventDefault();
+// //     if (!appointmentForm.PatientID || !appointmentForm.DoctorID || !appointmentForm.Date) return alert('Fill all fields');
+// //     try {
+// //       if (appointmentForm.AppointmentID) {
+// //         await axios.put(`http://localhost:5000/api/appointments/${appointmentForm.AppointmentID}`, appointmentForm);
+// //       } else {
+// //         await axios.post('http://localhost:5000/api/appointments', appointmentForm);
+// //       }
+// //       setAppointmentForm({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+// //       fetchAppointments();
+// //     } catch (err) { alert('Operation failed'); }
+// //   };
+
+// //   const handleAppointmentDelete = async (id) => {
+// //     if (window.confirm('Delete this appointment?')) {
+// //       try {
+// //         await axios.delete(`http://localhost:5000/api/appointments/${id}`);
+// //         fetchAppointments();
+// //       } catch (err) { alert('Operation failed'); }
+// //     }
+// //   };
+
+// //   // Payment Actions
+// //   const handlePaymentSubmit = async (e) => {
+// //     e.preventDefault();
+// //     if (!paymentForm.PatientID || !paymentForm.Amount || !paymentForm.Date) return alert('Fill all fields');
+// //     try {
+// //       if (paymentForm.PaymentID) {
+// //         await axios.put(`http://localhost:5000/api/payments/${paymentForm.PaymentID}`, paymentForm);
+// //       } else {
+// //         await axios.post('http://localhost:5000/api/payments', paymentForm);
+// //       }
+// //       setPaymentForm({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+// //       fetchPayments();
+// //     } catch (err) { alert('Operation failed'); }
+// //   };
+
+// //   const handlePaymentDelete = async (id) => {
+// //     if (window.confirm('Delete this payment record?')) {
+// //       try {
+// //         await axios.delete(`http://localhost:5000/api/payments/${id}`);
+// //         fetchPayments();
+// //       } catch (err) { alert('Operation failed'); }
+// //     }
+// //   };
+
+// //   // UI rendering ya Login niba adahuye
+// //   if (!isAuthenticated) {
+// //     return (
+// //       <div className="min-h-screen bg-gradient-to-tr from-slate-900 via-indigo-950 to-slate-900 flex items-center justify-center p-4">
+// //         <div className="bg-white/95 backdrop-blur-md p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20">
+// //           <div className="text-center mb-8">
+// //             <div className="bg-blue-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl font-black shadow-lg shadow-blue-500/30">
+// //               H
+// //             </div>
+// //             <h1 className="text-2xl font-black tracking-tight text-slate-800">Hospital Management</h1>
+// //             <p className="text-slate-500 text-sm mt-1">Sign in to access your administrative dashboard</p>
+// //           </div>
+// //           <form onSubmit={handleLogin} className="space-y-5">
+// //             <div>
+// //               <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Username</label>
+// //               <input
+// //                 type="text"
+// //                 value={loginData.username}
+// //                 onChange={(e) => setLoginData({ ...loginData, username: e.target.value })}
+// //                 className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+// //                 placeholder="Enter your username"
+// //               />
+// //             </div>
+// //             <div>
+// //               <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Password</label>
+// //               <input
+// //                 type="password"
+// //                 value={loginData.password}
+// //                 onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
+// //                 className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+// //                 placeholder="••••••••"
+// //               />
+// //             </div>
+// //             <button type="submit" className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-500/20">
+// //               Sign In
+// //             </button>
+// //           </form>
+// //           <div className="mt-6 text-center bg-slate-50 py-2.5 rounded-xl border border-slate-100">
+// //             <p className="text-xs text-slate-500 font-medium">Demo Access: <span className="font-mono font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100">admin / admin123</span></p>
+// //           </div>
+// //         </div>
+// //       </div>
+// //     );
+// //   }
+
+// //   return (
+// //     <div className="min-h-screen bg-slate-50/50 flex text-slate-800">
+      
+// //       {/* SIDEBAR NAVIGATION */}
+// //       <aside className="w-64 bg-slate-900 text-slate-300 flex flex-col fixed inset-y-0 left-0 z-50 border-r border-slate-800 shadow-xl">
+// //         <div className="p-5 border-b border-slate-800 flex items-center space-x-3">
+// //           <div className="bg-gradient-to-tr from-blue-500 to-indigo-600 text-white w-9 h-9 rounded-xl flex items-center justify-center font-black text-lg">
+// //             H
+// //           </div>
+// //           <div>
+// //             <h1 className="text-sm font-black text-white tracking-tight leading-none">MediCare Pro</h1>
+// //             <p className="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">Management Hub</p>
+// //           </div>
+// //         </div>
+
+// //         <div className="p-4 mx-3 my-4 bg-slate-800/50 rounded-xl border border-slate-800/60 flex items-center space-x-3">
+// //           <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+// //           <div className="flex-1 min-w-0">
+// //             <p className="text-xs font-bold text-white truncate leading-none">{user?.username}</p>
+// //             <p className="text-[9px] text-blue-400 font-bold uppercase tracking-wider mt-1">{user?.role}</p>
+// //           </div>
+// //         </div>
+
+// //         <nav className="flex-1 px-3 space-y-1">
+// //           {[
+// //             { id: 'dashboard', label: 'Dashboard Overview', icon: '📊' },
+// //             { id: 'patients', label: 'Patients Registry', icon: '👥' },
+// //             { id: 'doctors', label: 'Medical Staff', icon: '🩺' },
+// //             { id: 'appointments', label: 'Appointments Slot', icon: '📅' },
+// //             { id: 'payments', label: 'Financial Billing', icon: '💳' },
+// //             { id: 'reports', label: 'General Report', icon: '📋' }
+// //           ].map((tab) => (
+// //             <button
+// //               key={tab.id}
+// //               onClick={() => setActiveTab(tab.id)}
+// //               className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-xs font-bold tracking-wide transition-all ${
+// //                 activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+// //               }`}
+// //             >
+// //               <span className="text-base">{tab.icon}</span>
+// //               <span>{tab.label}</span>
+// //             </button>
+// //           ))}
+// //         </nav>
+
+// //         <div className="p-4 border-t border-slate-800">
+// //           <button onClick={handleLogout} className="w-full bg-red-950/40 text-red-400 hover:bg-red-900 hover:text-white px-4 py-2.5 rounded-xl text-xs font-bold flex items-center justify-center space-x-2">
+// //             <span>🚪</span>
+// //             <span>Logout Session</span>
+// //           </button>
+// //         </div>
+// //       </aside>
+
+// //       {/* MAIN CONTENT AREA CONTAINER */}
+// //       <div className="flex-1 pl-64 flex flex-col min-h-screen">
+// //         <header className="bg-white/80 backdrop-blur-md border-b border-slate-100 px-8 py-4 flex justify-between items-center sticky top-0 z-40">
+// //           <div>
+// //             <h2 className="text-sm font-bold text-slate-400 uppercase tracking-wider text-[10px]">Active Workspace</h2>
+// //             <h1 className="text-lg font-black text-slate-800 capitalize tracking-tight mt-0.5">{activeTab} Section</h1>
+// //           </div>
+// //           <div className="text-xs text-slate-400 font-semibold bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100">
+// //             System Status: <span className="text-emerald-500 font-bold">Online</span>
+// //           </div>
+// //         </header>
+
+// //         <main className="flex-1 p-8 max-w-7xl w-full mx-auto">
+          
+// //           {/* TAB 1: DASHBOARD OVERVIEW */}
+// //           {activeTab === 'dashboard' && (
+// //             <div className="space-y-6">
+// //               <div className="bg-gradient-to-r from-slate-900 to-indigo-950 rounded-2xl p-6 text-white shadow-xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+// //                 <div>
+// //                   <h2 className="text-xl font-black tracking-tight">System Operational Summary</h2>
+// //                   <p className="text-slate-400 text-xs mt-1 font-medium">Manage all hospital records dynamically in real-time right here.</p>
+// //                 </div>
+// //               </div>
+
+// //               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+// //                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+// //                   <div>
+// //                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Patients</p>
+// //                     <p className="text-2xl font-black text-slate-800 mt-1">{patients.length}</p>
+// //                   </div>
+// //                   <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-xl">👥</div>
+// //                 </div>
+// //                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+// //                   <div>
+// //                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Active Staff Doctors</p>
+// //                     <p className="text-2xl font-black text-slate-800 mt-1">{doctors.length}</p>
+// //                   </div>
+// //                   <div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-xl">🩺</div>
+// //                 </div>
+// //                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+// //                   <div>
+// //                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Consultations</p>
+// //                     <p className="text-2xl font-black text-slate-800 mt-1">{appointments.length}</p>
+// //                   </div>
+// //                   <div className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center text-xl">📅</div>
+// //                 </div>
+// //                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+// //                   <div>
+// //                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Gross Income Inflow</p>
+// //                     <p className="text-xl font-black text-slate-800 mt-1">{totalRevenue.toLocaleString()} RWF</p>
+// //                   </div>
+// //                   <div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-xl">💰</div>
+// //                 </div>
+// //               </div>
+
+// //               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+// //                 <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+// //                   <h3 className="text-sm font-bold text-slate-800 mb-4">Recent Appointment Bookings</h3>
+// //                   <div className="divide-y overflow-y-auto max-h-64 flex-1">
+// //                     {appointments.slice(-4).reverse().map((a) => (
+// //                       <div key={a.AppointmentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+// //                         <div>
+// //                           <p className="font-bold text-slate-800 text-xs">{a.PatientName}</p>
+// //                           <p className="text-[10px] text-slate-400">Assigned Doctor: {a.DoctorName}</p>
+// //                         </div>
+// //                         <span className="text-[10px] bg-blue-50 text-blue-600 font-bold px-2.5 py-1 rounded-lg">
+// //                           {new Date(a.Date).toLocaleDateString()}
+// //                         </span>
+// //                       </div>
+// //                     ))}
+// //                     {appointments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+// //                   </div>
+// //                 </div>
+
+// //                 <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+// //                   <h3 className="text-sm font-bold text-slate-800 mb-4">Latest Financial Ledger Inflow</h3>
+// //                   <div className="divide-y overflow-y-auto max-h-64 flex-1">
+// //                     {payments.slice(-4).reverse().map((p) => (
+// //                       <div key={p.PaymentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+// //                         <div>
+// //                           <p className="font-bold text-slate-800 text-xs">{p.PatientName}</p>
+// //                           <p className="text-[10px] text-slate-400">{new Date(p.Date).toLocaleDateString()}</p>
+// //                         </div>
+// //                         <span className="text-xs font-black text-emerald-600">+{p.Amount?.toLocaleString()} RWF</span>
+// //                       </div>
+// //                     ))}
+// //                     {payments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+// //                   </div>
+// //                 </div>
+// //               </div>
+// //             </div>
+// //           )}
+
+// //           {/* TAB 2: PATIENTS */}
+// //           {activeTab === 'patients' && (
+// //             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+// //                 <h2 className="text-sm font-bold text-slate-800 mb-4">{patientForm.PatientID ? 'Update Patient File Record' : 'Register New Patient File'}</h2>
+// //                 <form onSubmit={handlePatientSubmit} className="space-y-4">
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Full Name</label>
+// //                     <input type="text" value={patientForm.Name} onChange={(e) => setPatientForm({ ...patientForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Full Name" />
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Patient Age</label>
+// //                     <input type="number" value={patientForm.Age} onChange={(e) => setPatientForm({ ...patientForm, Age: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Age" />
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Phone</label>
+// //                     <input type="text" value={patientForm.Phone} onChange={(e) => setPatientForm({ ...patientForm, Phone: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Phone Connection" />
+// //                   </div>
+// //                   <button type="submit" className="w-full bg-blue-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Patient Records</button>
+// //                 </form>
+// //               </div>
+              
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+// //                 <table className="w-full text-left text-xs border-collapse">
+// //                   <thead>
+// //                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+// //                       <th className="p-3">ID</th>
+// //                       <th className="p-3">Name</th>
+// //                       <th className="p-3">Age</th>
+// //                       <th className="p-3">Phone</th>
+// //                       <th className="p-3 text-right">Actions</th>
+// //                     </tr>
+// //                   </thead>
+// //                   <tbody className="divide-y">
+// //                     {patients.map((p) => (
+// //                       <tr key={p.PatientID} className="hover:bg-slate-50/50">
+// //                         <td className="p-3 font-mono text-slate-400">{p.PatientID}</td>
+// //                         <td className="p-3 font-bold text-slate-800">{p.Name}</td>
+// //                         <td className="p-3">{p.Age} Yrs</td>
+// //                         <td className="p-3 font-mono">{p.Phone}</td>
+// //                         <td className="p-3 text-right space-x-1.5">
+// //                           <button onClick={() => setPatientForm(p)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+// //                           <button onClick={() => handlePatientDelete(p.PatientID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+// //                         </td>
+// //                       </tr>
+// //                     ))}
+// //                   </tbody>
+// //                 </table>
+// //               </div>
+// //             </div>
+// //           )}
+
+// //           {/* TAB 3: DOCTORS */}
+// //           {activeTab === 'doctors' && (
+// //             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+// //                 <h2 className="text-sm font-bold text-slate-800 mb-4">{doctorForm.DoctorID ? 'Update Doctor Profile' : 'Register New Doctor'}</h2>
+// //                 <form onSubmit={handleDoctorSubmit} className="space-y-4">
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Doctor Name</label>
+// //                     <input type="text" value={doctorForm.Name} onChange={(e) => setDoctorForm({ ...doctorForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Dr. Name" />
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Specialization</label>
+// //                     <input type="text" value={doctorForm.Specialization} onChange={(e) => setDoctorForm({ ...doctorForm, Specialization: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Specialization" />
+// //                   </div>
+// //                   <button type="submit" className="w-full bg-emerald-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Doctor Specs</button>
+// //                 </form>
+// //               </div>
+
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+// //                 <table className="w-full text-left text-xs">
+// //                   <thead>
+// //                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+// //                       <th className="p-3">ID</th>
+// //                       <th className="p-3">Name</th>
+// //                       <th className="p-3">Specialization</th>
+// //                       <th className="p-3 text-right">Actions</th>
+// //                     </tr>
+// //                   </thead>
+// //                   <tbody className="divide-y">
+// //                     {doctors.map((d) => (
+// //                       <tr key={d.DoctorID} className="hover:bg-slate-50/50">
+// //                         <td className="p-3 font-mono text-slate-400">{d.DoctorID}</td>
+// //                         <td className="p-3 font-bold text-slate-800">{d.Name}</td>
+// //                         <td className="p-3 font-medium text-slate-600">{d.Specialization}</td>
+// //                         <td className="p-3 text-right space-x-1.5">
+// //                           <button onClick={() => setDoctorForm(d)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+// //                           <button onClick={() => handleDoctorDelete(d.DoctorID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+// //                         </td>
+// //                       </tr>
+// //                     ))}
+// //                   </tbody>
+// //                 </table>
+// //               </div>
+// //             </div>
+// //           )}
+
+// //           {/* TAB 4: APPOINTMENTS */}
+// //           {activeTab === 'appointments' && (
+// //             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+// //                 <h2 className="text-sm font-bold text-slate-800 mb-4">{appointmentForm.AppointmentID ? 'Modify Booking Slot' : 'Book Appointment Slot'}</h2>
+// //                 <form onSubmit={handleAppointmentSubmit} className="space-y-4">
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient</label>
+// //                     <select value={appointmentForm.PatientID} onChange={(e) => setAppointmentForm({ ...appointmentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+// //                       <option value="">-- Choose Registered Patient --</option>
+// //                       {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name} (ID: {p.PatientID})</option>)}
+// //                     </select>
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Doctor</label>
+// //                     <select value={appointmentForm.DoctorID} onChange={(e) => setAppointmentForm({ ...appointmentForm, DoctorID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+// //                       <option value="">-- Choose Medical Officer --</option>
+// //                       {doctors.map(d => <option key={d.DoctorID} value={d.DoctorID}>{d.Name}</option>)}
+// //                     </select>
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Consultation Date</label>
+// //                     <input type="date" value={appointmentForm.Date ? appointmentForm.Date.split('T')[0] : ''} onChange={(e) => setAppointmentForm({ ...appointmentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+// //                   </div>
+// //                   <button type="submit" className="w-full bg-amber-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Slot Booking</button>
+// //                 </form>
+// //               </div>
+
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+// //                 <table className="w-full text-left text-xs">
+// //                   <thead>
+// //                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+// //                       <th className="p-3">ID</th>
+// //                       <th className="p-3">Patient</th>
+// //                       <th className="p-3">Doctor</th>
+// //                       <th className="p-3">Date</th>
+// //                       <th className="p-3 text-right">Actions</th>
+// //                     </tr>
+// //                   </thead>
+// //                   <tbody className="divide-y">
+// //                     {appointments.map((a) => (
+// //                       <tr key={a.AppointmentID} className="hover:bg-slate-50/50">
+// //                         <td className="p-3 text-slate-400 font-mono">{a.AppointmentID}</td>
+// //                         <td className="p-3 font-bold text-slate-800">{a.PatientName}</td>
+// //                         <td className="p-3 font-medium text-slate-600">{a.DoctorName}</td>
+// //                         <td className="p-3 font-mono"><span className="bg-blue-50 text-blue-600 px-2 py-0.5 rounded border border-blue-100">{new Date(a.Date).toLocaleDateString()}</span></td>
+// //                         <td className="p-3 text-right space-x-1.5">
+// //                           <button onClick={() => setAppointmentForm({ AppointmentID: a.AppointmentID, PatientID: a.PatientID || '', DoctorID: a.DoctorID || '', Date: a.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+// //                           <button onClick={() => handleAppointmentDelete(a.AppointmentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+// //                         </td>
+// //                       </tr>
+// //                     ))}
+// //                   </tbody>
+// //                 </table>
+// //               </div>
+// //             </div>
+// //           )}
+
+// //           {/* TAB 5: PAYMENTS */}
+// //           {activeTab === 'payments' && (
+// //             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+// //                 <h2 className="text-sm font-bold text-slate-800 mb-4">{paymentForm.PaymentID ? 'Modify Invoice Data' : 'Generate New Patient Invoice'}</h2>
+// //                 <form onSubmit={handlePaymentSubmit} className="space-y-4">
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient Debtor</label>
+// //                     <select value={paymentForm.PatientID} onChange={(e) => setPaymentForm({ ...paymentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+// //                       <option value="">-- Select Patient --</option>
+// //                       {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name}</option>)}
+// //                     </select>
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Amount (RWF)</label>
+// //                     <input type="number" value={paymentForm.Amount} onChange={(e) => setPaymentForm({ ...paymentForm, Amount: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Invoice Value" />
+// //                   </div>
+// //                   <div>
+// //                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Billing Date</label>
+// //                     <input type="date" value={paymentForm.Date ? paymentForm.Date.split('T')[0] : ''} onChange={(e) => setPaymentForm({ ...paymentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+// //                   </div>
+// //                   <button type="submit" className="w-full bg-indigo-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Statement</button>
+// //                 </form>
+// //               </div>
+
+// //               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+// //                 <table className="w-full text-left text-xs">
+// //                   <thead>
+// //                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+// //                       <th className="p-3">ID</th>
+// //                       <th className="p-3">Patient Name</th>
+// //                       <th className="p-3">Amount</th>
+// //                       <th className="p-3">Date</th>
+// //                       <th className="p-3 text-right">Actions</th>
+// //                     </tr>
+// //                   </thead>
+// //                   <tbody className="divide-y">
+// //                     {payments.map((p) => (
+// //                       <tr key={p.PaymentID} className="hover:bg-slate-50/50">
+// //                         <td className="p-3 text-slate-400 font-mono">{p.PaymentID}</td>
+// //                         <td className="p-3 font-bold text-slate-800">{p.PatientName}</td>
+// //                         <td className="p-3 font-black text-emerald-600">{Number(p.Amount).toLocaleString()} RWF</td>
+// //                         <td className="p-3 font-mono text-slate-500">{new Date(p.Date).toLocaleDateString()}</td>
+// //                         <td className="p-3 text-right space-x-1.5">
+// //                           <button onClick={() => setPaymentForm({ PaymentID: p.PaymentID, PatientID: p.PatientID || '', Amount: p.Amount, Date: p.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+// //                           <button onClick={() => handlePaymentDelete(p.PaymentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+// //                         </td>
+// //                       </tr>
+// //                     ))}
+// //                   </tbody>
+// //                 </table>
+// //               </div>
+// //             </div>
+// //           )}
+
+// //           {/* TAB 6: REPORTS */}
+// //           {activeTab === 'reports' && (
+// //             <div className="bg-white p-8 rounded-2xl border shadow-sm space-y-6">
+// //               <div className="border-b pb-4 text-center">
+// //                 <h1 className="text-xl font-black text-slate-800 uppercase tracking-wide">MediCare Pro Comprehensive Summary Report</h1>
+// //                 <p className="text-slate-400 text-xs mt-1">Generated dynamically on {new Date().toLocaleDateString()}</p>
+// //               </div>
+// //               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+// //                 <div className="p-4 bg-slate-50 rounded-xl border">
+// //                   <h3 className="text-xs font-bold uppercase text-slate-400">Total Patients Dossiers</h3>
+// //                   <p className="text-3xl font-black text-blue-600 mt-2">{patients.length}</p>
+// //                 </div>
+// //                 <div className="p-4 bg-slate-50 rounded-xl border">
+// //                   <h3 className="text-xs font-bold uppercase text-slate-400">Consultations Services</h3>
+// //                   <p className="text-3xl font-black text-amber-600 mt-2">{appointments.length}</p>
+// //                 </div>
+// //                 <div className="p-4 bg-slate-50 rounded-xl border">
+// //                   <h3 className="text-xs font-bold uppercase text-slate-400">Cumulative Income</h3>
+// //                   <p className="text-3xl font-black text-emerald-600 mt-2">{totalRevenue.toLocaleString()} RWF</p>
+// //                 </div>
+// //               </div>
+// //             </div>
+// //           )}
+// //         </main>
+// //       </div>
+// //     </div>
+// //   );
+// // }
+
+// // export default App;
+
+// import { useState, useEffect, useCallback } from 'react';
+// import axios from 'axios';
+
+// function App() {
+//   const [activeTab, setActiveTab] = useState('dashboard');
+//   const [isAuthenticated, setIsAuthenticated] = useState(false);
+//   const [isRegisterMode, setIsRegisterMode] = useState(false); // Ifasha guhinduranya login na register
+//   const [loginData, setLoginData] = useState({ username: '', password: '' });
+//   const [user, setUser] = useState(null);
+
+//   // Data States
+//   const [patients, setPatients] = useState([]);
+//   const [doctors, setDoctors] = useState([]);
+//   const [appointments, setAppointments] = useState([]);
+//   const [payments, setPayments] = useState([]);
+
+//   // Form States
+//   const [patientForm, setPatientForm] = useState({ PatientID: null, Name: '', Age: '', Phone: '' });
+//   const [doctorForm, setDoctorForm] = useState({ DoctorID: null, Name: '', Specialization: '' });
+//   const [appointmentForm, setAppointmentForm] = useState({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+//   const [paymentForm, setPaymentForm] = useState({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+
+//   // Authentication: Login
+//   const handleLogin = async (e) => {
+//     e.preventDefault();
+//     try {
+//       const response = await axios.post('http://localhost:5000/api/login', loginData, {
+//         headers: { 'Content-Type': 'application/json' }
+//       });
+//       if (response.data.success) {
+//         setIsAuthenticated(true);
+//         setUser(response.data.user);
+//         setLoginData({ username: '', password: '' });
+//       } else {
+//         alert(response.data.message);
+//       }
+//     } catch (error) {
+//       if (error.response && error.response.data && error.response.data.message) {
+//         alert(error.response.data.message);
+//       } else {
+//         alert('Login failed. Please check backend connection.');
+//       }
+//     }
+//   };
+
+//   // Authentication: Register
+//   const handleRegister = async (e) => {
+//     e.preventDefault();
+//     if (!loginData.username || !loginData.password) {
+//       return alert('Please fill in all fields');
+//     }
+//     try {
+//       const response = await axios.post('http://localhost:5000/api/register', loginData, {
+//         headers: { 'Content-Type': 'application/json' }
+//       });
+//       if (response.data.success) {
+//         alert(response.data.message);
+//         setIsRegisterMode(false); // Subira kuri login screen
+//       }
+//     } catch (error) {
+//       if (error.response && error.response.data && error.response.data.message) {
+//         alert(error.response.data.message);
+//       } else {
+//         alert('Registration failed. Please check backend connection.');
+//       }
+//     }
+//   };
+
+//   const handleLogout = () => {
+//     setIsAuthenticated(false);
+//     setUser(null);
+//     setActiveTab('dashboard');
+//   };
+
+//   // Fetch Data Functions
+//   const fetchPatients = useCallback(async () => {
+//     try {
+//       const response = await axios.get('http://localhost:5000/api/patients');
+//       setPatients(response.data);
+//     } catch (err) { console.error(err); }
+//   }, []);
+
+//   const fetchDoctors = useCallback(async () => {
+//     try {
+//       const response = await axios.get('http://localhost:5000/api/doctors');
+//       setDoctors(response.data);
+//     } catch (err) { console.error(err); }
+//   }, []);
+
+//   const fetchAppointments = useCallback(async () => {
+//     try {
+//       const response = await axios.get('http://localhost:5000/api/appointments');
+//       setAppointments(response.data);
+//     } catch (err) { console.error(err); }
+//   }, []);
+
+//   const fetchPayments = useCallback(async () => {
+//     try {
+//       const response = await axios.get('http://localhost:5000/api/payments');
+//       setPayments(response.data);
+//     } catch (err) { console.error(err); }
+//   }, []);
+
+//   const fetchAllData = useCallback(() => {
+//     fetchPatients();
+//     fetchDoctors();
+//     fetchAppointments();
+//     fetchPayments();
+//   }, [fetchPatients, fetchDoctors, fetchAppointments, fetchPayments]);
+
+//   useEffect(() => {
+//     if (isAuthenticated) {
+//       fetchAllData();
+//     }
+//   }, [isAuthenticated, fetchAllData]);
+
+//   // Total Revenue Calculation
+//   const totalRevenue = payments.reduce((sum, p) => sum + Number(p.Amount || 0), 0);
+
+//   // Patient Actions
+//   const handlePatientSubmit = async (e) => {
+//     e.preventDefault();
+//     if (!patientForm.Name || !patientForm.Age || !patientForm.Phone) return alert('Fill all fields');
+//     try {
+//       if (patientForm.PatientID) {
+//         await axios.put(`http://localhost:5000/api/patients/${patientForm.PatientID}`, patientForm);
+//       } else {
+//         await axios.post('http://localhost:5000/api/patients', patientForm);
+//       }
+//       setPatientForm({ PatientID: null, Name: '', Age: '', Phone: '' });
+//       fetchAllData();
+//     } catch (err) { alert('Operation failed'); }
+//   };
+
+//   const handlePatientDelete = async (id) => {
+//     if (window.confirm('Delete this patient?')) {
+//       try {
+//         await axios.delete(`http://localhost:5000/api/patients/${id}`);
+//         fetchAllData();
+//       } catch (err) { alert('Could not delete patient.'); }
+//     }
+//   };
+
+//   // Doctor Actions
+//   const handleDoctorSubmit = async (e) => {
+//     e.preventDefault();
+//     if (!doctorForm.Name || !doctorForm.Specialization) return alert('Fill all fields');
+//     try {
+//       if (doctorForm.DoctorID) {
+//         await axios.put(`http://localhost:5000/api/doctors/${doctorForm.DoctorID}`, doctorForm);
+//       } else {
+//         await axios.post('http://localhost:5000/api/doctors', doctorForm);
+//       }
+//       setDoctorForm({ DoctorID: null, Name: '', Specialization: '' });
+//       fetchAllData();
+//     } catch (err) { alert('Operation failed'); }
+//   };
+
+//   const handleDoctorDelete = async (id) => {
+//     if (window.confirm('Delete this doctor?')) {
+//       try {
+//         await axios.delete(`http://localhost:5000/api/doctors/${id}`);
+//         fetchAllData();
+//       } catch (err) { alert('Could not delete doctor.'); }
+//     }
+//   };
+
+//   // Appointment Actions
+//   const handleAppointmentSubmit = async (e) => {
+//     e.preventDefault();
+//     if (!appointmentForm.PatientID || !appointmentForm.DoctorID || !appointmentForm.Date) return alert('Fill all fields');
+//     try {
+//       if (appointmentForm.AppointmentID) {
+//         await axios.put(`http://localhost:5000/api/appointments/${appointmentForm.AppointmentID}`, appointmentForm);
+//       } else {
+//         await axios.post('http://localhost:5000/api/appointments', appointmentForm);
+//       }
+//       setAppointmentForm({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+//       fetchAppointments();
+//     } catch (err) { alert('Operation failed'); }
+//   };
+
+//   const handleAppointmentDelete = async (id) => {
+//     if (window.confirm('Delete this appointment?')) {
+//       try {
+//         await axios.delete(`http://localhost:5000/api/appointments/${id}`);
+//         fetchAppointments();
+//       } catch (err) { alert('Operation failed'); }
+//     }
+//   };
+
+//   // Payment Actions
+//   const handlePaymentSubmit = async (e) => {
+//     e.preventDefault();
+//     if (!paymentForm.PatientID || !paymentForm.Amount || !paymentForm.Date) return alert('Fill all fields');
+//     try {
+//       if (paymentForm.PaymentID) {
+//         await axios.put(`http://localhost:5000/api/payments/${paymentForm.PaymentID}`, paymentForm);
+//       } else {
+//         await axios.post('http://localhost:5000/api/payments', paymentForm);
+//       }
+//       setPaymentForm({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+//       fetchPayments();
+//     } catch (err) { alert('Operation failed'); }
+//   };
+
+//   const handlePaymentDelete = async (id) => {
+//     if (window.confirm('Delete this payment record?')) {
+//       try {
+//         await axios.delete(`http://localhost:5000/api/payments/${id}`);
+//         fetchPayments();
+//       } catch (err) { alert('Operation failed'); }
+//     }
+//   };
+
+//   // UI rendering ya Login / Register niba adahuye
+//   if (!isAuthenticated) {
+//     return (
+//       <div className="min-h-screen bg-gradient-to-tr from-slate-900 via-indigo-950 to-slate-900 flex items-center justify-center p-4">
+//         <div className="bg-white/95 backdrop-blur-md p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20">
+//           <div className="text-center mb-8">
+//             <div className="bg-blue-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl font-black shadow-lg shadow-blue-500/30">
+//               H
+//             </div>
+//             <h1 className="text-2xl font-black tracking-tight text-slate-800">Hospital Management</h1>
+//             <p className="text-slate-500 text-sm mt-1">
+//               {isRegisterMode ? 'Create a new administrative account' : 'Sign in to access your administrative dashboard'}
+//             </p>
+//           </div>
+          
+//           <form onSubmit={isRegisterMode ? handleRegister : handleLogin} className="space-y-5">
+//             <div>
+//               <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Username</label>
+//               <input
+//                 type="text"
+//                 value={loginData.username}
+//                 onChange={(e) => setLoginData({ ...loginData, username: e.target.value })}
+//                 className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+//                 placeholder="Enter username"
+//               />
+//             </div>
+//             <div>
+//               <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Password</label>
+//               <input
+//                 type="password"
+//                 value={loginData.password}
+//                 onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
+//                 className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+//                 placeholder="••••••••"
+//               />
+//             </div>
+//             <button type="submit" className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-500/20">
+//               {isRegisterMode ? 'Register Account' : 'Sign In'}
+//             </button>
+//           </form>
+
+//           <div className="mt-4 text-center">
+//             <button 
+//               onClick={() => setIsRegisterMode(!isRegisterMode)} 
+//               className="text-xs text-blue-600 font-bold hover:underline"
+//             >
+//               {isRegisterMode ? 'Already have an account? Sign In' : "Don't have an account? Register here"}
+//             </button>
+//           </div>
+
+//           {!isRegisterMode && (
+//             <div className="mt-6 text-center bg-slate-50 py-2.5 rounded-xl border border-slate-100">
+//               <p className="text-xs text-slate-500 font-medium">Demo Access: <span className="font-mono font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100">admin / admin123</span></p>
+//             </div>
+//           )}
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   return (
+//     <div className="min-h-screen bg-slate-50/50 flex text-slate-800">
+      
+//       {/* SIDEBAR NAVIGATION */}
+//       <aside className="w-64 bg-slate-900 text-slate-300 flex flex-col fixed inset-y-0 left-0 z-50 border-r border-slate-800 shadow-xl">
+//         <div className="p-5 border-b border-slate-800 flex items-center space-x-3">
+//           <div className="bg-gradient-to-tr from-blue-500 to-indigo-600 text-white w-9 h-9 rounded-xl flex items-center justify-center font-black text-lg">
+//             H
+//           </div>
+//           <div>
+//             <h1 className="text-sm font-black text-white tracking-tight leading-none">MediCare Pro</h1>
+//             <p className="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">Management Hub</p>
+//           </div>
+//         </div>
+
+//         <div className="p-4 mx-3 my-4 bg-slate-800/50 rounded-xl border border-slate-800/60 flex items-center space-x-3">
+//           <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+//           <div className="flex-1 min-w-0">
+//             <p className="text-xs font-bold text-white truncate leading-none">{user?.username || 'System User'}</p>
+//             <p className="text-[9px] text-blue-400 font-bold uppercase tracking-wider mt-1">{user?.role || 'Administrator'}</p>
+//           </div>
+//         </div>
+
+//         <nav className="flex-1 px-3 space-y-1">
+//           {[
+//             { id: 'dashboard', label: 'Dashboard Overview', icon: '📊' },
+//             { id: 'patients', label: 'Patients Registry', icon: '👥' },
+//             { id: 'doctors', label: 'Medical Staff', icon: '🩺' },
+//             { id: 'appointments', label: 'Appointments Slot', icon: '📅' },
+//             { id: 'payments', label: 'Financial Billing', icon: '💳' },
+//           ].map((tab) => (
+//             <button
+//               key={tab.id}
+//               onClick={() => setActiveTab(tab.id)}
+//               className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-xs font-bold tracking-wide transition-all ${
+//                 activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+//               }`}
+//             >
+//               <span className="text-base">{tab.icon}</span>
+//               <span>{tab.label}</span>
+//             </button>
+//           ))}
+//         </nav>
+
+//         <div className="p-4 border-t border-slate-800">
+//           <button onClick={handleLogout} className="w-full bg-red-950/40 text-red-400 hover:bg-red-900 hover:text-white px-4 py-2.5 rounded-xl text-xs font-bold flex items-center justify-center space-x-2">
+//             <span>🚪</span>
+//             <span>Logout Session</span>
+//           </button>
+//         </div>
+//       </aside>
+
+//       {/* MAIN CONTENT AREA CONTAINER */}
+//       <div className="flex-1 pl-64 flex flex-col min-h-screen">
+//         <header className="bg-white/80 backdrop-blur-md border-b border-slate-100 px-8 py-4 flex justify-between items-center sticky top-0 z-40">
+//           <div>
+//             <h2 className="text-sm font-bold text-slate-400 uppercase tracking-wider text-[10px]">Active Workspace</h2>
+//             <h1 className="text-lg font-black text-slate-800 capitalize tracking-tight mt-0.5">{activeTab} Section</h1>
+//           </div>
+//           <div className="text-xs text-slate-400 font-semibold bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100">
+//             System Status: <span className="text-emerald-500 font-bold">Online</span>
+//           </div>
+//         </header>
+
+//         <main className="flex-1 p-8 max-w-7xl w-full mx-auto">
+          
+//           {/* TAB 1: DASHBOARD OVERVIEW */}
+//           {activeTab === 'dashboard' && (
+//             <div className="space-y-6">
+//               <div className="bg-gradient-to-r from-slate-900 to-indigo-950 rounded-2xl p-6 text-white shadow-xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+//                 <div>
+//                   <h2 className="text-xl font-black tracking-tight">System Operational Summary</h2>
+//                   <p className="text-slate-400 text-xs mt-1 font-medium">Manage all hospital records dynamically in real-time right here.</p>
+//                 </div>
+//               </div>
+
+//               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+//                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+//                   <div>
+//                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Patients</p>
+//                     <p className="text-2xl font-black text-slate-800 mt-1">{patients.length}</p>
+//                   </div>
+//                   <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-xl">👥</div>
+//                 </div>
+//                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+//                   <div>
+//                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Active Staff Doctors</p>
+//                     <p className="text-2xl font-black text-slate-800 mt-1">{doctors.length}</p>
+//                   </div>
+//                   <div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-xl">🩺</div>
+//                 </div>
+//                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+//                   <div>
+//                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Consultations</p>
+//                     <p className="text-2xl font-black text-slate-800 mt-1">{appointments.length}</p>
+//                   </div>
+//                   <div className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center text-xl">📅</div>
+//                 </div>
+//                 <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+//                   <div>
+//                     <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Gross Income Inflow</p>
+//                     <p className="text-xl font-black text-slate-800 mt-1">{totalRevenue.toLocaleString()} RWF</p>
+//                   </div>
+//                   <div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-xl">💰</div>
+//                 </div>
+//               </div>
+
+//               <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+//                 <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+//                   <h3 className="text-sm font-bold text-slate-800 mb-4">Recent Appointment Bookings</h3>
+//                   <div className="divide-y overflow-y-auto max-h-64 flex-1">
+//                     {appointments.slice(-4).reverse().map((a) => (
+//                       <div key={a.AppointmentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+//                         <div>
+//                           <p className="font-bold text-slate-800 text-xs">{a.PatientName}</p>
+//                           <p className="text-[10px] text-slate-400">Assigned Doctor: {a.DoctorName}</p>
+//                         </div>
+//                         <span className="text-[10px] bg-blue-50 text-blue-600 font-bold px-2.5 py-1 rounded-lg">
+//                           {new Date(a.Date).toLocaleDateString()}
+//                         </span>
+//                       </div>
+//                     ))}
+//                     {appointments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+//                   </div>
+//                 </div>
+
+//                 <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+//                   <h3 className="text-sm font-bold text-slate-800 mb-4">Latest Financial Ledger Inflow</h3>
+//                   <div className="divide-y overflow-y-auto max-h-64 flex-1">
+//                     {payments.slice(-4).reverse().map((p) => (
+//                       <div key={p.PaymentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+//                         <div>
+//                           <p className="font-bold text-slate-800 text-xs">{p.PatientName}</p>
+//                           <p className="text-[10px] text-slate-400">{new Date(p.Date).toLocaleDateString()}</p>
+//                         </div>
+//                         <span className="text-xs font-black text-emerald-600">+{p.Amount?.toLocaleString()} RWF</span>
+//                       </div>
+//                     ))}
+//                     {payments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+//                   </div>
+//                 </div>
+//               </div>
+//             </div>
+//           )}
+
+//           {/* TAB 2: PATIENTS */}
+//           {activeTab === 'patients' && (
+//             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+//                 <h2 className="text-sm font-bold text-slate-800 mb-4">{patientForm.PatientID ? 'Update Patient File Record' : 'Register New Patient File'}</h2>
+//                 <form onSubmit={handlePatientSubmit} className="space-y-4">
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Full Name</label>
+//                     <input type="text" value={patientForm.Name} onChange={(e) => setPatientForm({ ...patientForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Full Name" />
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Patient Age</label>
+//                     <input type="number" value={patientForm.Age} onChange={(e) => setPatientForm({ ...patientForm, Age: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Age" />
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Phone</label>
+//                     <input type="text" value={patientForm.Phone} onChange={(e) => setPatientForm({ ...patientForm, Phone: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Phone Connection" />
+//                   </div>
+//                   <button type="submit" className="w-full bg-blue-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Patient Records</button>
+//                 </form>
+//               </div>
+              
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+//                 <table className="w-full text-left text-xs border-collapse">
+//                   <thead>
+//                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+//                       <th className="p-3">ID</th>
+//                       <th className="p-3">Name</th>
+//                       <th className="p-3">Age</th>
+//                       <th className="p-3">Phone</th>
+//                       <th className="p-3 text-right">Actions</th>
+//                     </tr>
+//                   </thead>
+//                   <tbody className="divide-y">
+//                     {patients.map((p) => (
+//                       <tr key={p.PatientID} className="hover:bg-slate-50/50">
+//                         <td className="p-3 font-mono text-slate-400">{p.PatientID}</td>
+//                         <td className="p-3 font-bold text-slate-800">{p.Name}</td>
+//                         <td className="p-3">{p.Age} Yrs</td>
+//                         <td className="p-3 font-mono">{p.Phone}</td>
+//                         <td className="p-3 text-right space-x-1.5">
+//                           <button onClick={() => setPatientForm(p)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+//                           <button onClick={() => handlePatientDelete(p.PatientID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+//                         </td>
+//                       </tr>
+//                     ))}
+//                   </tbody>
+//                 </table>
+//               </div>
+//             </div>
+//           )}
+
+//           {/* TAB 3: DOCTORS */}
+//           {activeTab === 'doctors' && (
+//             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+//                 <h2 className="text-sm font-bold text-slate-800 mb-4">{doctorForm.DoctorID ? 'Update Doctor Profile' : 'Register New Doctor'}</h2>
+//                 <form onSubmit={handleDoctorSubmit} className="space-y-4">
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Doctor Name</label>
+//                     <input type="text" value={doctorForm.Name} onChange={(e) => setDoctorForm({ ...doctorForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Dr. Name" />
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Specialization</label>
+//                     <input type="text" value={doctorForm.Specialization} onChange={(e) => setDoctorForm({ ...doctorForm, Specialization: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Specialization" />
+//                   </div>
+//                   <button type="submit" className="w-full bg-emerald-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Doctor Specs</button>
+//                 </form>
+//               </div>
+
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+//                 <table className="w-full text-left text-xs">
+//                   <thead>
+//                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+//                       <th className="p-3">ID</th>
+//                       <th className="p-3">Name</th>
+//                       <th className="p-3">Specialization</th>
+//                       <th className="p-3 text-right">Actions</th>
+//                     </tr>
+//                   </thead>
+//                   <tbody className="divide-y">
+//                     {doctors.map((d) => (
+//                       <tr key={d.DoctorID} className="hover:bg-slate-50/50">
+//                         <td className="p-3 font-mono text-slate-400">{d.DoctorID}</td>
+//                         <td className="p-3 font-bold text-slate-800">{d.Name}</td>
+//                         <td className="p-3 font-medium text-slate-600">{d.Specialization}</td>
+//                         <td className="p-3 text-right space-x-1.5">
+//                           <button onClick={() => setDoctorForm(d)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+//                           <button onClick={() => handleDoctorDelete(d.DoctorID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+//                         </td>
+//                       </tr>
+//                     ))}
+//                   </tbody>
+//                 </table>
+//               </div>
+//             </div>
+//           )}
+
+//           {/* TAB 4: APPOINTMENTS */}
+//           {activeTab === 'appointments' && (
+//             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+//                 <h2 className="text-sm font-bold text-slate-800 mb-4">{appointmentForm.AppointmentID ? 'Modify Booking Slot' : 'Book Appointment Slot'}</h2>
+//                 <form onSubmit={handleAppointmentSubmit} className="space-y-4">
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient</label>
+//                     <select value={appointmentForm.PatientID} onChange={(e) => setAppointmentForm({ ...appointmentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+//                       <option value="">-- Choose Registered Patient --</option>
+//                       {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name} (ID: {p.PatientID})</option>)}
+//                     </select>
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Doctor</label>
+//                     <select value={appointmentForm.DoctorID} onChange={(e) => setAppointmentForm({ ...appointmentForm, DoctorID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+//                       <option value="">-- Choose Medical Officer --</option>
+//                       {doctors.map(d => <option key={d.DoctorID} value={d.DoctorID}>{d.Name}</option>)}
+//                     </select>
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Consultation Date</label>
+//                     <input type="date" value={appointmentForm.Date ? appointmentForm.Date.split('T')[0] : ''} onChange={(e) => setAppointmentForm({ ...appointmentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+//                   </div>
+//                   <button type="submit" className="w-full bg-amber-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Slot Booking</button>
+//                 </form>
+//               </div>
+
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+//                 <table className="w-full text-left text-xs">
+//                   <thead>
+//                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+//                       <th className="p-3">ID</th>
+//                       <th className="p-3">Patient</th>
+//                       <th className="p-3">Doctor</th>
+//                       <th className="p-3">Date</th>
+//                       <th className="p-3 text-right">Actions</th>
+//                     </tr>
+//                   </thead>
+//                   <tbody className="divide-y">
+//                     {appointments.map((a) => (
+//                       <tr key={a.AppointmentID} className="hover:bg-slate-50/50">
+//                         <td className="p-3 text-slate-400 font-mono">{a.AppointmentID}</td>
+//                         <td className="p-3 font-bold text-slate-800">{a.PatientName}</td>
+//                         <td className="p-3 font-medium text-slate-600">{a.DoctorName}</td>
+//                         <td className="p-3 font-mono"><span className="bg-blue-50 text-blue-600 px-2 py-0.5 rounded border border-blue-100">{new Date(a.Date).toLocaleDateString()}</span></td>
+//                         <td className="p-3 text-right space-x-1.5">
+//                           <button onClick={() => setAppointmentForm({ AppointmentID: a.AppointmentID, PatientID: a.PatientID || '', DoctorID: a.DoctorID || '', Date: a.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+//                           <button onClick={() => handleAppointmentDelete(a.AppointmentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+//                         </td>
+//                       </tr>
+//                     ))}
+//                   </tbody>
+//                 </table>
+//               </div>
+//             </div>
+//           )}
+
+//           {/* TAB 5: PAYMENTS */}
+//           {activeTab === 'payments' && (
+//             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+//                 <h2 className="text-sm font-bold text-slate-800 mb-4">{paymentForm.PaymentID ? 'Modify Invoice Data' : 'Generate New Patient Invoice'}</h2>
+//                 <form onSubmit={handlePaymentSubmit} className="space-y-4">
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient Debtor</label>
+//                     <select value={paymentForm.PatientID} onChange={(e) => setPaymentForm({ ...paymentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+//                       <option value="">-- Select Patient --</option>
+//                       {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name}</option>)}
+//                     </select>
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Amount (RWF)</label>
+//                     <input type="number" value={paymentForm.Amount} onChange={(e) => setPaymentForm({ ...paymentForm, Amount: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Invoice Value" />
+//                   </div>
+//                   <div>
+//                     <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Billing Date</label>
+//                     <input type="date" value={paymentForm.Date ? paymentForm.Date.split('T')[0] : ''} onChange={(e) => setPaymentForm({ ...paymentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+//                   </div>
+//                   <button type="submit" className="w-full bg-indigo-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Statement</button>
+//                 </form>
+//               </div>
+
+//               <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+//                 <table className="w-full text-left text-xs">
+//                   <thead>
+//                     <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+//                       <th className="p-3">ID</th>
+//                       <th className="p-3">Patient Name</th>
+//                       <th className="p-3">Amount</th>
+//                       <th className="p-3">Date</th>
+//                       <th className="p-3 text-right">Actions</th>
+//                     </tr>
+//                   </thead>
+//                   <tbody className="divide-y">
+//                     {payments.map((p) => (
+//                       <tr key={p.PaymentID} className="hover:bg-slate-50/50">
+//                         <td className="p-3 text-slate-400 font-mono">{p.PaymentID}</td>
+//                         <td className="p-3 font-bold text-slate-800">{p.PatientName}</td>
+//                         <td className="p-3 text-emerald-600 font-black">+{p.Amount?.toLocaleString()} RWF</td>
+//                         <td className="p-3 font-mono">{new Date(p.Date).toLocaleDateString()}</td>
+//                         <td className="p-3 text-right space-x-1.5">
+//                           <button onClick={() => setPaymentForm({ PaymentID: p.PaymentID, PatientID: p.PatientID || '', Amount: p.Amount || '', Date: p.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+//                           <button onClick={() => handlePaymentDelete(p.PaymentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+//                         </td>
+//                       </tr>
+//                     ))}
+//                   </tbody>
+//                 </table>
+//               </div>
+//             </div>
+//           )}
+//         </main>
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default App;
+
+
+
+
+import { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+function App() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loginData, setLoginData] = useState({ username: '', password: '' });
+  const [user, setUser] = useState(null);
+
+  // Data States
+  const [patients, setPatients] = useState([]);
+  const [doctors, setDoctors] = useState([]);
+  const [appointments, setAppointments] = useState([]);
+  const [payments, setPayments] = useState([]);
+
+  // Form States
+  const [patientForm, setPatientForm] = useState({ PatientID: null, Name: '', Age: '', Phone: '' });
+  const [doctorForm, setDoctorForm] = useState({ DoctorID: null, Name: '', Specialization: '' });
+  const [appointmentForm, setAppointmentForm] = useState({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+  const [paymentForm, setPaymentForm] = useState({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+
+  // Authentication
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post('http://localhost:5000/api/login', loginData, {
+        headers: { 'Content-Type': 'application/json' }
+      });
+      if (response.data.success) {
+        setIsAuthenticated(true);
+        setUser(response.data.user);
+        setLoginData({ username: '', password: '' });
+      } else {
+        alert(response.data.message);
+      }
+    } catch (error) {
+      if (error.response && error.response.data && error.response.data.message) {
+        alert(error.response.data.message);
+      } else {
+        alert('Login failed. Please check backend connection.');
+      }
+    }
+  };
+
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+    setUser(null);
+    setActiveTab('dashboard');
+  };
+
+  // Fetch Data Functions
+  const fetchPatients = useCallback(async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/patients');
+      setPatients(response.data);
+    } catch (err) { console.error(err); }
+  }, []);
+
+  const fetchDoctors = useCallback(async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/doctors');
+      setDoctors(response.data);
+    } catch (err) { console.error(err); }
+  }, []);
+
+  const fetchAppointments = useCallback(async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/appointments');
+      setAppointments(response.data);
+    } catch (err) { console.error(err); }
+  }, []);
+
+  const fetchPayments = useCallback(async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/payments');
+      setPayments(response.data);
+    } catch (err) { console.error(err); }
+  }, []);
+
+  const fetchAllData = useCallback(() => {
+    fetchPatients();
+    fetchDoctors();
+    fetchAppointments();
+    fetchPayments();
+  }, [fetchPatients, fetchDoctors, fetchAppointments, fetchPayments]);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchAllData();
+    }
+  }, [isAuthenticated, fetchAllData]);
+
+  // Total Revenue Calculation
+  const totalRevenue = payments.reduce((sum, p) => sum + Number(p.Amount || 0), 0);
+
+  // Patient Actions
+  const handlePatientSubmit = async (e) => {
+    e.preventDefault();
+    if (!patientForm.Name || !patientForm.Age || !patientForm.Phone) return alert('Fill all fields');
+    try {
+      if (patientForm.PatientID) {
+        await axios.put(`http://localhost:5000/api/patients/${patientForm.PatientID}`, patientForm);
+      } else {
+        await axios.post('http://localhost:5000/api/patients', patientForm);
+      }
+      setPatientForm({ PatientID: null, Name: '', Age: '', Phone: '' });
+      fetchAllData();
+    } catch (err) { alert('Operation failed'); }
+  };
+
+  const handlePatientDelete = async (id) => {
+    if (window.confirm('Delete this patient?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/patients/${id}`);
+        fetchAllData();
+      } catch (err) { alert('Could not delete patient.'); }
+    }
+  };
+
+  // Doctor Actions
+  const handleDoctorSubmit = async (e) => {
+    e.preventDefault();
+    if (!doctorForm.Name || !doctorForm.Specialization) return alert('Fill all fields');
+    try {
+      if (doctorForm.DoctorID) {
+        await axios.put(`http://localhost:5000/api/doctors/${doctorForm.DoctorID}`, doctorForm);
+      } else {
+        await axios.post('http://localhost:5000/api/doctors', doctorForm);
+      }
+      setDoctorForm({ DoctorID: null, Name: '', Specialization: '' });
+      fetchAllData();
+    } catch (err) { alert('Operation failed'); }
+  };
+
+  const handleDoctorDelete = async (id) => {
+    if (window.confirm('Delete this doctor?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/doctors/${id}`);
+        fetchAllData();
+      } catch (err) { alert('Could not delete doctor.'); }
+    }
+  };
+
+  // Appointment Actions
+  const handleAppointmentSubmit = async (e) => {
+    e.preventDefault();
+    if (!appointmentForm.PatientID || !appointmentForm.DoctorID || !appointmentForm.Date) return alert('Fill all fields');
+    try {
+      if (appointmentForm.AppointmentID) {
+        await axios.put(`http://localhost:5000/api/appointments/${appointmentForm.AppointmentID}`, appointmentForm);
+      } else {
+        await axios.post('http://localhost:5000/api/appointments', appointmentForm);
+      }
+      setAppointmentForm({ AppointmentID: null, PatientID: '', DoctorID: '', Date: '' });
+      fetchAppointments();
+    } catch (err) { alert('Operation failed'); }
+  };
+
+  const handleAppointmentDelete = async (id) => {
+    if (window.confirm('Delete this appointment?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/appointments/${id}`);
+        fetchAppointments();
+      } catch (err) { alert('Operation failed'); }
+    }
+  };
+
+  // Payment Actions
+  const handlePaymentSubmit = async (e) => {
+    e.preventDefault();
+    if (!paymentForm.PatientID || !paymentForm.Amount || !paymentForm.Date) return alert('Fill all fields');
+    try {
+      if (paymentForm.PaymentID) {
+        await axios.put(`http://localhost:5000/api/payments/${paymentForm.PaymentID}`, paymentForm);
+      } else {
+        await axios.post('http://localhost:5000/api/payments', paymentForm);
+      }
+      setPaymentForm({ PaymentID: null, PatientID: '', Amount: '', Date: '' });
+      fetchPayments();
+    } catch (err) { alert('Operation failed'); }
+  };
+
+  const handlePaymentDelete = async (id) => {
+    if (window.confirm('Delete this payment record?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/payments/${id}`);
+        fetchPayments();
+      } catch (err) { alert('Operation failed'); }
+    }
+  };
+
+  // UI rendering ya Login niba adahuye
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gradient-to-tr from-slate-900 via-indigo-950 to-slate-900 flex items-center justify-center p-4">
+        <div className="bg-white/95 backdrop-blur-md p-8 rounded-2xl shadow-2xl w-full max-w-md border border-white/20">
+          <div className="text-center mb-8">
+            <div className="bg-blue-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 text-3xl font-black shadow-lg shadow-blue-500/30">
+              H
+            </div>
+            <h1 className="text-2xl font-black tracking-tight text-slate-800">Hospital Management</h1>
+            <p className="text-slate-500 text-sm mt-1">Sign in to access your administrative dashboard</p>
+          </div>
+          <form onSubmit={handleLogin} className="space-y-5">
+            <div>
+              <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Username</label>
+              <input
+                type="text"
+                value={loginData.username}
+                onChange={(e) => setLoginData({ ...loginData, username: e.target.value })}
+                className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+                placeholder="Enter your username"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Password</label>
+              <input
+                type="password"
+                value={loginData.password}
+                onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
+                className="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all text-slate-800"
+                placeholder="••••••••"
+              />
+            </div>
+            <button type="submit" className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-500/20">
+              Sign In
+            </button>
+          </form>
+          <div className="mt-6 text-center bg-slate-50 py-2.5 rounded-xl border border-slate-100">
+            <p className="text-xs text-slate-500 font-medium">Demo Access: <span className="font-mono font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100">admin / admin123</span></p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50/50 flex text-slate-800">
+      
+      {/* SIDEBAR NAVIGATION */}
+      <aside className="w-64 bg-slate-900 text-slate-300 flex flex-col fixed inset-y-0 left-0 z-50 border-r border-slate-800 shadow-xl">
+        <div className="p-5 border-b border-slate-800 flex items-center space-x-3">
+          <div className="bg-gradient-to-tr from-blue-500 to-indigo-600 text-white w-9 h-9 rounded-xl flex items-center justify-center font-black text-lg">
+            H
+          </div>
+          <div>
+            <h1 className="text-sm font-black text-white tracking-tight leading-none">MediCare Pro</h1>
+            <p className="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-1">Management Hub</p>
+          </div>
+        </div>
+
+        <div className="p-4 mx-3 my-4 bg-slate-800/50 rounded-xl border border-slate-800/60 flex items-center space-x-3">
+          <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-bold text-white truncate leading-none">{user?.username}</p>
+            <p className="text-[9px] text-blue-400 font-bold uppercase tracking-wider mt-1">{user?.role}</p>
+          </div>
+        </div>
+
+        <nav className="flex-1 px-3 space-y-1">
+          {[
+            { id: 'dashboard', label: 'Dashboard Overview', icon: '📊' },
+            { id: 'patients', label: 'Patients Registry', icon: '👥' },
+            { id: 'doctors', label: 'Medical Staff', icon: '🩺' },
+            { id: 'appointments', label: 'Appointments Slot', icon: '📅' },
+            { id: 'payments', label: 'Financial Billing', icon: '💳' },
+            { id: 'reports', label: 'General Report', icon: '📋' }
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-xs font-bold tracking-wide transition-all ${
+                activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+              }`}
+            >
+              <span className="text-base">{tab.icon}</span>
+              <span>{tab.label}</span>
+            </button>
+          ))}
+        </nav>
+
+        <div className="p-4 border-t border-slate-800">
+          <button onClick={handleLogout} className="w-full bg-red-950/40 text-red-400 hover:bg-red-900 hover:text-white px-4 py-2.5 rounded-xl text-xs font-bold flex items-center justify-center space-x-2">
+            <span>🚪</span>
+            <span>Logout Session</span>
+          </button>
+        </div>
+      </aside>
+
+      {/* MAIN CONTENT AREA CONTAINER */}
+      <div className="flex-1 pl-64 flex flex-col min-h-screen">
+        <header className="bg-white/80 backdrop-blur-md border-b border-slate-100 px-8 py-4 flex justify-between items-center sticky top-0 z-40">
+          <div>
+            <h2 className="text-sm font-bold text-slate-400 uppercase tracking-wider text-[10px]">Active Workspace</h2>
+            <h1 className="text-lg font-black text-slate-800 capitalize tracking-tight mt-0.5">{activeTab} Section</h1>
+          </div>
+          <div className="text-xs text-slate-400 font-semibold bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100">
+            System Status: <span className="text-emerald-500 font-bold">Online</span>
+          </div>
+        </header>
+
+        <main className="flex-1 p-8 max-w-7xl w-full mx-auto">
+          
+          {/* TAB 1: DASHBOARD OVERVIEW */}
+          {activeTab === 'dashboard' && (
+            <div className="space-y-6">
+              <div className="bg-gradient-to-r from-slate-900 to-indigo-950 rounded-2xl p-6 text-white shadow-xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <div>
+                  <h2 className="text-xl font-black tracking-tight">System Operational Summary</h2>
+                  <p className="text-slate-400 text-xs mt-1 font-medium">Manage all hospital records dynamically in real-time right here.</p>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+                  <div>
+                    <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Patients</p>
+                    <p className="text-2xl font-black text-slate-800 mt-1">{patients.length}</p>
+                  </div>
+                  <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center text-xl">👥</div>
+                </div>
+                <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+                  <div>
+                    <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Active Staff Doctors</p>
+                    <p className="text-2xl font-black text-slate-800 mt-1">{doctors.length}</p>
+                  </div>
+                  <div className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center text-xl">🩺</div>
+                </div>
+                <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+                  <div>
+                    <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Total Consultations</p>
+                    <p className="text-2xl font-black text-slate-800 mt-1">{appointments.length}</p>
+                  </div>
+                  <div className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center text-xl">📅</div>
+                </div>
+                <div className="bg-white p-5 rounded-2xl border flex items-center justify-between shadow-sm">
+                  <div>
+                    <p className="text-slate-400 text-[10px] font-bold uppercase tracking-wider">Gross Income Inflow</p>
+                    <p className="text-xl font-black text-slate-800 mt-1">{totalRevenue.toLocaleString()} RWF</p>
+                  </div>
+                  <div className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center text-xl">💰</div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+                  <h3 className="text-sm font-bold text-slate-800 mb-4">Recent Appointment Bookings</h3>
+                  <div className="divide-y overflow-y-auto max-h-64 flex-1">
+                    {appointments.slice(-4).reverse().map((a) => (
+                      <div key={a.AppointmentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+                        <div>
+                          <p className="font-bold text-slate-800 text-xs">{a.PatientName}</p>
+                          <p className="text-[10px] text-slate-400">Assigned Doctor: {a.DoctorName}</p>
+                        </div>
+                        <span className="text-[10px] bg-blue-50 text-blue-600 font-bold px-2.5 py-1 rounded-lg">
+                          {new Date(a.Date).toLocaleDateString()}
+                        </span>
+                      </div>
+                    ))}
+                    {appointments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+                  </div>
+                </div>
+
+                <div className="bg-white p-5 rounded-2xl border shadow-sm flex flex-col">
+                  <h3 className="text-sm font-bold text-slate-800 mb-4">Latest Financial Ledger Inflow</h3>
+                  <div className="divide-y overflow-y-auto max-h-64 flex-1">
+                    {payments.slice(-4).reverse().map((p) => (
+                      <div key={p.PaymentID} className="py-3 flex justify-between items-center px-1 rounded-lg">
+                        <div>
+                          <p className="font-bold text-slate-800 text-xs">{p.PatientName}</p>
+                          <p className="text-[10px] text-slate-400">{new Date(p.Date).toLocaleDateString()}</p>
+                        </div>
+                        <span className="text-xs font-black text-emerald-600">+{p.Amount?.toLocaleString()} RWF</span>
+                      </div>
+                    ))}
+                    {payments.length === 0 && <div className="text-center py-8 text-slate-400 text-xs">No records found.</div>}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* TAB 2: PATIENTS */}
+          {activeTab === 'patients' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+                <h2 className="text-sm font-bold text-slate-800 mb-4">{patientForm.PatientID ? 'Update Patient File Record' : 'Register New Patient File'}</h2>
+                <form onSubmit={handlePatientSubmit} className="space-y-4">
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Full Name</label>
+                    <input type="text" value={patientForm.Name} onChange={(e) => setPatientForm({ ...patientForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Full Name" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Patient Age</label>
+                    <input type="number" value={patientForm.Age} onChange={(e) => setPatientForm({ ...patientForm, Age: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Age" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Phone</label>
+                    <input type="text" value={patientForm.Phone} onChange={(e) => setPatientForm({ ...patientForm, Phone: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Phone Connection" />
+                  </div>
+                  <button type="submit" className="w-full bg-blue-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Patient Records</button>
+                </form>
+              </div>
+              
+              <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+                <table className="w-full text-left text-xs border-collapse">
+                  <thead>
+                    <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+                      <th className="p-3">ID</th>
+                      <th className="p-3">Name</th>
+                      <th className="p-3">Age</th>
+                      <th className="p-3">Phone</th>
+                      <th className="p-3 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {patients.map((p) => (
+                      <tr key={p.PatientID} className="hover:bg-slate-50/50">
+                        <td className="p-3 font-mono text-slate-400">{p.PatientID}</td>
+                        <td className="p-3 font-bold text-slate-800">{p.Name}</td>
+                        <td className="p-3">{p.Age} Yrs</td>
+                        <td className="p-3 font-mono">{p.Phone}</td>
+                        <td className="p-3 text-right space-x-1.5">
+                          <button onClick={() => setPatientForm(p)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+                          <button onClick={() => handlePatientDelete(p.PatientID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* TAB 3: DOCTORS */}
+          {activeTab === 'doctors' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+                <h2 className="text-sm font-bold text-slate-800 mb-4">{doctorForm.DoctorID ? 'Update Doctor Profile' : 'Register New Doctor'}</h2>
+                <form onSubmit={handleDoctorSubmit} className="space-y-4">
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Doctor Name</label>
+                    <input type="text" value={doctorForm.Name} onChange={(e) => setDoctorForm({ ...doctorForm, Name: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Dr. Name" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Specialization</label>
+                    <input type="text" value={doctorForm.Specialization} onChange={(e) => setDoctorForm({ ...doctorForm, Specialization: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Specialization" />
+                  </div>
+                  <button type="submit" className="w-full bg-emerald-600 text-white py-2.5 rounded-xl text-xs font-bold">Save Doctor Specs</button>
+                </form>
+              </div>
+
+              <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+                <table className="w-full text-left text-xs">
+                  <thead>
+                    <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+                      <th className="p-3">ID</th>
+                      <th className="p-3">Name</th>
+                      <th className="p-3">Specialization</th>
+                      <th className="p-3 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {doctors.map((d) => (
+                      <tr key={d.DoctorID} className="hover:bg-slate-50/50">
+                        <td className="p-3 font-mono text-slate-400">{d.DoctorID}</td>
+                        <td className="p-3 font-bold text-slate-800">{d.Name}</td>
+                        <td className="p-3 font-medium text-slate-600">{d.Specialization}</td>
+                        <td className="p-3 text-right space-x-1.5">
+                          <button onClick={() => setDoctorForm(d)} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+                          <button onClick={() => handleDoctorDelete(d.DoctorID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* TAB 4: APPOINTMENTS */}
+          {activeTab === 'appointments' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+                <h2 className="text-sm font-bold text-slate-800 mb-4">{appointmentForm.AppointmentID ? 'Modify Booking Slot' : 'Book Appointment Slot'}</h2>
+                <form onSubmit={handleAppointmentSubmit} className="space-y-4">
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient</label>
+                    <select value={appointmentForm.PatientID} onChange={(e) => setAppointmentForm({ ...appointmentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+                      <option value="">-- Choose Registered Patient --</option>
+                      {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name} (ID: {p.PatientID})</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Doctor</label>
+                    <select value={appointmentForm.DoctorID} onChange={(e) => setAppointmentForm({ ...appointmentForm, DoctorID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+                      <option value="">-- Choose Medical Officer --</option>
+                      {doctors.map(d => <option key={d.DoctorID} value={d.DoctorID}>{d.Name}</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Consultation Date</label>
+                    <input type="date" value={appointmentForm.Date ? appointmentForm.Date.split('T')[0] : ''} onChange={(e) => setAppointmentForm({ ...appointmentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+                  </div>
+                  <button type="submit" className="w-full bg-amber-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Slot Booking</button>
+                </form>
+              </div>
+
+              <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+                <table className="w-full text-left text-xs">
+                  <thead>
+                    <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+                      <th className="p-3">ID</th>
+                      <th className="p-3">Patient</th>
+                      <th className="p-3">Doctor</th>
+                      <th className="p-3">Date</th>
+                      <th className="p-3 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {appointments.map((a) => (
+                      <tr key={a.AppointmentID} className="hover:bg-slate-50/50">
+                        <td className="p-3 text-slate-400 font-mono">{a.AppointmentID}</td>
+                        <td className="p-3 font-bold text-slate-800">{a.PatientName}</td>
+                        <td className="p-3 font-medium text-slate-600">{a.DoctorName}</td>
+                        <td className="p-3 font-mono"><span className="bg-blue-50 text-blue-600 px-2 py-0.5 rounded border border-blue-100">{new Date(a.Date).toLocaleDateString()}</span></td>
+                        <td className="p-3 text-right space-x-1.5">
+                          <button onClick={() => setAppointmentForm({ AppointmentID: a.AppointmentID, PatientID: a.PatientID || '', DoctorID: a.DoctorID || '', Date: a.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+                          <button onClick={() => handleAppointmentDelete(a.AppointmentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* TAB 5: PAYMENTS */}
+          {activeTab === 'payments' && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="bg-white p-5 rounded-2xl border shadow-sm h-fit">
+                <h2 className="text-sm font-bold text-slate-800 mb-4">{paymentForm.PaymentID ? 'Modify Invoice Data' : 'Generate New Patient Invoice'}</h2>
+                <form onSubmit={handlePaymentSubmit} className="space-y-4">
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Select Patient Debtor</label>
+                    <select value={paymentForm.PatientID} onChange={(e) => setPaymentForm({ ...paymentForm, PatientID: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs bg-white">
+                      <option value="">-- Select Patient --</option>
+                      {patients.map(p => <option key={p.PatientID} value={p.PatientID}>{p.Name}</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Amount (RWF)</label>
+                    <input type="number" value={paymentForm.Amount} onChange={(e) => setPaymentForm({ ...paymentForm, Amount: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" placeholder="Invoice Value" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Billing Date</label>
+                    <input type="date" value={paymentForm.Date ? paymentForm.Date.split('T')[0] : ''} onChange={(e) => setPaymentForm({ ...paymentForm, Date: e.target.value })} className="w-full border p-2.5 rounded-xl text-xs" />
+                  </div>
+                  <button type="submit" className="w-full bg-indigo-600 text-white py-2.5 rounded-xl text-xs font-bold">Commit Statement</button>
+                </form>
+              </div>
+
+              <div className="bg-white p-5 rounded-2xl border shadow-sm col-span-2 overflow-x-auto">
+                <table className="w-full text-left text-xs">
+                  <thead>
+                    <tr className="bg-slate-50 text-slate-500 uppercase font-bold text-[10px] border-b">
+                      <th className="p-3">ID</th>
+                      <th className="p-3">Patient Name</th>
+                      <th className="p-3">Amount</th>
+                      <th className="p-3">Date</th>
+                      <th className="p-3 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {payments.map((p) => (
+                      <tr key={p.PaymentID} className="hover:bg-slate-50/50">
+                        <td className="p-3 text-slate-400 font-mono">{p.PaymentID}</td>
+                        <td className="p-3 font-bold text-slate-800">{p.PatientName}</td>
+                        <td className="p-3 font-black text-emerald-600">{Number(p.Amount).toLocaleString()} RWF</td>
+                        <td className="p-3 font-mono text-slate-500">{new Date(p.Date).toLocaleDateString()}</td>
+                        <td className="p-3 text-right space-x-1.5">
+                          <button onClick={() => setPaymentForm({ PaymentID: p.PaymentID, PatientID: p.PatientID || '', Amount: p.Amount, Date: p.Date })} className="bg-amber-50 text-amber-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Edit</button>
+                          <button onClick={() => handlePaymentDelete(p.PaymentID)} className="bg-red-50 text-red-600 px-2 py-1 rounded-lg font-bold text-[10px] border">Delete</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* TAB 6: REPORTS */}
+          {activeTab === 'reports' && (
+            <div className="bg-white p-8 rounded-2xl border shadow-sm space-y-6">
+              <div className="border-b pb-4 text-center">
+                <h1 className="text-xl font-black text-slate-800 uppercase tracking-wide">MediCare Pro Comprehensive Summary Report</h1>
+                <p className="text-slate-400 text-xs mt-1">Generated dynamically on {new Date().toLocaleDateString()}</p>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+                <div className="p-4 bg-slate-50 rounded-xl border">
+                  <h3 className="text-xs font-bold uppercase text-slate-400">Total Patients Dossiers</h3>
+                  <p className="text-3xl font-black text-blue-600 mt-2">{patients.length}</p>
+                </div>
+                <div className="p-4 bg-slate-50 rounded-xl border">
+                  <h3 className="text-xs font-bold uppercase text-slate-400">Consultations Services</h3>
+                  <p className="text-3xl font-black text-amber-600 mt-2">{appointments.length}</p>
+                </div>
+                <div className="p-4 bg-slate-50 rounded-xl border">
+                  <h3 className="text-xs font-bold uppercase text-slate-400">Cumulative Income</h3>
+                  <p className="text-3xl font-black text-emerald-600 mt-2">{totalRevenue.toLocaleString()} RWF</p>
+                </div>
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default App;