This is a mock admin panel for admins to approve or decline caregiver shifts. The major features are:

1. Shift Listing
2. Shift Management
3. Shift Search by Caregiver

• Displays all the shifts and groups them by their month and date
• Supports horizontal scrolling if there are more than 3 months

• Admins can decline or confirm shifts only if the status is PENDING. Therefore, once a shift is DECLINED or CONFIRMED, it cannot be changed again
• Supports multiple selection for confirming multiple shifts

• Searching by a caregivers name will display only the shifts that match that caregivers name
• Search is performed immediately when the name is typed
• Search bar is located at the top and remains at the position even when the shifts view is scrolling

• Typescript
• React
• Zustand: State Management
• TailwindCSS: UI

• Typescript
• Node
• Express

This project has only been tested on Node Version 20.11.0. Please consider using Node Version 20.11.0 if it doesn't work on previous versions.

On the root folder, install all the NPM packages with the following command.

npm run install

This will install the NPM packages on the root directory, the frontend directory and the backend directory.

After installing the NPM packages, to run a local

In the project directory, you can run both the server and client concurrently using:

npm start

This will start a node server on port 5001, and a web server on an availale port.

In the backend directory, run the node server using:

npm start

This will start a node server on port 5001

In the frontend directory, run the web server using:

npm run dev

This will start a web server on an availale port

The shift data is based in 2023, whereas the year of developing this application is in 2024. The ShiftRelease component will only appear when the shift status is PENDING and there are less than 24 hours until the shift starts.

For development purposes, the current date was hardcoded in the ShiftRelease.tsx Component to March 19th at 1:01PM in the following line:

const now = new Date('March 19 2023 13:01');

Ideally, horizontal scrolling would only appear on the desktop view if there were more than 3 shift month views. However, even with only 3 shift month views available, there is still a bit of horizontal scrolling.

Various of the same types are used across the components. The main Shift type is defined in store.ts file, but the type definitions are defined all over the place and would be better to define it in one place

Organize the components by the type of component they serve, i.e. Shift components, or UI for the custom button and checkbox components.

To better the user experience, it would be great to add a confirmation dialog to show the user all the shifts that were confirmed after selecting "Confirm" for all the selected shifts.

In addition, if there are any errors during updates, it would also be good to add an alert to show the admins why the update status function did not work.

Admins can view all the shifts, however, they can only change the statuses of shifts that are PENDING. Therefore, adding a filter to only retrieve shifts with a PENDING status will help clean up the view if necessary.

In addition, a filter by other statuses like "CONFIRMED" or "DECLINED" can be good too and give more control to the admins.

On tablets and desktops, a scroll suggestion should be added to show that the content can be scrolled horizontally or vertically to show more information.

The only way the user can know to scroll in this current application is by seeing the scrollbars, or by noticing the cut off views and playing with the screen.