Implementation Plan - Modern UI/UX Redesign for TMS Service App Home Screen
This plan details the modernization and redesign of the TMS Service App home screen (HomeFragment / fragment_home.xml).

The current design is a simple black screen with a clock and three floating action buttons. We will transform it into a premium, state-of-the-art Terminal Dashboard that provides real-time telemetry visual feedback, interactive action hubs, and elegant network connectivity indicators.

User Review Required
IMPORTANT

Key Architecture Decisions:

Git Branching: A new branch feature/modern-main-screen-ui will be created before modifying any code.
Real-time Diagnostic Loop: We will add a lightweight, lifecycle-aware background updater (running every 3 seconds) on HomeFragment to keep RAM, network data usage, printer status, and live MQTT/WebSocket states up to date.
Printer Integration: We are adding a "Print Test" quick action directly into the printer card which uses the built-in MoreFun printer SDK (Print.printSelf()) for instant field diagnostics.
Proposed Changes
1. Vector Icon Assets [NEW]
We will create modern, sharp vector drawables (XML) for our cards to avoid relying on standard, low-fidelity browser/android drawables:

[NEW] 
ic_apps.xml
: High-fidelity grid icon.
[NEW] 
ic_store.xml
: Premium shopping store icon.
[NEW] 
ic_screenshare.xml
: Modern screencasting device icon.
[NEW] 
ic_printer.xml
: Clean receipt printer icon.
[NEW] 
ic_ram.xml
: Microchip/memory icon.
[NEW] 
ic_exit.xml
: A sleek logout/exit indicator.
2. Layout Redesign
We will replace the simplistic layout of the home screen with a responsive, multi-layered dashboard:

[MODIFY] 
fragment_home.xml
Background: Modern deep-indigo/slate gradient background (#0A0E17 to #121824).
Header Section:
A clean title: "TMS SERVICE TERMINAL".
A digital clock running with TextClock.
Live Connectivity Status Pills:
MQTT connection status with dynamic color indicator (Connected = Emerald green background pill; Disconnected = Pastel red/coral pill).
WebSocket connection status with dynamic color indicator.
Hero Card (Terminal Identity & Status):
Shows Terminal Model, Serial Number (SN), OS details, and current App Version in a clean dual-column grid.
System Metrics & Diagnostics Grid:
Memory Health Card: Displays available vs total RAM with a thin sleek linear progress indicator.
Built-in Printer Card: Displays real-time printer status (e.g., "Paper Available", "Cover Open") and includes a "Test" button to print a test receipt instantly.
Quick Action Dashboard Grid:
Replaces floating buttons with larger, high-fidelity responsive interactive tiles containing hover/ripple feedback:
Installed Apps Card: Launches the launcher applications list.
App Marketplace Card: Opens the secure enterprise app marketplace.
Remote Support Card: Toggles the screen share utility with real-time text/indicator state changes.
Subtle Technical Actions:
A stylized "Exit Launcher Mode" action.
3. Controller Logic Update
[MODIFY] 
HomeFragment.kt
Bind the new XML elements (Connection Pills, Memory progress bar, Printer status, and all main interaction cards).
Background Diagnostic Loop:
Implement a Handler + Runnable that runs every 3 seconds inside onStart()/onStop() lifecycle events.
Fetch RAM stats using DeviceInfo.getMemoryUsage() or standard Android Memory APIs.
Query real-time printer state safely from Print.GetRealTimeStatus() (MoreFun built-in print head status).
Update MQTT connection state from MQTTManager.isConnected.
Update WebSocket connection state from WebSocketManager.getInstance().webSocketClient?.isOpen == true.
Dynamic Interaction Hooks:
When Remote Assistance screen share is started, toggle the card UI background color/ripple dynamically (e.g., glowing vibrant green/cyan overlay) to show the user that their screen is currently active and shared.
Bind the "Print Test" diagnostics click button to print a self-test diagnostic ticket.
Verification Plan
Automated/Compilation Checks
Compilation Check: Run Gradle build task (.\gradlew assembleDebug) to ensure all XML structures, package namespaces, and bindings are correct.
Resource Integrity: Confirm all XML drawables are syntax-valid.
Manual Verification
Layout Adaptability: Verify visually that the grid, margins, and cards adapt beautifully to smart POS screens (usually 5 to 6-inch vertical handheld terminal screens).
Telemetry Updates: Validate that connection pills toggle from green/red instantly when turning network connectivity on/off.
Action Triggers: Check that clicking the App Store, Installed Apps, Screen Share, and Exit Kiosk cards invokes their respective functions exactly as in the original layout.