I32 incident and vet buttons and forms

src/components/Visit/readvisitinstance.tsx

@@ -1,4 +1,6 @@
+import Button from '@/components/UI/button'
 import { Duration, Visit } from '@/types/types'
+import Link from 'next/link'
 
 export const formatDuration = (duration: Duration) => {
   const d = `${duration.hours} ${duration.hours === 1 ? 'hr' : 'hrs'} ${
@@ -22,18 +24,29 @@ const VisitInfo = ({
   notes = ''
 }: VisitInfoProps) => {
   return (
-    <div
-      className='justify-between overflow-hidden text-sm transition-all duration-300'
-      style={{ maxHeight: isOpen ? '100vh' : '0' }}
-    >
-      <p>Visit Type: {type}</p>
-      <p>Pet(s): {petNames}</p>
-      <p>Duration: {formatDuration(duration)}</p>
-      <p>Walk Distance: {walkDist.toFixed(3)} km</p>
-      <p>Commute Distance: {commuteDist.toFixed(1)} km</p>
-      <p>Commute Method: {commuteMethod}</p>
-      <p>Notes: {notes}</p>
-    </div>
+    <>
+      <div
+        className={`justify-between overflow-hidden text-sm transition-all duration-300 ${
+          isOpen ? 'max-h-screen' : 'max-h-0'
+        }`}
+      >
+        <p>Visit Type: {type}</p>
+        <p>Pet(s): {petNames}</p>
+        <p>Duration: {formatDuration(duration)}</p>
+        <p>Walk Distance: {walkDist.toFixed(3)} km</p>
+        <p>Commute Distance: {commuteDist.toFixed(1)} km</p>
+        <p>Commute Method: {commuteMethod}</p>
+        <p>Notes: {notes}</p>
+        <div className='my-2 flex justify-center gap-2'>
+          <Link href='/visit/incident'>
+            <Button size='medium'>Report incident</Button>
+          </Link>
+          <Link href='/visit/vet'>
+            <Button size='medium'>Register Vet Concern</Button>
+          </Link>
+        </div>
+      </div>
+    </>
   )
 }
 

src/components/Visit/visitinstance.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import { Timestamp } from 'firebase/firestore'
+import { useState } from 'react'
 
 import { Visit } from '@/types/types'
 import { humanizeTimestamp } from '@/utils'
@@ -15,27 +14,28 @@ const VisitInstance = (props: Visit) => {
 
   return (
     <div className='m-2 flex flex-col rounded-xl bg-gray-50 p-4 drop-shadow-default'>
-      <div className='flex content-center justify-between'>
-        <div style={{ fontWeight: isOpen ? 400 : 700 }}>
+      <div className='flex justify-between'>
+        <div className='font-bold'>
           <p className='font-bold text-primary'>
-            {humanizeTimestamp(props.startTime || new Timestamp(0, 0))}
+            {humanizeTimestamp(props.startTime)}
           </p>
-          <p className='text-sm'>{props.clientName || 'N/A'}</p>
+          <p className='text-sm'>{props.clientName}</p>
+        </div>
+        <div>
+          <ChevronDownIcon
+            className='h-7 w-7 cursor-pointer self-center text-primary transition-transform duration-300'
+            style={{
+              rotate: !isOpen ? '0deg' : '180deg',
+              transitionProperty: 'rotate'
+            }}
+            onClick={() => {
+              setIsOpen(!isOpen)
+            }}
+          />
         </div>
-
-        <ChevronDownIcon
-          className='h-7 w-7 cursor-pointer self-center text-primary transition-transform duration-300'
-          style={{
-            rotate: !isOpen ? '0deg' : '180deg',
-            transitionProperty: 'rotate'
-          }}
-          onClick={() => {
-            setIsOpen(!isOpen)
-          }}
-        />
       </div>
-      <VisitInfo {...props} isOpen={isOpen} />
       {isOpen && <EditButton id={props.docId} />}
+      <VisitInfo {...props} isOpen={isOpen} />
     </div>
   )
 }

src/components/Visit/visitlist.tsx

@@ -26,7 +26,7 @@ export const VisitList = (props: VisitListProps) => {
       {visits && visits.length !== 0 ? (
         visits
           .filter(searchFilter)
-          .map((visit) =>
+          .map((visit: any) =>
             visit.docId ? <VisitInstance key={visit.docId} {...visit} /> : null
           )
       ) : (

src/pages/visit/incident.tsx

@@ -0,0 +1,127 @@
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import { FormEvent, useState } from 'react'
+
+import { useAuth } from '@/context/Firebase/Auth/context'
+import { IncidentForm } from '@/types/types'
+
+import { withProtected } from '@/components/PrivateRoute'
+import Button from '@/components/UI/button'
+import FormField from '@/components/Visit/formfield'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+const IncidentForm = () => {
+  const { currentUser } = useAuth()
+  const [userName, setUserName] = useState(
+    currentUser?.displayName ? currentUser?.displayName : ''
+  )
+  const [email, setEmail] = useState(
+    currentUser?.email ? currentUser?.email : ''
+  )
+  const [petName, setPetName] = useState('')
+  const [time, setTime] = useState('') //check issue comments for date/time
+  const [notes, setNotes] = useState('')
+  const router = useRouter()
+
+  const handleSubmit = (click: FormEvent<HTMLFormElement>) => {
+    click.preventDefault()
+    const data: IncidentForm = {
+      userID: currentUser?.uid,
+      userName: userName,
+      email: email,
+      petName: petName,
+      time: time,
+      details: notes
+    }
+    console.log(data)
+    router.push('/visit')
+  }
+
+  const isSubmitEnabled = () => {
+    return currentUser?.uid && userName && email && petName && time && notes
+  }
+
+  return (
+    <div className='z-50 p-4'>
+      <>
+        <div className='fixed right-5 top-4 z-[100] h-10 w-10 rounded-full bg-primary p-1 drop-shadow-default'>
+          <Link href='/visit'>
+            <button>
+              <XMarkIcon className='h-full w-full text-white' />
+            </button>
+          </Link>
+        </div>
+
+        <div className='border-b-2 border-primary py-3 pt-10'>
+          <h1 className='pl-2 text-2xl font-bold'>Add Your Incident</h1>
+        </div>
+
+        <form className='pt-3' onSubmit={handleSubmit}>
+          <table className='container mx-auto table-fixed'>
+            <tbody>
+              <tr>
+                <td>
+                  <FormField
+                    id='userNameInput'
+                    type='text'
+                    placeholder={userName}
+                    label='Name'
+                    isRequired={false}
+                    onChange={(event) => setUserName(event.target.value)}
+                  />
+                </td>
+                <td>
+                  <FormField
+                    id='emailInput'
+                    type='email'
+                    placeholder={email}
+                    label='Email'
+                    isRequired={false}
+                    onChange={(event) => setEmail(event.target.value)}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <FormField
+                    id='petNameInput'
+                    type='text'
+                    placeholder='Pet name'
+                    label='Pet Name'
+                    isRequired={false}
+                    onChange={(event) => setPetName(event.target.value)}
+                  />
+                </td>
+                <td>
+                  <FormField
+                    id='timeInput'
+                    type='dateTime-local'
+                    placeholder='Time'
+                    label='Date & Time'
+                    isRequired={false}
+                    onChange={(event) => setTime(event.target.value)}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <FormField
+            id='notesInput'
+            type='textarea'
+            placeholder='Add notes here'
+            label='Description'
+            isRequired={false}
+            onChange={(event) => setNotes(event.target.value)}
+          />
+          <div className='mx-auto my-2 flex flex-col p-1 '>
+            <Button type='submit' disabled={!isSubmitEnabled()}>
+              Submit
+            </Button>
+          </div>
+        </form>
+      </>
+    </div>
+  )
+}
+
+export default withProtected(IncidentForm)

src/pages/visit/vet.tsx

@@ -0,0 +1,136 @@
+import { FormEvent, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { XMarkIcon } from '@heroicons/react/24/solid'
+
+import { withProtected } from '@/components/PrivateRoute'
+import Button from '@/components/UI/button'
+import FormField from '@/components/Visit/formfield'
+import { useAuth } from '@/context/Firebase/Auth/context'
+import { VetConcernsForm } from '@/types/types'
+
+const VetForm = () => {
+  const { currentUser } = useAuth()
+  const [userName, setUserName] = useState(
+    currentUser?.displayName ? currentUser?.displayName : ''
+  )
+  const [email, setEmail] = useState(
+    currentUser?.email ? currentUser?.email : ''
+  )
+  const [petName, setPetName] = useState('')
+  const [vetName, setVetName] = useState('')
+  const [time, setTime] = useState('') //check issue comments for date/time
+  const [notes, setNotes] = useState('')
+  const router = useRouter()
+
+  const handleSubmit = (click: FormEvent<HTMLFormElement>) => {
+    click.preventDefault()
+    const data: VetConcernsForm = {
+      userID: currentUser?.uid,
+      userName: userName,
+      email: email,
+      petName: petName,
+      vetName: vetName,
+      time: time,
+      details: notes
+    }
+    console.log(data)
+    router.push('/visit')
+  }
+
+  const isSubmitEnabled = () => {
+    return currentUser?.uid && userName && email && petName && time && notes
+  }
+
+  return (
+    <div className='z-50 p-4'>
+      <>
+        <div className='fixed right-5 top-4 z-[100] h-10 w-10 rounded-full bg-primary p-1 drop-shadow-default'>
+          <Link href='/visit'>
+            <button>
+              <XMarkIcon className='h-full w-full text-white' />
+            </button>
+          </Link>
+        </div>
+
+        <div className='border-b-2 border-primary py-3 pt-10'>
+          <h1 className='pl-2 text-2xl font-bold'>Register a Vet Concern</h1>
+        </div>
+
+        <form className='pt-3' onSubmit={handleSubmit}>
+          <table className='container mx-auto table-fixed'>
+            <tbody>
+              <tr>
+                <td>
+                  <FormField
+                    id='userNameInput'
+                    type='text'
+                    placeholder={userName}
+                    label='Name'
+                    isRequired={false}
+                    onChange={(event) => setUserName(event.target.value)}
+                  />
+                </td>
+                <td>
+                  <FormField
+                    id='emailInput'
+                    type='email'
+                    placeholder={email}
+                    label='Email'
+                    isRequired={false}
+                    onChange={(event) => setEmail(event.target.value)}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <FormField
+                    id='petNameInput'
+                    type='text'
+                    placeholder='Pet name'
+                    label='Pet Name'
+                    isRequired={false}
+                    onChange={(event) => setPetName(event.target.value)}
+                  />
+                </td>
+                <td>
+                  <FormField
+                    id='vetNameInput'
+                    type='text'
+                    placeholder='Vet name'
+                    label='Vet Name'
+                    isRequired={false}
+                    onChange={(event) => setVetName(event.target.value)}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <FormField
+            id='timeInput'
+            type='dateTime-local'
+            placeholder='Time'
+            label='Date & Time'
+            isRequired={false}
+            onChange={(event) => setTime(event.target.value)}
+          />
+          <FormField
+            id='notesInput'
+            type='textarea'
+            placeholder='Add notes here'
+            label='Description'
+            isRequired={false}
+            onChange={(event) => setNotes(event.target.value)}
+          />
+          <div className='mx-auto my-2 flex flex-col p-1 '>
+            <Button type='submit' disabled={!isSubmitEnabled()}>
+              Submit
+            </Button>
+          </div>
+        </form>
+      </>
+    </div>
+  )
+}
+
+export default withProtected(VetForm)

src/types/types.ts

@@ -47,3 +47,22 @@ export type Duration = {
   hours: number
   minutes: number
 }
+
+export type IncidentForm = {
+  userID?: string
+  userName: string | null | undefined
+  email: string | null | undefined
+  petName: string
+  time: string
+  details: string
+}
+
+export type VetConcernsForm = {
+  userID?: string
+  userName: string
+  email: string
+  petName: string
+  vetName: string
+  time: string
+  details: string
+}