// guide-addon.js - User Guide Addon for Residents Association Manager class GuideAddon { constructor() { this.initialized = false; this.init(); } init() { if (this.initialized) return; // Add CSS styles this.addStyles(); // Add Guide Tab this.addGuideTab(); // Add Guide Content this.addGuideContent(); // Add Quick Start Card this.addQuickStartCard(); this.initialized = true; console.log('Guide Addon Loaded Successfully!'); } addStyles() { const styles = ` /* ========== USER GUIDE STYLES ========== */ .guide-section { margin-bottom: 30px; padding: 20px; background: linear-gradient(135deg, #f5f7fa, #c3cfe2); border-radius: 15px; border-left: 5px solid #2196f3; } .guide-card { background: white; padding: 20px; border-radius: 10px; margin: 15px 0; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .faq-card { background: white; padding: 15px; border-radius: 10px; margin: 10px 0; border-left: 4px solid #4caf50; } .contact-card { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); padding: 20px; border-radius: 10px; text-align: center; } .transparency-card { background: linear-gradient(135deg, #e3f2fd, #bbdefb); padding: 20px; border-radius: 10px; margin: 15px 0; border-left: 5px solid #1976d2; } .guide-card ol, .guide-card ul { margin-left: 20px; } .guide-card li { margin-bottom: 8px; line-height: 1.5; } .guide-section h3 { color: #1a237e; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .faq-card h4 { color: #c62828; margin-bottom: 8px; } /* Quick Start Card Styles */ .quick-start-card { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; border-radius: 15px; margin-bottom: 20px; text-align: center; } .quick-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; } .step { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.2); padding: 10px; border-radius: 8px; } .step-number { background: white; color: #667eea; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .feature-highlight { background: linear-gradient(135deg, #fff3e0, #ffecb3); padding: 15px; border-radius: 10px; margin: 15px 0; border-left: 4px solid #ff9800; } `; const styleSheet = document.createElement('style'); styleSheet.textContent = styles; document.head.appendChild(styleSheet); } addGuideTab() { const tabsContainer = document.querySelector('.tabs'); if (!tabsContainer) return; const guideTab = document.createElement('div'); guideTab.className = 'tab'; guideTab.setAttribute('data-tab', 'guide'); guideTab.innerHTML = ` User Guide `; tabsContainer.appendChild(guideTab); // Add click event guideTab.addEventListener('click', () => { this.showTab('guide'); }); } addGuideContent() { const container = document.querySelector('.container'); if (!container) return; const guideContent = document.createElement('div'); guideContent.className = 'tab-content'; guideContent.id = 'guide-tab'; guideContent.innerHTML = this.getGuideHTML(); container.insertBefore(guideContent, document.querySelector('footer')); } addQuickStartCard() { const header = document.querySelector('header'); if (!header) return; const quickStartCard = document.createElement('div'); quickStartCard.className = 'quick-start-card'; quickStartCard.innerHTML = `

Quick Start Guide

1 Add Members in Members tab

2 Set monthly fee in Settings

3 Collect payments in Maintenance tab

4 Backup data regularly

`; header.parentNode.insertBefore(quickStartCard, header.nextSibling); // Add button event document.getElementById('viewGuideBtn').addEventListener('click', () => { this.showTab('guide'); }); } getGuideHTML() { return `

Complete User Guide

🚀 Getting Started

For Committee Members

1. Set up Association: Go to Settings → Update association name and monthly fee
2. Add Members: Go to Members tab → Add all residents with contact numbers
3. Upload Logo: Settings → Upload your association logo for professional receipts
4. Enable Transparency: Use backup feature to share data with members

For Residents

1. Check Dues: Use "Check Dues" tab with your contact number
2. View Payments: See your complete payment history
3. Access Events: Browse and register for upcoming events
4. Verify Records: Restore shared backup to view association transparency data

💰 Maintenance Fee Collection

Step-by-Step Process:

1. Go to Maintenance tab
2. Enter member's contact number
3. Select start month and period
4. Click "Collect Maintenance & Send Receipt"
5. WhatsApp automatically opens with pre-filled receipt
6. Send the message to the member

⚠️ Tip: The system automatically calculates amount based on monthly fee

📅 Event Management

Creating Events:

1. Go to Events tab
2. Fill event name, date, and fee per person
3. Click "Create Event"
4. Collect payments using member contact numbers
5. Add expenses as they occur

📋 Meeting Management

Complete Meeting Workflow:

1. Schedule: Create meeting with title, date, time
2. Attendance: Click "Attendance" to register attendees
3. Minutes: Record discussion points and decisions
4. Action Items: Assign tasks with deadlines
5. Attachments: Upload relevant documents/photos

🔔 Reminder System

Sending Payment Reminders:

1. Go to Records tab → Reminder System section
2. Select month and reminder type
3. Preview messages
4. Send individual reminders or bulk reminders
5. System automatically tracks sent reminders

💾 Backup & Data Safety

Protect Your Data & Enable Transparency:

• Regular Backups: Use Backup tab to download data file
• Transparency Backups: Use "Create Backup (No Media)" to share with members
• Restore: Upload backup file to restore all data
• Data Includes: Members, payments, events, meetings, settings
• Safety: All data stays in your browser - completely private
• Transparency: Share backups to build trust with members

❓ Frequently Asked Questions

Q: Is my data secure?

A: Yes! All data is stored locally in your browser. No data is sent to any server.

Q: Can I share association data with members?

A: Absolutely! Use "Create Backup (No Media)" and share the file. Members can restore it to view all records.

Q: Can I use this on mobile?

A: Absolutely! The app works perfectly on smartphones, tablets, and computers.

Q: What if I clear browser data?

A: Always backup your data! Clearing browser data will erase everything.

Q: How many members can I add?

A: The system can handle hundreds of members efficiently.

Q: Is the transparency feature secure?

A: Yes! You control what gets shared. "No Media" backup excludes large files but includes all financial records.

🔍 Association Transparency Feature

🌟 Complete Financial Transparency

Share association data with ALL members for complete transparency!

📊 What Members Can See:

• ✅ All financial transactions and records
• ✅ Maintenance fee collections from all members
• ✅ Event payments and expenses
• ✅ Bank deposits and withdrawals
• ✅ Complete member list (names & contacts)
• ✅ Meeting records and minutes
• ✅ Full audit trail of all activities

🔄 How to Share Data with Members:

1. Go to Backup tab → Click "Create Backup (No Media)"
2. Download the .json backup file
3. Share this file with all association members via WhatsApp/Email
4. Members can restore the backup in their app to view all data

🎯 Benefits of This Transparency:

• 🏠 Builds Trust: Members can verify all financial records
• 📈 Accountability: Committee actions are visible to all
• ⚖️ Dispute Prevention: Clear records prevent misunderstandings
• 🤝 Democratic Oversight: Members can audit association activities

💡 Tip: Share backup files monthly to keep all members informed and build community trust!

📞 Need Help?

Developer Contact: 7012451340

App URL: https://boisterous-snickerdoodle-ec6dab.netlify.app/

Transparency Feature: Share backups to build trust with your community! 🏘️

`; } showTab(tabName) { // Use existing tab switching logic const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach(t => t.classList.remove('active')); tabContents.forEach(tc => tc.classList.remove('active')); const activeTab = document.querySelector(`[data-tab="${tabName}"]`); const targetTab = document.getElementById(`${tabName}-tab`); if (activeTab) activeTab.classList.add('active'); if (targetTab) targetTab.classList.add('active'); } } // Initialize the addon when page loads document.addEventListener('DOMContentLoaded', function() { // Wait a bit for the main app to initialize setTimeout(() => { window.GuideAddon = new GuideAddon(); }, 1000); });