User Guide for Tau Gamma Phi One Pampanga Triskelion Provincial Council
Table of Content
1. System Requirements
1.1 Hardware Requirements x
1.2 Software Requirements x
2. Accessing the System
List of Figures
Landing Page x
Member Verification Process x
Additional Information x
Additional Information with Member Data x
Registration Complete x
Admin Login x
Admin Dashboard x
Manage Logo x
Add New User
Registered Users x
Registered Member x
Member Information x
Member Information with approval x
Issuance of Card x
Issuance of Certificate x
1. System Requirements
1.1 Hardware Requirements
Category Hardware Requirement
Server Web server (GoDaddy)
CPU Multi-Core Processor
RAM 4 GB or higher
Device PC/Laptop
Peripherals Camera
Web Browser Google Chrome/Microsoft Edge
Storage SSD with 100 GB or more
1.2 Software Requirements
Category Frameworks
Frontend Vue Js, Vuetify 3, Vite
Backend PHP (Laravel)
Server Apache
2. Accessing the System
Figure 1. Landing Page
The Triskelion Kapampangan Portal serves as an online platform for members of the Tau
Gamma Phi (Triskelion Grand Fraternity) in Pampanga. Upon accessing the website, users are
greeted with a visually engaging homepage featuring the organization's emblem, a prominent
slogan, and various chapter logos. At the top of the page, the navigation bar displays the
fraternity name and provides a Register button for new members to sign up.
Figure 2. Member Verification Process
To register on the Triskelion Kapampangan Portal, users must first complete the member
verification process. The verification screen requires users to input their First Name, Middle
Name, Last Name, Suffix (if applicable), and Date of Birth. These details must be accurate
and match the fraternity's records to ensure proper authentication.
Before proceeding, users must check the box confirming their agreement to the Terms
and Conditions. Once all fields are filled correctly, clicking the Verify Member button will
initiate the validation process. If the provided information matches existing records, the member
will proceed to the next step, Additional Information, leading to the final step, Registration
Complete.
Figure 3. Additional Information
Figure 3.1. Additional Information with Member Data
Once verification is complete, members must provide additional details, including sex at
birth, contact number, and blood type. Address information, such as region, province,
municipality, and barangay, must also be entered. Furthermore, fraternity-related details,
including council, chapter, date of birth (T-Birth), batch name, grand Triskelion, deputy grand
Triskelion, and M.W.W., must be filled out. Member are also required to upload a profile photo
by selecting a file from their device. Once all fields are properly completed, clicking the
"Continue" button allows them to proceed to the next step.
Figure 4. Registration Complete
The final step confirms the registration process, where members receive a temporary QR
code along with a unique registration number. It is essential to take a screenshot of this QR code,
as it must be presented to authorized personnel for further verification. The system informs
members that their registration is in progress and advises them to visit the nearest facility to
complete the necessary steps to obtain their official ID card. The displayed QR code is temporary
and should be used solely for verification purposes. Once users have completed this step, they
can click "Back to Homepage" to finish the process. Following these steps ensures a smooth
and hassle-free registration experience.
Figure 5. Admin Login
To access the Tau Gamma Phi (Triskelion Grand Fraternity) administrative system, users
must log in using their designated credentials. The login page features a clean and simple
interface with the fraternity’s official logo displayed at the top. Below the greeting message,
users will find two input fields labeled Username and Password. The username field requires
the administrator’s unique identifier, while the password field ensures secure access by masking
characters for privacy.
To log in, users must enter their correct credentials and click the Login button. If the
entered details are valid, they will be redirected to the admin dashboard, where they can manage
fraternity-related operations and oversee member registrations. In case of an incorrect username
or password, an error message may appear, prompting the user to verify their credentials and try
again. For security purposes, administrators should keep their login details confidential and
ensure they log out after each session, especially when using shared or public computers.
Figure 6. Admin Dashboard
Upon successfully logging into the Tau Gamma Phi Triskelion Grand Fraternity
administrative system, users are directed to the Dashboard, which serves as the central hub for
managing fraternity-related activities. The left-side navigation menu provides access to various
features, including User Defined Configuration, Registered Users, Audit Logs, and other
essential administrative tools. The Overview section of the dashboard displays key information,
such as birthday celebrants for the day, approval and pending status updates, and data tracking
through a graphical representation.
Administrators can filter data by selecting a start and end date, then clicking the Load
Selected Dates button to retrieve relevant information. Below the graphical representation, a
table provides a detailed breakdown of approvals, pending requests, and total counts based on the
selected date range. If no data is available, the system indicates this accordingly. Additionally,
pagination controls at the bottom allow users to navigate through different pages of records
efficiently.
For ease of use, the system ensures a structured layout where administrators can quickly
access and manage member details, oversee registrations, and track user activities. The Logout
button, located in the top-right corner, allows secure exit from the system to maintain
confidentiality and security.
Figure 7. Manage Logo
The Manage Logo section allows administrators to upload and update the official
fraternity logo to maintain a consistent and professional appearance across all documents,
identification cards, and digital assets. The current logo is displayed at the top of the page,
providing a clear view of the existing design.
To upload a new logo, users can click on the designated upload area, select an image file
from their device, and confirm the upload by pressing the Upload button. Below the main logo,
additional images related to fraternity branding, such as membership ID designs and emblem
collections, are displayed for reference. Once a new logo is uploaded, it is automatically applied
across the system, ensuring uniformity in all visual representations. This feature helps preserve
the fraternity’s identity and branding while allowing for easy updates whenever needed.
Figure 8. Add New User
The Add New User section allows administrators to create user accounts by entering
essential details. The form includes fields for user role, council affiliation, full name, date of
birth, and contact number. Additionally, the administrator must provide a valid email address, a
unique username, and a secure password.
To add a new user, the administrator must fill in all required fields and ensure accuracy.
The Clear button can be used to reset the form if needed, while the Submit button finalizes the
registration process. Once submitted, the new user account is created and can be used for system
access according to the assigned role.
Figure 9. Registered Users
The Registered Users section displays a list of all users currently registered in the
system. It provides essential details such as user role, first name, middle name, last name, email,
council affiliation, and account status. The search bar allows administrators to quickly locate a
specific user by entering relevant keywords.
Each user entry includes action buttons that enable administrators to manage user
accounts efficiently. The first icon in the table, which is green, is used for viewing user
information. The red button is for deactivating a user, ensuring that inactive or unauthorized
users can be restricted from system access. The blue button is for changing the user's password,
allowing administrators to reset credentials when necessary.
Additionally, the Search button helps refine the user list based on input criteria, while the
Clear button resets the search filters. This section ensures seamless management of user
accounts, allowing administrators to maintain an organized and controlled user database.
Figure 10. Registered Member
The Registered Members section displays a list of all members currently registered in
the system. It provides essential details such as TGF ID, member name, date of birth, council
affiliation, batch name, and membership status. The search bar enables administrators to quickly
find specific members by entering relevant keywords. Additionally, the Scan QR Code button
allows for quick registration or verification of members using a QR scanning feature.
Each member entry includes action buttons for efficient management. The first icon in
the table, which is green, is used for viewing the member’s information, allowing administrators
to access and verify details. The red icon is for deactivating a member, restricting their access if
necessary. The Search button helps filter the member list based on input criteria, while the Clear
button resets the search filters. This section ensures organized management of registered
members, helping administrators maintain accurate and updated records.
Figure 11. Member Information
The member profile interface provides a comprehensive view of a registered member’s
details. At the top, the member's profile picture, name, and unique TGF ID are prominently
displayed. Below the name, there is an edit button that allows modifications to the member's
information when needed.
The profile is divided into two sections: Personal Information and Fraternal
Information. The Personal Information section includes key details such as sex at birth,
contact number, and blood type. It also contains address information, including the region,
province, municipality, barangay, zip code, and other location details.
The Fraternal Information section provides details about the member's affiliation
within the organization. This includes their council, chapter, Alexis name, date of birth, batch
name, and leadership details such as the Grand Triskelion and Deputy Grand Triskelion.
Figure 11.1. Member Information with approval
A green "Approved" badge indicates the membership status, confirming the member's
successful verification. Additionally, a notification message at the bottom confirms the approval
process. Action buttons for "Certificate of Legitimacy" and "Issuance of Card" allow
administrators to generate official documents for the member.
Figure 12. Issuance of Card
The Issuance of ID Card interface provides a streamlined process for generating and
issuing identification cards for registered members. The system displays a preview of the ID
card, which includes the member’s name, photo, unique ID number, and affiliated council.
Additionally, the card features a QR code for authentication and verification purposes. The back
of the ID card showcases various official seals and emblems representing the organization’s
affiliations.
A "Save as PDF" button is available, allowing administrators to generate a digital copy
of the ID card for printing or future reference. This feature ensures that all members receive an
official and verifiable ID, maintaining the integrity and credibility of the organization's
membership records.
Figure 13. Issuance of Certificate
The Certificate of Legitimacy interface enables the generation of an official document
verifying a member’s affiliation with the organization. The certificate includes essential details
such as the member's full name, date of survival, batch name, chapter, and other relevant
information that authenticate their legitimacy. The document also bears official seals and
signatures, reinforcing its credibility.
A "Save as PDF" button is provided, allowing administrators to generate a digital
version of the certificate for printing or archival purposes. This feature ensures that every
member has a formal document certifying their legitimate membership within the organization.
Figure 13. Audit Logs
The Audit Logs section provides a record of system activities, allowing administrators to
track user actions and system modifications. This feature enhances security and accountability by
displaying a list of events with corresponding timestamps and descriptions. Upon accessing the
audit logs, users can view a structured table containing the date and time of the action, as well as
a brief description of the activity performed.
