create-jinmankn-app 1.0.0

package/templates/hospital-faisal/frontend/src/pages/DashboardHome.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { api, getStoredUser } from '../api';
+
+function DashboardHome() {
+  const user = getStoredUser();
+  const [stats, setStats] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        if (user?.role === 'receptionist') {
+          const [patientsRes, appointmentsRes] = await Promise.all([
+            api.get('/patients'),
+            api.get('/appointments'),
+          ]);
+          const appointments = appointmentsRes.data.appointments;
+          setStats({
+            patients: patientsRes.data.patients.length,
+            appointments: appointments.length,
+            scheduled: appointments.filter((a) => a.status === 'scheduled').length,
+          });
+        } else if (user?.role === 'doctor') {
+          const [appointmentsRes, reportsRes] = await Promise.all([
+            api.get('/appointments'),
+            api.get('/medical-reports'),
+          ]);
+          const appointments = appointmentsRes.data.appointments;
+          setStats({
+            myAppointments: appointments.length,
+            scheduled: appointments.filter((a) => a.status === 'scheduled').length,
+            reports: reportsRes.data.reports.length,
+          });
+        }
+      } catch (err) {
+        setError(err.response?.data?.message || 'Could not load overview');
+      }
+    };
+    load();
+  }, [user?.role]);
+
+  return (
+    <div className="max-w-4xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-2">Overview</h1>
+      <p className="text-slate-600 mb-8">
+        King Faisal Hospital Rwanda — appointment and medical report management.
+      </p>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      {user?.role === 'receptionist' && stats && (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">Registered patients</p>
+            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.patients}</p>
+            <Link to="/dashboard/patients" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
+              Manage patients →
+            </Link>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">Total appointments</p>
+            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.appointments}</p>
+            <Link to="/dashboard/appointments" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
+              Manage appointments →
+            </Link>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">Scheduled</p>
+            <p className="text-3xl font-bold text-amber-600 mt-2">{stats.scheduled}</p>
+          </div>
+        </div>
+      )}
+
+      {user?.role === 'doctor' && stats && (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">My appointments</p>
+            <p className="text-3xl font-bold text-slate-800 mt-2">{stats.myAppointments}</p>
+            <Link to="/dashboard/appointments" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
+              View appointments →
+            </Link>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">Scheduled</p>
+            <p className="text-3xl font-bold text-amber-600 mt-2">{stats.scheduled}</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
+            <p className="text-sm text-slate-500">Medical reports</p>
+            <p className="text-3xl font-bold text-teal-700 mt-2">{stats.reports}</p>
+            <Link to="/dashboard/medical-reports" className="text-sm text-teal-600 hover:underline mt-3 inline-block">
+              Manage reports →
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DashboardHome;

package/templates/hospital-faisal/frontend/src/pages/Login.jsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { api } from '../api';
+
+function Login() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setMessage('');
+    setLoading(true);
+
+    try {
+      const response = await api.post('/auth/login', { email, password });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Login successful');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 bg-slate-100">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-md p-8">
+        <p className="text-xs font-semibold uppercase tracking-wider text-teal-600">
+          King Faisal Hospital Rwanda
+        </p>
+        <h1 className="text-2xl font-bold text-slate-800 mb-6 mt-1">Staff sign in</h1>
+
+        {message && (
+          <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+            {message}
+          </p>
+        )}
+        {error && (
+          <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500"
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full border border-slate-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-teal-600 text-white font-medium py-2 rounded hover:bg-teal-700 disabled:opacity-50"
+          >
+            {loading ? 'Signing in...' : 'Sign in'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-sm text-slate-600 text-center">
+          No account?{' '}
+          <Link to="/register" className="text-teal-600 hover:underline">
+            Register
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

package/templates/hospital-faisal/frontend/src/pages/MedicalReports.jsx

@@ -0,0 +1,182 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+
+function MedicalReports() {
+  const [appointments, setAppointments] = useState([]);
+  const [reports, setReports] = useState([]);
+  const [form, setForm] = useState({
+    appointmentId: '',
+    diagnosis: '',
+    prescription: '',
+    reportDate: new Date().toISOString().slice(0, 10),
+  });
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const loadData = async () => {
+    try {
+      const [apptRes, reportRes] = await Promise.all([
+        api.get('/appointments'),
+        api.get('/medical-reports'),
+      ]);
+      const eligible = apptRes.data.appointments.filter(
+        (a) => a.status !== 'cancelled' && !a.hasReport,
+      );
+      setAppointments(eligible);
+      setReports(reportRes.data.reports);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    setMessage('');
+
+    try {
+      await api.post('/medical-reports', {
+        appointmentId: Number(form.appointmentId),
+        diagnosis: form.diagnosis,
+        prescription: form.prescription,
+        reportDate: form.reportDate,
+      });
+      setMessage('Medical report saved');
+      setForm({
+        appointmentId: '',
+        diagnosis: '',
+        prescription: '',
+        reportDate: new Date().toISOString().slice(0, 10),
+      });
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to save report');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-5xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">Medical Report Management</h1>
+
+      {message && (
+        <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+          {message}
+        </p>
+      )}
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <section className="bg-white rounded-lg shadow-md p-6 mb-8">
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">Add medical report</h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Assigned appointment</label>
+            <select
+              name="appointmentId"
+              required
+              value={form.appointmentId}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            >
+              <option value="">Select appointment</option>
+              {appointments.map((a) => (
+                <option key={a.id} value={a.id}>
+                  {a.patientName} — {a.appointmentDate} {a.appointmentTime?.slice(0, 5)} ({a.status})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Diagnosis</label>
+            <textarea
+              name="diagnosis"
+              rows={3}
+              required
+              value={form.diagnosis}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Prescription</label>
+            <textarea
+              name="prescription"
+              rows={3}
+              required
+              value={form.prescription}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Report date</label>
+            <input
+              name="reportDate"
+              type="date"
+              required
+              value={form.reportDate}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2 max-w-xs"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={submitting}
+            className="bg-teal-600 text-white font-medium px-4 py-2 rounded hover:bg-teal-700 disabled:opacity-50"
+          >
+            {submitting ? 'Saving...' : 'Save report'}
+          </button>
+        </form>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">Saved medical reports</h2>
+        {loading ? (
+          <p className="text-slate-500">Loading...</p>
+        ) : reports.length === 0 ? (
+          <p className="text-slate-500">No medical reports yet.</p>
+        ) : (
+          <div className="space-y-4">
+            {reports.map((r) => (
+              <article key={r.id} className="bg-white rounded-lg border border-slate-200 p-5">
+                <div className="flex flex-wrap justify-between gap-2 mb-3">
+                  <div>
+                    <p className="font-semibold text-slate-800">{r.patientName}</p>
+                    <p className="text-sm text-slate-500">Dr. {r.doctorName}</p>
+                  </div>
+                  <p className="text-sm text-slate-500">Report date: {r.reportDate}</p>
+                </div>
+                <p className="text-sm text-slate-700">
+                  <span className="font-medium">Diagnosis:</span> {r.diagnosis}
+                </p>
+                <p className="text-sm text-slate-700 mt-2">
+                  <span className="font-medium">Prescription:</span> {r.prescription}
+                </p>
+              </article>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default MedicalReports;

package/templates/hospital-faisal/frontend/src/pages/Patients.jsx

@@ -0,0 +1,237 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+
+const emptyForm = {
+  fullName: '',
+  gender: 'Male',
+  dateOfBirth: '',
+  phone: '',
+  address: '',
+};
+
+function Patients() {
+  const [patients, setPatients] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [editId, setEditId] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const loadPatients = async () => {
+    try {
+      const response = await api.get('/patients');
+      setPatients(response.data.patients);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load patients');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadPatients();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleEdit = (patient) => {
+    setEditId(patient.id);
+    setForm({
+      fullName: patient.fullName,
+      gender: patient.gender,
+      dateOfBirth: patient.dateOfBirth,
+      phone: patient.phone,
+      address: patient.address,
+    });
+    setError('');
+    setMessage('');
+  };
+
+  const handleCancelEdit = () => {
+    setEditId(null);
+    setForm(emptyForm);
+    setError('');
+    setMessage('');
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this patient record?')) return;
+    setError('');
+    try {
+      await api.delete(`/patients/${id}`);
+      setMessage('Patient deleted successfully');
+      if (editId === id) handleCancelEdit();
+      loadPatients();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Delete failed');
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    setMessage('');
+
+    try {
+      if (editId) {
+        await api.put(`/patients/${editId}`, form);
+        setMessage('Patient updated successfully');
+      } else {
+        await api.post('/patients', form);
+        setMessage('Patient added successfully');
+      }
+      setForm(emptyForm);
+      setEditId(null);
+      loadPatients();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Save failed');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-5xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">Patient Management</h1>
+
+      {message && (
+        <p className="mb-4 text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2">
+          {message}
+        </p>
+      )}
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <section className="bg-white rounded-lg shadow-md p-6 mb-8">
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">
+          {editId ? 'Edit patient' : 'Register new patient'}
+        </h2>
+        <form onSubmit={handleSubmit} className="grid gap-4 sm:grid-cols-2">
+          <div className="sm:col-span-2">
+            <label className="block text-sm font-medium text-slate-700 mb-1">Full name</label>
+            <input
+              name="fullName"
+              required
+              value={form.fullName}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Gender</label>
+            <select
+              name="gender"
+              value={form.gender}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            >
+              <option>Male</option>
+              <option>Female</option>
+              <option>Other</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Date of birth</label>
+            <input
+              name="dateOfBirth"
+              type="date"
+              required
+              value={form.dateOfBirth}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Phone</label>
+            <input
+              name="phone"
+              required
+              value={form.phone}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div className="sm:col-span-2">
+            <label className="block text-sm font-medium text-slate-700 mb-1">Address</label>
+            <textarea
+              name="address"
+              rows={2}
+              required
+              value={form.address}
+              onChange={handleChange}
+              className="w-full border border-slate-300 rounded px-3 py-2"
+            />
+          </div>
+          <div className="sm:col-span-2 flex gap-2">
+            <button
+              type="submit"
+              disabled={submitting}
+              className="bg-teal-600 text-white font-medium px-4 py-2 rounded hover:bg-teal-700 disabled:opacity-50"
+            >
+              {submitting ? 'Saving...' : editId ? 'Update' : 'Add patient'}
+            </button>
+            {editId && (
+              <button
+                type="button"
+                onClick={handleCancelEdit}
+                className="border border-slate-300 px-4 py-2 rounded hover:bg-slate-50"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </section>
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">All patients</h2>
+        {loading ? (
+          <p className="text-slate-500">Loading...</p>
+        ) : patients.length === 0 ? (
+          <p className="text-slate-500">No patients registered yet.</p>
+        ) : (
+          <div className="overflow-x-auto bg-white rounded-lg border border-slate-200">
+            <table className="w-full text-sm text-left">
+              <thead className="bg-slate-50 text-slate-600">
+                <tr>
+                  <th className="px-4 py-2">Name</th>
+                  <th className="px-4 py-2">Gender</th>
+                  <th className="px-4 py-2">DOB</th>
+                  <th className="px-4 py-2">Phone</th>
+                  <th className="px-4 py-2">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-200">
+                {patients.map((p) => (
+                  <tr key={p.id}>
+                    <td className="px-4 py-2">{p.fullName}</td>
+                    <td className="px-4 py-2">{p.gender}</td>
+                    <td className="px-4 py-2">{p.dateOfBirth}</td>
+                    <td className="px-4 py-2">{p.phone}</td>
+                    <td className="px-4 py-2 space-x-2">
+                      <button type="button" onClick={() => handleEdit(p)} className="text-teal-600 hover:underline">
+                        Edit
+                      </button>
+                      <button type="button" onClick={() => handleDelete(p.id)} className="text-red-600 hover:underline">
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default Patients;