---
# System prepended metadata

title: SMS Page

---

# SMS Page 

> Figma design: https://www.figma.com/file/BkkaTefoha4s8w1nrhGOPb/Dashboard-Hey-Pharmacy?node-id=0%3A1&t=bhzVZq4UE8rj7kaN-0

## Requirements 

1. Ability to view SMS history of each patient.
2. Ability to view patients.
3. Ability to add a new patient
    **Add patient form columns are:**
        1. name
        2. pharmacy id
        3. Phone Number
        4. email
        5. date of birth
4. Ability to view paitents groups and add new group or send SMS to a group
    **Add a group columns' form are:**
        1. Group name
        2. List of selected patients IDs
5. Ability to create a pre-made SMS.
6. Ability to send a pre-made SMS.

## References

1. Sample of the old SMS page
    **It has the following features**
    1. send SMS to a ptient
    2. send SMS to a group
    3. use a pre-made SMS
    4. write custom SMS
    5. add paitent
    6. edit patient
    7. add group
    8. edit group
    9. view all sent SMS

    ![](https://i.imgur.com/cyOb9th.png)
    
2. Sample of the old pre-made SMS page

    ![](https://i.imgur.com/3JOyEYQ.png)
    
3. Sample of the old create patients group page

    ![](https://i.imgur.com/rSsW6sc.png)



## Task details

1. Once click on SMS tab in reports page, it should open this component: 

    ![](https://i.imgur.com/xmutzTl.png)
    
2. Search patien or group option, should have a select box, if the user select patient in this case it should search for a patient, if the user selects group, in this case it should search for a group.
    
    ![](https://i.imgur.com/XYy8jGd.png)

3. Buttons actions
    1. Once click on add new patient it should open a form to add a new patient, the UI of the form will be provided on the Jira ticket.
    2. Once click on Manage groups it should open a page that lists all groups and allows add/edit groups, but it should be ignored for now
    3. for SMSs history could be ignored for now but just add the UI of it

    ![](https://i.imgur.com/d7WObrR.png)

4. Patients / Groups list section
    
    This section should list all patients/groups based on the search step, 
    ignore all the actions except the first action which is select patient
    
    ![](https://i.imgur.com/juvdOuH.png)
    
    ![](https://i.imgur.com/o2CBv7Y.png)

5. Once select a patient or group, the patient/group name should be dispalyed on the top of the box, and should ahve the ability to send custom SMS or send a pre-made SMS

    ![](https://i.imgur.com/iVVfYk0.png)

6. Once click on manage button, a popup for managing pre-made SMS should be displayed

    ![](https://i.imgur.com/Rb5RMZp.png)

    ![](https://i.imgur.com/7ASBOi0.png)



## Get started in the project

1. Project is hosted here: https://heypharmacist-ui.vercel.app/
2. Login details are:
    demo@demo.com
    password
3. Once download the project create .env.local file and add following content: 
    `
        VITE_API_URL=https://heypharmacist-api.vercel.app/api/v1.0
    `
4. If you are facing any issue with cors, ensure to install and enable that extenstion: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en