Act as a Senior Full-Stack Engineer, UX/UI Designer, Solution Architect, and Banking Legal Operations Specialist.

Create a Production-Grade Web Application in a SINGLE HTML FILE (HTML + CSS + JavaScript in one file only) for a legal department responsible for litigation management and debt liability calculation.

====================================================
PROJECT NAME
====================================================

Legal Debt Calculation & Litigation Management System

====================================================
BUSINESS CONTEXT
====================================================

This system is designed for a bank's Legal Department to manage litigation cases, calculate debtor liabilities, and generate legal debt calculation reports from Excel files.

The primary goal is to reduce manual work by allowing legal officers to upload debt data, calculate debt liabilities automatically, monitor litigation status, and export structured results for legal proceedings.

====================================================
TARGET USERS
====================================================

Primary Users:
- Legal Officers
- Litigation Officers
- Legal Managers

User Characteristics:
- Work with financial and litigation data daily
- Require high accuracy
- Need audit-friendly calculations
- Prefer formal banking-style interfaces

====================================================
SYSTEM REQUIREMENTS
====================================================

The application must be Desktop-First.

Minimum supported resolution:
- 1366 x 768

Responsive support:
- Desktop
- Laptop
- Large Monitor

====================================================
LANGUAGE SUPPORT
====================================================

Support both:
- Thai
- English

Provide language switcher on top navigation.

All labels, menus, buttons, tables, dashboard widgets and messages must support bilingual display.

====================================================
UI / UX REQUIREMENTS
====================================================

Style:
- Professional Banking System
- Executive Dashboard
- Enterprise Grade
- Clean Layout
- High Readability
- Formal and Trustworthy

Color Palette:

Primary Color:
#F5C400 (Banking Gold)

Secondary Color:
#1F3A5F (Navy Blue)

Success:
#28A745

Warning:
#FFC107

Danger:
#DC3545

Background:
#F8F9FA

Card Background:
#FFFFFF

Border:
#E5E7EB

Typography:
- Font Family: Sarabun
- Modern Corporate Style
- Consistent spacing
- Accessible contrast

Design Characteristics:
- Large dashboard cards
- Rounded corners (8px)
- Soft shadows
- Professional data tables
- Clear action buttons
- Enterprise reporting style

====================================================
APPLICATION PAGES
====================================================

PAGE 1: DASHBOARD

Display KPI Cards:

1. Total Cases
2. Pending Cases
3. Total Outstanding Debt
4. Debt By Case Type
5. Litigation Status

Include:

- Summary Charts
- Debt Distribution Chart
- Case Status Pie Chart
- Monthly Case Trend

Dashboard should update automatically when data changes.

====================================================
PAGE 2: CASE CREATION
====================================================

Provide Case Opening Form.

Fields:

- Case ID
- Customer Name
- Customer ID
- Account Number
- Case Type
- Litigation Status
- Outstanding Principal
- Interest Rate (%)
- Number of Days
- Legal Officer
- Notes

Buttons:

- Save Case
- Edit Case
- Reset Form

====================================================
PAGE 3: EXCEL IMPORT
====================================================

Allow upload of Excel files (.xlsx).

Requirements:

- Drag & Drop Upload
- Browse File Upload
- Excel Validation
- Preview Imported Data
- Display Imported Record Count

System must:

- Parse uploaded Excel files
- Display records in data grid
- Allow user selection of specific records
- Handle invalid data gracefully

====================================================
PAGE 4: DEBT LIABILITY CALCULATION
====================================================

Debt Calculation Formula:

Debt Liability =
Outstanding Principal × Interest Rate × Number of Days

System should:

- Calculate row-by-row
- Calculate total summary
- Calculate grand total

Display:

- Principal
- Interest Rate
- Days
- Debt Liability
- Total Amount

Provide:

- Recalculate Button
- Export Result Button

====================================================
PAGE 5: RESULT TABLE
====================================================

Generate structured calculation table.

Display:

- Case Information
- Account Number
- Principal
- Interest Rate
- Number of Days
- Calculated Liability
- Total Debt

Features:

- Search
- Sort
- Filter
- Pagination

====================================================
EXPORT REQUIREMENTS
====================================================

Provide export functions:

- Export Table to Excel (.xlsx)
- Download Calculation Report
- Download Summary Report

Exported files should contain:

- Report Date
- Case Details
- Calculation Formula
- Summary Totals

====================================================
DASHBOARD ANALYTICS
====================================================

Dashboard Metrics:

- Total Cases
- Pending Cases
- Completed Cases
- Total Debt Amount
- Debt by Case Type
- Litigation Status Summary

Charts:

- Bar Chart
- Pie Chart
- Line Chart

Use modern chart library.

====================================================
DATA MANAGEMENT
====================================================

Store data locally using browser local storage.

Support:

- Create
- Read
- Update
- Delete

Provide confirmation dialog before deletion.

====================================================
SEARCH & FILTER
====================================================

Allow filtering by:

- Case Type
- Litigation Status
- Legal Officer
- Date Range

Global search must search across all records.

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

Implement enterprise-grade validation.

Validate:

- Required fields
- Numeric fields
- Interest rate format
- Invalid Excel structure
- Missing columns

Display:

- User-friendly error messages
- Warning notifications
- Success notifications

Never allow application crash.

Provide fallback handling for unexpected errors.

====================================================
SECURITY REQUIREMENTS
====================================================

Sanitize user inputs.

Prevent:

- XSS
- Invalid file upload
- Malformed input

Mask sensitive personal information when displayed in dashboard summaries.

====================================================
ACCESSIBILITY
====================================================

Support:

- Keyboard navigation
- High contrast readability
- Proper labels
- Screen reader friendly structure

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

Generate as ONE SINGLE HTML FILE only.

Include:

- HTML
- CSS
- JavaScript

Use:
- Bootstrap 5
- SheetJS (for Excel handling)
- Chart.js

Must run immediately by opening the HTML file in a browser.

No backend required.

Use clean architecture and well-structured code.

Add code comments throughout the file.

====================================================
DELIVERABLE
====================================================

Generate the complete production-grade HTML application with:

- Professional banking UI
- Dashboard
- Case management module
- Excel import module
- Debt calculation engine
- Reporting module
- Excel export module
- Bilingual Thai/English support
- Responsive desktop-first design
- Error handling
- Local storage persistence

Output only the final complete HTML code.