top of page

UI Showcase

6 1.png
Group 2_2x.png
Group 83.png

Here are some of the UI projects that I've been involved with in the company, working with a team of developers, by providing training material for our interns, and addressing other company concerns.

EQUIP LINK: ADMIN LOG IN FORM

Admin Log-in.jpg

Functionality Overview

  • Login Fields: Users enter their username and password to access their accounts.

  • Error Notifications:

    • "User not found" appears in red under the username field for invalid entries.

    • "Password incorrect" is shown in red for mismatched passwords, enhancing error awareness.

  • Remember Me Option: A checkbox allows users to stay logged in for 30 days, promoting convenience.

  • Call to Action: The "Sign In" button enables users to access the application after verifying their credentials.

  • Forgot Password Link: Offers users a way to recover their password, ensuring accessibility and support.

EQUIP LINK: SIDEBAR

Group 86.png

Functionality Overview

  • Dashboard: Access to the main dashboard summarizing key metrics.

  • Employee Overview: Insights into employee profiles, focusing on staff management.

  • Employee Feedback: A section for gathering input, emphasizing the value of user feedback.

  • Log-out: Securely exits the application.

  • Feedback Section: Highlights "Your Feedback Matters," encouraging users to share concerns and suggestions for continuous improvement.

  • Call to Action: The "Get Support" button invites users to seek assistance, enhancing engagement and support access.

EQUIP LINK: ADMIN INVENTORY PAGE

Admin DX Inventory Overview.jpg

Functionality Overview

  • Employee Information Section: Displays key user details, including:

    • Employee ID: Unique identifier.

    • Job Title: Role in the organization.

    • Department: Work area.

    • ID No.: Additional identification number.

  • Device Overview Table: Lists devices associated with the employee:

    • Device Name: Identifies each device.

    • Device Model: Specifications.

    • Device Serial Number: Unique tracking ID.

    • Device Release Date: Issuance date.

    • Last Checked: Last maintenance date and location.

    • Device Status: Admin can view, edit, and delete devices.

INTERN ATTENDACE: ADMIN LOG IN 

xl (1)-Photoroom.png

Functionality Overview

  • Login Fields: Users enter their username and password to access their accounts.

  • Error Notifications:

    • "User not found" appears in red for invalid usernames.

    • "Password incorrect" is shown in red for mismatched passwords, providing immediate feedback.

  • Call to Action: The "Sign In" button facilitates login attempts, granting access to the application's features.

INTERN ATTENDACE: ADD INTERN FORM

Add Inter.png

Functionality Overview

  • Header: Clearly labeled "Intern List" for managing intern details.

  • Profile Photo Upload: Option to upload a profile picture for personalization.

  • Intern Information Section:

    • Fields for first, middle, and last names for comprehensive identification.

    • Start date to track the intern's position.

    • School name and address for educational affiliation.

  • Username and Contact Information:

    • Field for creating a username for system access.

    • Gender selection and contact number for demographic data.

  • Add Intern Button: Allows users to efficiently save and add new interns to the system.

INTERN ATTENDACE: INTERN LIST PAGE

Intern List.png

Functionality Overview

  • Header: Labeled "Intern Attendance" for tracking intern presence.

  • Date and Intern Filter:

    • Date Input: Specify the attendance date (e.g., 2020-12-03).

    • Intern Name Filter: Search for specific interns (e.g., Lucy) to enhance usability.

  • Attendance Table: Lists interns with essential details:

    • Name: Full name for easy identification.

    • School Name: Educational institution affiliation.

    • School Address: Location details for reference.

    • Contact Number: Intern's contact information.

    • Username: For system identification.

    • Image: Placeholder for the intern's profile picture.

FLEET MANAGEMENT: ADMIN LOG IN 

xl-Photoroom.png

Functionality Overview

  • Login Fields: Users enter their username and password to access accounts.

  • Error Notifications:

    • "User not found" (in red) for invalid usernames.

    • "Password incorrect" (in red) for mismatched passwords.

  • Call to Action: The "Sign In" button facilitates login attempts, granting access to application features.

FLEET MANAGEMENT: SIDEBAR

Fleet Dashboard.png

Functionality Overview

  • Dashboard: Overview of key metrics for fleet management.

  • Owner: Information and tools for vehicle owners.

  • Employee: Manage employee details and roles.

  • Company: Options for managing company information and settings.

  • Vehicle: Access vehicle details and management tools.

  • Insurance: Manage insurance policies for the fleet.

  • Inventory: Displays parts and supplies inventory.

  • Taxi: Management features for taxi services.

  • Garage: Tools for garage management and maintenance records.

  • Transaction: Handle financial transactions for fleet operations.

  • Fuel: Insights into fuel consumption and management.

  • Settings: Customize application settings and preferences.

FLEET MANAGEMENT:EMPLOYEE DRIVER FORM

Employee-Driver-Form.png

Functionality Overview

  • Header: Labeled "Add Driver," indicating the page's purpose.

  • Profile Photo Upload: Option to upload a profile picture for personalization.

  • Details Section:

    • Fields for first, middle, last name, and preferred name.

    • Marital status selection for demographic insights.

    • Employee ID field for unique identification.

  • Contact Information Section:

    • Fields for the driver's email and telephone number for easy communication.

  • License Information Section:

    • Fields for license number and expiration date for compliance.

  • Save Button: Prominently displayed to save entered information efficiently.

bottom of page