Merge branch 'main' of https://github.com/JHM69/CS24-p2-quantum_guys

react-app/components/CollectionPlanEntryEntryForm/index.js

@@ -0,0 +1,126 @@
+/* eslint-disable no-unused-expressions */
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import Button from '../common/Button'
+import Input from '../common/Input'
+
+const CollectionPlanEntryEntryForm = ({
+  type,
+  defaultValues,
+  onFormSubmit,
+  handleClose,
+  contractorId,
+  ...props
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+  } = useForm()
+
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (defaultValues) {
+      setValue('contractorId', contractorId)
+      setValue('area', defaultValues.area)
+      setValue('startTime', defaultValues.startTime)
+      setValue('endTime', defaultValues.endTime)
+      setValue('laborers', defaultValues.laborers)
+      setValue('expectedWaste', defaultValues.expectedWaste)
+      setValue('vans', defaultValues.vans) 
+    }
+  }, [ defaultValues ])
+
+  const onSubmit = handleSubmit(async (data) => {
+    console.log(data)
+    setLoading(true)
+    // convert timeOfArrival to ISO string 
+    await onFormSubmit(data)
+    setLoading(false)
+    reset()
+  })
+
+  return (
+    <div {...props} className="flex flex-col space-y-6">
+      <div>
+        <Input
+          name="contractorId"
+          label="Contractor ID"
+          placeholder={contractorId}
+          value={contractorId}
+          type="text"
+          error={errors.contractorId ? errors.contractorId.message : false}
+          disabled
+        />
+
+        <Input
+          name="area"
+          label="Area"
+          placeholder="Enter Area"
+          type="text"
+          error={errors.area ? errors.area.message : false}
+          {...register('area')}
+        />
+
+        <Input
+          name="startTime"
+          label="Start Time"
+          type="datetime-local"
+          error={errors.startTime ? errors.startTime.message : false}
+          {...register('startTime')}
+        />
+
+        <Input
+          name="endTime"
+          label="End Time"
+          type="datetime-local"
+          error={errors.endTime ? errors.endTime.message : false}
+          {...register('endTime')}
+        />
+
+        <Input
+          name="laborers"
+          label="Laborers"
+          placeholder="Enter Laborers"
+          type="number"
+          error={errors.laborers ? errors.laborers.message : false}
+          {...register('laborers')}
+        />
+
+        <Input
+          name="expectedWaste"
+          label="Expected Waste"
+          placeholder="Enter Expected Waste"
+          type="number"
+          error={errors.expectedWaste ? errors.expectedWaste.message : false}
+          {...register('expectedWaste')}
+        />
+
+        <Input
+          name="vans"
+          label="Vans"
+          placeholder="Enter Vans"
+          type="number"
+          error={errors.vans ? errors.vans.message : false}
+          {...register('vans')}
+        />
+
+      </div>
+
+      <Button
+        type="button"
+        onClick={onSubmit}
+        className="w-full"
+        disable={loading}
+      >
+        {/* loading and type condition */}
+        {loading ? 'Adding' : 'Add Entry'}
+      </Button>
+    </div>
+  )
+}
+
+export default CollectionPlanEntryEntryForm

react-app/components/ContractorEntry/AddCollectionPlanEntry.js

@@ -0,0 +1,140 @@
+import { Dialog, Transition } from '@headlessui/react'
+import React, { Fragment, useEffect, useState } from 'react'
+
+import Button from '../common/Button'
+import { Close } from '../common/icons/Close'
+
+import { getBaseUrl } from '../../utils/url'
+import axios from 'axios'
+import toast, { Toaster } from 'react-hot-toast'
+import ContractorEntryForm from '../ContractorEntryForm'
+import CollectionPlanEntryEntryForm from '../CollectionPlanEntryEntryForm'
+const AddCollectionPlanEntry = ({ props, contractorId }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const handleClose = () => setIsOpen(false)
+  const handleOpen = () => setIsOpen(true)
+  const [contractor, setContractor] = useState([])
+  const onFormSubmit = async (data) => {
+    try {
+      console.log(data)
+      const submitData = {
+        ...data,
+        contractorId,
+      }
+      toast('Adding the entry!', {
+        icon: '👏',
+      })
+      const token = localStorage.getItem('token')
+      await axios
+        .post(getBaseUrl() + `/collectionPlan`, submitData, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((response) => {
+          console.log(response)
+          toast.success('Collection Plan created successfully')
+          // toast.custom((t) => (
+          //   <div
+          //     className={`${
+          //       t.visible ? 'animate-enter' : 'animate-leave'
+          //     } pointer-events-auto flex w-full max-w-md rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5`}
+          //   >
+          //     <div className="w-0 flex-1 p-4">
+          //       <div className="flex items-start">
+          //         <div className="flex-shrink-0 pt-0.5">
+          //           <img
+          //             className="h-10 w-10 rounded-full"
+          //             src="/logo.png"
+          //             alt=""
+          //           />
+          //         </div>
+          //         <div className="ml-3 flex-1">
+          //           <p className="text-sm font-medium text-gray-900">
+          //             {response.data.landfill.name}
+          //           </p>
+          //           <p className="mt-1 text-sm text-gray-500">
+          //             Distance {response.data.bill.distance} KM .It will take{' '}
+          //             {Number(response.data.bill.duration).toFixed(2)} min.
+          //           </p>
+          //         </div>
+          //       </div>
+          //     </div>
+          //     <div className="flex border-l border-gray-200">
+          //       <button
+          //         onClick={() => toast.dismiss(t.id)}
+          //         className="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          //       >
+          //         Close
+          //       </button>
+          //     </div>
+          //   </div>
+          // ))
+          handleClose()
+        })
+        .catch((error) => console.log(error))
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+
+
+  return (
+    <>
+      <Toaster />
+      <Button onClick={handleOpen} type="button" {...props}>
+        Make a Collection Plan 
+      </Button>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={handleClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="z-100 fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-2xl transform overflow-y-auto rounded-xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="div"
+                    className="mb-5 flex items-center justify-between text-lg font-semibold leading-6 text-gray-800"
+                  >
+                    <h3>Make Collection Plan</h3>
+                    <Close onClick={handleClose} />
+                  </Dialog.Title>
+
+                  <CollectionPlanEntryEntryForm
+                    type={'Add'}
+                    onFormSubmit={onFormSubmit}
+                    handleClose={handleClose}
+                    contractor={contractor}
+                    contractorId={contractorId}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+export default AddCollectionPlanEntry

react-app/components/ContractorEntrys/CollectionPlanItem.js

@@ -0,0 +1,100 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+import { getBaseUrl } from '../../utils/url'
+import axios from 'axios'
+
+const CollectionPlanItem = ({
+  id,
+  contractorId,
+  area,
+  startTime,
+  endTime,
+  laborers,
+  expectedWaste,
+  vans,
+  completed,
+}) => {
+  return (
+    <div className="smooth-effect my-2 flex cursor-pointer items-center justify-center rounded-md border py-4 text-center shadow-sm hover:bg-green-200 hover:shadow lg:px-6">
+      <div className="flex-1">
+        <h3 className="text-md text-gray-800">
+          {new Date(startTime).toLocaleTimeString() +
+            ' ' +
+            new Date(endTime).toLocaleTimeString()}
+        </h3>
+      </div>
+
+      <div className="flex-1">
+        <h3 className="text-md text-gray-800">Laborers: {laborers}</h3>
+      </div>
+
+      <div className="flex-1">
+        <h3 className="text-md text-gray-800">vans: {vans}</h3>
+      </div>
+      <div className="flex-1">
+        <h3 className="text-md text-gray-800">
+          Expected Waste: {expectedWaste}
+        </h3>
+      </div>
+
+      <div className="flex-1">
+        <h3 className="text-md text-gray-800">
+          completed: {completed ? 'YES' : 'NO'}
+        </h3>
+      </div>
+
+      {/* Download button */}
+
+      <div className="flex-1">
+        <button
+          onClick={() => {
+            // Call a axios request to complete the collection plan
+            const token = localStorage.getItem('token')
+            axios
+              .get(getBaseUrl() + `/collectionPlan/${id}/complete`, {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                },
+              })
+              .then((res) => {
+                console.log(res.data)
+                alert('Collection Plan Completed')
+              })
+              .catch((err) => {
+                // setLoading(false)
+                console.log(err)
+              })
+          }}
+          className="rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700"
+        >
+          Complete
+        </button>
+      </div>
+
+      {/* <ContractorEntryInfo
+        employeeEntry={{
+          id,
+            name,
+            lastLogin,
+            lastLogout,
+            accessLevel,
+            diff
+        }}
+      /> */}
+
+      {/* <UpdateContractorEntry
+        vehicleEntry={{
+          id,
+          vehicleId,
+          volumeOfWaste,
+          timeOfArrival,
+          timeOfDeparture,
+          vehicle,
+          stsId,
+        }}
+      /> */}
+    </div>
+  )
+}
+
+export default CollectionPlanItem

react-app/components/ContractorEntrys/CollectionPlanItems.js

@@ -0,0 +1,19 @@
+import React from 'react'   
+import CollectionPlanItem from './CollectionPlanItem'
+import TrackerItem from './TrackerItem'
+const CollectionPlanItems = ({ trackers  }) => {
+  return (
+    console.log({trackers}),
+    <div className="block max-h-[75vh] overflow-y-auto rounded-lg border p-2 desktop:max-h-[80vh]">
+      {trackers?.length ? (
+        trackers?.map((i) => <TrackerItem key={i.id} {...i} />)
+      ) : (
+        <div className="h-[100px] w-full text-center font-bold text-gray-300">
+           No Collection Plan Items
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CollectionPlanItems