Kamis, 08 Januari 2026

Vibe Coding

 







PROMPT


I want to create a HTML dashboard from data ini Google Sheets using Apps Script.

Google Sheet structure
Retrieve data from a single tab called "SALES"
Column A: DATE
Column B: NAME (ignore for display)
Column C: SALES REP
Column D: SECTOR
Column E: AMOUNT

General UI:
1. I want dark mode by default (dark background, white text)
2. Display all amounts in USD currency (no cents)
3. Responsive Bootstrap 5 layout
4. Keep layout clean and compact
5. Make sure charts, tables, and scorecards update immediately when filters change
6. Don't include any extra text

Filters:
1. Quick range dropdown: YTD, MTD, Last 7 Days, Last 14 Das, Last 30 Days, and individual years
2. Start Date/ End Date pickers
3. Sales Rep dropdown (multi-select) with "All" option at top that clears other selections.
4. Sector dropdown (multi-select) with "All" option at top that clears other selections
5. Add a reset button on the far right to clear all filters.
6. All filters should apply automatically

Scorecards
Three scorecards with title and number both centers showing
1. Total Sales
2. # of Sales
3. Avg Sale Amount

Chart Section :
1. Title "Sales" with "By Sales Rep/ By Sector" dropdown next to it to toggle the display for the chart and breakdown.
2. Stacked bar chart in dark mode
3. Show total amount over each bar
4. Modern darker pastel palette distinct colors per rep/ sector
5. Mouse over shows exact amount per segment
6. Chart automatically switchers: 
A. Monthly mode is the date range>30 days
B. Daily mode is under 30 days
7. Below the chart, show data table for chart with one column for each day or month as displayed in the chart
8. Table should be dark mode with white text and subtle striping










Tidak ada komentar:

Posting Komentar

Buat Content

  https://www.youtube.com/watch?v=SzPqgLXTET8 https://www.youtube.com/watch?v=7xzBc_oWsFo