push

src/App.jsx

@@ -0,0 +1,108 @@
+import React, { Component } from "react";
+import { Routes, Route, NavLink, HashRouter, useLocation } from "react-router-dom";
+import { SessionProvider, LoginButton } from "@inrupt/solid-ui-react";
+
+import Home from "./Home";
+import Fitness from "./Fitness";
+import FitnessRoutine from "./FitnessRoutine";
+import FitnessTracker from "./FitnessTracker";
+import Diet from "./Diet";
+
+// Finance module - John Mware
+import Finance from "./Finance";
+import Budgeting from "./Budgeting";
+import Goals from "./Goals";
+import DebtRepayment from "./DebtRepayment";
+
+// Mental Health Chatbot module
+import Mental from "./MentalHealthChatbot";
+
+// Habit Tracker module 
+import HabitTracker from "./HabitTracker";
+
+// Medical Records
+import MedicalRecords from "./MedicalRecords";
+import MedicalRecordsInitial from "./front/MedicalRecords/MedicalRecordsInitial";
+import AppointmentHistoryDashboard from "./front/MedicalRecords/Dashboard/AppointmentHistoryDashboard";
+import InsuranceDashboard from "./front/MedicalRecords/Dashboard/InsuranceDashboard";
+import AllergiesDashboard from "./front/MedicalRecords/Dashboard/AllergiesDashboard";
+import VitalsDashboard from "./front/MedicalRecords/Dashboard/VitalsDashboard";
+import AppointmentHistoryPage from "./front/MedicalRecords/Dashboard/AppointmentHistoryPage";
+import MyMedicalRecordsDashboard from "./MyMedicalRecordsDashboard";
+
+import "./styles/styles.css";
+
+const redirectURL = new URL("/", window.location.href).toString();
+
+const Header = () => {
+  const location = useLocation();
+
+  if (location.pathname === "/myRecords") {
+    return null; // Do not render header for MyMedicalRecordsDashboard
+  }
+
+  return (
+    <header className="mainHeader">
+      <div>
+        <h1>My Wellness Pod</h1>
+      </div>
+      <div className="right">
+        <LoginButton
+          oidcIssuer="https://login.inrupt.com"
+          redirectUrl={redirectURL}
+          clientName="Wellness Pod App"
+        />
+      </div>
+    </header>
+  );
+};
+
+class App extends Component {
+  render() {
+    return (
+      <HashRouter>
+        <SessionProvider sessionId="some-id">
+          <div>
+            <Header />
+            <nav>
+              <ul className="navigation">
+                <li><NavLink to="/">Home</NavLink></li>
+                <li><NavLink to="/fitness">Fitness</NavLink></li>
+                <li><NavLink to="/diet">Diet</NavLink></li>
+                <li><NavLink to="/finance">Finance</NavLink></li>
+                <li><NavLink to="/mental">Mental Health Chatbot</NavLink></li>
+                <li><NavLink to="/HabitTracker">Habit Tracker</NavLink></li>
+                <li><NavLink to="/medicalRecords">Medical Records</NavLink></li>
+              </ul>
+            </nav>
+            <div className="content">
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/fitness" element={<Fitness />} />
+                <Route path="/fitness-routine" element={<FitnessRoutine />} />
+                <Route path="/fitness-tracker" element={<FitnessTracker />} />
+                <Route path="/diet" element={<Diet />} />
+                <Route path="/medicalRecords" element={<MedicalRecords />} />
+                <Route path="/finance" element={<Finance />} />
+                <Route path="/budgeting" element={<Budgeting />} />
+                <Route path="/debt-repayment" element={<DebtRepayment />} />
+                <Route path="/goals" element={<Goals />} />
+                <Route path="/mental" element={<Mental />} />
+                <Route path="/HabitTracker" element={<HabitTracker />} />
+                <Route path="/medicalRecords/inital-dashboard" element={<MedicalRecordsInitial />} />
+                <Route path="/medicalRecords/appointment-history-dashboard" element={<AppointmentHistoryDashboard />} />
+                <Route path="/medicalRecords/appointment-history-page" element={<AppointmentHistoryPage />} />
+                <Route path="/medicalRecords/insurance-dashboard" element={<InsuranceDashboard />} />
+                <Route path="/medicalRecords/allergies-dashboard" element={<AllergiesDashboard />} />
+                <Route path="/medicalRecords/vitals-dashboard" element={<VitalsDashboard />} />
+                <Route path="/myRecords" element={<MyMedicalRecordsDashboard />} />
+              </Routes>
+            </div>
+          </div>
+        </SessionProvider>
+      </HashRouter>
+    );
+  }
+}
+
+export default App;

src/View/App.jsx

@@ -27,6 +27,10 @@ import AllergiesDashboard from "./MedicalRecords/Dashboard/AllergiesDashboard";
 import VitalsDashboard from "./MedicalRecords/Dashboard/VitalsDashboard";
 import AppointmentHistoryPage from "./MedicalRecords/Dashboard/AppointmentHistoryPage";
 import MyMedicalRecordsDashboard from "./MyMedicalRecordsDashboard";
+import VaccinesDetail from "./MedicalRecords/Dashboard/VaccinesDetail";
+import MedicinesDetail from './MedicalRecords/Dashboard/MedicinesDetail';
+import LabReports from './MedicalRecords/Dashboard/LabReports';
+
 
 class App extends Component {
   constructor(props) {
@@ -150,6 +154,10 @@ class App extends Component {
                 <Route path="/medicalRecords/allergies-dashboard" element={<AllergiesDashboard />} />
                 <Route path="/medicalRecords/vitals-dashboard" element={<VitalsDashboard />} />
                 <Route path="/myRecords" element={<MyMedicalRecordsDashboard />} />
+                <Route path="/medicalRecords/vaccines-detail" element={<VaccinesDetail />} />
+                <Route path="/medicalRecords/medicines" element={<MedicinesDetail/>} />
+                <Route path="/medicalRecords/lab-reports" element={<LabReports/>} />
+
               </Routes>
             </div>
           </div>

src/View/MedicalRecords/CardDescriptions/AllergiesDetail.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+1
 import Description from "../GenericComponents/Description";
 
 class  AllergiesDetail extends Component {

src/View/MedicalRecords/Dashboard/AllergiesDashboard.tsx

@@ -1,28 +1,48 @@
-import React, { Component } from 'react';
+// AllergiesDashboard.js
+import React from 'react';
+import { NavLink } from 'react-router-dom';
 import GenericForm from '../GenericComponents/GenericForm';
 import '../GenericComponents/StyleSheetForMR.css';
-import { NavLink } from 'react-router-dom';
+import '../../../styles/styles.css';
 
-class AllergiesDashboard extends Component {
-  render() {
-    const fields = [
-      { name: 'allergy_type', label: 'Allergy Type', type: 'text' },
-      { name: 'severity', label: 'Severity', type: 'select', options: [{ value: 'mild', label: 'Mild' }, { value: 'moderate', label: 'Moderate' }, { value: 'severe', label: 'Severe' }] },
-      // Add more fields as needed
-    ];
+const AllergiesDashboard = () => {
+  // Sample allergies data
+  const allergiesData = [
+    { id: 1, allergy_type: 'Peanuts', severity: 'Severe' },
+    { id: 2, allergy_type: 'Pollen', severity: 'Mild' },
+    // Add more allergies records if needed
+  ];
 
-    return (
-      <div>
-        <h1 className="generic-dashboard-heading">Allergies Dashboard</h1>
-        <div className="allergies-button-div">
-          <NavLink to="/medical-records/allergies-dashboard">
+  // Fields for the GenericForm
+  const fields = [
+    { name: 'allergy_type', label: 'Allergy Type', type: 'text' },
+    { name: 'severity', label: 'Severity', type: 'select', options: [{ value: 'mild', label: 'Mild' }, { value: 'moderate', label: 'Moderate' }, { value: 'severe', label: 'Severe' }] }
+    // Add more fields as needed
+  ];
 
-          </NavLink>
+  return (
+    <div className="centered-container">
+      <div className="allergies-dashboard-container">
+        <h2>Allergies Dashboard</h2>
+        <p>This is where you can view and manage your allergies records.</p>
+        <div className="allergies-list">
+          <h3>Allergies Records:</h3>
+          <ul>
+            {allergiesData.map(allergy => (
+              <li key={allergy.id}>
+                <strong>Allergy Type:</strong> {allergy.allergy_type}, <strong>Severity:</strong> {allergy.severity}
+              </li>
+            ))}
+          </ul>
         </div>
+        <NavLink to="/add-allergy">
+          <button>Add New Allergy Record</button>
+        </NavLink>
+        {/* GenericForm for adding new allergies records */}
         <GenericForm fields={fields} />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default AllergiesDashboard;
+export default AllergiesDashboard;

src/View/MedicalRecords/Dashboard/InsuranceDashboard.tsx

@@ -1,30 +1,49 @@
-import React, { Component } from 'react';
+// InsuranceDashboard.js
+import React from 'react';
+import { NavLink } from 'react-router-dom';
 import GenericForm from '../GenericComponents/GenericForm';
 import '../GenericComponents/StyleSheetForMR.css';
-import { NavLink } from 'react-router-dom';
-
-class InsuranceDashboard extends Component {
-  render() {
-    const fields = [
-      { name: 'insurance_provider', label: 'Insurance Provider', type: 'text' },
-      { name: 'policy_number', label: 'Policy Number', type: 'text' },
-      { name: 'expiry_date', label: 'Expiry Date', type: 'date' },
-      // Add more fields as needed
-    ];
+import '../../../styles/styles.css';
 
-    return (
-      <div>
-        <h1 className="generic-dashboard-heading">Insurance Dashboard</h1>
-        <div className="insurance-button-div">
-        <NavLink to="/medical-records/insurance-dashboard">
+const InsuranceDashboard = () => {
+  // Sample insurance data
+  const insuranceData = [
+    { id: 1, insurance_provider: 'Provider A', policy_number: '123456789', expiry_date: '2025-12-31' },
+    { id: 2, insurance_provider: 'Provider B', policy_number: '987654321', expiry_date: '2024-09-30' },
+    // Add more insurance records if needed
+  ];
 
-</NavLink>
+  // Fields for the GenericForm
+  const fields = [
+    { name: 'insurance_provider', label: 'Insurance Provider', type: 'text' },
+    { name: 'policy_number', label: 'Policy Number', type: 'text' },
+    { name: 'expiry_date', label: 'Expiry Date', type: 'date' }
+    // Add more fields as needed
+  ];
 
+  return (
+    <div className="centered-container">
+      <div className="insurance-dashboard-container">
+        <h2>Insurance Dashboard</h2>
+        <p>This is where you can view and manage your insurance records.</p>
+        <div className="insurance-list">
+          <h3>Insurance Records:</h3>
+          <ul>
+            {insuranceData.map(insurance => (
+              <li key={insurance.id}>
+                <strong>Provider:</strong> {insurance.insurance_provider}, <strong>Policy Number:</strong> {insurance.policy_number}, <strong>Expiry Date:</strong> {insurance.expiry_date}
+              </li>
+            ))}
+          </ul>
         </div>
+        <NavLink to="/add-insurance">
+          <button>Add New Insurance Record</button>
+        </NavLink>
+        {/* GenericForm for adding new insurance records */}
         <GenericForm fields={fields} />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-export default InsuranceDashboard;
+export default InsuranceDashboard;

src/View/MedicalRecords/Dashboard/LabReports.tsx

@@ -0,0 +1,50 @@
+// LabReportsDetail.js
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import GenericForm from '../GenericComponents/GenericForm';
+import '../GenericComponents/StyleSheetForMR.css';
+import '../../../styles/styles.css';
+
+const LabReports = () => {
+  // Sample lab report data
+  const labReports = [
+    { id: 1, name: 'Blood Test', date: '2023-01-15', result: 'Normal' },
+    { id: 2, name: 'Urine Test', date: '2022-10-05', result: 'Abnormal' },
+    { id: 3, name: 'X-ray', date: '2021-12-20', result: 'Normal' },
+    // Add more lab report records if needed
+  ];
+
+  // Fields for the GenericForm
+  const fields = [
+    { name: 'report_name', label: 'Report Name', type: 'text' },
+    { name: 'report_date', label: 'Date', type: 'date' },
+    { name: 'report_result', label: 'Result', type: 'text' }
+    // Add more fields as needed
+  ];
+
+  return (
+    <div className="centered-container">
+      <div className="lab-reports-container">
+        <h2>Lab Reports</h2>
+        <p>This is where you can view and manage your lab report records.</p>
+        <div className="lab-report-list">
+          <h3>Lab Report Records:</h3>
+          <ul>
+            {labReports.map(report => (
+              <li key={report.id}>
+                <strong>{report.name}</strong> - Date: {report.date}, Result: {report.result}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <NavLink to="/add-lab-report">
+          <button>Add New Lab Report</button>
+        </NavLink>
+        {/* GenericForm for adding new lab reports */}
+        <GenericForm fields={fields} />
+      </div>
+    </div>
+  );
+};
+
+export default LabReports;

src/View/MedicalRecords/Dashboard/MedicinesDetail.tsx

@@ -0,0 +1,50 @@
+// MedicinesDetail.js
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import GenericForm from '../GenericComponents/GenericForm';
+import '../GenericComponents/StyleSheetForMR.css';
+import '../../../styles/styles.css';
+
+const MedicinesDetail = () => {
+  // Sample medicine data
+  const medicines = [
+    { id: 1, name: 'Paracetamol', dosage: '500mg', frequency: 'Twice daily' },
+    { id: 2, name: 'Amoxicillin', dosage: '250mg', frequency: 'Once daily' },
+    { id: 3, name: 'Lisinopril', dosage: '10mg', frequency: 'Once daily' },
+    // Add more medicine records if needed
+  ];
+
+  // Fields for the GenericForm
+  const fields = [
+    { name: 'medicine_name', label: 'Medicine Name', type: 'text' },
+    { name: 'medicine_dosage', label: 'Dosage', type: 'text' },
+    { name: 'medicine_frequency', label: 'Frequency', type: 'text' }
+    // Add more fields as needed
+  ];
+
+  return (
+    <div className="centered-container">
+      <div className="medicines-container">
+        <h2>Medicines</h2>
+        <p>This is where you can view and manage your medicine records.</p>
+        <div className="medicine-list">
+          <h3>Medicine Records:</h3>
+          <ul>
+            {medicines.map(medicine => (
+              <li key={medicine.id}>
+                <strong>{medicine.name}</strong> - Dosage: {medicine.dosage}, Frequency: {medicine.frequency}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <NavLink to="/add-medicine">
+          <button>Add New Medicine</button>
+        </NavLink>
+        {/* GenericForm for adding new medicines */}
+        <GenericForm fields={fields} />
+      </div>
+    </div>
+  );
+};
+
+export default MedicinesDetail;