Logs

Account Logs (UI Flow)

This section describes the Account Logs UI. It allows users to view their account usage history and security-related events.
Each log entry displays important details such as date/time, message, IP address, PC user, and User-Agent.

1) Page Header

Title: Account Logs
Subtitle: View your account usage history and security events

The header clearly informs users that this page contains their account activity logs
(such as login attempts, user actions, and security events).

2) Filter Bar (Search)

Below the header, there is a search bar:

Input ID: searchBox
Placeholder: Search logs...

As the user types, the logs list is filtered client-side (both desktop and mobile views).

3) Desktop View (Table/List Layout)

The desktop view appears only on MD+ screens.

d-none d-md-block → hidden on mobile, visible on desktop

A) Header Columns

Date
Message
IP Address
PC User
User Agent

B) Each Log Row

Each row contains the following information:

Date: displayed in M d, Y format
Time: displayed in h:i A format (shown below the date in the same column)
Message (logdata): full text displayed, with a tooltip using the title attribute
IP Address: styled using hwid-blur text-info (privacy / blur-style formatting)
PC User: also displayed inside hwid-blur (masking/blur style)
User Agent: browser/device string with the full value visible via tooltip

C) Empty State

If no logs are available:

No log records found.

4) Mobile View (Card Layout)

The mobile view appears only on smaller screens:

d-md-none → hidden on desktop, visible on mobile

For the mobile layout, the result pointer is reset:

$result->data_seek(0) → allows the same database result to be looped again

A) Card Top Section

Date + Time: displayed as M d, Y @ h:i A
Message Badge: a badge-style message (logdata) displayed on the right side

B) Card Details

IP Address (hwid-blur + text-info styling)
PC User (hwid-blur styling)
Agent (ellipsis/truncated display for long user-agent strings)

C) Empty State

If no logs are available:

No log records found.

5) Search Filter Script (Client-Side)

The search logic is attached when the page loads (DOMContentLoaded):

Triggered on the keyup event of #searchBox
All rows are selected using: .log-row
Each row’s innerText is compared in lowercase
If the input matches → the row is shown
If it does not match → the row is hidden

Benefit: users get instant filtering without needing to reload the page.

6) Where This Feature Is Used

Account Logs are mainly used for security monitoring and activity tracking, such as:

Account security monitoring — detecting suspicious activity
Login and usage history — users can review their account activity timeline
Device tracking — User-Agent shows browser and device information
IP tracking — helps detect unusual IP changes or repeated access attempts
Support and debugging — logs help provide context when users report issues

7) Benefits of This Feature

Users can easily review their account activity
Security events remain visible (IP changes, agent changes, suspicious actions)
Quick search allows users to find specific log entries instantly
Detailed table view on desktop and clean card view on mobile — both user-friendly

Account Logs (UI Flow)#

1) Page Header#

2) Filter Bar (Search)#

3) Desktop View (Table/List Layout)#

A) Header Columns#

B) Each Log Row#

C) Empty State#

4) Mobile View (Card Layout)#

A) Card Top Section#

B) Card Details#

C) Empty State#

5) Search Filter Script (Client-Side)#

6) Where This Feature Is Used#

7) Benefits of This Feature#

Account Logs (UI Flow)

1) Page Header

2) Filter Bar (Search)

3) Desktop View (Table/List Layout)

A) Header Columns

B) Each Log Row

C) Empty State

4) Mobile View (Card Layout)

A) Card Top Section

B) Card Details

C) Empty State

5) Search Filter Script (Client-Side)

6) Where This Feature Is Used

7) Benefits of This Feature