create-jinmankn-app 1.0.0

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

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+
+function Profile() {
+  const [user, setUser] = useState(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const handleRetrieve = async () => {
+    try {
+      const response = await api.get('/auth/me');
+      setUser(response.data.user);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+    } catch (err) {
+      const storedUser = localStorage.getItem('user');
+      if (storedUser) {
+        setUser(JSON.parse(storedUser));
+      } else {
+        setError(err.response?.data?.message || 'Failed to load profile');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRetrieve();
+  }, []);
+
+  if (loading) {
+    return <p className="text-slate-500">Loading profile...</p>;
+  }
+
+  if (!user) {
+    return (
+      <p className="text-slate-600">
+        {error || 'No profile data found. Try signing in again.'}
+      </p>
+    );
+  }
+
+  return (
+    <div className="max-w-lg">
+      <h1 className="text-2xl font-bold text-slate-800 mb-6">Profile</h1>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <div className="bg-white rounded-lg shadow-sm border border-slate-200 divide-y divide-slate-200">
+        <div className="px-6 py-4 flex justify-between gap-4">
+          <span className="text-sm font-medium text-slate-500">Name</span>
+          <span className="text-sm text-slate-800">{user.name}</span>
+        </div>
+        <div className="px-6 py-4 flex justify-between gap-4">
+          <span className="text-sm font-medium text-slate-500">Email</span>
+          <span className="text-sm text-slate-800">{user.email}</span>
+        </div>
+        <div className="px-6 py-4 flex justify-between gap-4">
+          <span className="text-sm font-medium text-slate-500">Role</span>
+          <span className="text-sm text-slate-800 capitalize">{user.role}</span>
+        </div>
+        {user.id && (
+          <div className="px-6 py-4 flex justify-between gap-4">
+            <span className="text-sm font-medium text-slate-500">User ID</span>
+            <span className="text-sm text-slate-800 font-mono truncate max-w-[200px]">
+              {user.id}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;

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

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { api } from '../api';
+
+function Register() {
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState('receptionist');
+  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/register', {
+        name,
+        email,
+        password,
+        role,
+      });
+      localStorage.setItem('token', response.data.token);
+      localStorage.setItem('user', JSON.stringify(response.data.user));
+      setMessage('Account created successfully');
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Registration 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 registration</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="name" className="block text-sm font-medium text-slate-700 mb-1">
+              Full name
+            </label>
+            <input
+              id="name"
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(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="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="role" className="block text-sm font-medium text-slate-700 mb-1">
+              Role
+            </label>
+            <select
+              id="role"
+              value={role}
+              onChange={(e) => setRole(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"
+            >
+              <option value="receptionist">Receptionist</option>
+              <option value="doctor">Doctor</option>
+            </select>
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              required
+              minLength={6}
+              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 ? 'Creating account...' : 'Register'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-sm text-slate-600 text-center">
+          Already have an account?{' '}
+          <Link to="/login" className="text-teal-600 hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Register;

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

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { api } from '../api';
+
+function Report() {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [data, setData] = useState(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    setData(null);
+
+    try {
+      const response = await api.get('/reports', {
+        params: { startDate, endDate },
+      });
+      setData(response.data);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to generate report');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl">
+      <h1 className="text-2xl font-bold text-slate-800 mb-2">Hospital Reports</h1>
+      <p className="text-slate-600 mb-6">
+        Filter appointments and patients attended between selected dates.
+      </p>
+
+      <form onSubmit={handleGenerate} className="bg-white rounded-lg shadow-md p-6 mb-8 flex flex-wrap gap-4 items-end">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Start date</label>
+          <input
+            type="date"
+            required
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            className="border border-slate-300 rounded px-3 py-2"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">End date</label>
+          <input
+            type="date"
+            required
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            className="border border-slate-300 rounded px-3 py-2"
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-teal-600 text-white font-medium px-5 py-2 rounded hover:bg-teal-700 disabled:opacity-50"
+        >
+          {loading ? 'Generating...' : 'Generate report'}
+        </button>
+      </form>
+
+      {error && (
+        <p className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      {data && (
+        <div className="space-y-8">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="bg-white rounded-lg border border-slate-200 p-5">
+              <p className="text-sm text-slate-500">Total appointments</p>
+              <p className="text-3xl font-bold text-slate-800 mt-1">{data.summary.totalAppointments}</p>
+            </div>
+            <div className="bg-white rounded-lg border border-slate-200 p-5">
+              <p className="text-sm text-slate-500">Completed</p>
+              <p className="text-3xl font-bold text-green-700 mt-1">{data.summary.totalCompleted}</p>
+            </div>
+            <div className="bg-white rounded-lg border border-slate-200 p-5">
+              <p className="text-sm text-slate-500">Cancelled</p>
+              <p className="text-3xl font-bold text-red-700 mt-1">{data.summary.totalCancelled}</p>
+            </div>
+            <div className="bg-white rounded-lg border border-slate-200 p-5">
+              <p className="text-sm text-slate-500">Patients attended</p>
+              <p className="text-3xl font-bold text-teal-700 mt-1">{data.summary.patientsAttended}</p>
+            </div>
+          </div>
+
+          <section>
+            <h2 className="text-lg font-semibold text-slate-800 mb-3">
+              Appointments ({data.startDate} to {data.endDate})
+            </h2>
+            {data.appointments.length === 0 ? (
+              <p className="text-slate-500 text-sm">No appointments in this period.</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>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200">
+                    {data.appointments.map((a) => (
+                      <tr key={a.id}>
+                        <td className="px-4 py-2">{a.patient_name}</td>
+                        <td className="px-4 py-2">{a.doctor_name}</td>
+                        <td className="px-4 py-2">{a.appointment_date}</td>
+                        <td className="px-4 py-2">{String(a.appointment_time).slice(0, 5)}</td>
+                        <td className="px-4 py-2 capitalize">{a.status}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold text-slate-800 mb-3">Patients attended</h2>
+            {data.patientsAttended.length === 0 ? (
+              <p className="text-slate-500 text-sm">No completed visits in this period.</p>
+            ) : (
+              <ul className="bg-white rounded-lg border border-slate-200 divide-y divide-slate-200">
+                {data.patientsAttended.map((p) => (
+                  <li key={p.id} className="px-4 py-3 text-sm flex justify-between">
+                    <span className="font-medium text-slate-800">{p.patient_name}</span>
+                    <span className="text-slate-500">{p.phone}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+
+          <section>
+            <h2 className="text-lg font-semibold text-slate-800 mb-3">Medical reports</h2>
+            {data.medicalReports.length === 0 ? (
+              <p className="text-slate-500 text-sm">No medical reports in this period.</p>
+            ) : (
+              <div className="space-y-3">
+                {data.medicalReports.map((r) => (
+                  <article key={r.id} className="bg-white rounded-lg border border-slate-200 p-4 text-sm">
+                    <p className="font-medium text-slate-800">
+                      {r.patient_name} — Dr. {r.doctor_name} ({r.report_date})
+                    </p>
+                    <p className="mt-1 text-slate-600">Diagnosis: {r.diagnosis}</p>
+                    <p className="mt-1 text-slate-600">Prescription: {r.prescription}</p>
+                  </article>
+                ))}
+              </div>
+            )}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Report;

package/templates/hospital-faisal/frontend/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+  },
+});

package/templates/hospital-faisal/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "hospital-faisal",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}