Added api calls

frontend/package.json

@@ -19,6 +19,7 @@
         "jspdf-autotable": "^3.8.2",
         "next": "14.0.4",
         "react": "^18",
+        "react-datepicker": "^6.6.0",
         "react-dom": "^18"
     },
     "devDependencies": {
@@ -29,6 +30,7 @@
         "@types/jest": "^29.5.11",
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-datepicker": "^6.2.0",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.0.1",
         "concurrently": "^8.2.2",

frontend/src/app/form/Assessment.tsx

@@ -0,0 +1,96 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import {Button} from '../../components/core/Button';
+import Checkbox from '../../components/core/Checkbox';
+import RadioButton from '../../components/core/RadioButton';
+import {TextInput} from '../../components/core/TextInput';
+
+interface AssessmentProps {
+    lasting: boolean
+    cup: boolean
+    scale: boolean
+    comments: string
+    supplies: string
+    needs: string
+    setLasting: Dispatch<SetStateAction<boolean>>;
+    setCup: Dispatch<SetStateAction<boolean>>;
+    setScale: Dispatch<SetStateAction<boolean>>;
+    setComments: Dispatch<SetStateAction<string>>;
+    setSupplies: Dispatch<SetStateAction<string>>;
+    setNeeds: Dispatch<SetStateAction<string>>;
+    setFormPage: Dispatch<SetStateAction<string>>;
+}
+
+function Assessment(props: AssessmentProps) {
+
+  const handleCupChange = () => {
+
+    props.setCup(!(props.cup));
+    console.log(props.cup)
+
+  };
+
+  const handleScaleChange = () => {
+
+    props.setScale(!(props.scale));
+
+  };
+
+  return (
+    <form className="">
+        <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+        Is the amount of food lasting the whole month?
+      </div>
+
+      <div className="flex">
+      <RadioButton truth={true} check={props.lasting} change={props.setLasting} />
+      <label className='ml-3'>Yes</label>
+        <div className='ml-10'>
+      <RadioButton truth={false} check={!props.lasting} change={props.setLasting}/>
+      </div>
+      <label className='ml-3'>No</label>
+      </div>
+      <div className='mr-10'>
+      If not, let’s work with the client to learn why.  For example, providing a measuring cup for the pet food and weighing the pet could be helpful:
+      </div>
+
+      <div className="flex">
+      <Checkbox checked={props.cup} handleChange={handleCupChange }/>
+      <div className='ml-1'>
+      Measuring Cup
+      </div>
+      <div className='ml-5'>
+      <Checkbox checked={props.scale} handleChange={handleScaleChange }/>
+      </div>
+      <div className='ml-1'>
+      Pet Scale
+      </div>
+      </div>
+
+      <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+        Additional Suggestions or comments
+      </div>
+      <TextInput value={props.comments || ''} placeholder={''} onChange={props.setComments }/>
+
+      <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+        Does the client need any other supplies (collars, leashes, bowls, etc)?
+      </div>
+      <TextInput value={props.supplies || ''} placeholder={''} onChange={props.setSupplies }/>
+
+      <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+        Are there any other pet related needs at this time (vet visit/medication)?
+      </div>
+      <TextInput value={props.needs || ''} placeholder={''} onChange={props.setNeeds }/>
+
+
+
+      <div onClick={()=>props.setFormPage("Submit")} className='mt-5 text-right'>
+          <Button text="Continue"/>
+          </div>
+
+    </form>
+  )
+}
+
+
+
+export default Assessment

frontend/src/app/form/Confirmation.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Button} from '../../components/core/Button'
+
+interface ConfirmationProps {
+
+
+}
+
+function Confirmation(props: ConfirmationProps) {
+  return (
+    <div className='h-screen flex flex-col justify-center items-center'>
+        <img src="/images/confirmation.png"/>
+        <div className='mt-5 font-bold'>Form submitted!</div>
+        <div className='mt-5'>Thank You!</div>
+    <div onClick={()=>window.location.reload()} className='mt-5 content-center'>
+          <Button text="Fill out another form"/>
+          </div>
+          </div>
+  )
+}
+
+export default Confirmation

frontend/src/app/form/Pet.tsx

@@ -0,0 +1,57 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import {Button} from '../../components/core/Button';
+import {TextInput} from '../../components/core/TextInput';
+
+interface PetProps {
+  petName: string
+  foodType: string
+  foodAmount: string
+  setPetName: Dispatch<SetStateAction<string>>;
+  setFoodType: Dispatch<SetStateAction<string>>;
+  setFoodAmount: Dispatch<SetStateAction<string>>;
+  setFormPage: Dispatch<SetStateAction<string>>;
+  num: number
+}
+
+function Pet(props: PetProps) {
+  return (
+    <form className="">
+
+      <div className='mt-5'>
+        Pet Name
+      </div>
+      <TextInput value={props.petName || ''} placeholder={''} onChange={props.setPetName}/>
+
+
+          <div className='mt-5 '>
+          Type of Food
+          </div>
+          <TextInput value={props.foodType || ''} placeholder={''} onChange={props.setFoodType}/>
+
+
+      <div className='mt-5 '>
+          Amount of Food Per Month
+          </div>
+
+          <TextInput value={props.foodAmount || ''} placeholder={''} onChange={props.setFoodAmount}/>
+        <div className='flex flex-row'>
+          {<div onClick={()=>props.setFormPage("Assessment")} className='mt-5'>
+          <Button text="Continue"/>
+          </div>}
+
+          {props.num==1 && <div onClick={()=>props.setFormPage("Pet2")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet"/>
+          </div>}
+
+          {props.num==2 && <div onClick={()=>props.setFormPage("Pet3")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet"/>
+          </div>}
+          </div>
+
+    </form>
+  )
+}
+
+
+
+export default Pet

frontend/src/app/form/Submit.tsx

@@ -0,0 +1,62 @@
+import React, { Dispatch, SetStateAction } from 'react'
+import {Button} from '../../components/core/Button';
+import Checkbox from '../../components/core/Checkbox';
+import RadioButton from '../../components/core/RadioButton';
+import {TextInput} from '../../components/core/TextInput';
+import DatePicker from '@/components/core/DatePicker';
+
+
+interface SubmitProps {
+
+    name: string
+    updated: boolean
+    selectedDate: Date
+    submitted: boolean
+    setName: Dispatch<SetStateAction<string>>;
+    setUpdated: Dispatch<SetStateAction<boolean>>;
+    setSelectedDate: Dispatch<SetStateAction<Date>>;
+    setFormPage: Dispatch<SetStateAction<string>>;
+    setSubmitted: Dispatch<SetStateAction<boolean>>;
+
+}
+
+function Submit(props: SubmitProps) {
+
+
+
+  return (
+    <form className="">
+        <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+            Volunteer Name
+      </div>
+      <TextInput value={props.name || ''} placeholder={''} onChange={props.setName}/>
+
+      <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+            Date Delivered
+      </div>
+      <DatePicker selectedDate={props.selectedDate} onChange={ props.setSelectedDate }  />
+
+      <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+        Is there any information that needs to be updated?
+      </div>
+
+      <div className="flex">
+      <RadioButton truth={true} check={props.updated} change={props.setUpdated} />
+      <label className='ml-3'>Yes</label>
+        <div className='ml-10'>
+      <RadioButton truth={false} check={!props.updated} change={props.setUpdated}/>
+      </div>
+      <label className='ml-3'>No</label>
+      </div>
+
+      <div onClick={()=>props.setFormPage("Confirm")} className='mt-5 text-right'>
+          <Button text="Submit"/>
+          </div>
+
+    </form>
+  )
+}
+
+
+
+export default Submit

frontend/src/app/form/client.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import {Button} from '../../components/core/Button'
+import {TextInput} from '../../components/core/TextInput'
+
+interface ClientProps {
+  first: string
+  last: string
+  address: string
+  city: string
+  zip: string
+  phone: string
+  instructions: string
+  setFirst: Dispatch<SetStateAction<string>>;
+  setLast: Dispatch<SetStateAction<string>>;
+  setAddress: Dispatch<SetStateAction<string>>;
+  setCity: Dispatch<SetStateAction<string>>;
+  setZip: Dispatch<SetStateAction<string>>;
+  setPhone: Dispatch<SetStateAction<string>>;
+  setInstructions: Dispatch<SetStateAction<string>>;
+  setFormPage: Dispatch<SetStateAction<string>>;
+}
+
+
+function Client(props: ClientProps) {
+
+
+
+
+  return (
+    <form className="">
+      <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+        Name
+      </div>
+
+      <div className='flex flex-row'>
+      <TextInput value={props.first || ''} placeholder={'First Name'} onChange={props.setFirst}/>
+
+      <div className='ml-5'>
+      <TextInput value={props.last || ''} placeholder={'Last Name'} onChange={props.setLast }/>
+      </div>
+      </div>
+
+      <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+        Street Address
+      </div>
+      <TextInput value={props.address || ''} placeholder={''} onChange={props.setAddress }/>
+
+      <div className="flex">
+        <div>
+          <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+          City
+          </div>
+          <TextInput value={props.city || ''} placeholder={''} onChange={props.setCity }/>
+        </div>
+
+        <div className="ml-5">
+          <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+          Zip Code
+          </div>
+          <TextInput value={props.zip || ''} placeholder={''} onChange={props.setZip }/>
+        </div>
+
+      </div>
+
+      <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
+          Phone Number
+          </div>
+          <TextInput value={props.phone || ''} placeholder={''} onChange={props.setPhone }/>
+
+        <div className='mt-5'>
+          Special Delivery Instructions
+          </div>
+          <TextInput value={props.instructions || ''} placeholder={''} onChange={props.setInstructions }/>
+
+          <div onClick={()=>props.setFormPage("Pet1")} className='mt-5 text-right'>
+          <Button text="Continue"/>
+          </div>
+    </form>
+  )
+}
+
+
+
+export default Client