Create cases page with table

rnair-tw commented 4 months ago

User Story

As a user I want to see an "all cases" table view that lists out all the complaints and relevant fields So that I can have a comprehensive view of all complaints in the system

Business Context:

Having a comprehensive view of all complaints allows users to track and manage issues efficiently. It improves transparency and helps in prioritizing and addressing complaints systematically.

In Scope

Development of the "all cases" table view using the the Data Grid MIT Version https://mui.com/x/react-data-grid/ This view is part of the home page.
Display relevant fields such as complaint title, description, date created, status, and reporter information
For the scope of this card we are using dummy data using a seeder. The actual data can be generated by AI. Remember the data has to be organization specific.
The default columns to be displayed on the table should be the same as in the mockups

Out of Scope

Export button and functionality
Create case button and functionality
Storing user preferences when they change the table view (columns view)
Columns menu on the header is also out of scope. The ability to select which columns to show its available on the table itself, as the component has it by default. In other words, keep the current component, which is the “three dot” functionality

Mockups

https://www.figma.com/design/Qpewv3nKANuv7qm4oJd2Xy/Hi-Fi_Mockups?node-id=242-85472&t=AO2iNxEDwHGuctlq-1

Acceptance Criteria

Scenario: View All Complaints Given a logged-in user, When they navigate to the "all cases" table view, Then they should see a list of all complaints with relevant fields displayed And I can interact with the table view settings provided
Scenario: Organization context Given a logged-in user from Hawaii, When I look at the table, Then I should see fields and dummy data relevant to Hawaii

Notes

Checklist

Kickoff

[x] We have we indicated which organizations and user permissions require this
[x] We have indicated whether we have any dependencies to other cards/work
[x] We have indicated which environment this can be tested in
[x] We have included a mockup if this is design related
[x] We have included clear ACs to test it
[x] We have estimated the story

Deskcheck

[ ] This work has been demoed in staging (or higher) and led by the dev pair who worked on this card
[ ] We have run through and passed all the ACs
[x] Our documentation has been updated
[x] Our onboarding checklist has been update
[x] Install MUI -GRID
[x] Generate Dummy Data and add it to a local database
[x] Create React Component
[x] Add test for components(RTL+Jest, Cypress)
[x] Create Grid with corresponding data and styling
[ ] Refactor ( Extract hooks, functions, inline styling etc)

rnair-tw commented 4 months ago

Put the functionality in a separate card: Pagination and sorting functionality Advanced filtering options (e.g. basic search and sort) Show/hide columns (need to ensure that case ID always shows)