Act as a senior UX/UI Designer, Data Visualization Expert, Front-end Architect, and Brand Analytics Consultant.

Create a Production-Grade Single File HTML Dashboard for Brand Tracking Analysis in the Banking Industry.

The dashboard must be executive-ready and suitable for CMO, Marketing Strategy, Brand Team, and Research & Consumer Insight teams.

=================================
OBJECTIVE
=================================

Build a modern interactive dashboard that allows users to:

1. Track Brand Health KPIs
2. Benchmark competitors
3. Analyze quarterly trends
4. Analyze customer segments
5. Generate executive-level insights
6. Export results for management reporting

=================================
TARGET BRANDS
=================================

- Krungsri
- KBank
- SCB
- BBL
- KTB
- ttb
- GSB

=================================
DATA SOURCE
=================================

Support:

- Excel (.xlsx)
- CSV

Users can upload files directly.

The system must automatically:

- Detect column structure
- Parse data
- Validate required columns
- Handle missing values gracefully
- Show friendly error messages

Required fields:

- Round
- Quarter
- Brand
- Age
- Personal_income
- Usership
- Spontaneous_Awareness
- CON_Aware_T2B

=================================
FILTER PANEL
=================================

Global filters:

- Round
- Quarter
- Brand
- Age
- Personal Income
- Usership

All charts and tables must update dynamically.

Include:

- Reset Filter Button
- Apply Filter Button

=================================
PAGE 1:
EXECUTIVE SUMMARY
=================================

Display:

A. KPI Summary Cards

- Spontaneous Awareness
- CON_Aware_T2B

Show:
- Current value
- Previous period value
- Absolute change
- % change
- Trend indicator

B. Market Ranking

Display ranking of all brands.

C. Key Highlights

Auto-generate business insights such as:

- Leading brand
- Fastest growing brand
- Largest decline
- Biggest opportunity segment

D. Executive Summary Text

Generate concise action-oriented summaries.

Example:

"Krungsri remains #3 in Spontaneous Awareness. Awareness increased by +2pts versus previous quarter, primarily driven by users aged 25-34."

=================================
PAGE 2:
TREND ANALYSIS
=================================

Interactive line charts.

Features:

- Single KPI selection
- Multi-brand comparison
- Quarter trend
- QoQ growth analysis

Charts:

- Spontaneous Awareness Trend
- CON_Aware_T2B Trend

Features:

- Hover tooltip
- Zoom
- Legend toggle

=================================
PAGE 3:
COMPETITOR BENCHMARK
=================================

Display:

- Ranking Table
- Heatmap Matrix
- Brand Comparison Cards

Metrics:

- Current Score
- Rank
- Gap vs Krungsri
- Change vs Previous Quarter

Highlight:

- Best Performer
- Worst Performer

=================================
PAGE 4:
USERSHIP DEEP DIVE
=================================

Analyze:

- Age
- Personal Income
- Usership

Display:

- Segment Ranking
- Segment Comparison
- Segment Trend

Automatically identify:

- Growth Segments
- Declining Segments
- Opportunity Segments

Generate business insights dynamically.

=================================
EXPORT CENTER
=================================

Support:

- Export Excel
- Export PowerPoint
- Export PNG Charts

=================================
LANGUAGE
=================================

Provide language toggle:

- Thai
- English

All labels, navigation, headings and insight texts must support bilingual display.

=================================
DESIGN SYSTEM
=================================

Style:

- Modern Dashboard
- Executive-ready
- Clean
- Professional
- Banking Industry

Fonts:

Thai:
Noto Sans Thai

English:
Inter

=================================
COLORS
=================================

Krungsri:
#FFD100

KBank:
#00A651

SCB:
#4D267D

BBL:
#1E5AA8

KTB:
#00AEEF

ttb:
#F36F21

GSB:
#EC008C

Neutral:
#111827
#6B7280
#F9FAFB

Use each brand's official color consistently across charts.

=================================
RESPONSIVE DESIGN
=================================

Desktop First

Support:

- Desktop
- Tablet
- Mobile

Use responsive layout with modern card-based design.

=================================
ERROR HANDLING
=================================

Show user-friendly messages for:

- Invalid file format
- Missing columns
- Empty dataset
- Parsing error
- Unsupported values

Never show raw system errors.

=================================
TECHNICAL REQUIREMENTS
=================================

Single HTML file only.

Use:

- HTML5
- CSS3
- Vanilla JavaScript

Allowed libraries:

- Chart.js
- SheetJS
- Bootstrap

No backend required.

No external database required.

All processing occurs in browser.

Code must be modular, maintainable, and production-grade.

=================================
UX REQUIREMENTS
=================================

Dashboard should feel like:

- Gartner
- Kantar
- McKinsey
- Bain
- BCG

Executive users should be able to understand brand performance within 30 seconds of opening the dashboard.

Focus on clarity, decision-making, and actionable insights rather than decorative visuals.