I26 create a home page

package.json

@@ -35,10 +35,11 @@
     "@heroicons/react": "^1.0.6",
     "babel-plugin-macros": "^3.1.0",
     "clsx": "^1.1.1",
-    "firebase": "^9.8.4",
+    "firebase": "^9.9.0",
     "next": "^12.1.6",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-hook-form": "^7.33.1",
     "react-icons": "^4.4.0",
     "react-select": "^5.4.0",
     "sharp": "^0.30.7",

src/components/Home/clientSelector.tsx

@@ -0,0 +1,49 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+import { default as ReactSelect } from 'react-select'
+import { MultiValue } from 'react-select'
+
+import multiStyles from '@/components/Home/multiStyles'
+
+const clientOptions = [
+  { value: 'Jeffrey', label: 'Jeffrey' },
+  { value: 'George', label: 'George' },
+  { value: 'Nancy', label: 'Nancy' },
+  { value: 'Michelle', label: 'Michelle' }
+]
+
+type Props = {
+  clients: Array<string>
+  setClients: Dispatch<SetStateAction<Array<string>>>
+}
+
+type MyOption = { value: string; label: string }
+
+function ClientSelector({ setClients }: Props) {
+  const [clientSelected, setClientSelected] = useState<MultiValue<MyOption>>()
+
+  const handleChange = (selected: MultiValue<MyOption>) => {
+    setClientSelected(selected)
+    setClients(Object.values(selected).map((val) => val.value))
+  }
+
+  return (
+    <div className='flex flex-col p-1'>
+      <label htmlFor='clients'>
+        <span className='text-primary'>*</span>
+        <b>Select Clients</b>
+      </label>
+      <ReactSelect
+        name='clients'
+        options={clientOptions}
+        closeMenuOnSelect={false}
+        value={clientSelected}
+        isMulti
+        hideSelectedOptions={false}
+        onChange={handleChange}
+        styles={multiStyles}
+      />
+    </div>
+  )
+}
+
+export default ClientSelector

src/components/Home/commuteSelector.tsx

@@ -0,0 +1,48 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+import { default as ReactSelect } from 'react-select'
+import { SingleValue } from 'react-select'
+
+import singleStyles from '@/components/Home/singleStyles'
+
+const commuteOptions = [
+  { value: 'Walk', label: 'Walk' },
+  { value: 'Drive', label: 'Drive' },
+  { value: 'Public Transport', label: 'Public Transport' },
+  { value: 'Other', label: 'Other' }
+]
+
+type Props = {
+  commute: string
+  setCommute: Dispatch<SetStateAction<string>>
+}
+
+type MyOption = { value: string; label: string }
+
+function CommuteSelector({ setCommute }: Props) {
+  const [commuteSelected, setCommuteSelected] =
+    useState<SingleValue<MyOption>>()
+
+  const handleChange = (selected: SingleValue<MyOption>) => {
+    setCommuteSelected(selected)
+    if (selected == null) return
+    setCommute(selected.value)
+  }
+
+  return (
+    <div className='flex flex-col p-1'>
+      <label htmlFor='commute'>
+        <span className='text-primary'>*</span>
+        <b>Commute Method</b>
+      </label>
+      <ReactSelect
+        name='commute'
+        options={commuteOptions}
+        value={commuteSelected}
+        onChange={handleChange}
+        styles={singleStyles}
+      />
+    </div>
+  )
+}
+
+export default CommuteSelector

src/components/Home/modal.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { useState } from 'react'
+
+import ClientSelector from '@/components/Home/clientSelector'
+import CommuteSelector from '@/components/Home/commuteSelector'
+import TextForm from '@/components/Home/textForm'
+import TypeSelector from '@/components/Home/typeSelector'
+
+function Modal() {
+  const [modalIsOpen, setModalOpen] = useState(false)
+  const [commute, setCommute] = useState('')
+  const [clients, setClients] = useState<string[]>([])
+  const [type, setType] = useState('')
+  const [walkDistance, setWalkDistance] = useState(0)
+  const [other, setOther] = useState('')
+  const [commuteDistance, setCommuteDistance] = useState(0)
+
+  function formIsFilled() {
+    return (
+      commuteDistance > 0 &&
+      (commute == 'Walk' ||
+        commute == 'Drive' ||
+        commute == 'Public Transport' ||
+        (commute == 'Other' && other != '')) &&
+      (type == 'Vet' || (type == 'Walk' && walkDistance > 0)) &&
+      clients.length > 0
+    )
+  }
+
+  return (
+    <div className='text-center'>
+      {/* If modal is closed, display start button */}
+      {!modalIsOpen && (
+        <button
+          className='relative h-[30px] w-[120px] rounded-lg bg-dark-red text-lg font-semibold text-white'
+          onClick={() => {
+            setModalOpen(true)
+          }}
+        >
+          START VISIT
+        </button>
+      )}
+
+      {/* Displays modal */}
+      {modalIsOpen && (
+        <div className='rounded-lg bg-zinc-200 py-4 px-5 text-center shadow-lg sm:py-4'>
+          <h1 className='mb-2 text-xl text-dark-red'>
+            <b>Visit Details</b>
+          </h1>
+          <hr className='mb-3 h-0.5 border-dark-red bg-dark-red text-dark-red' />
+
+          {/* Visit Form */}
+          <form>
+            {/* Commute Distance Form */}
+            <TextForm
+              id='commuteDistance'
+              type='text'
+              placeholder='Enter...'
+              label='Commute Distance (in km)'
+              isRequired={true}
+              onChange={(e) => setCommuteDistance(Number(e.target.value))}
+            />
+
+            {/* Commute Selector Form */}
+            <CommuteSelector commute={commute} setCommute={setCommute} />
+
+            {/* Other Form if commute is 'Other' */}
+            {commute == 'Other' && (
+              <TextForm
+                id='other'
+                type='text'
+                placeholder='Enter...'
+                label='Other Commute Method'
+                isRequired={true}
+                onChange={(e) => setOther(String(e.target.value))}
+              />
+            )}
+
+            {/* Pet Selector Form */}
+            <ClientSelector clients={clients} setClients={setClients} />
+
+            {/* Type Selector Form */}
+            <TypeSelector type={type} setType={setType} />
+
+            {/* Distance Form if type is 'Walk' */}
+            {type == 'Walk' && (
+              <TextForm
+                id='walkDistance'
+                type='text'
+                placeholder='Enter...'
+                label='Walk Distance (in km)'
+                isRequired={true}
+                onChange={(e) => setWalkDistance(Number(e.target.value))}
+              />
+            )}
+          </form>
+        </div>
+      )}
+      <br />
+      <div className='text-center'>
+        {/* If modal is opened, display cancel button. Once all information has been filled display stop button*/}
+        {modalIsOpen && (
+          <button
+            className='relative h-[30px] w-[120px] rounded-lg bg-dark-red text-lg font-semibold text-white'
+            onClick={() => {
+              setModalOpen(false),
+                setClients([]),
+                setType(''),
+                setCommute(''),
+                setWalkDistance(0),
+                setOther(''),
+                setCommuteDistance(0)
+            }}
+          >
+            {formIsFilled() ? 'STOP VISIT' : 'CANCEL'}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Modal

src/components/Home/multiStyles.tsx

@@ -0,0 +1,41 @@
+import { GroupBase, StylesConfig } from 'react-select'
+
+type OptionType = {
+  label: string
+  value: string
+}
+
+const singleStyles: StylesConfig<OptionType, true, GroupBase<OptionType>> = {
+  control: () => ({
+    marginTop: '4px',
+    marginBottom: '8px',
+    display: 'flex',
+    borderRadius: '4px',
+    backgroundColor: '#fff',
+    borderColor: '#6b7280',
+    border: '1px solid #6b7280'
+  }),
+  input: (provided: Record<string, unknown>) => ({
+    ...provided,
+    paddingTop: '0.1em',
+    paddingBottom: '0.1em',
+    color: 'black'
+  }),
+  placeholder: (provided: Record<string, unknown>) => ({
+    ...provided,
+    color: '#6b7280'
+  }),
+  dropdownIndicator: () => ({
+    display: 'flex',
+    transition: '',
+    padding: '8px',
+    color: '#6b7280'
+  }),
+  valueContainer: (provided: Record<string, unknown>) => ({
+    ...provided,
+    border: 'black',
+    transition: ''
+  })
+}
+
+export default singleStyles

src/components/Home/singleStyles.tsx

@@ -0,0 +1,42 @@
+import { GroupBase, StylesConfig } from 'react-select'
+
+type OptionType = {
+  label: string
+  value: string
+}
+
+const singleStyles: StylesConfig<OptionType, false, GroupBase<OptionType>> = {
+  control: () => ({
+    marginTop: '4px',
+    marginBottom: '8px',
+    display: 'flex',
+    borderRadius: '4px',
+    backgroundColor: '#fff',
+    borderColor: '#6b7280',
+    border: '1px solid #6b7280',
+    height: '36px'
+  }),
+  input: (provided: Record<string, unknown>) => ({
+    ...provided,
+    paddingTop: '0.1em',
+    paddingBottom: '0.1em',
+    color: 'black'
+  }),
+  placeholder: (provided: Record<string, unknown>) => ({
+    ...provided,
+    color: '#6b7280'
+  }),
+  dropdownIndicator: () => ({
+    display: 'flex',
+    transition: '',
+    padding: '8px',
+    color: '#6b7280'
+  }),
+  valueContainer: (provided: Record<string, unknown>) => ({
+    ...provided,
+    border: 'black',
+    transition: ''
+  })
+}
+
+export default singleStyles

src/components/Home/statistics.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+interface SummaryStatistics {
+  title: string
+  data: string
+}
+
+function Statistics(props: SummaryStatistics) {
+  return (
+    <div>
+      <p className='mt-2 text-lg'>{props.title}</p>
+      <p className='text-3xl text-dark-red'>{props.data}</p>
+    </div>
+  )
+}
+
+export default Statistics

src/components/Home/summary.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Statistics from '@/components/Home/statistics'
+
+const dummyVisitData = '12'
+const dummyDistanceData = '6.5'
+
+function Summary() {
+  return (
+    <div className='rounded-lg bg-zinc-200 py-4 px-5 text-center shadow-lg sm:py-4'>
+      <h1 className='mb-2 text-xl text-dark-red'>
+        <b>Summary Dashboard</b>
+      </h1>
+      <hr className='h-0.5 border-dark-red bg-dark-red text-dark-red' />
+      <div>
+        <table className='w-full'>
+          <tbody>
+            <tr>
+              <td>
+                <Statistics title='Number of Visits' data={dummyVisitData} />
+              </td>
+              <td>
+                <Statistics title='Distance Walked' data={dummyDistanceData} />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default Summary