• Home Page : '/'

• Home Page : '/'

• Home Page : '/'

• Home Page : '/'

FRONT-END:

• login Page : '/login'

When you open website

• Home Page : '/'

When you login, you can see Header and Last of activities, programs, and students

• activities Page : '/activities'

When you click on activities in Header, you can see all activities

• addActivity Page : '/addActivity'

When you click on add activity button will redirect to addActivity page in programs, you can see a form

• ActivityDetails Page : '/activityDetails/:id'

When you click on a activity in table will redirect to activityDetails Page, you can see details of this activity

• programs: '/programs'

When you click on programs in Header, you can see all programs

• addProgram Page : '/addProgram'

When you click on add program button will redirect to addProgram page in programs, you can see a form

• programDetails Page : '/programDetails/:id'

When you click on a program in table will redirect to programDetails Page, you can see details of this program

• users Page : '/users'

When you click on users in Header, you can see all users

• addUser Page : '/addUser'

When you click on add user button will redirect to addUser page in programs, you can see a form

• pageNotFound Page : '/pageNotFound'

When there is not any end-points from above

BACK-END:

• login Page :POST '/login'

• activities Page :GET '/activities'

• activities Page :GET '/programs'

• activities Page :GET '/users'

• activities Page :GET '/objectives'

• addActivity Page :POST '/addActivity'

When you click on Add button , After fill form it will stored to DB, and redirect to activities page

• activities Page :POST '/addStudentToActivity'

When you click on Add button , After fill form it will stored to DB, and redirect to activities page

• addProgram Page :POST '/addProgram'

When you click on Add button , After fill form it will stored to DB, and redirect to programs page

• addUser Page :POST '/addUser'

When you click on Add button , After fill form it will stored to DB, and redirect to users page

• Add noDataText and loading property to react-table Table component.
• Pass noDataText and loading from our container Table component.
• Each time we call the table, we need to add the properties noDataText and loading.

All the activities in the table need a link to their information page. Right now, there's no way of getting to this page in the UI.

Database

Database schema:

Database queries:

• get user by username and password:
  Need to check if the user exists in database users table, to check if he is authenticated (on login route).

• Get activities:
  Need to return all activities from activities table on the database.

• Add new activity
  Need to create new activity and set it into activities table of the database.

• Add student to activity.
  Needs to create a new row on the activities_users table, to relate the user to the training.

• Create new program
  Needs to create (insert) a new program into programs table of the database.

• Add new user
  Needs to create new user into users table of the database.

• Get programs
  Need to get list of programs from 'programs` table of the database.

• Get activity by id
  Need to get activity details using its id.

• Get program by id
  Need to view program details using its id

• Get activities by program id
  Need to get list of activities that related to the program

• Get activities by objective id
  Need to get list of activities that related to the objective.

• Get students by activity id.
  Need to get all students related to activity id.

• Create new file on src/validation/.
• Create a function inside that have req, res, next parameters.
• Check for the request body if it's valid or not.
• if yes, run the next() function passed with parameters.
• if not, send {success: false, err: 'Invalid inputs'}

• Add <StyledPage> to the ActivityInformation component.
• Add <Table> component inside the styled page component.
• Create an endpoint that get the student users from the database.
• Handle the response and form the columns and data properties.
• Add properties to the table component.
• Also noDataText and loading properties will be required.

Front-end tech:

• React
• react-router-dom
• react-table
• styled-components
• formik

Back-end tech:

• ExpressJS
• Mongoose (MongoDB).

• Create add program page /addProgram in React Router

• Create end point for addProgram Page

• Add Header from Header component

• Add program form using Form component.

• Add Button.

Here:

https://github.com/FACK1/M-A-Platform/blob/master/client/src/components/pages/ViewActivities/index.js#L15-L27

I think you changed the render as this was just a constant, but you kept the function here, pretty sure you don't need?

Create add program page /addUser in React Router

Create end point for addUser Page

Add Header from Header component

Add User form using Form component.

Add Button.

I want to connect each programme with its details so when the user press on programme name on programmes table will be redirected to new endpoint which has th details

The hours field need to be converted from a timestamp into hours.

• getActivitesByProgramId queries to take the name of each activity and the number of students.

• Create initial ActivityInformation component.
• Create initial ActivityDetails component
• Use props to pass the activity details.
• Pass activity details props from ActivityInformation to ActivityDetails.
• Use props to create ActivityDetails component.
• Add Students table using Table component.
• Add student Button.

• Create initial ProgramInformation component.

• Create initial ProgramDetails component

• Use props to pass the program details.

• Pass program details props from ProgramInformation to ProgramDetails.

• Use props to create ProgramDetails component.

Shared components

• Nav bar

• Form

• Button

• Table

• Add Button

Create activity page

• Create Activity

• Form (shared)

• Button (shared)

View activities list

• View Activities

• Table (shared)

• Add Button (shared)

Activity information page

• Activity information

• Add students table

• Add Button (shared)

Add student page

• Create Student

• Form (shared)

• Button (shared)

Students list page

• View Students

• Table (shared)

• Add Button (shared)

Create program page

• Create Program

• Form (shared)

• Button (shared)

Programs list page

• View Programs

• Table (shared)

• Add Button.

Login

• Login page

• Form (shared)

• Button (shared)
  

• Add get students by activity id end-point
• Request the data on the react app.
• Add columns responsed from the students table on activity information page.

• Add initial form to activity information page.
• Create new express route that get user name and response with list of search for the user, each user should have id, name and date of birth.
• Handle the response and create list of fields.
• Show the list on the suggested list of the inputs
• connect the suggested inputs with the user name id, and if admin choose one, update the value of user id on the state.
• Create new end point to add student to some activity )using activity and user ids.
• Make a request that save the new user and handle it's result.

• Re customize the design

For React App:

  |__ public
  |     |__ index.html
  |    
  |__ src
  |     |__ app.js
  |     |__ index.js
  |     |__ components
  |             |__ Header
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__ Form
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__ Button
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__ Table
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__ AddButton
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__  AddAutoButton
  |             |      |__ index.js
  |             |      |__ index.css
  |             |
  |             |__ Pages
  |                    |__ CreateActivity 
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__  ViewActivities
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__  ActivityInformation
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__  CreateStudent
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__   ViewStudents
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__   CreateProgram
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__   View Programs
  |                    |           |__ index.js
  |                    |           |__ index.css
  |                    |
  |                    |__  Login page
  |                                |__ index.js
  |                                |__ index.css
  |         
  |__ .eslintrc
  |__ .babelrc
  |__ .gitignore
  |__ package.json
  |__ package-lock.json

For Express Server

  |__ src
  |     |__ mongoose.config.js
  |     |__ router.js
  |     |__ server.js
  |     |__ app.js
  |     |__ controllers
  |     |       |__ user.controller.js
  |     |       |__ program.controllers.js
  |     |       |__ objective.controllers.js
  |     |       |__ auth.controllers.js
  |     |       |__ activity.controllers.js
  |     |
  |     |__ middlewares
  |     |       |__ checkAuth.middleware.js
  |     |
  |     |__ validations
  |     |       |__ checkUser.validation.js
  |     |       |__ checkProgram.validation.js
  |     |       |__ checkActivity.validation.js
  |     |       |__ checkObjective.validation.js
  |     |
  |     |__ models 
  |             |__ User.model.js
  |             |__ Program.model.js
  |             |__ Activity.model.js
  |             |__ Objective.model.js
  |             |__ ActivitiesUser.model.js
  |             
  |__ .eslintrc
  |__ .gitignore
  |__ package.json
  |__ package-lock.json

• As the manager of YDRC, I want to be able to see details of one activity in the YDRC.

• As a YDRC manager, I want to be able to see all YDRC programs list.

• As a YDRC manager, I want to be able to see the YDRC activities list.

• As a YDRC manager, I want to be able to see a list of users that are part of the YDRC community.

• As the manager of YDRC, I want to be able to see details of one program in the YDRC.

• As the manager of YDRC, I want to be able to add a new program in the YDRC.

• As the manager I want to be able to add a new activity related to program in the YDRC.

• As the manager I want to be able to add a new person to the YDRC platform and pick their type (student/manager).

• As the manager I want to be able to put a student in an activity in the YDRC.

• As the manager of YDRC, I want to be able to download an excel version of my contact list.

• As the manager of YDRC, I want to be able to upload an excel version of my contact list.

• As the manager of YDRC,I want to be able to log out.

• As the manager, I want to be able to browse YDRC objectives and programs under it.

• As a YDRC manager, I want to be able to log in using a premade username and password.

• As a YDRC manager, I want to be able to see statistics for all programs in the YDRC.

• As the manager of YDRC,I want a secure site to store user data.

• As the manager of YDRC,I want to be able to upload attendances as pdfs as a backup to refer to later.

• As the manager I want to see a home page with the latest statistics on activities and contacts.

• As the manager I want to be able to send alerts/messages to user list.

• Host the site on Heroku & make sure it works well.

When add new activity:

• Place is not village or city, he can type anything he want.
• Default values is not taken, it's taken just if we change it's value one time at least.

Copy the date Parser function from:

https://github.com/FACK1/M-A-Platform/blob/cd648f08df1be174df29e962944fb26b4b68bf4b/client/src/components/ActivityDetails/index.js#L34-L39

and use it to display the date on the table.

• View programs

• Create view programs page /ViewProgram in React Router

• Create end point for viewProgtam Page

• Add Header from Header component

• Add program table using Table component.

• Add new program Button.