create-steve-rogers 1.0.0

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

@@ -0,0 +1,196 @@
+import { useEffect, useState } from 'react';
+import api from '../services/api';
+
+const emptyForm = {
+  full_name: '',
+  gender: 'Male',
+  date_of_birth: '',
+  phone_number: '',
+  address: '',
+};
+
+export default function Patients() {
+  const [patients, setPatients] = 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 fetchPatients = async () => {
+    try {
+      const res = await api.get('/patients');
+      setPatients(res.data);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to load patients.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPatients();
+  }, []);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    
+    try {
+      if (editingId) {
+        await api.put(`/patients/${editingId}`, form);
+      } else {
+        await api.post('/patients', form);
+      }
+      setForm(emptyForm);
+      setEditingId(null);
+      setShowForm(false);
+      fetchPatients();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Operation failed.');
+    }
+  };
+
+  const handleEdit = (patient) => {
+    setForm({
+      full_name: patient.full_name,
+      gender: patient.gender,
+      date_of_birth: patient.date_of_birth?.split('T')[0] || patient.date_of_birth,
+      phone_number: patient.phone_number,
+      address: patient.address,
+    });
+    setEditingId(patient.id);
+    setShowForm(true);
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this patient record?')) return;
+    try {
+      await api.delete(`/patients/${id}`);
+      fetchPatients();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Delete failed.');
+    }
+  };
+
+  const cancelForm = () => {
+    setForm(emptyForm);
+    setEditingId(null);
+    setShowForm(false);
+  };
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h1>Patient Management</h1>
+          <p>Register and manage patient records</p>
+        </div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={() => {
+            setShowForm(!showForm);
+            if (showForm) cancelForm();
+          }}
+        >
+          {showForm ? 'Close Form' : '+ Add Patient'}
+        </button>
+      </header>
+
+      {error && <div className="alert alert-error">{error}</div>}
+
+      {showForm && (
+        <div className="card form-card">
+          <h2>{editingId ? 'Update Patient' : 'New Patient'}</h2>
+          <form onSubmit={handleSubmit} className="form-grid">
+            <div className="form-group">
+              <label>Full Name</label>
+              <input name="full_name" value={form.full_name} onChange={handleChange} required />
+            </div>
+            <div className="form-group">
+              <label>Gender</label>
+              <select name="gender" value={form.gender} onChange={handleChange}>
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+            <div className="form-group">
+              <label>Date of Birth</label>
+              <input
+                name="date_of_birth"
+                type="date"
+                value={form.date_of_birth}
+                onChange={handleChange}
+                required
+              />
+            </div>
+            <div className="form-group">
+              <label>Phone Number</label>
+              <input name="phone_number" value={form.phone_number} onChange={handleChange} required />
+            </div>
+            <div className="form-group full-width">
+              <label>Address</label>
+              <textarea name="address" value={form.address} onChange={handleChange} rows={2} required />
+            </div>
+            <div className="form-actions full-width">
+              <button type="submit" className="btn btn-primary">
+                {editingId ? 'Update' : 'Save'} Patient
+              </button>
+              <button type="button" className="btn btn-outline" onClick={cancelForm}>
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="card">
+        {loading ? (
+          <p className="text-muted">Loading patients...</p>
+        ) : patients.length === 0 ? (
+          <p className="text-muted">No patients registered yet.</p>
+        ) : (
+          <div className="table-responsive">
+            <table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Gender</th>
+                  <th>Date of Birth</th>
+                  <th>Phone</th>
+                  <th>Address</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {patients.map((p) => (
+                  <tr key={p.id}>
+                    <td>{p.full_name}</td>
+                    <td>{p.gender}</td>
+                    <td>{p.date_of_birth?.split('T')[0]}</td>
+                    <td>{p.phone_number}</td>
+                    <td>{p.address}</td>
+                    <td className="actions">
+                      <button type="button" className="btn btn-sm btn-outline" onClick={() => handleEdit(p)}>
+                        Edit
+                      </button>
+                      <button type="button" className="btn btn-sm btn-danger" onClick={() => handleDelete(p.id)}>
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function Register() {
+  const [form, setForm] = useState({
+    full_name: '',
+    email: '',
+    password: '',
+    role: 'receptionist',
+  });
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+    setLoading(true);
+    try {
+      await register(form);
+      setSuccess('Registration successful! You can now login.');
+      setTimeout(() => navigate('/login'), 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Registration failed.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <h1>Create Account</h1>
+          <p>Register as Receptionist or Doctor</p>
+        </div>
+        <form onSubmit={handleSubmit}>
+          {error && <div className="alert alert-error">{error}</div>}
+          {success && <div className="alert alert-success">{success}</div>}
+          <div className="form-group">
+            <label htmlFor="full_name">Full Name</label>
+            <input
+              id="full_name"
+              name="full_name"
+              value={form.full_name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              value={form.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              value={form.password}
+              onChange={handleChange}
+              minLength={6}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="role">Role</label>
+            <select id="role" name="role" value={form.role} onChange={handleChange}>
+              <option value="receptionist">Receptionist</option>
+              <option value="doctor">Doctor</option>
+            </select>
+          </div>
+          <button type="submit" className="btn btn-primary btn-block" disabled={loading}>
+            {loading ? 'Registering...' : 'Register'}
+          </button>
+        </form>
+        <p className="auth-footer">
+          Already have an account? <Link to="/login">Login here</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,170 @@
+import { useState } from 'react';
+import api from '../services/api';
+
+export default function Reports() {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [report, setReport] = useState(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async (e) => {
+    e.preventDefault();
+    setError('');
+    setReport(null);
+
+    if (!startDate || !endDate) {
+      setError('Please select both start and end dates.');
+      return;
+    }
+
+    if (startDate > endDate) {
+      setError('Start date must be before or equal to end date.');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await api.get('/reports/summary', {
+        params: { start_date: startDate, end_date: endDate },
+      });
+      setReport(res.data);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to generate report.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div>
+          <h1>Report Generation</h1>
+          <p>Filter appointments and patients attended by date range</p>
+        </div>
+      </header>
+
+      <div className="card form-card">
+        <form onSubmit={handleGenerate} className="report-filter-form">
+          <div className="form-group">
+            <label htmlFor="start_date">Start Date</label>
+            <input
+              id="start_date"
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="end_date">End Date</label>
+            <input
+              id="end_date"
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" disabled={loading}>
+            {loading ? 'Generating...' : 'Generate Report'}
+          </button>
+        </form>
+      </div>
+
+      {error && <div className="alert alert-error">{error}</div>}
+
+      {report && (
+        <>
+          <div className="stats-grid">
+            <div className="stat-card highlight">
+              <span className="stat-label">Total Appointments</span>
+              <span className="stat-value">{report.total_appointments}</span>
+            </div>
+            <div className="stat-card">
+              <span className="stat-label">Completed</span>
+              <span className="stat-value">{report.total_completed}</span>
+            </div>
+            <div className="stat-card">
+              <span className="stat-label">Cancelled</span>
+              <span className="stat-value">{report.total_cancelled}</span>
+            </div>
+            <div className="stat-card">
+              <span className="stat-label">Patients Attended</span>
+              <span className="stat-value">{report.patients_attended?.length || 0}</span>
+            </div>
+          </div>
+
+          <div className="card">
+            <h2>
+              Patients Attended ({report.start_date} to {report.end_date})
+            </h2>
+            {report.patients_attended?.length === 0 ? (
+              <p className="text-muted">No patients attended in this period.</p>
+            ) : (
+              <div className="table-responsive">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Gender</th>
+                      <th>Phone</th>
+                      <th>Report Date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {report.patients_attended.map((p) => (
+                      <tr key={`${p.id}-${p.report_date}`}>
+                        <td>{p.full_name}</td>
+                        <td>{p.gender}</td>
+                        <td>{p.phone_number}</td>
+                        <td>{p.report_date?.split('T')[0]}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          <div className="card">
+            <h2>Appointments in Period</h2>
+            {report.appointments?.length === 0 ? (
+              <p className="text-muted">No appointments in this period.</p>
+            ) : (
+              <div className="table-responsive">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Patient</th>
+                      <th>Doctor</th>
+                      <th>Date</th>
+                      <th>Time</th>
+                      <th>Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {report.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={`status-badge status-${a.status}`}>
+                            {a.status}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/apps/HMSR/frontend/src/services/api.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.REACT_APP_API_URL || '/api',
+});
+
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default api;

package/apps/config.js

@@ -0,0 +1,8 @@
+export const apps = [
+  {
+    title: "HMSR - Hospital Management System Report",
+    value: "hmsr",
+    description: "Hospital management system by Steve Rogers",
+    folder: "HMSR",
+  },
+];

package/exclude.txt

@@ -0,0 +1 @@
+node_modules 

package/index.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+import { cpSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { cwd } from "process";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+import prompts from "prompts";
+import kleur from "kleur";
+import { apps } from "./apps/config.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function main() {
+  console.log(kleur.bold().cyan("\n🛡  Steve Rogers Installer\n"));
+
+  const choices = apps.map((app) => ({
+    title: `${app.title}  ${kleur.gray(app.description)}`,
+    value: app.value,
+  }));
+
+  const { selected } = await prompts({
+    type: "multiselect",
+    name: "selected",
+    message: "Which apps do you want to install?",
+    choices,
+    hint: "- Space to select, Return to submit",
+    min: 1,
+  });
+
+  if (!selected || selected.length === 0) {
+    console.log(kleur.yellow("\nNo apps selected. Exiting.\n"));
+    process.exit(0);
+  }
+
+  for (const value of selected) {
+    const app = apps.find((a) => a.value === value);
+    const src = join(__dirname, "apps", app.folder);
+    const dest = join(cwd(), app.folder);
+
+    console.log(kleur.cyan(`\n→ Installing ${app.title}...`));
+
+    try {
+      cpSync(src, dest, { recursive: true });
+      console.log(kleur.gray("  Running npm install..."));
+      execSync("npm install", { cwd: dest, stdio: "inherit" });
+      console.log(kleur.green(`  ✓ ${app.title} ready at ./${app.folder}\n`));
+    } catch (err) {
+      console.log(kleur.red(`  ✗ Failed: ${err.message}\n`));
+    }
+  }
+
+  console.log(kleur.bold().green("🎉 Done!\n"));
+}
+
+main();

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "create-steve-rogers",
+  "version": "1.0.0",
+  "description": "Steve Rogers personal app installer",
+  "bin": {
+    "create-steve-rogers": "index.js"
+  },
+  "type": "module",
+  "dependencies": {
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2",
+    "unzipper": "^0.12.3"
+  }
+}