diff --git a/src/App.js b/src/App.js index 7c7591a..92e870f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,12 @@ import "./App.css"; -import {BrowserRouter, Routes, Route} from "react-router-dom"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; import { DarkModeProvider } from "./DarkModeContext.js"; import LoginScreen from "./screens/LoginScreen"; import ClaimDashboardScreen from "./screens/ClaimDashboardScreen.js"; import NotFoundScreen from "./screens/NotFoundScreen.js"; import NewClaimScreen from "./screens/NewClaimScreen"; import ClaimFilesScreen from "./screens/ClaimFilesScreen"; +import NewFormScreen from "./screens/NewFormScreen.js"; function App() { return ( @@ -17,6 +18,7 @@ function App() { } /> } /> } /> + } /> {/* To be updated */} {/* } /> */} diff --git a/src/components/ClaimFilesButton.js b/src/components/ClaimFilesButton.js index e072e2a..856cc62 100644 --- a/src/components/ClaimFilesButton.js +++ b/src/components/ClaimFilesButton.js @@ -1,25 +1,21 @@ import React, { useContext } from "react"; import { Link } from "react-router-dom"; -import { DarkModeContext } from '../DarkModeContext'; // Import the context +import { DarkModeContext } from "../DarkModeContext"; // Import the context export default function ClaimFilesButton() { - const { darkMode } = useContext(DarkModeContext); // Use the context + const { darkMode } = useContext(DarkModeContext); // Use the context - const buttonClass = darkMode - ? 'bg-green-500 p-4 text-white items-center rounded-xl font-semibold mx-4 mt-2' - : 'bg-green-300 p-4 items-center rounded-xl font-semibold mx-4 mt-2'; - - return ( -
- - - -
- ); -} \ No newline at end of file + const buttonClass = darkMode + ? "bg-green-500 p-4 text-white items-center rounded-xl font-semibold mx-4 mt-2" + : "bg-green-300 p-4 items-center rounded-xl font-semibold mx-4 mt-2"; + + return ( +
+ + + +
+ ); +} diff --git a/src/components/FormQuestion.js b/src/components/FormQuestion.js new file mode 100644 index 0000000..48acc5b --- /dev/null +++ b/src/components/FormQuestion.js @@ -0,0 +1,25 @@ +/* +Class intended to encapsulate a question and text input field for a form. +*/ + +import { TextField } from "@mui/material"; + +const FormQuestion = ({ text, placeholderText, setState }) => { + let stateId = String(placeholderText).toLowerCase().replace(" ", ""); + + return ( +
+

{text}

+ { + setState(event.target.value); + }} + /> +
+ ); +}; + +export default FormQuestion; diff --git a/src/components/forms/CertificationOfDeathForm.js b/src/components/forms/CertificationOfDeathForm.js new file mode 100644 index 0000000..88fb3e3 --- /dev/null +++ b/src/components/forms/CertificationOfDeathForm.js @@ -0,0 +1,232 @@ +import { + Button, + FormControl, + InputLabel, + Select, + MenuItem, +} from "@mui/material"; +import { useState } from "react"; +import FormQuestion from "../FormQuestion"; + +const CertificationOfDeathForm = () => { + const [claimNumber, setClaimNumber] = useState(""); + + // Main Section + const [deceasedName, setDeceasedName] = useState(""); + const [dod, setDod] = useState(""); + const [timeOfDeath, setTimeOfDeath] = useState(""); + const [immediateCauseOfDeath, setImmediateCauseOfDeath] = useState(""); + const [consequenceOfDeath, setConsequenceOfDeath] = useState(""); + const [syptomsFirstAppeared, setSyptomsFirstAppeared] = useState(""); + const [causeOfDeath, setCauseOfDeath] = useState(""); // natural, accident, suicide, homicide, undetermined + const [placeOfDeath, setPlaceOfDeath] = useState(""); + const [inquest, setInquest] = useState(""); + const [autopsyPerformed, setAutopsyPerformed] = useState(""); + + // Signature of Person Providing Certification + const [signeeName, setSigneeName] = useState(""); + const [signeeTitle, setSigneeTitle] = useState(""); + const [signeeAddress, setSigneeAddress] = useState(""); + const [signeePhoneNumber, setSigneePhoneNumber] = useState(""); + const [signeeSignature, setSigneeSignature] = useState(""); + const [signatureDate, setSignatureDate] = useState(""); + + // TODO: Connect to backend and rest of app in next pr + const handleSubmit = () => { + const formData = { + claimNumber: claimNumber, + deceasedName: deceasedName, + dod: dod, + timeOfDeath: timeOfDeath, + immediateCauseOfDeath: immediateCauseOfDeath, + consequenceOfDeath: consequenceOfDeath, + syptomsFirstAppeared: syptomsFirstAppeared, + causeOfDeath: causeOfDeath, + placeOfDeath: placeOfDeath, + inquest: inquest, + autopsyPerformed: autopsyPerformed, + signeeName: signeeName, + signeeTitle: signeeTitle, + signeeAddress: signeeAddress, + signeePhoneNumber: signeePhoneNumber, + signeeSignature: signeeSignature, + signatureDate: signatureDate, + }; + + // For now to show that the change works + console.log(formData); + }; + + return ( +
+

Certification of Death - Physician Statement

+ + {/* Main Section */} +
+

+ To be completed by attending physician, coroner or family doctor + certifying the death of the insured.{" "} +

+ + + +

+ I, the undersigned, hereby certify the Deceased was officially + pronounced dead: +

+ + + + + +

Time of death:

+ + AM/PM + + + + + + + + + +

Cause of death

+ + Cause of death + + + + + +

Was an inquest held?

+ + Yes/No + + + +

Was an autopsy performed?

+ + Yes/No + + +
+ + {/* Signature of Person Providing Certification */} +
+

Signature of Person Providing Certification

+ + + + + + + + + + {/* For now, the signature will be typed. In future versions, we can implement digital wet signature */} + + + +
+ + {/* Submit Button */} + +
+ ); +}; + +export default CertificationOfDeathForm; diff --git a/src/components/forms/LifeClaimInformationRequestForm.js b/src/components/forms/LifeClaimInformationRequestForm.js new file mode 100644 index 0000000..449970d --- /dev/null +++ b/src/components/forms/LifeClaimInformationRequestForm.js @@ -0,0 +1,147 @@ +/* +This form is meant to be filled out by the claimant and sent to the insurance company. +Will be completed after the MVP is completed. +*/ + +import { useState } from "react"; + +const LifeClaimInformationRequestForm = () => { + const [claimNumber, setClaimNumber] = useState(""); + + // Claim Checklist + const [deathCertificateCompleted, setDeathCertificateCompleted] = + useState(false); + const [deathCertificateAttached, setDeathCertificateAttached] = + useState(false); + const [ + statementOfLendingInstitutionCompleted, + setStatementOfLendingInstitutionCompleted, + ] = useState(false); + + // Deceased Information + const [deceasedName, setDeceasedName] = useState(""); + const [dob, setDob] = useState(""); + const [dod, setDod] = useState(""); + + // Medical Information + const [causeOfDeath, setCauseOfDeath] = useState(""); + const [hospitalized, setHospitalized] = useState(false); + const [hospitalizationDate, setHospitalizationDate] = useState(""); + const [hospitalName, setHospitalName] = useState(""); + const [hospitalAddress, setHospitalAddress] = useState(""); + const [physicianName, setPhysicianName] = useState(""); // attending doctor at death + const [physicianAddress, setPhysicianAddress] = useState(""); + const [physicianPhone, setPhysicianPhone] = useState(""); + const [familyDoctorName, setFamilyDoctorName] = useState(""); + const [familyDoctorAddress, setFamilyDoctorAddress] = useState(""); + const [familyDoctorPhone, setFamilyDoctorPhone] = useState(""); + const [otherPhysicians, setOtherPhysicians] = useState([]); // ['physician name', 'address'] + + // Employment Information + const [occupation, setOccupation] = useState(""); + const [dateLastWorked, setDateLastWorked] = useState(""); + const [employer, setEmployer] = useState(""); + const [employerAddress, setEmployerAddress] = useState(""); + const [employerPhone, setEmployerPhone] = useState(""); + + // Next of Kin Information + const [kinName, setKinName] = useState(""); + const [kinAddress, setKinAddress] = useState(""); + const [kinPhone, setKinPhone] = useState(""); + const [kinRelationship, setKinRelationship] = useState(""); + + // Authorization + const [signature, setSignature] = useState(""); + const [date, setDate] = useState(""); + + // Submit Form + const handleSubmit = () => { + // Aggregate all the data into one object + const formData = { + claimNumber: claimNumber, + deathCertificateCompleted: deathCertificateCompleted, + deathCertificateAttached: deathCertificateAttached, + statementOfLendingInstitutionCompleted: + statementOfLendingInstitutionCompleted, + deceasedName: deceasedName, + dob: dob, + dod: dod, + causeOfDeath: causeOfDeath, + hospitalized: hospitalized, + hospitalizationDate: hospitalizationDate, + hospitalName: hospitalName, + hospitalAddress: hospitalAddress, + physicianName: physicianName, + physicianAddress: physicianAddress, + physicianPhone: physicianPhone, + familyDoctorName: familyDoctorName, + familyDoctorAddress: familyDoctorAddress, + familyDoctorPhone: familyDoctorPhone, + otherPhysicians: otherPhysicians, + occupation: occupation, + dateLastWorked: dateLastWorked, + employer: employer, + employerAddress: employerAddress, + employerPhone: employerPhone, + kinName: kinName, + kinAddress: kinAddress, + kinPhone: kinPhone, + kinRelationship: kinRelationship, + signature: signature, + signatureDate: date, + }; + + // Send the data to the server + + // Refetch the data from the server + + return; + }; + + return ( +
+ {/* Header */} +
+

Life Claim Information Request

+
+ + {/* Checklist */} +

Claim Checklist

+
+ + {/* Deceased Information */} +

Deceased Information

+
+ + {/* Medical Information */} +

Medical Information

+
+ + {/* Employment Information */} +

Employment Information

+
+ + {/* Next of Kin Information */} +

Next of Kin Information

+
+ + {/* Authorization */} +

Authorization

+
+ + {/* Checklist for Claim */} +

Claim Checklist

+
+ + {/* Next of Kin Information for */} +

Next of Kin Information

+
+ + {/* Authorization */} +

Authorization

+
+
+ ); +}; + +export default LifeClaimInformationRequestForm; diff --git a/src/components/forms/LifeClaimInitiationLenderStatementForm.js b/src/components/forms/LifeClaimInitiationLenderStatementForm.js new file mode 100644 index 0000000..7f4e588 --- /dev/null +++ b/src/components/forms/LifeClaimInitiationLenderStatementForm.js @@ -0,0 +1,110 @@ +/* +This form is used to initiate a life claim. It is filled out by the lender and sent to the insurance company. +Will be completed after the MVP is completed. +*/ + +import { useState } from "react"; + +const LifeClaimInitiationLenderStatementForm = () => { + const [claimNumber, setClaimNumber] = useState(""); + + // Claim Checklist + const [statementOfAccountAttached, setStatementOfAccountAttached] = + useState(false); + const [deathCertificateAttached, setDeathCertificateAttached] = + useState(false); + const [ + lifeCLiamInformationRequestProvided, + setLifeClaimInformationRequestProvided, + ] = useState(false); + const [ + certificationOfDeathPhysiciansStatmentCompleted, + setCertificationOfDeathPhysiciansStatmentCompleted, + ] = useState(false); + + // Deceased Information + const [deceasedName, setDeceasedName] = useState(""); + const [otherNames, setOtherNames] = useState([]); // ['name', 'name'] + const [dob, setDob] = useState(""); + const [dod, setDod] = useState(""); + const [deceasedAddress, setDeceasedAddress] = useState(""); + + // Since there are up to 3 loans, index 0 is loan 1, index 1 is loan 2, etc. + // General Loan Information + const [loanNumbers, setLoanNumbers] = useState([0, 0, 0]); + const [loanApprovalDates, setLoanApprovalDates] = useState(["", "", ""]); + const [loanOrignalAmounts, setLoanOrignalAmounts] = useState([0, 0, 0]); + const [amountsOfInsuranceAppliedFor, setAmountsOfInsuranceAppliedFor] = + useState([0, 0, 0]); + const [typesOfLoan, setTypesOfLoan] = useState(["", "", ""]); // ['closed end', 'open end'] + const [datesOfFirstPayment, setDatesOfFirstPayment] = useState(["", "", ""]); + const [interestRates, setInterestRates] = useState([0, 0, 0]); + const [amountOfMonthlyPayments, setAmountOfMonthlyPayments] = useState([ + 0, 0, 0, + ]); + const [datesOfLastPaymentsBeforeDeath, setDatesOfLastPaymentsBeforeDeath] = + useState([false, false, false]); + const [balancesOnDateOfDeath, setBalancesOnDateOfDeath] = useState([0, 0, 0]); + + // Closed End Loans + const [termsOfLoan, setTermsOfLoan] = useState(["", "", ""]); // ['months', 'months', 'months'] + const [scheduledMaturityDates, setScheduledMaturityDates] = useState([ + "", + "", + "", + ]); + const [loanRefinanceOfPreviousLoan, setLoanRefinanceOfPreviousLoan] = + useState([false, false, false]); + const [previousLoanNumbers, setPreviousLoanNumbers] = useState([0, 0, 0]); + const [previousLoanEffectiveDates, setPreviousLoanEffectiveDates] = useState([ + "", + "", + "", + ]); + + // Open End Loans and Advances Only + const [advances, setAdvances] = useState([]); // [[date1, advance1], [date2, advance2]], ...] + + // Next of Kin + const [kinName, setKinName] = useState(""); + const [kinAddress, setKinAddress] = useState(""); + const [kinPhone, setKinPhone] = useState(""); + const [kinRelationship, setKinRelationship] = useState(""); + + // Signature of Authorized Representative + const [nameOfLendingInstitution, setNameOfLendingInstitution] = useState(""); + const [addressOfLendingInstitution, setAddressOfLendingInstitution] = + useState(""); + const [authorizedRepresentativeName, setAuthorizedRepresentativeName] = + useState(""); + const [ + authorizedRepresentativeTelephone, + setAuthorizedRepresentativeTelephone, + ] = useState(""); + const [authorizedRepresentativeEmail, setAuthorizedRepresentativeEmail] = + useState(""); + const [certificateNumber, setCertificateNumber] = useState(""); + const [signature, setSignature] = useState(""); + + return ( +
+

Life Claim Initiation Lender Statement

+ + {/* Checklist */} + + {/* Deceased Information */} + + {/* General Loan Information */} + + {/* Closed End Loans */} + + {/* Open End Loans and Advances Only*/} + + {/* Next of Kin */} + + {/* Signature of Authorized Representative */} +
+ ); +}; + +export default LifeClaimInitiationLenderStatementForm; diff --git a/src/screens/NewFormScreen.js b/src/screens/NewFormScreen.js new file mode 100644 index 0000000..d0ffdde --- /dev/null +++ b/src/screens/NewFormScreen.js @@ -0,0 +1,12 @@ +import CertificationOfDeathForm from "../components/forms/CertificationOfDeathForm"; +const NewFormScreen = () => { + return ( +
+

Please fill out the following form:

+ {/* The following form is hardcoded for now. To handle multiple forms in the future, we will determine it by props */} + +
+ ); +}; + +export default NewFormScreen;