# Swish Innovation Quotes and Invoices A multi-page quotation and invoicing application for Swish Innovation, built for an interior design company. The app creates quotes and invoices, stores client and service details, tracks paid and unpaid invoices, shows analytics, and can sync records online through Google Sheets and Apps Script. ## Main Features - Login page before the app can be accessed. - Admin and User roles. - Admin user management from Settings. - Create quotes and invoices from one document editor. - Dedicated Quotes page. - Dedicated Invoices page. - Summary dashboard with quote, invoice, paid, unpaid, client, and service analytics. - Client details capture. - Service and line item details capture. - Quote to invoice conversion. - Printable Swish Innovation document preview. - Nigerian naira formatting and invoice VAT support. - Browser local backup. - Optional Google Sheets and Apps Script backend for online storage. - Auto-load and auto-save after backend setup. - GitHub Pages compatible. ## App Pages ### Login The app opens with `login.html`. The first login creates the first Admin account. If the app was previously using the old passcode login, that passcode is migrated into an Admin user called `admin`. For example, if the old passcode was `1234`, sign in with: ```text Username: admin Password: 1234 ``` ### Summary The Summary page is the dashboard. It shows totals and analytics for: - Quotes - Invoices - Paid invoices - Unpaid invoices - Client value - Service value ### Create The Create page is where you make either a quote or an invoice. You can enter: - Document type - Status - Client name, email, phone, and address - Project name, room, and scope - Service line items - Quantity, unit, and rate - Discount - Tax - Deposit or amount paid - Terms and notes The print preview updates as you work. ### Quotes The Quotes page lists all saved quotes. From there you can: - View quote details - Duplicate a quote - Convert a quote into an invoice - Mark a quote as approved - Delete a quote ### Invoices The Invoices page lists all saved invoices. From there you can: - View invoice details - Duplicate an invoice - Mark an invoice as paid - Delete an invoice ### Settings Only Admin users can see or open Settings. Admins can: - Add users - Reset user passwords - Remove users - Change user roles - Configure the Apps Script backend URL - Configure the backend secret - Test the backend - Load data from Google Sheets - Save data to Google Sheets Regular Users can create, edit, and view quotes and invoices, but they cannot access Settings. ## Data Storage The app always keeps a local browser backup using `localStorage`. This helps protect work if the internet connection is down. When the Apps Script backend is configured, the app also syncs online to Google Sheets: - It auto-loads from Google Sheets when the app opens. - It merges backend records with any local unsynced records. - It auto-saves changes after edits. - It sends a final save attempt when you leave or close the page. - It refreshes from the backend when you return to the tab after a while. ## Google Sheets and Apps Script Setup The app can run without Google Sheets, but online storage requires the backend. 1. Create a Google Sheet. 2. Copy the Sheet ID from the URL. Example URL: ```text https://docs.google.com/spreadsheets/d/1abcDEFghiJKL123456789/edit ``` Sheet ID: ```text 1abcDEFghiJKL123456789 ``` 3. Open [Google Apps Script](https://script.google.com/). 4. Create a new Apps Script project. 5. Paste the code from `apps-script-backend/Code.gs`. 6. Replace: ```js const SPREADSHEET_ID = "PASTE_YOUR_GOOGLE_SHEET_ID_HERE"; const BACKEND_SECRET = "CHANGE_THIS_SECRET"; ``` Use a private secret that is hard to guess, for example: ```js const BACKEND_SECRET = "swish-2026-private-storage-key"; ``` 7. Save the Apps Script project. 8. Select the `setup` function. 9. Click `Run` once and approve the Google permissions. 10. Deploy the project as a Web App: - Execute as: `Me` - Who has access: `Anyone` 11. Copy the Web App URL ending in `/exec`. 12. Sign in to the Swish app as an Admin. 13. Open Settings. 14. Paste the `/exec` URL and backend secret. 15. Click `Save Config`. 16. Click `Test Backend`. 17. Click `Save Data`. The backend creates these tabs in the spreadsheet: - `Quotes` - `Invoices` - `Settings` User accounts are stored inside the `Settings` tab. ## Running Locally You can open `index.html` directly in a browser, or run the local server: ```bash node dev-server.js 4174 ``` Then open: ```text http://127.0.0.1:4174/login.html ``` ## Deploying to GitHub Pages This app is static, so it can run on GitHub Pages. 1. Create a GitHub repository. 2. Upload all project files to the repository root. 3. Make sure these files are included: - `index.html` - `login.html` - `create.html` - `quotes.html` - `invoices.html` - `settings.html` - `app.js` - `styles.css` - `assets/swish-logo.jpeg` - `apps-script-backend/Code.gs` - `README.md` 4. Open the repository on GitHub. 5. Go to `Settings > Pages`. 6. Under Build and deployment, choose: - Source: `Deploy from a branch` - Branch: `main` - Folder: `/root` 7. Save the Pages settings. 8. Wait for GitHub to publish the site. 9. Open the GitHub Pages URL. 10. Sign in or create the first Admin account. 11. Open Settings and paste the Apps Script `/exec` URL and backend secret. ## Updating the Apps Script Backend Whenever `apps-script-backend/Code.gs` changes: 1. Paste the updated code into Apps Script. 2. Save the project. 3. Run `setup()` once if needed. 4. Deploy a new Web App version. 5. Keep using the latest `/exec` URL in the app Settings. ## Favicon and Branding The Swish Innovation logo is stored at: ```text assets/swish-logo.jpeg ``` The HTML pages use that logo as the app favicon and as the visible brand logo. ## Security Note This is a static browser app. The login system is useful for everyday access control, but it is still client-side. For production-grade security, authentication and authorization should be enforced by a server-side backend. Keep the Apps Script backend secret private. Do not publish private client information in a public demo spreadsheet. ## Troubleshooting ### Apps Script says "Illegal spreadsheet id or key" Use only the Sheet ID, not the full Google Sheets URL. ### Test Backend cannot reach Apps Script Check that: - The URL ends with `/exec`. - Apps Script is deployed as a Web App. - Access is set to `Anyone`. - You redeployed after editing `Code.gs`. - The backend secret in Settings matches `BACKEND_SECRET`. ### Data does not appear in Google Sheets Click `Save Data` once from Settings, then check the `Quotes`, `Invoices`, and `Settings` tabs. ### A regular user can’t see Settings That is expected. Only Admin users can see or open Settings. # Swish_Innovation