Landlord Listing Form + Unit Details Updates (#106)

## Tracking Info

Resolves #98

## Changes

1. Updated Unit Details page such that only HLs can update the HL column
for a referral
2. Added utilities component to landlord listing form and unit details


## Testing

<!-- How did you confirm your changes worked? -->

Looked at a unit details page from both a HL account and a non-HL
account to verify the referral table.
Went through entire workflow of landlord listing form to create unit -
validated that utilities were successfully added and showing up on unit
details.

## Confirmation of Change

<!-- Upload a screenshot, if possible. Otherwise, please provide
instructions on how to see the change. -->

![Screenshot 2024-05-29 at 2 10
51 AM](https://github.com/TritonSE/USHS-Housing-Portal/assets/63521936/3ec4d12c-febe-40c0-8ee7-a9e5519f1e4e)

HL Account:
![Screenshot 2024-05-29 at 2 11
08 AM](https://github.com/TritonSE/USHS-Housing-Portal/assets/63521936/6c713217-3db9-43cf-93d4-a7cf3d4a466c)

Non-HL Account:
![Screenshot 2024-05-29 at 2 11
51 AM](https://github.com/TritonSE/USHS-Housing-Portal/assets/63521936/a3116e3c-245d-49f0-af0f-e26afa9652f5)

---------

backend/src/models/units.ts

@@ -22,6 +22,7 @@ const unitSchema = new Schema(
     numBeds: { type: Number, required: true },
     numBaths: { type: Number, required: true },
     appliances: { type: [String], required: true },
+    utilities: { type: [String], required: true },
     communityFeatures: { type: [String], required: true },
     parking: { type: [String], required: true },
     accessibility: { type: [String], required: true },

backend/src/validators/units.ts

@@ -90,6 +90,7 @@ const createUnitSchema = [
   body("numBeds").exists().withMessage("is required").isNumeric().withMessage("must be a number"),
   body("numBaths").exists().withMessage("is required").isNumeric().withMessage("must be a number"),
   body("appliances").exists().withMessage("is required").isArray().withMessage("must be an array"),
+  body("utilities").exists().withMessage("is required").isArray().withMessage("must be an array"),
   body("communityFeatures")
     .exists()
     .withMessage("is required")

frontend/src/api/units.ts

@@ -27,6 +27,7 @@ export type Unit = {
   numBeds: number;
   numBaths: number;
   appliances: string[];
+  utilities: string[];
   communityFeatures: string[];
   parking: string[];
   accessibility: string[];

frontend/src/components/ListingForm/Utilities.tsx

@@ -0,0 +1,84 @@
+import {
+  CustomCheckboxRadio,
+  FieldHeader,
+  Margin32,
+  OptionLabel,
+  RadioCheckBoxContainer,
+  RadioCheckboxCol,
+  Required,
+} from "@/components/ListingForm/CommonStyles";
+
+type UtilitiesProps = {
+  utilities: string[];
+  setUtilities: React.Dispatch<React.SetStateAction<string[]>>;
+  handleCheckBoxNA: (
+    option: string,
+    getter: string[],
+    setter: React.Dispatch<React.SetStateAction<string[]>>,
+  ) => void;
+};
+
+export const Utilities = (props: UtilitiesProps) => {
+  return (
+    <Margin32>
+      <FieldHeader>
+        Utilities Included <Required>*</Required>
+      </FieldHeader>
+      <RadioCheckBoxContainer>
+        <RadioCheckboxCol>
+          <OptionLabel>
+            <CustomCheckboxRadio
+              type="checkbox"
+              name="Electricity"
+              value="Electricity"
+              checked={props.utilities.includes("Electricity")}
+              onChange={() => {
+                props.handleCheckBoxNA("Electricity", props.utilities, props.setUtilities);
+              }}
+            />
+            Electricity
+          </OptionLabel>
+
+          <OptionLabel>
+            <CustomCheckboxRadio
+              type="checkbox"
+              name="Water"
+              value="Water"
+              checked={props.utilities.includes("Water")}
+              onChange={() => {
+                props.handleCheckBoxNA("Water", props.utilities, props.setUtilities);
+              }}
+            />
+            Water
+          </OptionLabel>
+
+          <OptionLabel>
+            <CustomCheckboxRadio
+              type="checkbox"
+              name="Gas"
+              value="Gas"
+              checked={props.utilities.includes("Gas")}
+              onChange={() => {
+                props.handleCheckBoxNA("Gas", props.utilities, props.setUtilities);
+              }}
+            />
+            Gas
+          </OptionLabel>
+
+          <OptionLabel>
+            <CustomCheckboxRadio
+              type="checkbox"
+              name="Trash"
+              value="Trash"
+              checked={props.utilities.includes("Trash")}
+              onChange={() => {
+                props.handleCheckBoxNA("Trash", props.utilities, props.setUtilities);
+              }}
+            />
+            Trash
+          </OptionLabel>
+        </RadioCheckboxCol>
+      </RadioCheckBoxContainer>
+    </Margin32>
+  );
+};

frontend/src/components/ListingFormComponents.tsx

@@ -32,6 +32,7 @@ import { Pets } from "@/components/ListingForm/Pets";
 import { SharingHousing } from "@/components/ListingForm/SharingHousing";
 import { Textbox } from "@/components/ListingForm/Textbox";
 import { ThirdPartyPayment } from "@/components/ListingForm/ThirdPartyPayment";
+import { Utilities } from "@/components/ListingForm/Utilities";
 
 const ErrorMessage = styled.div`
   color: #b64201;
@@ -89,6 +90,7 @@ export function ListingFormComponents(props: ListingFormComponentsProps) {
   );
   const [numberOfBathsOther, setNumberOfBathsOther] = useState<string | undefined>();
   const [appliances, setAppliances] = useState<string[]>(props.initialValues?.appliances ?? []);
+  const [utilities, setUtilities] = useState<string[]>(props.initialValues?.utilities ?? []);
   const [communityAndNeighborInfo, setCommunityAndNeighborInfo] = useState<string[]>(
     props.initialValues?.communityFeatures ?? [],
   );
@@ -296,6 +298,7 @@ export function ListingFormComponents(props: ListingFormComponentsProps) {
       numBeds: numberOfBedrooms ?? parseInt(numberOfBedroomsOther ?? ""),
       numBaths: numberOfBaths ?? parseFloat(numberOfBathsOther ?? ""),
       appliances,
+      utilities,
       communityFeatures:
         communityAndNeighborInfo[0] === ""
           ? [communityAndNeighborInfoOther]
@@ -480,6 +483,11 @@ export function ListingFormComponents(props: ListingFormComponentsProps) {
           setAppliances={setAppliances}
           handleCheckBoxNA={handleCheckBoxNA}
         />
+        <Utilities
+          utilities={utilities}
+          setUtilities={setUtilities}
+          handleCheckBoxNA={handleCheckBoxNA}
+        />
         <CommunityInfo
           communityAndNeighborInfo={communityAndNeighborInfo}
           handleCommunityAndNeighborInfo={handleCommunityAndNeighborInfo}

frontend/src/components/ReferralTable.tsx

@@ -90,7 +90,7 @@ enum ReferralUpdateType {
 }
 
 export const ReferralTable = (props: ReferralTableProps) => {
-  const { allHousingLocators, allReferringStaff } = useContext(DataContext);
+  const { currentUser, allReferringStaff } = useContext(DataContext);
   const [referrals, setReferrals] = useState<Referral[]>([]);
   const [popup, setPopup] = useState<boolean>(false);
 
@@ -148,6 +148,27 @@ export const ReferralTable = (props: ReferralTableProps) => {
     });
   };
 
+  const HLSection = (referral: Referral) => {
+    if (currentUser?.isHousingLocator) {
+      return (
+        <UserDropdown
+          width="100%"
+          placeholder="Search"
+          onSelect={(value) => {
+            handleUpdate(referral, value as User, ReferralUpdateType.ReferringStaff);
+          }}
+          initialSelection={referral.assignedHousingLocator}
+          options={allReferringStaff}
+        />
+      );
+    }
+    return (
+      <>
+        {referral.assignedHousingLocator.firstName + " " + referral.assignedHousingLocator.lastName}
+      </>
+    );
+  };
+
   return (
     <ReferralTableContainer>
       <ReferralTableTitleSection>
@@ -173,13 +194,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
       <Table
         columns={TABLE_COLUMN_NAMES}
         rows={referrals.map((referral, idx) => {
-          const {
-            status,
-            renterCandidate,
-            assignedReferringStaff,
-            assignedHousingLocator,
-            updatedAt,
-          } = referral;
+          const { status, renterCandidate, assignedReferringStaff, updatedAt } = referral;
           // Generate a list of cells for each row
           return [
             <RenterCandidateLink
@@ -201,16 +216,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
               initialSelection={assignedReferringStaff}
               options={allReferringStaff}
             />,
-            <UserDropdown
-              key={`hl-select-${idx}`}
-              width="100%"
-              placeholder="Search"
-              onSelect={(value) => {
-                handleUpdate(referral, value as User, ReferralUpdateType.HousingLocator);
-              }}
-              initialSelection={assignedHousingLocator}
-              options={allHousingLocators}
-            />,
+            HLSection(referral),
             <ReferralTableDropDown
               key={`status-select-${idx}`}
               onSelect={(value) => {

frontend/src/pages/UnitDetails.tsx

@@ -513,6 +513,9 @@ export function UnitDetails() {
   const appliances = unit.appliances.map((appliance, i) => (
     <ListText key={appliance + i}>{appliance}</ListText>
   ));
+  const utilities = unit.utilities.map((utility, i) => (
+    <ListText key={utility + i}>{utility}</ListText>
+  ));
   const parkingRequirements = unit.parking.map((parking, i) => (
     <ListText key={parking + i}>{parking}</ListText>
   ));
@@ -731,6 +734,8 @@ export function UnitDetails() {
                     {pets}
                     <StrongText>Appliances: </StrongText>
                     {appliances}
+                    <StrongText>Utilities: </StrongText>
+                    {utilities}
                     <StrongText>Housing Authority: </StrongText>
                     <ListText> {unit.housingAuthority}</ListText>
                     <StrongText>Additional Comments from Landlord: </StrongText>