create-jinmankn-app 1.0.0

package/templates/hospital-faisal/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "blueprint-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.8",
+    "vite": "^6.0.6"
+  }
+}

package/templates/hospital-faisal/frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#2563eb"/>
+  <text x="16" y="22" text-anchor="middle" fill="white" font-size="14" font-family="system-ui,sans-serif" font-weight="700">B</text>
+</svg>

package/templates/hospital-faisal/frontend/src/App.jsx

@@ -0,0 +1,56 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import ProtectedRoute from './components/ProtectedRoute';
+import RoleRoute from './components/RoleRoute';
+import DashboardLayout from './components/DashboardLayout';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import DashboardHome from './pages/DashboardHome';
+import Patients from './pages/Patients';
+import Appointments from './pages/Appointments';
+import MedicalReports from './pages/MedicalReports';
+import Report from './pages/Report';
+import Profile from './pages/Profile';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/register" element={<Register />} />
+
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute>
+            <DashboardLayout />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<DashboardHome />} />
+        <Route
+          path="patients"
+          element={
+            <RoleRoute allowedRoles={['receptionist']}>
+              <Patients />
+            </RoleRoute>
+          }
+        />
+        <Route path="appointments" element={<Appointments />} />
+        <Route
+          path="medical-reports"
+          element={
+            <RoleRoute allowedRoles={['doctor']}>
+              <MedicalReports />
+            </RoleRoute>
+          }
+        />
+        <Route path="report" element={<Report />} />
+        <Route path="profile" element={<Profile />} />
+      </Route>
+
+      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}
+
+export default App;

package/templates/hospital-faisal/frontend/src/api.js

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';
+
+export const api = axios.create({
+  baseURL: API_URL,
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export function getStoredUser() {
+  const raw = localStorage.getItem('user');
+  return raw ? JSON.parse(raw) : null;
+}

package/templates/hospital-faisal/frontend/src/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+  <rect width="40" height="40" rx="8" fill="#1e293b"/>
+  <text x="20" y="27" text-anchor="middle" fill="white" font-size="18" font-family="system-ui,sans-serif" font-weight="700">B</text>
+</svg>

package/templates/hospital-faisal/frontend/src/components/DashboardLayout.jsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { Link, Outlet, useNavigate } from 'react-router-dom';
+import { api, getStoredUser } from '../api';
+
+function DashboardLayout() {
+  const navigate = useNavigate();
+  const [user, setUser] = useState(getStoredUser());
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const response = await api.get('/auth/me');
+        setUser(response.data.user);
+        localStorage.setItem('user', JSON.stringify(response.data.user));
+      } catch (err) {
+        if (!getStoredUser()) {
+          setError(err.response?.data?.message || 'Could not load user');
+        }
+      }
+    };
+    loadUser();
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    navigate('/login');
+  };
+
+  const isReceptionist = user?.role === 'receptionist';
+  const isDoctor = user?.role === 'doctor';
+
+  const linkClass =
+    'block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors';
+
+  return (
+    <div className="min-h-screen bg-slate-100">
+      <aside className="fixed inset-y-0 left-0 w-64 bg-slate-900 text-slate-100 flex flex-col">
+        <div className="px-5 py-6 border-b border-slate-700">
+          <p className="text-xs font-semibold uppercase tracking-wider text-teal-400">
+            King Faisal Hospital
+          </p>
+          <h1 className="text-lg font-bold text-white mt-1">Rwanda</h1>
+        </div>
+
+        <nav className="flex-1 px-3 py-4 space-y-1">
+          <Link to="/dashboard" className={linkClass}>
+            Dashboard
+          </Link>
+          {isReceptionist && (
+            <>
+              <Link to="/dashboard/patients" className={linkClass}>
+                Patients
+              </Link>
+              <Link to="/dashboard/appointments" className={linkClass}>
+                Appointments
+              </Link>
+            </>
+          )}
+          {isDoctor && (
+            <>
+              <Link to="/dashboard/appointments" className={linkClass}>
+                My appointments
+              </Link>
+              <Link to="/dashboard/medical-reports" className={linkClass}>
+                Medical reports
+              </Link>
+            </>
+          )}
+          <Link to="/dashboard/report" className={linkClass}>
+            Reports
+          </Link>
+          <Link to="/dashboard/profile" className={linkClass}>
+            Profile
+          </Link>
+        </nav>
+
+        <div className="px-4 py-4 border-t border-slate-700">
+          {error && <p className="text-xs text-red-400 mb-2">{error}</p>}
+          {user && (
+            <>
+              <p className="text-sm font-medium text-white truncate">{user.name}</p>
+              <p className="text-xs text-teal-400 capitalize mt-0.5">{user.role}</p>
+              <p className="text-xs text-slate-400 truncate mt-0.5">{user.email}</p>
+            </>
+          )}
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="mt-3 w-full text-sm font-medium text-slate-300 hover:text-white border border-slate-600 rounded-lg px-3 py-2 hover:bg-slate-800 transition-colors"
+          >
+            Log out
+          </button>
+        </div>
+      </aside>
+
+      <div className="ml-64 flex min-h-screen flex-col">
+        <header className="bg-white border-b border-slate-200 px-6 py-4">
+          <p className="text-sm text-slate-500">Hospital management system</p>
+          <h2 className="text-xl font-semibold text-slate-800">
+            {user ? `Welcome, ${user.name}` : 'Dashboard'}
+          </h2>
+        </header>
+
+        <main className="flex-1 p-6 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default DashboardLayout;

package/templates/hospital-faisal/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,18 @@
+// this component is helping us to protect our routes so that only authenticated users can access the routes
+import { Navigate } from 'react-router-dom';
+
+// this function is firstly checking if the user is authenticated by checking the token in the localStorage
+// if the user is not authenticated, it will redirect the user to the login page
+// if the user is authenticated, it will return the children components
+//and the children component is the component that we want to protect
+function ProtectedRoute({ children }) {
+  const token = localStorage.getItem('token');
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}
+
+export default ProtectedRoute;

package/templates/hospital-faisal/frontend/src/components/RoleRoute.jsx

@@ -0,0 +1,14 @@
+import { Navigate } from 'react-router-dom';
+import { getStoredUser } from '../api';
+
+function RoleRoute({ children, allowedRoles }) {
+  const user = getStoredUser();
+
+  if (!user || !allowedRoles.includes(user.role)) {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return children;
+}
+
+export default RoleRoute;

package/templates/hospital-faisal/frontend/src/index.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/templates/hospital-faisal/frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,305 @@
+import { useEffect, useState } from 'react';
+import { api, getStoredUser } from '../api';
+
+const emptyForm = {
+  patientId: '',
+  doctorId: '',
+  appointmentDate: '',
+  appointmentTime: '',
+  status: 'scheduled',
+};
+
+function Appointments() {
+  const user = getStoredUser();
+  const isReceptionist = user?.role === 'receptionist';
+
+  const [appointments, setAppointments] = useState([]);
+  const [patients, setPatients] = useState([]);
+  const [doctors, setDoctors] = 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 loadData = async () => {
+    try {
+      const requests = [api.get('/appointments')];
+      if (isReceptionist) {
+        requests.push(api.get('/patients'), api.get('/auth/doctors'));
+      }
+      const results = await Promise.all(requests);
+      setAppointments(results[0].data.appointments);
+      if (isReceptionist) {
+        setPatients(results[1].data.patients);
+        setDoctors(results[2].data.doctors);
+      }
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load appointments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [isReceptionist]);
+
+  const handleChange = (e) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleEdit = (appt) => {
+    setEditId(appt.id);
+    setForm({
+      patientId: String(appt.patientId),
+      doctorId: String(appt.doctorId),
+      appointmentDate: appt.appointmentDate,
+      appointmentTime: appt.appointmentTime?.slice(0, 5) || appt.appointmentTime,
+      status: appt.status,
+    });
+    setError('');
+    setMessage('');
+  };
+
+  const handleCancelEdit = () => {
+    setEditId(null);
+    setForm(emptyForm);
+  };
+
+  const handleCancelAppointment = async (id) => {
+    if (!window.confirm('Cancel this appointment?')) return;
+    try {
+      await api.patch(`/appointments/${id}/cancel`);
+      setMessage('Appointment cancelled');
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Cancel failed');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this appointment permanently?')) return;
+    try {
+      await api.delete(`/appointments/${id}`);
+      setMessage('Appointment deleted');
+      if (editId === id) handleCancelEdit();
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Delete failed');
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError('');
+    setMessage('');
+
+    const payload = {
+      patientId: Number(form.patientId),
+      doctorId: Number(form.doctorId),
+      appointmentDate: form.appointmentDate,
+      appointmentTime: form.appointmentTime,
+      status: form.status,
+    };
+
+    try {
+      if (editId) {
+        await api.put(`/appointments/${editId}`, payload);
+        setMessage('Appointment updated');
+      } else {
+        await api.post('/appointments', payload);
+        setMessage('Appointment created');
+      }
+      setForm(emptyForm);
+      setEditId(null);
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Save failed');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const statusClass = (status) => {
+    if (status === 'completed') return 'text-green-700 bg-green-50';
+    if (status === 'cancelled') return 'text-red-700 bg-red-50';
+    return 'text-amber-700 bg-amber-50';
+  };
+
+  return (
+    <div className="max-w-6xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">
+        {isReceptionist ? 'Appointment Management' : 'My Appointments'}
+      </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>
+      )}
+
+      {isReceptionist && (
+        <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 appointment' : 'Book appointment'}
+          </h2>
+          <form onSubmit={handleSubmit} className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Patient</label>
+              <select
+                name="patientId"
+                required
+                value={form.patientId}
+                onChange={handleChange}
+                className="w-full border border-slate-300 rounded px-3 py-2"
+              >
+                <option value="">Select patient</option>
+                {patients.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.fullName}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Doctor</label>
+              <select
+                name="doctorId"
+                required
+                value={form.doctorId}
+                onChange={handleChange}
+                className="w-full border border-slate-300 rounded px-3 py-2"
+              >
+                <option value="">Select doctor</option>
+                {doctors.map((d) => (
+                  <option key={d.id} value={d.id}>
+                    {d.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Date</label>
+              <input
+                name="appointmentDate"
+                type="date"
+                required
+                value={form.appointmentDate}
+                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">Time</label>
+              <input
+                name="appointmentTime"
+                type="time"
+                required
+                value={form.appointmentTime}
+                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">Status</label>
+              <select
+                name="status"
+                value={form.status}
+                onChange={handleChange}
+                className="w-full border border-slate-300 rounded px-3 py-2"
+              >
+                <option value="scheduled">Scheduled</option>
+                <option value="completed">Completed</option>
+                <option value="cancelled">Cancelled</option>
+              </select>
+            </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' : 'Create'}
+              </button>
+              {editId && (
+                <button type="button" onClick={handleCancelEdit} className="border border-slate-300 px-4 py-2 rounded">
+                  Cancel
+                </button>
+              )}
+            </div>
+          </form>
+        </section>
+      )}
+
+      <section>
+        <h2 className="text-lg font-semibold text-slate-800 mb-4">
+          {isReceptionist ? 'All appointments' : 'Assigned to you'}
+        </h2>
+        {loading ? (
+          <p className="text-slate-500">Loading...</p>
+        ) : appointments.length === 0 ? (
+          <p className="text-slate-500">No appointments 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">Patient</th>
+                  <th className="px-4 py-2">Doctor</th>
+                  <th className="px-4 py-2">Date</th>
+                  <th className="px-4 py-2">Time</th>
+                  <th className="px-4 py-2">Status</th>
+                  {isReceptionist && <th className="px-4 py-2">Actions</th>}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-200">
+                {appointments.map((a) => (
+                  <tr key={a.id}>
+                    <td className="px-4 py-2">{a.patientName}</td>
+                    <td className="px-4 py-2">{a.doctorName}</td>
+                    <td className="px-4 py-2">{a.appointmentDate}</td>
+                    <td className="px-4 py-2">{a.appointmentTime?.slice(0, 5)}</td>
+                    <td className="px-4 py-2">
+                      <span className={`px-2 py-0.5 rounded text-xs font-medium capitalize ${statusClass(a.status)}`}>
+                        {a.status}
+                      </span>
+                    </td>
+                    {isReceptionist && (
+                      <td className="px-4 py-2 space-x-2 whitespace-nowrap">
+                        <button type="button" onClick={() => handleEdit(a)} className="text-teal-600 hover:underline">
+                          Edit
+                        </button>
+                        {a.status !== 'cancelled' && (
+                          <button
+                            type="button"
+                            onClick={() => handleCancelAppointment(a.id)}
+                            className="text-amber-600 hover:underline"
+                          >
+                            Cancel
+                          </button>
+                        )}
+                        <button type="button" onClick={() => handleDelete(a.id)} className="text-red-600 hover:underline">
+                          Delete
+                        </button>
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default Appointments;