create-steve-rogers 1.0.0

package/apps/HMSR/frontend/src/pages/Appointments.js

@@ -0,0 +1,250 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+import { useAuth } from '../context/AuthContext';
+
+const emptyForm = {
+  patient_id: '',
+  doctor_id: '',
+  appointment_date: '',
+  appointment_time: '',
+  status: 'scheduled',
+};
+
+export default function Appointments() {
+  const { user } = useAuth();
+  const isReceptionist = user?.role === 'receptionist';
+  const [appointments, setAppointments] = useState([]);
+  const [patients, setPatients] = useState([]);
+  const [doctors, setDoctors] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editingId, setEditingId] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    try {
+      const apptRes = await api.get('/appointments');
+      setAppointments(apptRes.data);
+
+      if (isReceptionist) {
+        const [patRes, docRes] = await Promise.all([
+          api.get('/patients'),
+          api.get('/auth/doctors'),
+        ]);
+        setPatients(patRes.data);
+        setDoctors(docRes.data);
+      }
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load appointments.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [isReceptionist]);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      if (editingId) {
+        await api.put(`/appointments/${editingId}`, form);
+      } else {
+        await api.post('/appointments', form);
+      }
+      setForm(emptyForm);
+      setEditingId(null);
+      setShowForm(false);
+      fetchData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Operation failed.');
+    }
+  };
+
+  const handleEdit = (appt) => {
+    setForm({
+      patient_id: appt.patient_id,
+      doctor_id: appt.doctor_id,
+      appointment_date: appt.appointment_date?.split('T')[0],
+      appointment_time: appt.appointment_time?.slice(0, 5),
+      status: appt.status,
+    });
+    setEditingId(appt.id);
+    setShowForm(true);
+  };
+
+  const handleCancel = async (id) => {
+    if (!window.confirm('Cancel this appointment?')) return;
+    try {
+      await api.patch(`/appointments/${id}/cancel`);
+      fetchData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Cancel failed.');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this appointment?')) return;
+    try {
+      await api.delete(`/appointments/${id}`);
+      fetchData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Delete failed.');
+    }
+  };
+
+  const statusClass = (status) => `status-badge status-${status}`;
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h1>Appointment Management</h1>
+          <p>{isReceptionist ? 'Schedule and manage patient appointments' : 'Your assigned appointments'}</p>
+        </div>
+        {isReceptionist && (
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={() => {
+              setShowForm(!showForm);
+              if (showForm) {
+                setForm(emptyForm);
+                setEditingId(null);
+              }
+            }}
+          >
+            {showForm ? 'Close Form' : '+ New Appointment'}
+          </button>
+        )}
+      </header>
+
+      {error && <div className="alert alert-error">{error}</div>}
+
+      {showForm && isReceptionist && (
+        <div className="card form-card">
+          <h2>{editingId ? 'Update Appointment' : 'Create Appointment'}</h2>
+          <form onSubmit={handleSubmit} className="form-grid">
+            <div className="form-group">
+              <label>Patient</label>
+              <select name="patient_id" value={form.patient_id} onChange={handleChange} required>
+                <option value="">Select patient</option>
+                {patients.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.full_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="form-group">
+              <label>Doctor</label>
+              <select name="doctor_id" value={form.doctor_id} onChange={handleChange} required>
+                <option value="">Select doctor</option>
+                {doctors.map((d) => (
+                  <option key={d.id} value={d.id}>
+                    {d.full_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="form-group">
+              <label>Date</label>
+              <input
+                name="appointment_date"
+                type="date"
+                value={form.appointment_date}
+                onChange={handleChange}
+                required
+              />
+            </div>
+            <div className="form-group">
+              <label>Time</label>
+              <input
+                name="appointment_time"
+                type="time"
+                value={form.appointment_time}
+                onChange={handleChange}
+                required
+              />
+            </div>
+            {editingId && (
+              <div className="form-group">
+                <label>Status</label>
+                <select name="status" value={form.status} onChange={handleChange}>
+                  <option value="scheduled">Scheduled</option>
+                  <option value="completed">Completed</option>
+                  <option value="cancelled">Cancelled</option>
+                </select>
+              </div>
+            )}
+            <div className="form-actions full-width">
+              <button type="submit" className="btn btn-primary">
+                {editingId ? 'Update' : 'Create'} Appointment
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="card">
+        {loading ? (
+          <p className="text-muted">Loading...</p>
+        ) : appointments.length === 0 ? (
+          <p className="text-muted">No appointments found.</p>
+        ) : (
+          <div className="table-responsive">
+            <table>
+              <thead>
+                <tr>
+                  <th>Patient</th>
+                  <th>Doctor</th>
+                  <th>Date</th>
+                  <th>Time</th>
+                  <th>Status</th>
+                  {isReceptionist && <th>Actions</th>}
+                </tr>
+              </thead>
+              <tbody>
+                {appointments.map((a) => (
+                  <tr key={a.id}>
+                    <td>{a.patient_name}</td>
+                    <td>{a.doctor_name}</td>
+                    <td>{a.appointment_date?.split('T')[0]}</td>
+                    <td>{a.appointment_time?.slice(0, 5)}</td>
+                    <td>
+                      <span className={statusClass(a.status)}>{a.status}</span>
+                    </td>
+                    {isReceptionist && (
+                      <td className="actions">
+                        {a.status !== 'cancelled' && (
+                          <button type="button" className="btn btn-sm btn-outline" onClick={() => handleEdit(a)}>
+                            Edit
+                          </button>
+                        )}
+                        {a.status === 'scheduled' && (
+                          <button type="button" className="btn btn-sm btn-warning" onClick={() => handleCancel(a.id)}>
+                            Cancel
+                          </button>
+                        )}
+                        <button type="button" className="btn btn-sm btn-danger" onClick={() => handleDelete(a.id)}>
+                          Delete
+                        </button>
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/HMSR/frontend/src/pages/Dashboard.js

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import api from '../services/api';
+import { useAuth } from '../context/AuthContext';
+
+export default function Dashboard() {
+  const { user } = useAuth();
+  const [stats, setStats] = useState({
+    patients: 0,
+    appointments: 0,
+    completed: 0,
+    reports: 0,
+  });
+
+  useEffect(() => {
+    const today = new Date().toISOString().split('T')[0];
+    const startOfMonth = new Date();
+    startOfMonth.setDate(1);
+    const start = startOfMonth.toISOString().split('T')[0];
+
+    const fetchStats = async () => {
+      try {
+        const promises = [
+          user.role === 'receptionist'
+            ? api.get('/patients').then((r) => r.data.length)
+            : Promise.resolve(0),
+          api.get('/appointments').then((r) => r.data),
+          api.get('/reports/summary', { params: { start_date: start, end_date: today } }),
+          user.role === 'doctor'
+            ? api.get('/medical-reports').then((r) => r.data.length)
+            : Promise.resolve(0),
+        ];
+
+        const [patientCount, appointments, reportData, reportCount] =
+          await Promise.all(promises);
+
+        setStats({
+          patients: patientCount,
+          appointments: appointments.length,
+          completed: reportData.data.total_completed,
+          reports: user.role === 'doctor' ? reportCount : reportData.data.patients_attended?.length || 0,
+        });
+      } catch {
+        /* stats optional */
+      }
+    };
+
+    fetchStats();
+  }, [user.role]);
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h1>Dashboard</h1>
+          <p>Welcome back, {user?.full_name}</p>
+        </div>
+      </header>
+
+      <div className="stats-grid">
+        {user.role === 'receptionist' && (
+          <div className="stat-card">
+            <span className="stat-label">Registered Patients</span>
+            <span className="stat-value">{stats.patients}</span>
+          </div>
+        )}
+        <div className="stat-card">
+          <span className="stat-label">Appointments</span>
+          <span className="stat-value">{stats.appointments}</span>
+        </div>
+        <div className="stat-card">
+          <span className="stat-label">Completed (This Month)</span>
+          <span className="stat-value">{stats.completed}</span>
+        </div>
+        <div className="stat-card">
+          <span className="stat-label">
+            {user.role === 'doctor' ? 'Medical Reports' : 'Patients Attended'}
+          </span>
+          <span className="stat-value">{stats.reports}</span>
+        </div>
+      </div>
+
+      <div className="quick-actions">
+        <h2>Quick Actions</h2>
+        <div className="action-grid">
+          {user.role === 'receptionist' && (
+            <>
+              <Link to="/patients" className="action-card">
+                <h3>Manage Patients</h3>
+                <p>Add, update, or view patient records</p>
+              </Link>
+              <Link to="/appointments" className="action-card">
+                <h3>Appointments</h3>
+                <p>Schedule and manage appointments</p>
+              </Link>
+            </>
+          )}
+          {user.role === 'doctor' && (
+            <Link to="/medical-reports" className="action-card">
+              <h3>Medical Reports</h3>
+              <p>View appointments and save diagnoses</p>
+            </Link>
+          )}
+          <Link to="/appointments" className="action-card">
+            <h3>View Appointments</h3>
+            <p>See all scheduled visits</p>
+          </Link>
+          <Link to="/reports" className="action-card">
+            <h3>Generate Reports</h3>
+            <p>Filter by date and view statistics</p>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/HMSR/frontend/src/pages/Login.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(email, password);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <span className="brand-icon large">+</span>
+          <h1>King Faisal Hospital Rwanda</h1>
+          <p>Appointment & Medical Report Management</p>
+        </div>
+        <form onSubmit={handleSubmit}>
+          {error && <div className="alert alert-error">{error}</div>}
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="reception@kfh.rw"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit" className="btn btn-primary btn-block" disabled={loading}>
+            {loading ? 'Signing in...' : 'Login'}
+          </button>
+        </form>
+        <p className="auth-footer">
+          No account? <Link to="/register">Register here</Link>
+        </p>
+        <div className="demo-credentials">
+          <p><strong>Demo accounts:</strong></p>
+          <p>Receptionist: reception@kfh.rw / receptionist123</p>
+          <p>Doctor: doctor1@kfh.rw / doctor123</p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/HMSR/frontend/src/pages/MedicalReports.js

@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+
+const emptyReport = {
+  appointment_id: '',
+  diagnosis: '',
+  prescription: '',
+  report_date: new Date().toISOString().split('T')[0],
+};
+
+export default function MedicalReports() {
+  const [assignedAppointments, setAssignedAppointments] = useState([]);
+  const [reports, setReports] = useState([]);
+  const [form, setForm] = useState(emptyReport);
+  const [showForm, setShowForm] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    try {
+      const [apptRes, reportRes] = await Promise.all([
+        api.get('/appointments/assigned'),
+        api.get('/medical-reports'),
+      ]);
+      setAssignedAppointments(apptRes.data);
+      setReports(reportRes.data);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load data.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+    try {
+      await api.post('/medical-reports', form);
+      setSuccess('Medical report saved successfully.');
+      setForm(emptyReport);
+      setShowForm(false);
+      fetchData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to save report.');
+    }
+  };
+
+  const selectAppointment = (appt) => {
+    setForm({
+      ...emptyReport,
+      appointment_id: appt.id,
+    });
+    setShowForm(true);
+  };
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h1>Medical Report Management</h1>
+          <p>View assigned appointments and create medical reports</p>
+        </div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={() => setShowForm(!showForm)}
+        >
+          {showForm ? 'Close Form' : '+ New Report'}
+        </button>
+      </header>
+
+      {error && <div className="alert alert-error">{error}</div>}
+      {success && <div className="alert alert-success">{success}</div>}
+
+      <div className="card">
+        <h2>Assigned Appointments (Scheduled)</h2>
+        {loading ? (
+          <p className="text-muted">Loading...</p>
+        ) : assignedAppointments.length === 0 ? (
+          <p className="text-muted">No scheduled appointments assigned to you.</p>
+        ) : (
+          <div className="table-responsive">
+            <table>
+              <thead>
+                <tr>
+                  <th>Patient</th>
+                  <th>Date</th>
+                  <th>Time</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {assignedAppointments.map((a) => (
+                  <tr key={a.id}>
+                    <td>{a.patient_name}</td>
+                    <td>{a.appointment_date?.split('T')[0]}</td>
+                    <td>{a.appointment_time?.slice(0, 5)}</td>
+                    <td>
+                      <button
+                        type="button"
+                        className="btn btn-sm btn-primary"
+                        onClick={() => selectAppointment(a)}
+                      >
+                        Add Report
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {showForm && (
+        <div className="card form-card">
+          <h2>Create Medical Report</h2>
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label>Appointment</label>
+              <select
+                name="appointment_id"
+                value={form.appointment_id}
+                onChange={handleChange}
+                required
+              >
+                <option value="">Select appointment</option>
+                {assignedAppointments.map((a) => (
+                  <option key={a.id} value={a.id}>
+                    {a.patient_name} — {a.appointment_date?.split('T')[0]} {a.appointment_time?.slice(0, 5)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="form-group">
+              <label>Diagnosis</label>
+              <textarea
+                name="diagnosis"
+                value={form.diagnosis}
+                onChange={handleChange}
+                rows={3}
+                required
+                placeholder="Enter diagnosis..."
+              />
+            </div>
+            <div className="form-group">
+              <label>Prescription</label>
+              <textarea
+                name="prescription"
+                value={form.prescription}
+                onChange={handleChange}
+                rows={3}
+                required
+                placeholder="Enter prescription..."
+              />
+            </div>
+            <div className="form-group">
+              <label>Report Date</label>
+              <input
+                name="report_date"
+                type="date"
+                value={form.report_date}
+                onChange={handleChange}
+                required
+              />
+            </div>
+            <button type="submit" className="btn btn-primary">
+              Save Medical Report
+            </button>
+          </form>
+        </div>
+      )}
+
+      <div className="card">
+        <h2>Saved Medical Reports</h2>
+        {reports.length === 0 ? (
+          <p className="text-muted">No medical reports yet.</p>
+        ) : (
+          <div className="table-responsive">
+            <table>
+              <thead>
+                <tr>
+                  <th>Patient</th>
+                  <th>Doctor</th>
+                  <th>Diagnosis</th>
+                  <th>Prescription</th>
+                  <th>Report Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {reports.map((r) => (
+                  <tr key={r.id}>
+                    <td>{r.patient_name}</td>
+                    <td>{r.doctor_name}</td>
+                    <td className="text-wrap">{r.diagnosis}</td>
+                    <td className="text-wrap">{r.prescription}</td>
+                    <td>{r.report_date?.split('T')[0]}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}