contractors

react-app/components/Contractor/ContractorLayout.js

@@ -1,7 +1,7 @@
 /* eslint-disable multiline-ternary */
 import React from 'react'
 import UpdateContractor from './UpdateContractor'
-import DeleteSong from './DeleteContractor'
+import DeleteContractor from './DeleteContractor'
 
 const Section = ({ title, children, ...props }) => (
   <section className="mb-3 rounded-md border px-3 py-4" {...props}>
@@ -17,34 +17,67 @@ const ContractorLayout = ({ contractor }) => {
       <div className="w-full">
 
         <Section title={'Contractor Information'}>
-        <div className="flex items-center space-x-2">
+          <div className="flex items-center justify-end space-x-2">
             <UpdateContractor contractor={contractor} />
-            <DeleteSong
+            <DeleteContractor
               contractorId={contractor?.id}
             />
           </div>
           <section className="mb-3 rounded-md border px-3 py-4">
-            <div className="flex items-center space-x-4">
-              <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-full">
-                <img src={contractor.image} alt={contractor.name} width={64} height={64} />
-              </div>
+            <div className="flex items-center space-x-4 py-2">
               <div className="flex flex-col">
-                <h3 className="text-xl font-semibold text-gray-500">
-                  {contractor.name}
+                <h3 className="text-xl font-semibold text-gray-800">
+                  Company: {contractor.companyName}
                 </h3>
-                <p className="text-gray-600">{contractor.email}</p>
+                <p className="text-gray-700">Registration Id: {contractor.registrationId}</p>
               </div>
             </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-xl font-semibold text-gray-700">STS Assigned: {contractor.stsId}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Registration Date: {contractor.registrationDate}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">TIN Number: {contractor.tin}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Phone Number: {contractor.phone}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Payment Per Tonnage: {contractor.paymentPerTonnage} Ton</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Required Waste Per Day: {contractor.requiredWastePerDay} Ton</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Contract Start Date: {contractor.contractStartDate}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Contract End Date: {contractor.contractEndDate}</p>
+            </div>
+
+            <div className="flex items-center space-x-4 py-2">
+              <p className="text-gray-700">Area of Collection: {contractor.areaOfCollection}</p>
+            </div>
           </section>
         </Section>
 
-        <Section title={'Contractor Type'}>
+        {/* <Section title={'Contractor Type'}>
           <h3 className="font-bond text-xl text-gray-500">
             {contractor?.role?.type}
           </h3>
-        </Section>
+        </Section> */}
 
-        {contractor?.role?.type === 'STSManager' && (
+        {/* {contractor?.role?.type === 'STSManager' && (
           <Section title={'STS Info'}>
             {
               contractor.sts.map((sts) => (
@@ -65,7 +98,7 @@ const ContractorLayout = ({ contractor }) => {
               ))
             }
           </Section>
-        )}
+        )} */}
       </div>
     </div>
   )

react-app/components/Contractor/DeleteContractor.js

@@ -10,7 +10,7 @@ const DeleteContractor = ({ contractorId, ...props }) => {
   const handleDelete = async () => {
     try {
       const token = localStorage.getItem('token')
-      await fetch(getBaseUrl() + `/contractors/${contractorId}`, {
+      await fetch(getBaseUrl() + `/contractor/${contractorId}`, {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json',
@@ -28,7 +28,7 @@ const DeleteContractor = ({ contractorId, ...props }) => {
 
   return (
     <>
-      <Button onClick={handleOpen} variant="text" type="button" {...props}>
+      <Button className="bg-red-700 text-white hover:bg-red-500" onClick={handleOpen} variant="text" type="button" {...props}>
         Delete
       </Button>
       <Transition appear show={isOpen} as={Fragment}>

react-app/components/Contractor/UpdateContractor.js

@@ -0,0 +1,88 @@
+import { Dialog, Transition } from '@headlessui/react'
+import React, { Fragment, useState } from 'react'
+
+import Button from '../common/Button'
+import { Close } from '../common/icons/Close'
+import ContractorForm from '../ContractorForm'
+import { getBaseUrl } from '../../utils/url'
+import axios from 'axios'
+const UpdateContractor = ({ contractor, ...props }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const handleClose = () => setIsOpen(false)
+  const handleOpen = () => setIsOpen(true)
+
+  const onFormSubmit = async (data) => {
+    const token = localStorage.getItem('token')
+    console.log(contractor)
+    await axios
+      .put(getBaseUrl() + `/contractors/${contractor.id}`, data, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        console.log(res)
+        if (res.status === 200 || res.status === 201) {
+          alert('Successfully Added.')
+        } else {
+          alert(res.status)
+          console.log(res)
+        }
+      })
+  }
+
+  return (
+    <>
+      <Button onClick={handleOpen} type="button" {...props}>
+        Update
+      </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>Update Contractor</h3>
+                    <Close onClick={handleClose} />
+                  </Dialog.Title>
+
+                  <ContractorForm
+                    defaultValues={contractor}
+                    type={'Update'}
+                    onFormSubmit={onFormSubmit}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+export default UpdateContractor

react-app/components/Contractor/ViewContractor.js

@@ -19,7 +19,7 @@ const ContractorInfo = ({ contractor, ...props }) => {
     setLoading(true)
     const token = localStorage.getItem('token')
     axios
-      .get(getBaseUrl() + '/contractors/' + contractor.id, {
+      .get(getBaseUrl() + '/contractor/' + contractor.id, {
         headers: {
           Authorization: `Bearer ${token}`,
         },

react-app/components/Contractors/ContractorItem.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import ContractorInfo from '../Contractor/ViewContractor'
 
-const ContractorItem = ({ name, email, image, role, id }) => {
+const ContractorItem = (data) => {
+
   return (
 
-      <div className="smooth-effect my-2 flex cursor-pointer items-center rounded-md border px-3 py-4 shadow-sm hover:bg-green-100 hover:shadow lg:px-6">
-        <img className="mx-3 h-8 w-8 flex-shrink-0 rounded-md" src={image} />
-
-        <p className="flex-1 truncate font-bold">{name}</p>
+      <div className="smooth-effect my-2 flex cursor-pointer items-center text-center rounded-md border px-3 py-4 shadow-sm hover:bg-green-100 hover:shadow lg:px-6">
+        <p className="flex-1 truncate font-bold">{data.companyName}</p>
 
-        <p className="flex-1 truncate px-2 font-medium">{email}</p>
+        <p className="flex-1 truncate px-2 font-medium">{data.registrationId}</p>
 
-        <p className="flex-1 truncate px-2 font-medium">{role.type}</p>
+        <p className="flex-1 truncate px-2 font-medium">{data.paymentPerTonnage}</p>
 
-        <ContractorInfo contractor={{ name, email, image, role, id }} />
+        <ContractorInfo contractor={data}/>
       </div>
 
   )
 }
 
 export default ContractorItem
+
+

react-app/components/Contractors/ContractorItems.js

@@ -1,16 +1,25 @@
 import React from 'react'
 import ContractorItem from './ContractorItem'
 
-const ContractorItems = ({ Contractors, reload, setReload }) => {
+const ContractorItems = ({ contractors, reload, setReload }) => {
   return (
     <div className="block max-h-[75vh] overflow-y-auto rounded-lg border p-2 desktop:max-h-[80vh]">
-      {Contractors?.length ? (
-        contractors?.map((i) => <ContractorItem key={i.id} {...i} reload={reload} setReload={setReload} />)
-      ) : (
+      <div className="smooth-effect my-2 flex cursor-pointer items-center text-center rounded-md border py-4 shadow-sm hover:bg-green-100 hover:shadow">
+        <p className="flex-1 truncate font-bold">Company Name</p>
+
+        <p className="flex-1 truncate font-bold">Registration Id</p>
+
+        <p className="flex-1 truncate font-bold">Payment Per Tonnage</p>
+      </div>
+      {contractors?.length
+        ? (
+            contractors?.map((i) => <ContractorItem key={i.id} {...i} reload={reload} setReload={setReload} />)
+          )
+        : (
         <div className="h-[100px] w-full text-center font-bold text-gray-300">
           Add some contractor to see the data.
         </div>
-      )}
+          )}
     </div>
   )
 }

react-app/pages/contractor.js

@@ -17,7 +17,7 @@ function Contractors() {
     const token = localStorage.getItem('token')
     if (token.length > 0) {
       axios
-        .get(getBaseUrl() + '/contractors', {
+        .get(getBaseUrl() + '/contractor', {
           headers: {
             Authorization: `Bearer ${token}`,
           }
@@ -50,7 +50,7 @@ function Contractors() {
           {loading ? (
             <ContractorItemsSkeleton />
           ) : (
-            <ContractorItems contractors={contractors} />
+            <ContractorItems contractors={contractors} reload={reload} setReload={setReload} />
           )}
         </div>
       </div>