Counseling Web App (CI)
Simple Login Display
Blurred Background, logo, two simple textboxes, and a single button. This login screen is nothing but directly visualize what this page for.
When User failed to provide the correct credentials, they will be notified by alert panel that will trigger automatically after User pressed the login button or pressed enter in their keyboard.
We can log in with 5 different levels: Headmaster, Administrator, Counseling Teacher, Teacher, and Parent. All these levels have different privileges to meet their needs.
Informative Dashboard
The dashboard holds the information about school rules, student occurrences, and interaction of parent and teacher.
All these three panels hold the sum of all events in their respective description. When we click it, they also go into their respective page.
In the lower panel, we have a graph of student occurrences in timeline. We can filter out this graph into a certain date, one day or the whole year. It is also possible to export the graph into an image or PDF.
School Rules
The school rules page consists of two subpages, creation and display pages. In the creation page, we can fill in the name, point, and type of school rules. All fields are mandatory and should be filled in.
At school rules display page, we are presented with a list of school rules. It is possible to edit and delete school rules with its respective button on the right side of the list.
Student Occurrences
The student occurrences page consists of 4 subpages, first one is the creation page. There are 4 fields to fill, the student name, school rules name, date, and time. All fields are mandatory and should be filled in.
Next we have student occurrences list page. In this page we can see which student have which occurrences. We can comment, edit, or delete occurrences with its respective button on the right side of the list.
The third page is score page. We can look at this page which student have the highest score or the lowest score. Not only that, it is also possible to look the detail of its student and also print the report into PDF.
The last one is report and export page. We can export the whole student occurrences, or filter it based on date range, student class, or type of occurrences. All data will be exported into spreadsheet / Microsoft Excel format.
Export and Report

PDF

This PDF is generated from the score page. The main objective of this report is to inform the parent of the student whenever the institution needs to.
It consists of two pages, this page shows the detail from the respective student and its occurrences. From the starting point, into a sum of the final point the student has.

Spreadsheet

This spreadsheet is generated from the report and export page. Based on the certain filters at that page, such as date range, student class, and type of occurrences, it is possible to export this report into excel for further use.
App Setting
The interesting part of this app is, we can decide the starting point of all students. Not only that, but we can also toggle whether this app needs a reward feature or not. Also, we can toggle whether we need to subtract or add when the student has a violation.
We can also change the text of the letterhead, all parts of the letterhead are shown with the hint button on the left side of the page.
Parents Interface
When we logged in as a parent, the first thing we see is a dashboard with a panel for each child registered in the app. The interface is simple to prevent confusion when navigating through the app.
When we click one of the children, it opens a new page showing detail of the respective child's occurrences. As a parent, we can comment or discuss with the teacher about the specific occurrences.
Notification
Clear Information
When parents or teachers commented on specific occurrences, their interlocutors will be notified by the app. The bell icon located on the top right will be changed to have a red squared colored icon. Indicated someone has been commenting with specific occurrences.
It consists of four-rows of text. The first one is the role and the name. The second row is the student name. The third one is the occurrences, and the last one is date time when that event occurs.
When we click it, it will go to the forum page which is we can see more detail and thorough about specific occurrences.
Interactive Forum
The teacher and parent can communicate on this page. All they have to do is write a comment in the textbox and press the send button to send their message. Thereafter their interlocutors will be notified by the app.
The forum page can be a two-way communication between the teacher and its parent. With this facility in this app, we expect reporting student occurrences will be more convenient and straightforward.
Counseling Web App (CI)