mohamed-abdul-fattah / life-system Goto Github PK

Integrate implemented static chart with expenses data.

Check the Github dependabot alerts for security issues found in libraries we use. Here we have a high security severity vulnerability in y18n, one of our used JavaScript libraries. We need to upgrade to one of the patched versions.

Setup Sass starter file with a selected architecture (BEM for example).

Please, remove the charts except the pie chart as it is the required one. Add no toggles to present the chart and its labels and keep simple.

Redesign the homepage using Sass. Please, note that the current implementation doesn't support any data for charts or analysis. So, lets stick to the current implementation and implement the charts in a later issue.

Design an empty state when there are no expenses in expenses page.
Steps to get the empty state

1. Navigate to expenses page
2. Remove all expenses

Expected
An empty state describes that there are no expenses yet. Or add your expenses right now.
Actual
An empty page

Node sass dosent support node version 15
https://github.com/sass/node-sass/releases/tag/v4.14.1

Install the PHP Overcommit.

Add a filter bar to the top page of expenses list to search the expenses by their comment, category, amount, or creation date. Filter criteria is as follows

1. comment search is a text input search field
2. category search is a drop down list
3. amount search is a bar with minimum and maximum (search in between these amounts). Min and max amounts are provided by the back-end.
4. creation date search is a date-picker to select a beginning search date.

Please, remove the collapse option for comments on the mobile view as I do need to display all of the comments in front of me to review my expenses in the mobile view. No need to harden the UX by clicking on every collapsed comment to expand.

Change the delete action alert confirmation message to a popup modal like Bootstrap modals.

Redesign the login page using Sass. Please, keep in mind that we have no registration module available currently. So, stick to the current implementation.

Our new commit messages would be in the following format for better traceability for the history of every issue. Issue number is for finding the ticket/issue description for any given commit.

[Issue-num] Subject
Blank line
Long description... if any

E.g.

[Issue-7] Login page

Or

[Issue-7] Login page

Login page using Sass and ...

Records are randomly ordered when they have the same date.

Redesign the add expense webpage using Sass.

We need a migration mechanism to run raw SQL scripts to migrate our database.

Redesign the expenses list past using the Sass pre-processor.

Dockerize the project so that no exe installations are needed.

Use PHP PDO database class to abstract database usage in an active record architecture.

Add a form for new users to register.
Form elements are

• Full name
• Email
• Password
• Password confirmation

Elements should be validated as follows

• Full name: required and should be string with 100 chars long
• Email: required and should be a valid email format
• Password: required and should contain English alpha and numeric digits, and cannot be less than 8 chars and greater than 32
• Password confirmation: required and should match the password field

Registered users should be redirected to login page.

Let's add an add expense button to the homepage to save a request to the list expenses page to add a new expense. Kindly, consider using a button like this Google material one.

[TASK DESCRIPTION]
Add a registration form for new users to register.
Form elements are

• Full name
• Email
• Password
• Password confirmation

Registration form should be accessed from Login page. A link under the login page saying Or register if you do not have account.

[TASK DESCRIPTION]
Add a donut chart to the homepage classifying the current month expenses by their categories. Donut chart criteria is that expenses are classified by their categories and each category has a different color.

[TECHNICAL DETAILS]

• Use Google charts to implement the donut chart. Here is the donut chart docs.
• Add the chart with some dummy data and leave fetching the real data to another backend task.
• Make it responsive.

Fix the current HTML structure with no CSS to be able to display content.
Fixes are

1. Expenses list
2. Expenses deletion
3. Header

Create a new page to create categories.

Remove developed styles and return to the most simple form.

Create simple wireframes for the current pages new design. Current pages include the following

• Login
• Homepage
• List expenses
• Add new expense
• Edit expense

You can use draw.io to create simple wireframes like the following example wireframe
Wireframes are as simple as just designing the layouts for a page to get an overview of the design

Redesign the edit expense webpage using Sass.

Mobile design is corrupted after adding the categories column to expenses list table.