Getting Started with the Platform

With simple steps, users can easily start using the platform and begin exploring the various available functions and applications.

Logging into the Platform for the First Time

To log into the platform for the first time, follow these steps:

1. Open the website: The user opens a web browser and enters the platform website address.
2. Log in: Upon opening the page, an external interface of the platform will appear. It will contain a "Log In" button, and icons for settings and the sidebar. The user clicks on the "Log In" button.
3. Fill in login information: The login form will open, asking the user to fill in the following fields:
   • Username or email (mandatory)
   • Password (mandatory)
   • "Remember me" option (optional) to save login information
4. Forgot Password?: If the user forgets their password, they can click on the provided link to reset their password.
5. Log in: After filling in the login information, the user clicks the "Log In" button.
6. Landing Page: After successfully logging in, the user will be directed to the landing page. It will contain options such as "About the Platform," "Platform Lessons," and "Start Using the Platform." The user clicks on the "Start Using the Platform" option.
7. Pop-up windows: A series of successive pop-up windows may appear explaining the initial login steps to the platform. The user can click the "Next" button in each window to proceed or click "Skip" to bypass these windows.
8. System Interface: After completing these steps, the user will be directed to the main system interface of the platform where they can browse and use the various available features and applications.

How to Access the Platform

Initially, after obtaining a system administrator account on the platform, accounts with system administrator or regular user permissions can be created within the organization settings. For more details, click here. The platform allows access to the created application using a mobile phone or web browser with your account.

Main Interface

Interface Layout

The main user interface design consists of several sections that effectively enhance the end-user experience:

1. Sidebar: Appears on the left side of the screen and contains lists of services and pages available to the end user according to their permissions. Additionally, the sidebar includes an administration list for users with administrative permissions.
2. Top Bar:
   • Home Icon: Allows the user to navigate to the application’s homepage and displays the browsing path.
   • Search Icon: Enables the user to search for system entities and units quickly.
   • Counters: Displays information related to a specific view, such as statistics or important details.
   • Notifications: Shows all notifications received by the current user to keep them updated on important events and updates.
3. Account Information: Appears at the top right of the interface and contains the user’s system account name with their email address. Clicking on this section reveals a dropdown menu with the following options:
   • Profile: Allows the user to edit their personal account information.
   • Help: Provides support and assistance for any inquiries or issues.
   • Start Tour: Enables the user to start a tutorial to explore the application’s features.
   • Logout: Allows the user to log out of their account.
   • Language and Display Settings: Allows the user to customize their preferences such as application language and display settings like font size, layout mode, and icon design.
4. Display Area: Located in the center of the screen, it is used to show details of the option selected from the sidebar, helping the user interact and work effectively within the application.

Navigation and Browsing

The design of the main interface enhances the user experience and includes the following sections:

1. Interface Layout: For more details on the interface layout, click here.
2. Sidebar: Located on the right side of the screen, for sidebar details click here.
3. Display Area:
   • Located in the center of the screen, it is used to show details of the option selected from the sidebar.
   • It displays the user’s content or specified data.
4. Settings Icon:
   • Located on the left side of the screen.
   • Allows the user to access and customize application settings.
   • The user can change display settings and the application language through this icon.

For navigation and browsing within the application:

• The sidebar can be used to explore various services and pages. Simply click on the item you wish to explore.
• The top bar can be used to find information about personal settings and general application settings, including display and language settings.
• The display area will show the content selected based on the option chosen from the sidebar.

This design makes navigation and browsing within the application easy and convenient for the user, providing quick access to necessary services and settings.

Changing Language and Display Settings

To change display and language settings within the application, follow these steps:

1. Click on the settings icon located on the left sidebar.
2. The settings screen will appear, containing the following options:
   • Font Size: You can adjust the font size according to your preference. Five different sizes are available. Click the (+) icon to increase the font size and the (-) icon to decrease it.
   • Layout Mode: You can choose your preferred layout mode:
     • Day Mode: Uses light colors.
     • Night Mode: Uses dark colors.
   • Menu Design: You can choose how the menu is displayed in the sidebar. There are four possible options:
     • Icons: Displays the main section icons in the sidebar next to the section names.
     • Fixed: Displays the main section icons in the sidebar with the section names next to them, showing the sub-options.
     • Floating: Hides the sidebar, and to display it, click the menu icon on the right of the top bar.
     • Modified: Shows only the main section icons in the sidebar.
   • Language: You can choose your preferred language, either English or Arabic.

In this way, the user can customize display and language settings according to their personal preferences.

Sidebar

The sidebar in the application changes according to the user’s permissions. Below is a detailed description of the sidebar content for both administrator and end-user accounts:

Administrator Sidebar:

1. Administration:
   • Contains general interfaces and counters for managing and monitoring the system.
   • Allows access to applications such as modules, entities, and values.
   • Allows access to services such as the service catalog and request list.
   • Provides access to organization information such as groups, user groups, users, roles, and organizational structure.
   • Allows management of permissions.

End-User Sidebar:

Services:

1. Contains the service catalog where available services are displayed as cards.
2. Allows the user to request services such as "leave request" from this interface.

My Requests: Shows the requests made by the current user from the service catalog in a table format.

Inbox: Displays all requests that require the current user’s approval in a table format.

Modules and Entities: Contains a group of different modules and entities that the user can access.

In this way, the sidebar content is customized according to the user’s permissions, where the administrator can access full system management, while the end-user can access services, track their requests, and work with specified modules and entities.

Current User

Signing Out

To sign out of the application, follow these steps:

1. Click on the username in the top bar of the interface.
2. A dropdown menu will appear containing multiple options.
3. Click on the "Sign Out" option from this menu.
4. You will be logged out of your current account and redirected to the login form where you can enter new account details if you wish to log in again.

In this way, the user can easily sign out of their current account in the application.

Changing and Recovering Password

To change and recover your password, follow these steps:

To Change Password:

1. Click on the username in the top bar of the interface.
2. A dropdown menu will appear, select "Profile" from this menu.
3. A screen will appear containing the current user’s information, including the option to "Change Password." Click on this option.
4. A change password form will open containing the following fields:
   • Old password.
   • New password.
   • Confirm new password.
5. Enter the appropriate values in the fields and click the "Change Password" button to confirm the change.

To Recover Password if Forgotten:

1. On the login page, click on "Forgot your password?".
2. A form will appear requesting you to enter the email address associated with your account.
3. Click the "Reset Password" button. You will receive an email containing a link to recover your password.
4. Click the link in the email, and you will be directed to the password recovery form.
5. Enter and confirm your new password, and click the "Recover Password" button to confirm the recovery.

In these ways, the user can change their password or recover it if forgotten.

Modifying User Profile

To modify the user profile, follow these steps:

1. Click on the username in the top bar of the interface.
2. A dropdown menu will appear, select "Profile" from this menu.
3. A screen will appear containing the current user’s information. Click the edit icon on the screen.
4. A screen will appear allowing you to edit personal information such as first name, second name, date of birth, gender, and upload a profile picture.
5. After modifying the information as needed, click the "Save" button to apply the changes.

In this way, the user can easily modify their profile information in the application.

Administration Interfaces

Differences Between User and Administrator Interfaces

The main difference between user and administrator interfaces lies in permissions and access to content and functions within the application. Here’s a more detailed explanation:

Administrator Interfaces:

1. Full Permissions: The administrator has full permission to view and control all services and pages within the application. They can access the administration section, including creating and editing content and settings.
2. Access to Administration: The administrator can access the administration section and make necessary modifications to the system, such as adding new users or modifying their permissions and configuring general application settings.
3. View All Services and Pages: The administrator can see all available services and different pages within the application, regardless of access permissions.

User Interfaces:

1. Limited Permissions: The user has limited permissions based on their role or level within the application. Their permissions may be restricted to accessing only the services and pages they have access rights to.
2. Limited Access: The user can access only the services and pages they are authorized to access. They will not see content or functions beyond their permissions.
3. Limited Capabilities: In many applications, regular users have limited capabilities compared to administrators. For example, they may be able to submit service requests and monitor their status but will not have the ability to modify system settings or access sensitive information.

This way, a different experience is provided for the administrator and user within the application, where the administrator can access all functions and content, while the user’s permissions are limited to the functions and content granted by the system administration.

Main Sections of Administration Interfaces

The main sections of the administration interfaces are clearly and comprehensively described. These sections form the core elements that the administrator can access and control within the application. The main sections can be summarized as follows:

1. Interfaces:

• General: Allows managing general application information, external pages, and performing additions and modifications.
• Counters: Allows the administrator to add and edit counters and display them as a table.

2. Applications:

• Modules: Displays and manages various modules within the system and allows the addition of new modules.
• Entities: Displays entities and allows adding new entities.
• Lists: Allows managing values and adding new values.

3. Services:

• Service Catalog: Displays and manages services and allows adding new services.
• Request List: Displays and manages requests.

4. Organization:

• Groups: Allows managing groups and adding new groups.
• User Groups: Displays and manages user groups and allows adding new users to groups.
• Users: Allows managing users and adding new users.
• Roles: Displays roles and allows adding new roles.
• Organizational Structure: Displays the organizational structure and allows adding new organizational units.

5. Permissions:

• Users: Allows assigning specific permissions to users, such as manage, modify, view, and none.
• Groups: Allows assigning specific permissions to groups, such as manage, modify, view, and none.

These main sections represent the core components of the administration interface, allowing the administrator to manage and monitor the application’s activities and content comprehensively. These interfaces provide the necessary functions to manage and customize the system according to the organization’s needs.