Sales Outstanding Dashboard

A real-time sales tracking dashboard that connects to Google Sheets to monitor outstanding invoices, payments, returns, and claims. Built with vanilla JavaScript, Chart.js, and a clean, responsive design.

📸 Features

• Real-time Data Sync - Automatically fetches data from Google Sheets
• Comprehensive KPIs - Track total outstanding, sales, payments, returns, claims, and collection ratios
• Interactive Charts - Visual analytics with Chart.js:
  • Outstanding by aging (0-30, 31-60, 61+ days)
  • Outstanding by distributor
  • Monthly trends
  • Credit cycle duration
• Advanced Filtering - Filter by distributor, location, sales person, age, and status
• Invoice Detail Drawer - Click any invoice to see complete transaction history
• Responsive Design - Works seamlessly on desktop, tablet, and mobile
• Live Updates - Refresh button to fetch latest data from your Google Sheet

🚀 Quick Start

Prerequisites

• A Google account
• A Google Sheet with your sales data
• Basic understanding of HTML

Setup (5 minutes)

1. Clone or Download this Repository

   git clone https://github.com/yourusername/sales-outstanding-dashboard.git
   cd sales-outstanding-dashboard

2. Prepare Your Google Sheet

   Create a Google Sheet with 4 tabs named exactly:

   • Sales
   • Payments
   • Returns
   • Claims

   Required Columns:

   Sales Tab:

   Invoice No	Date	Distributor	Location	Sales Person	Amount
   INV-001	15/03/2024	ABC Corp	Mumbai	John	50000

   Payments Tab:

   Invoice No	Payment Date	Amount
   INV-001	25/03/2024	30000

   Returns Tab:

   Invoice No	Amount
   INV-001	5000

   Claims Tab:

   Invoice No	Amount
   INV-001	2000

3. Make Your Google Sheet Public

   • Open your Google Sheet
   • Click Share (top right)
   • Under "General access" select Anyone with the link
   • Set permission to Viewer
   • Click Done

4. Get Your Sheet ID

   From your Google Sheet URL:

   https://docs.google.com/spreadsheets/d/1AbC_dEf2GhI3jKl4MnO5pQr/edit
                                          ^^^^^^^^^^^^^^^^^^^^^^
                                          This is your SHEET_ID
   

5. Configure the Dashboard

   Open index.html in a text editor and find line 395:

   const SHEET_ID = 'YOUR_GOOGLE_SHEET_ID_HERE';

   Replace YOUR_GOOGLE_SHEET_ID_HERE with your actual Sheet ID:

   const SHEET_ID = '1AbC_dEf2GhI3jKl4MnO5pQr';

6. Launch the Dashboard

   Simply open index.html in any modern web browser:

   • Double-click the file, or
   • Right-click → Open with → Your Browser, or
   • Drag and drop into browser window

   OR host it on GitHub Pages, Netlify, Vercel, or any static hosting service.

📊 Data Format Guide

Date Format

Use DD/MM/YYYY format (e.g., 15/03/2024)

Currency

Enter amounts as numbers only (e.g., 50000, not ₹50,000)

Invoice Numbers

Use consistent format (e.g., INV-001, INV-002)

Sample Data Structure

Sales Tab Example:

Invoice No | Date       | Distributor      | Location  | Sales Person | Amount
INV-001    | 15/01/2024 | ABC Distributors | Mumbai    | John Doe     | 100000
INV-002    | 18/01/2024 | XYZ Traders      | Delhi     | Jane Smith   | 75000
INV-003    | 20/01/2024 | ABC Distributors | Mumbai    | John Doe     | 50000

Payments Tab Example:

Invoice No | Payment Date | Amount
INV-001    | 25/01/2024   | 60000
INV-002    | 05/02/2024   | 75000
INV-001    | 10/02/2024   | 30000

Returns Tab Example:

Invoice No | Amount
INV-001    | 5000

Claims Tab Example:

Invoice No | Amount
INV-003    | 2000

🎨 Customization

Change Colors

Edit the CSS variables in the <style> section (lines 11-31):

:root {
  --bg:       #f4f3ef;  /* Background color */
  --surface:  #ffffff;  /* Card background */
  --ink:      #1a1916;  /* Primary dark color */
  --green:    #1a6b4a;  /* Success/paid color */
  --amber:    #8a5c00;  /* Warning color */
  --red:      #8a1f1f;  /* Alert/outstanding color */
  /* ... more colors ... */
}

Modify Fonts

Change the Google Fonts import (line 8) and font variables (lines 29-30):

--font: 'DM Sans', sans-serif;
--mono: 'DM Mono', monospace;

Adjust Responsive Breakpoints

Edit media queries at the bottom of the <style> section (starting line 386).

📱 Browser Compatibility

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🔒 Security & Privacy

• All data processing happens in the browser
• No server-side storage or databases
• Data is fetched directly from your Google Sheet
• Keep your Google Sheet permissions as Viewer only
• Never share your Sheet ID with your actual data in public repos

🐛 Troubleshooting

"Sales tab not found" error

• Ensure your Google Sheet has a tab named exactly Sales (case-sensitive)
• Verify the sheet is set to "Anyone with the link" can view

"No invoice data found" error

• Check that you have data in the Sales tab
• Ensure column headers are correct
• Verify invoice numbers are not empty

Charts not displaying

• Check browser console for errors (F12)
• Ensure Chart.js CDN is loading (check internet connection)
• Clear browser cache and reload

Data not updating

• Click the Refresh button
• Hard reload the page (Ctrl+Shift+R or Cmd+Shift+R)
• Check if Google Sheet is accessible

📈 Performance Tips

• Keep invoice count under 10,000 for optimal performance
• Archive old invoices to separate sheets periodically
• Use filters to focus on specific data ranges

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see below:

MIT License

Copyright (c) 2024

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

💡 Use Cases

This dashboard is perfect for:

• Small to Medium Businesses tracking accounts receivable
• Distributors managing multiple sales channels
• Sales Teams monitoring collection performance
• Finance Teams tracking outstanding payments
• Business Owners getting real-time financial insights

🔮 Roadmap

Potential future enhancements:

• Export to Excel/PDF
• Email alerts for overdue invoices
• Multi-currency support
• Payment reminder templates
• Integration with accounting software
• User authentication
• Historical data comparison
• Predictive analytics

📞 Support

If you encounter issues or have questions:

1. Check the Troubleshooting section
2. Search existing GitHub Issues
3. Create a new Issue with:
   • Browser and version
   • Error messages (check console with F12)
   • Steps to reproduce
   • Sample data structure (without sensitive info)

🌟 Acknowledgments

• Chart.js for beautiful charts
• DM Sans & DM Mono fonts by Google Fonts
• Design inspired by modern financial dashboards

---

Made with ❤️ for small business owners who deserve better financial tools

Star ⭐ this repo if you find it useful!