Refine Enterprise SaaS Frontend UI/UX for Production Page

Act as a Senior Product Designer (Microsoft, Atlassian, ServiceNow, Datadog, CrowdStrike, Linear, Stripe level) and a Senior Ruby on Rails Frontend Engineer.

This page is already in production and all backend functionality works correctly. DO NOT change any business logic, controller logic, routes, ActiveRecord queries, APIs, or existing functionality.

Only improve the UI/UX and frontend presentation while keeping all current features working exactly as they do today.

The goal is to make this page look like a modern enterprise SaaS application suitable for Fortune 500 customers.

====================================================

DESIGN PRINCIPLES

====================================================

• Clean enterprise UI
• Professional visual hierarchy
• High information density
• Excellent spacing
• Better typography
• Consistent component sizing
• Accessibility compliant
• Responsive
• Production ready
• No unnecessary animations
• Premium SaaS appearance

Reference products:

• Microsoft Azure
• Atlassian
• ServiceNow
• Datadog
• Grafana Cloud
• CrowdStrike Falcon
• Stripe Dashboard
• Linear
• GitHub Enterprise

====================================================

PAGE STRUCTURE

====================================================

Keep the existing page structure.

Header

↓

Reports Summary Card

↓

Filter Card

↓

Active Filter Chips

↓

Reports Toolbar

↓

Reports Table

↓

Pagination

Do NOT change navigation or backend functionality.

====================================================

1. PAGE HEADER

====================================================

Improve typography.

Title:

LS Reports Archive

Subtitle:

View, filter and download Life Safety reports.

Place a small report/document icon beside the title.

Move the Total Reports card to the top-right.

The card should contain:

Document icon

Large number

Example

128

Small label

Reports Available

Avoid oversized cards.

====================================================

2. FILTER SECTION

====================================================

Keep all existing filters.

Site

Building

Date Range

Report Type

Improve layout.

Make every control exactly the same height.

Use modern outlined inputs.

Increase spacing between controls.

Use labels above controls.

Replace the current two separate date fields with a Date Range component while keeping the existing backend values.

The date picker should display

Jan 01, 2026 — Dec 31, 2026

instead of

dd/mm/yyyy

When a date is selected, clearly show the selected range.

Do NOT require clicking outside the popup to confirm.

Provide:

Apply

Cancel

inside the date picker or automatically close after both dates are selected.

====================================================

3. APPLY FILTERS

====================================================

Keep Apply Filters.

Keep Reset Filters.

Apply Filters should be the primary button.

Reset Filters should be secondary.

Disable Apply Filters until something changes.

====================================================

4. ACTIVE FILTER CHIPS

====================================================

Keep filter chips.

Make chips smaller.

Height around 30px.

Rounded pill style.

Example

Site: Hasco LED Lighting ×

Building: Hasco CT Lab ×

Type: Monthly ×

Clear All

Use subtle purple background.

====================================================

5. REPORTS TOOLBAR

====================================================

Reorganize toolbar.

Left

Search Reports

Middle

Refresh

Export

Rows

Right

Download Selected

Search should be approximately 380px wide.

Rows dropdown compact.

Download Selected should remain disabled until rows are selected.

Display

Download Selected (0)

Download Selected (3)

instead of simply disabling the button.

====================================================

6. TABLE

====================================================

Redesign table to modern enterprise standards.

Replace the solid purple table header.

Use:

White header

Light grey background

Subtle bottom border

Dark text

Sortable columns

Better spacing

Reduce row height slightly.

Improve scanability.

Increase left padding.

Alternate row hover

Light purple hover

Keep sticky header if already implemented.

====================================================

7. REPORT TYPE

====================================================

Display report type as small badges.

Examples

Monthly

Annual

Do not display Quarterly.

====================================================

8. STATUS

====================================================

Improve badges.

Completed

Green

Generating

Amber

Failed

Red

Smaller height.

Better rounded corners.

Use status icons.

====================================================

9. GENERATION DATE

====================================================

Instead of

Jul 02, 2026 09:12 AM

Display

Jul 02, 2026
09:12 AM

Two-line format.

Improve readability.

====================================================

10. DOWNLOAD COLUMN

====================================================

Current implementation feels outdated.

Replace it with a cleaner enterprise pattern.

Show

PDF icon

Download

or simply

PDF

with a subtle icon.

The three-dot menu should contain

Download PDF

View Details (future)

Keep existing functionality.

====================================================

11. PAGINATION

====================================================

Improve pagination.

Previous

1

2

3

...

Next

Better spacing.

Modern rounded buttons.

====================================================

12. EMPTY SPACE

====================================================

Reduce excessive vertical spacing between

Filter Card

↓

Active Filters

↓

Toolbar

↓

Table

The page should feel compact but not crowded.

====================================================

13. TYPOGRAPHY

====================================================

Use consistent hierarchy.

Page title

32px

Section titles

22px

Labels

13-14px

Table header

13px SemiBold

Body

14px

====================================================

14. COLORS

====================================================

Maintain existing EIS branding.

Primary Purple

Use only for

Buttons

Links

Icons

Highlights

Avoid large solid purple backgrounds.

Use white and light grey surfaces.

====================================================

15. RESPONSIVENESS

====================================================

Desktop

1440px+

Laptop

1280px

Tablet

1024px

No overlapping.

Maintain consistent spacing.

====================================================

16. ACCESSIBILITY

====================================================

Proper focus states

Keyboard navigation

ARIA labels

Contrast ratio WCAG AA

Hover states

Visible selected rows

====================================================

IMPORTANT

====================================================

DO NOT

❌ Change backend

❌ Change controllers

❌ Change models

❌ Change routes

❌ Change database

❌ Change report generation

❌ Change filters logic

❌ Change download functionality

❌ Change pagination logic

Only modernize the frontend and improve the overall enterprise user experience.

The final page should feel like a premium enterprise reporting module used by Microsoft, Atlassian, ServiceNow, or Datadog, while preserving all existing functionality.