sjb-deck / deck

Getting Started

Prerequisites

1. Install Docker:

   Download and install Docker Desktop from Docker's official site.

   Follow the installation instructions for your distribution from Docker's official site.

2. Clone the repo:

   git clone https://github.com/sjb-deck/deck.git

3. Move into the directory:

   cd deck

4. Copy the .env file into the current directory.

Running the Development Server with Docker

You can run the development server using Docker and the provided run.sh script.

1. Make the run.sh script executable:

   chmod +x run.sh

2. Add the following line to your /etc/hosts file:

   127.0.0.1 deck-dev.nhhs-sjb.org
   ::1 deck-dev.nhhs-sjb.org

3. Run the script in development mode:

   ./run.sh

4. Visit the site at https://deck-dev.nhhs-sjb.org.

This script will build and start the Docker containers for the frontend, backend, and MySQL services.

Additional Notes

If this is your first time running the dev server, you will need to create a new superuser account

1. Start a shell in the backend container:

   docker exec -it [backend_container_id] sh

2. Run the following command to create a superuser:

   python manage.py createsuperuser

3. Follow the prompts to create a new superuser account, then exit the shell:

   exit

You can find the [backend_container_id] by running docker ps -a and look for the container with the name deck_backend.

Running tests

Backend

Running tests with test.sh

1. Make the test.sh script executable:

   chmod +x test.sh

2. Run the script:

   ./test.sh [optional_test_args]

   Example:

   ./test.sh accounts.__tests__.triggers.test_trigger_user_extras.TestTriggerUserExtras

3. The script will run the backend tests and output the results.

Running tests with Docker

1. Start a shell in the backend container:

   docker exec -it [backend_container_id] sh

2. Run the following command to run the tests:

   python manage.py test [optional_test_args]

3. The tests will run and output the results.

Frontend

1. Go to the frontend directory:

   cd frontend

2. Run the following command to run the tests:

   npm run test

3. The tests will run and output the results.

Must Have VSCode Extensions

• Black Python Formatter
• ESLint
• Prettier

deck's Issues

Nav bar is overlapping onto other component

Create user admin page

Create a new page to display all orders and loans. This page will be the "admin" page for users.
Features:

• Display orders and loans in separate sections
  • We can use MUI datatables to display the information
  • have to ensure that the information is mobile responsive
  • datatables are not known to be responsive, will have to figure out other methods of displaying information for mobile
• User should be able to see the items involved in the loan/order either using a popup modal or others
• User should have the option to revert an order

• Display order and loans
• Allow users to revert loan

Add editing of cart

In cart checkout page, there is a non-functional edit button

To implement it and allow users to edit quantity in cart checkout

Bug Fixes in Kit BE

• Allow for reverting retirement kit histories
• Update submit_kit_order to take in an array of kit_ids
• Filter out archived expiries in get_restock_options
• add_blueprint should accept item_id instead of item_expiry_id. See #162

Kit Loan Return Page

New page that allows users to return a loaned out kit and specify the current contents of the kit after loan

API Usage

Requirements

• Display items in kit before loan (call kit_history endpoint and get the snapshot of the latest history entry)
• Allow users to specify the current contents of a kit after loan
• Display message when kit is not in an active loan

Create Loan return page

• Users can view all their active loans and can select to return fully or partially
• Access to loan return page should be from inventory index

Improve jest tests

Currently, many components are missing unit tests

• To add tests to components to improve coverage
• Fix issue where result from useQuery not updating properly
  600102f tests/pages/ItemIndex/ItemSearch.test.js line 8

🐛 Bug: Footer does not stick to bottom

Fix issue where even when order submit fails, user will still be redirected

🐛 Bug: Unable to press 'Enter' to login

Add-Item: Use API for Levenshtein Distance

To avoid double adding the same item which is already existing, and to trivially deal with minor typos, a string to string similarity check if run before an item is added.

Current implementation:
List of existing items is generated from api call and compared to the item name being added with a javascript function on the frontend.

Proposed implementation:
Shift the similarity check process to the backend, api call with an array containing the item name as payload. Return array or similar names/null in json object. Array used so that the api is more flexible and able to run checks on more than one name in one call.

Create order list

Refer to https://deck.nhhs-sjb.org/inventory/orderlogs

• Should allow for filtering/search
  • Sort by date
  • Search by loanee name, items, user
• Should allow users to revert an order (backend)
• User friendly dates and reason
• Loading spinner when fetching data

Light/Dark Mode choice not sustained throughout site

Screen.Recording.2023-07-14.at.10.02.47.PM.mov

Suggested solution:

• Save light/dark mode choice in local storage

Update loan return endpoint with return date and quantities

Loan return endpoint should update fields indicating the actual (not promised) date of return, and record return quantities so that quantity expanded can be computed if needed.

To be done after code freeze.

Check for client-side and server-side validation for POST requests

Some POST requests are currently accepted without client side validation and server side validation.

Frontend validation - user experience and immediate feedback for invalid data in forms
Backend validation - endpoint security

Tasks:

• Identify missing validations
• Open issues / Top up missing validations

Restock Kit Options BE Bug

No restock options are provided when a particular item has no quantity

Kit

{
    "id": 31,
    "name": "Test Kit 2",
    "status": "READY",
    "content": [
        {
            "item_expiry_id": 2,
            "quantity": 2,
            "item_expiry": {
                "id": 2,
                "expiry_date": "2023-07-23",
                "quantity": 19,
                "archived": false,
                "item": {
                    "id": 2,
                    "name": "test expiry",
                    "type": "General",
                    "unit": "units",
                    "imgpic": null,
                    "total_quantity": 430,
                    "min_quantity": 0,
                    "is_opened": false
                }
            }
        }
    ],
    "blueprint_name": "Test Blueprint",
    "blueprint_id": 8,
    "complete": "incomplete"
}

Get kit recipe for the blueprint

[
    {
        "item_id": 2,
        "item_name": "test expiry",
        "current_quantity": 0,
        "required_quantity": 4,
        "missing_quantity": 4,
        "item_options": [
            {
                "item_expiry_id": 2,
                "expiry_date": "2023-07-23",
                "quantity": 19
            },
            {
                "item_expiry_id": 41,
                "expiry_date": "2023-08-19",
                "quantity": 0
            },
            {
                "item_expiry_id": 42,
                "expiry_date": "2023-08-26",
                "quantity": -10
            },
            {
                "item_expiry_id": 123,
                "expiry_date": "2023-11-25",
                "quantity": 45
            },
            {
                "item_expiry_id": 124,
                "expiry_date": "2023-11-28",
                "quantity": 333
            },
            {
                "item_expiry_id": 3,
                "expiry_date": "2033-07-13",
                "quantity": 12
            }
        ],
        "sufficient_stock": true
    },
    {
        "item_id": 4,
        "item_name": "something new1",
        "current_quantity": 0,
        "required_quantity": 2,
        "missing_quantity": 2,
        "item_options": [
            {
                "item_expiry_id": 44,
                "expiry_date": "2023-08-24",
                "quantity": 19
            },
            {
                "item_expiry_id": 45,
                "expiry_date": "2024-08-19",
                "quantity": 46
            }
        ],
        "sufficient_stock": true
    }
]

Restock Options

[
    {
        "item_id": 2,
        "item_name": "test expiry",
        "current_quantity": 2,
        "required_quantity": 4,
        "missing_quantity": 2,
        "item_options": [
            {
                "item_expiry_id": 2,
                "expiry_date": "2023-07-23",
                "quantity": 19
            },
            {
                "item_expiry_id": 41,
                "expiry_date": "2023-08-19",
                "quantity": 0
            },
            {
                "item_expiry_id": 42,
                "expiry_date": "2023-08-26",
                "quantity": -10
            },
            {
                "item_expiry_id": 123,
                "expiry_date": "2023-11-25",
                "quantity": 45
            },
            {
                "item_expiry_id": 124,
                "expiry_date": "2023-11-28",
                "quantity": 333
            },
            {
                "item_expiry_id": 3,
                "expiry_date": "2033-07-13",
                "quantity": 12
            }
        ],
        "sufficient_stock": true
    }
]

Kit is missing item_id 4, but restock options did not indicate or provide options for item_id 4

Steps to reproduce bug:

1. Restock a kit without providing any quantity for one of the items
2. Call restock options after the restock

Restock options will not provide restock options of the item which we did not provide quantity to restock to in step 1

Create Items List

Reference: https://deck.nhhs-sjb.org/inventory/itemlist

• Need not be mobile responsive (although good to be)
• Item List
• Filter items
• Upload CSV
• Export CSV
• Write test cases

Vulnerability: Login page

• Password is sent in clear

deck/src/js/login.js

const submitForm = () => {
    $.ajax({
      type: 'POST',
      url: "/r'%5Elogin/$'",
      data: {
        username: username,
        password: password,
        to_redirect: toRedirect,
        csrfmiddlewaretoken: CSRF_TOKEN,
      },
      success: function (data) {
        window.location.href = toRedirect == undefined ? '/' : toRedirect;
      },
      error: function (xhr, status, error) {
        console.log('Login failed:', error);
        setMessage(JSON.parse(xhr['responseText']).responseText);
      },
    });
  };

Show receipt after user submits an order

Current:
After user submits order, user is redirected to items page

Expected:
User redirected to a page which shows a receipt of the order that has just been submitted

Cart Checkout Page

• #26
• #27
• #56
• #98
• Fix bug with max withdraw qty validation
• Form validation for cart checkout
• #57
• Add tests
• #99

Create an ItemExpiry object on the creation of an item with no expiry

Allow mass upload of items to DB

Subtask of #16

• Other than downloading CSV, allow users to upload CSV to add items to DB
• Refer to this sheet, in particular the SJ FA Materials tab
• For expiry with months or years only discuss with @Eriol8 which date to put since our DB only recognises full dates

Issue with over-withdrawal

Over withdrawal can result in negative values.

Suggestion:

• Do a frontend check with javascript function.
• Add layer of protection in api endpoint.

Kits Index

• Enable kits page in inventory_index page (/inventory/kits)
• Display list of kits
  • Add button
  • Sort by filter (kit size/status)
• Jest test
• Pop up modal to allow users to create kit
  • Allow users to specify name of new kit and select blueprint
  • Call get_new_kit_recipe to get available items to add to the new kit
  • 

Change orders and types of orders relationship to inheritance

• Orders and order types, eg loanOrder, to use inheritance instead of FK
• Everything else remains as FK

Test kits api

• Test GET endpoints
• Test POST endpoints
• Test reversion endpoints

Add-item: Allow users to take a photo and upload to BE

• Opens user's camera or photo library onClick
• User will be able to preview image
• When form is submitted, upload image to Django BE (will require exploration)

Change to pointer on hover

Icon on the top left of navbar is clickable, as a user I would expect it to convert to a pointer

Current:

Screen.Recording.2023-07-05.at.7.53.33.PM.mov

Expected:
Would expect a similar pointer on the navbar

Item stack image and layout should remain the same for longer-named items

Create search bar

• Create a search feature for items

• Should be a separate component (a search bar)

• Responsive on typing (run a search on every keystroke)

• Mobile responsive

Example:

New buttons for FA homepage

Currently, we have alerts and cart, there are plans to add at least 4 more pages,

1. Add new item
2. View Item Data
3. View orders
4. View loans

Note: no need to name the buttons as above, feel free to name anything that makes sense

For mobile: Add new buttons which link to the pages (only add new item is up with the url: https://deckland.nhhs-sjb.org/inventory/add_item can leave as deadlinks for the other buttons)

For larger screens: Figure out a way, using the MUI library to accomodate all the buttons, currently it is placed on the navbar. However, having 6 buttons on the navbar is not feasible. Suggestions: using drawer component from mui or icon menu

Current:

Extra pagination when filter is used

When filter is used and results yield content <5, there is still a page 2 to the item list.

Expected behaviour: Pagination needs to dynamically adapt to filter changes

Add cart button in FA homepage

• Add a rounded cart button that sticks to bottom right of FA homepage
• onClick, leads to cart page
• Add a badge to display amount of items in the cart

Filter feature to display items by item type

• Create a filter so that users can filter by item type

• Design yet to be decided (maybe a dropdown below the search bar?)

• Allow for multi-select

• Filtering should be done entirely on the frontend

Create new loan return page

• Create new loan return page, UI should be identical to items page
• Only loans by the current user will be displayed
• Order loans by the nearest return date
• Search bar to search loans by loanee name (?)

Filter items when user type in search bar

• Upon typing in search bar, filter the items displayed according to the search key the user entered

Kit Cart Page

Allow users to withdraw kit(s) for loan

Requires completion of #137

Requirements

• Similar to item cart, except that we only have Loans

API contract

Create a popup modal to add to the cart

Create Blueprint page

New page that allows users to create a kit blueprint

Kit Blueprint - a list of items that that shows what and how much of an item a kit should contain

Example API usage
@cheehengk shouldn't it be item_id instead of item_expiry_id?

Requirements

• Call items endpoint and display all items
• Allows users to select the items to add inside the blueprint and the quantity
• Allow users to specify the blueprint name
• Allow users to submit and create a blueprint

Footer for FA Items Homepage

• Create a footer

• Must be mobile responsive

• Specific content to be in the footer can be decided later (hard coding of words is ok)

Large Screens:

Small Screens:

Backend Improvements

• Create swagger docs
• Add checks and validation
• Add tests

Style itemIndex and child components

• #15
• Make search bar and search filter menu stationary
• #12

Add-Item: Fix issue with deleting expiries in the form

Deleting an expiry entry updates the state (array) but the state is not re-rendered and updated in the DateQuantity component to be displayed to the user.

Add testing for django serialisers

Create page for 'Add new items'

Similar to https://deck.nhhs-sjb.org/inventory/items/add

• Add a new page to 'add an item' (should be accessible from FA homepage)
• Consider using stepper from MUI
• Some rules to follow when adding new items
  • An item either has expiry or no expiry (once an item is created as 'has expiry' it cannot be converted to 'no expiry')
  • Refer to inventory/models: ItemModels and ItemExpiryModels to see how DB is structured

Kit Restock Page

Page that allows users to restock an incomplete kit

Requirements

• Call restock_options to get all the available items the user can use to restock the kit
• Allow users to specify what item expires they can use to restock
• Display the old and new quantity in the kit (before & after restock)
• Add checks to ensure user does not stock beyond the maximum quantity
• Call restock_kit to submit the restock order

Add jest tests for the components in the `components/Admin` directory

Add jest tests for the components in the components/Admin directory

• Proper rendering of order/loans list
• Working accordion
• Working pagination
• Search filters functions correctly

Originally posted by @jonasgwt in #103 (review)

Add new expiry to items

Add an option to let users create a new expiry for an item

• Only items that already has an expiry can add a new expiry
• Option should only be available when user click on deposit

After clicking Deposit, immediately contact BE and add the new item expiry

• Instead of 'Deposit', use 'Submit'
• Add an alert on click on submit to tell the user that it will not be added to cart and will be submitted immediately.

References:

Fix fabian and win hon

Cart checkout page