Workflow Deep Dive - Getting Programming Done Instantly

Create a Python Flask API endpoint that accepts a CSV file upload, validates the data structure (must contain columns: customer_id, purchase_date, amount), performs data cleaning (remove duplicates, handle missing values), calculates monthly revenue trends, and returns a JSON response with summary statistics and a list of anomalies.

[PERSONA] You are an expert senior front-end developer specializing in client-side data analysis and visualization. You are a master of HTML5, modern CSS3, and JavaScript (ES6+). You are highly proficient at using lightweight, in-browser libraries like PapaParse for CSV parsing and Chart.js for data visualization, and you write clean, well-commented, and self-contained code.

[TASK]

Generate a complete, single-file HTML webpage that functions as a client-side revenue analysis tool. This webpage will allow a user to upload a CSV file, and it will then perform all data validation, cleaning, and analysis directly in the browser, displaying the results on the same page.

[CONTEXT]

The webpage must perform the exact same logic as the Python Flask API.

1. UI & File Handling: * Create a file input element that only accepts .csv files. * Use PapaParse (imported from a CDN) to parse the uploaded CSV file in the browser.
2. Data Validation: * After parsing, check that the data contains the required columns: customer_id, purchase_date, and amount. * If validation fails, display a clear error message to the user.
3. Data Cleaning (in JavaScript): * Remove Duplicates: Filter out any exact duplicate rows. * Handle Missing Values: Filter out any rows where customer_id, purchase_date, or amount is null, empty, or undefined. * Type Conversion: Convert amount to a number and purchase_date to a JavaScript Date object. Discard any rows where amount cannot be converted to a valid number.
4. Calculations & Analysis: * Summary Statistics: Calculate and display: Total Revenue, Average Sale Amount, Total Valid Transactions, Start Date, End Date, and a summary of rows removed (duplicates, missing/invalid data). * Monthly Revenue Trends: Aggregate the cleaned data to calculate the total revenue for each month (e.g., 2023-01, 2023-02). * Anomaly Detection: Identify transaction anomalies using the Z-score method. Calculate the mean and standard deviation for amount, and then flag any transaction where the absolute Z-score is greater than 3.
5. Displaying Results: * All results must be dynamically rendered onto the webpage after processing. Do not just log to the console. * Use Chart.js (imported from a CDN) to display the Monthly Revenue Trends as a bar chart inside an HTML <canvas> element. * Display the Summary Statistics in a clean, readable format (e.g., a list or a grid). * Display the Anomalies in a table or list.

[FORMAT]

Single File Output: Provide the entire solution as a single .html file.

HTML Structure: Use semantic HTML header, main, section, footer, etc. Include a title, a main heading, the file uploader, and clearly defined div containers for the results e.g., #summary-stats, #revenue-chart-container, #anomalies-list. Include the canvas element for Chart.js.

CSS Styling: Include all CSS within a style block in the head. The styling should be modern, clean, and responsive. Create a card layout for the different result sections and style the file input button.

JavaScript Logic:

Include all JavaScript within a script tag at the end of the body.

Import PapaParse and Chart.js from a reliable CDN like jsDelivr or cdnjs.

Write clean, well-commented functions to handle file parsing, cleaning, analysis, and DOM updates.

Ensure all data processing is triggered by the change event on the file input.