SYSTEM GUIDE 101

A clear path through the system.

Follow the exact sequence from the flowchart. Administrators prepare the system; users complete their work inside it.

Start with admin flow Jump to user flow

At a glance

admin steps

user steps

Use the screenshot spaces in each step to show users exactly where to click.

Quick find

Find a screen

01 / ADMINCreation of Sites 02 / ADMINCreation of Departments 04 / ADMINCreation of Users 01 / USERUser Login

01 / Administrator

Admin flow

Set up the locations, departments, users, and itineraries before employees begin using the system.

Creation of Sites

Go to the site management section.
Create the needed sites or locations.
Save the site information.

Purpose: Prepare the work locations used in the system.

Screenshot placeholder

Add the Sites screen and the button used to create a site.

Creation of Departments

Open the department section.
Create each department needed.
Save the department record.

Purpose: Organize the structure of the company or business unit.

Screenshot placeholder

Add the Departments screen and create department button.

Linking Sites to Departments

Connect each department to the correct site.
Make sure the department is assigned to the right location.
Save the link.

Purpose: Connect staff and departments to the correct work area.

Screenshot placeholder

Add the screen showing where a site is linked to a department.

Creation of Users

Open the user management section.
Add all required users.
Enter the user information and account details.

Purpose: Create employee records before assigning them to departments.

Screenshot placeholder

Add the Users screen and add user form.

Assigning Users to Departments

Select a user.
Assign the user to the correct department.
Confirm the assignment is saved.

Purpose: Link each employee to the proper department.

Screenshot placeholder

Add the user department assignment controls.

Assigning Users Itinerary

Open the itinerary or assignment section.
Choose the user and assign their itinerary.
Save the assigned itinerary.

Purpose: Tell the user what task, schedule, or assignment to follow.

Screenshot placeholder

Add the itinerary or assignment screen and save button.

02 / Employee

User flow

Once the admin setup is complete, users can register, secure their account, record attendance, and submit their itinerary.

User Login

Enter the user email and password.
Log in to the system.

Add Login screen + Login button

User Credentials Registration

If new, register the account.
Fill in the required personal information and credentials.
Complete registration.

Add registration form + Register button

PIN Registration

Create a personal PIN.
Confirm the PIN.

Add PIN registration screen

Face Registration

Complete face registration.
Finish the capture process.

Add face registration + capture control

Main Menu

After successful registration, the main menu appears.
Access the available system features.

Add Main Menu with available features

Time IN/OUT

Open the attendance feature.
Press Time In when starting work.
Press Time Out when finishing work.

Add Attendance screen + Time In/Out buttons

Submission of Itinerary

Open the itinerary or assignment screen.
View assigned tasks or schedule.
Submit the itinerary.

Add assigned itinerary + submission button

Viewing Submitted Itinerary Attachments

Open the submitted itinerary section.
View uploaded attachments or submitted records.

Add submitted itinerary + attachments

03 / Complete sequence

One system, two connected flows.

The admin prepares the structure. The user follows the assigned work and records what happened.

ADMIN SIDE

Create Sites → Create Departments → Link Sites → Create Users → Assign Departments → Assign Itinerary

USER SIDE

Login → Register Credentials → Register PIN → Register Face → Main Menu → Time IN/OUT → Submit Itinerary → View Attachments

Screenshot checklist

Add images without editing the layout.

Add each file path to the screenshotImages object in the JavaScript. Add multiple paths when one step needs more than one image.

Recommended folder: assets/documentation/