Admin Add Client to Client List #137

MehekB · 2025-04-12T19:48:34Z

Description

Added ability for admin to create a new client and add to the client list.

Key Features:

Add Client Form: Collects essential client information (first_name, last_name, etc.).
Cancel Confirmation Dialog: When users click Cancel, a modal AlertDialog prompts for confirmation before discarding data.
Form Submission: validates input and sends a POST request via backend.post('/clients', clientData), displaying a success or error toast.

Screenshots/Media

When "Add New Client" is clicked

Confirmation for cancelling

Issues

Closes #130

benson-fm

Hey guys,

great start on the task, there's some things that need to be fixed like overall flow and some features missing but the base level stuff is there great work! If you need any clarification lmk!

benson-fm · 2025-04-13T07:10:02Z

client/src/components/clientlist/AddClientForm.tsx

+          destination_city: formData.destination_city,
+          comments: formData.comments
+      };
+        console.log(clientData)


you can remove this

benson-fm · 2025-04-13T07:11:09Z

client/src/components/clientlist/AddClientForm.tsx

+          // site: formData.site,
+          // case_managers: formData.case_managers,


im not entirely sure if this used, since its commented and you aren't using it you can go ahead and delete it

benson-fm · 2025-04-13T07:24:45Z

client/src/components/clientlist/AddClientForm.tsx

+          homelessness_length: parseInt(formData.homelessness_length || "0", 10),
+          chronically_homeless: formData.chronically_homeless === "Yes" ? true : false ,
+          attending_school_upon_entry: formData.attending_school_upon_entry === "Yes" ? true : false ,
+          employement_gained: formData.employment_gained,


mispelling right here could lead to unexpected behavior

benson-fm · 2025-04-13T07:30:08Z

client/src/components/clientlist/AddClientForm.tsx

+    const {backend} = useBackendContext()
+    const toast = useToast()
+
+    const handleSubmit = async (event: React.FormEvent) => {


For this instance when I press submit, it doesn't directly get loaded, you may want to do a useEffect hook where once submit is ran the a fetch would be made again to the db for the changes to be reflected on the table

benson-fm · 2025-04-13T07:33:01Z

client/src/components/clientlist/AddClientForm.tsx

+    const {backend} = useBackendContext()
+    const toast = useToast()
+
+    const handleSubmit = async (event: React.FormEvent) => {


In this instance it needs to say missing fields refer to this figma

Also instead of error occurred print the specific words that are listed in the figma for the red pop up

https://www.figma.com/design/sHKYRo824s5Te8qKZeiaAP/-CCH--2.-Lo-Fi--%3E-Hi-Fi?node-id=8590-89264&t=pNYLbb0GaO1btOOR-4

benson-fm · 2025-04-13T07:36:37Z

client/src/components/clientlist/AddClientForm.tsx

+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />


Also note that when the drawer is closed that the following flow happens as seen in the figma where a component pops out saying that there is a new client and they could edit it meaning that you would need to save the data there even if it means you exit out of the pop up the data is still there

https://www.figma.com/design/sHKYRo824s5Te8qKZeiaAP/-CCH--2.-Lo-Fi--%3E-Hi-Fi?node-id=8593-204040&t=pNYLbb0GaO1btOOR-4

So there is an issue with this feature is when that I submit a client to be added and I finish, this notification is still there, this needs to be gone when I successfully submit a client so you may want to use a useState here

Furthermore there isn't a option where I can click on the return to editing client, make sure you add this button, you may want to add onClick function for this

…tch figma

benson-fm

Great work on the fixes guys, theres some extra stuff that needs to be fixed just look through my comments but other than that great job!

benson-fm · 2025-04-28T07:21:21Z

client/src/components/clientlist/AddClientForm.tsx

+        homelessness_length: "",
+        chronically_homeless: "",
+        attending_school_upon_entry: "",
+        employment_gained: "",


this is technically correct, however, there is an issue where currently right now the table in the db is misspelled for right now just change it to employement and the other instances that are considered of this specific column.

benson-fm · 2025-04-28T07:22:07Z

client/src/components/clientlist/AddClientForm.tsx

+          homelessness_length: parseInt(formData.homelessness_length || "0", 10),
+          chronically_homeless: formData.chronically_homeless === "Yes" ? true : false ,
+          attending_school_upon_entry: formData.attending_school_upon_entry === "Yes" ? true : false ,
+          employment_gained: formData.employment_gained,


same here with the employement thing I was talking about above

benson-fm · 2025-04-28T07:25:38Z

client/src/components/clientlist/AddClientForm.tsx

+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />


So there is an issue with this feature is when that I submit a client to be added and I finish, this notification is still there, this needs to be gone when I successfully submit a client so you may want to use a useState here

Furthermore there isn't a option where I can click on the return to editing client, make sure you add this button, you may want to add onClick function for this

benson-fm · 2025-04-28T07:30:25Z

client/src/components/clientlist/AddClientForm.tsx

+                    <Text fontWeight="medium">First Name</Text>
+                    <Input placeholder="Short Answer" value={formData.first_name}
+                    onChange={(e) => {setFormData({ ...formData, first_name: e.target.value }); setFormInProgress(true); setShowUnfinishedAlert(true)}}
+                    />
+
+                    <Text fontWeight="medium">Last Name</Text>
+                    <Input placeholder="Short Answer" value={formData.last_name}
+                    onChange={(e) => {setFormData({ ...formData, last_name: e.target.value }); setFormInProgress(true)}}
+                    />
+
+                    <Text fontWeight="medium">Status</Text>
+                    <Select placeholder="Select option" value={formData.status}
+                    onChange={(e) => {setFormData({ ...formData, status: e.target.value }); setFormInProgress(true)}}>
+                        <option value="Active">Active</option>
+                        <option value="Exited">Exited</option>
+                    </Select>
+
+                    <Text fontWeight="medium">Site</Text>
+                    <Input placeholder="Short Answer" 
+                    onChange={(e) => {setFormData({ ...formData, site: e.target.value }); setFormInProgress(true)}}
+                    />
+
+                    <Text fontWeight="medium">Unit ID</Text>
+                    <Input placeholder="Short Answer" value={formData.unit_id}
+                    onChange={(e) => {setFormData({ ...formData, unit_id: e.target.value }); setFormInProgress(true)}}


This and the following stuff below as we want to get more readable code we see some similar patterns here. What I would want you guys to do here is to make a separate component and you can insert some parameters to decrease the amount of lines maybe something like

SomeComponentYesAndNo (title, placeholder, formDataTitle) { <Text>{title}</Text> <Input placeholder={placehodler} onCHange{ setFormData({...formData, {formDataTitle}: e.target.value})}> } SomeComponentSelect () { ... }

benson-fm · 2025-04-28T07:31:04Z

client/src/components/clientlist/AddClientForm.tsx

+                    </Select>
+
+                    <Text fontWeight="medium">Employment Gained</Text>
+                    <Select placeholder="Select option" value={formData.employment_gained}


what i was talking about employement you might want to change here

benson-fm · 2025-04-28T07:31:15Z

client/src/components/clientlist/AddClientForm.tsx

+
+                    <Text fontWeight="medium">Employment Gained</Text>
+                    <Select placeholder="Select option" value={formData.employment_gained}
+                    onChange={(e) => {setFormData({ ...formData, employment_gained: e.target.value }); setFormInProgress(true)}}>


Mehek Bhatnagar and others added 4 commits April 10, 2025 20:33

Updated files to add a client to client list page

96f3fb2

debugged post request to client db

62f21dd

Added confirmation for cancellation popup

bca7ce3

fixed styling

8581d70

benson-fm requested changes Apr 13, 2025

View reviewed changes

Mehek Bhatnagar and others added 3 commits April 15, 2025 15:00

removed unnecessary code, fixed typos and updated error message to ma…

98bbcbe

…tch figma

modified toast messages and flows to match figma

7c4f14e

Added alert for unfinished client form

1f88141

dlacuata requested a review from benson-fm April 26, 2025 23:04

benson-fm requested changes Apr 28, 2025

View reviewed changes

dlacuata and others added 2 commits April 30, 2025 16:27

Re-added 'employement' typo to match typo in db

570539f

Merge branch 'main' into mehek-dommenick-add-client

af06a51

srukelman merged commit 09fa8e0 into main May 4, 2025
1 check failed

		// site: formData.site,
		// case_managers: formData.case_managers,

Admin Add Client to Client List #137

Admin Add Client to Client List #137

Uh oh!

Conversation

MehekB commented Apr 12, 2025

Description

Key Features:

Screenshots/Media

When "Add New Client" is clicked

Confirmation for cancelling

Issues

Uh oh!

benson-fm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benson-fm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants