# Settings Page Functionality

## 🎯 **New Feature Added**

### **Settings Page in Admin Panel**

A comprehensive settings page has been added to the admin panel for managing application settings and bank account details.

## 🎨 **Features Implemented**

### **1. Settings Tab**
- **Location**: New "Settings" tab in the admin panel sidebar
- **Icon**: Cog icon (⚙️) for clear identification
- **Access**: Available to authenticated admin users only

### **2. Bank Account Settings Section**
- **Bank Name**: Input field for bank name
- **Account Number**: Input field for account number
- **Account Holder Name**: Input field for account holder name
- **Save Button**: Dedicated save button for bank settings
- **Info Alert**: Explains that these details will be displayed on the public payment page

### **3. General Settings Section**
- **Billing Day**: Day of month when bills are generated (1-31)
- **Late Payment Fee**: Fee amount in MVR for late payments
- **Grace Period**: Number of days after due date before marking as overdue
- **Gym Name**: Name of the gym
- **Gym Address**: Physical address of the gym
- **Gym Phone**: Contact phone number
- **Gym Email**: Contact email address
- **Save Button**: Dedicated save button for general settings

### **4. Dynamic Bank Details on Public Page**
- **Real-time Loading**: Bank details are fetched from settings when the page loads
- **Loading Indicator**: Shows spinner while loading bank details
- **Error Handling**: Displays error message if bank details cannot be loaded
- **Fallback Message**: Shows "Not set" if any bank detail is missing

## 🔧 **Technical Implementation**

### **Frontend Changes**

#### **Admin Panel HTML (`public/admin.html`)**
```html
<!-- Settings Tab -->
<a href="#settings" class="list-group-item list-group-item-action" data-tab="settings">
    <i class="fas fa-cog me-2"></i>Settings
</a>

<!-- Settings Tab Content -->
<div id="settings" class="tab-content">
    <h2 class="mb-4">Application Settings</h2>
    
    <!-- Bank Account Settings Card -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="fas fa-university me-2"></i>Bank Account Details
            </h5>
        </div>
        <div class="card-body">
            <form id="bankSettingsForm">
                <!-- Bank form fields -->
            </form>
        </div>
    </div>
    
    <!-- General Settings Card -->
    <div class="card mb-4">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0">
                <i class="fas fa-cogs me-2"></i>General Settings
            </h5>
        </div>
        <div class="card-body">
            <form id="generalSettingsForm">
                <!-- General settings form fields -->
            </form>
        </div>
    </div>
</div>
```

#### **Public Page HTML (`public/index.html`)**
```html
<!-- Dynamic Bank Details Section -->
<div class="alert alert-info" id="bankDetailsSection">
    <h6><i class="fas fa-info-circle me-2"></i>Bank Details for Transfer:</h6>
    <div id="bankDetailsContent">
        <div class="spinner-border spinner-border-sm me-2" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        Loading bank details...
    </div>
</div>
```

### **Backend API Endpoints**

#### **Settings Management (`server.js`)**
```javascript
// Get all settings (Admin only)
app.get('/api/admin/settings', authenticateAdmin, async (req, res) => {
    const [settings] = await pool.execute('SELECT * FROM system_settings');
    const settingsObj = {};
    settings.forEach(setting => {
        settingsObj[setting.setting_key] = setting.setting_value;
    });
    res.json(settingsObj);
});

// Update settings (Admin only)
app.put('/api/admin/settings', authenticateAdmin, async (req, res) => {
    const settings = req.body;
    for (const [key, value] of Object.entries(settings)) {
        await pool.execute(
            'UPDATE system_settings SET setting_value = ? WHERE setting_key = ?',
            [value, key]
        );
    }
    res.json({ message: 'Settings updated successfully' });
});

// Public endpoint to get bank details
app.get('/api/bank-details', async (req, res) => {
    const [settings] = await pool.execute(`
        SELECT setting_value 
        FROM system_settings 
        WHERE setting_key IN ('bank_name', 'bank_account_number', 'bank_account_name')
    `);
    
    const bankDetails = {};
    settings.forEach(setting => {
        if (setting.setting_key === 'bank_name') bankDetails.bankName = setting.setting_value;
        if (setting.setting_key === 'bank_account_number') bankDetails.accountNumber = setting.setting_value;
        if (setting.setting_key === 'bank_account_name') bankDetails.accountName = setting.setting_value;
    });
    
    res.json(bankDetails);
});
```

### **Frontend JavaScript**

#### **Admin Settings Management (`public/admin-script.js`)**
```javascript
// Settings Management
let currentSettings = {};

async function loadSettings() {
    const response = await fetch('/api/admin/settings', {
        headers: { 'Authorization': `Bearer ${authToken}` }
    });
    
    if (response.ok) {
        currentSettings = await response.json();
        populateSettingsForms();
    }
}

function populateSettingsForms() {
    // Populate bank settings
    document.getElementById('bankName').value = currentSettings.bank_name || '';
    document.getElementById('bankAccountNumber').value = currentSettings.bank_account_number || '';
    document.getElementById('bankAccountName').value = currentSettings.bank_account_name || '';
    
    // Populate general settings
    document.getElementById('billingDay').value = currentSettings.billing_day || '25';
    document.getElementById('lateFee').value = currentSettings.late_fee || '75.00';
    // ... other fields
}

async function saveBankSettings() {
    const bankSettings = {
        bank_name: document.getElementById('bankName').value,
        bank_account_number: document.getElementById('bankAccountNumber').value,
        bank_account_name: document.getElementById('bankAccountName').value
    };
    
    const response = await fetch('/api/admin/settings', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${authToken}`
        },
        body: JSON.stringify(bankSettings)
    });
    
    if (response.ok) {
        showAlert('Bank settings saved successfully!', 'success');
        currentSettings = { ...currentSettings, ...bankSettings };
    }
}
```

#### **Public Bank Details Loading (`public/script.js`)**
```javascript
// Load bank details from settings
async function loadBankDetails() {
    try {
        const response = await fetch('/api/bank-details');
        const bankDetails = await response.json();
        
        const bankDetailsContent = document.getElementById('bankDetailsContent');
        if (bankDetailsContent) {
            bankDetailsContent.innerHTML = `
                <p class="mb-1"><strong>Account Name:</strong> ${bankDetails.accountName || 'Not set'}</p>
                <p class="mb-1"><strong>Account Number:</strong> ${bankDetails.accountNumber || 'Not set'}</p>
                <p class="mb-0"><strong>Bank:</strong> ${bankDetails.bankName || 'Not set'}</p>
            `;
        }
    } catch (error) {
        console.error('Error loading bank details:', error);
        const bankDetailsContent = document.getElementById('bankDetailsContent');
        if (bankDetailsContent) {
            bankDetailsContent.innerHTML = `
                <p class="mb-0 text-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Unable to load bank details. Please contact the gym for payment information.
                </p>
            `;
        }
    }
}
```

### **Database Updates**

#### **System Settings Table (`scripts/setup-database.js`)**
```javascript
await connection.execute(`
    INSERT IGNORE INTO system_settings (setting_key, setting_value, description) VALUES
    ('billing_day', '25', 'Day of month when bills are generated'),
    ('bank_account_number', ?, 'Bank account number for payment verification'),
    ('bank_account_name', ?, 'Bank account name for payment verification'),
    ('bank_name', ?, 'Bank name for payment verification'),
    ('late_fee', '75.00', 'Late payment fee amount'),
    ('grace_period_days', '5', 'Grace period for payments before marking overdue'),
    ('gym_name', 'Laurel Fitness Gym', 'Gym name'),
    ('gym_address', '', 'Gym address'),
    ('gym_phone', '', 'Gym phone number'),
    ('gym_email', '', 'Gym email address')
`, [config.bank.accountNumber, config.bank.accountName, config.bank.bankName]);
```

## 🎯 **How to Use**

### **For Admins**

#### **Accessing Settings**
1. **Login to Admin Panel**: Go to http://localhost:3000/admin
2. **Navigate to Settings**: Click on the "Settings" tab in the sidebar
3. **View Current Settings**: All current settings are automatically loaded

#### **Updating Bank Settings**
1. **Fill Bank Details**: Enter bank name, account number, and account holder name
2. **Save Changes**: Click "Save Bank Settings" button
3. **Confirmation**: Success message appears when saved
4. **Public Update**: Bank details are immediately updated on the public payment page

#### **Updating General Settings**
1. **Modify Settings**: Change billing day, late fees, grace period, or gym information
2. **Save Changes**: Click "Save General Settings" button
3. **Confirmation**: Success message appears when saved
4. **System Update**: Settings take effect immediately

### **For Public Users**

#### **Viewing Bank Details**
1. **Access Payment Page**: Go to http://localhost:3000 and scroll to payment section
2. **Automatic Loading**: Bank details are loaded automatically from admin settings
3. **Real-time Updates**: Any changes made by admin are immediately reflected

## 🛡️ **Security Features**

### **Authentication**
- **Admin Only**: Settings management requires admin authentication
- **JWT Tokens**: All settings API calls require valid JWT tokens
- **Public Access**: Bank details endpoint is public (no authentication required)

### **Data Validation**
- **Required Fields**: Bank name, account number, and account holder name are required
- **Input Validation**: Billing day must be between 1-31
- **Error Handling**: Comprehensive error handling for all operations

## 📱 **User Experience**

### **Admin Interface**
- **Intuitive Design**: Clear separation between bank and general settings
- **Visual Feedback**: Success/error messages for all operations
- **Form Validation**: Real-time validation for required fields
- **Responsive Layout**: Works on all screen sizes

### **Public Interface**
- **Loading States**: Shows spinner while loading bank details
- **Error Handling**: Graceful fallback if bank details cannot be loaded
- **Real-time Updates**: Changes made by admin are immediately visible

## 🚀 **Current Status**

✅ **Settings tab added to admin panel**  
✅ **Bank account settings form implemented**  
✅ **General settings form implemented**  
✅ **API endpoints for settings management**  
✅ **Frontend JavaScript for settings management**  
✅ **Public payment page updated to fetch bank details**  
✅ **Database schema updated with new settings**  
✅ **Server running on port 3000**  

## 📋 **Settings Available**

### **Bank Settings**
- `bank_name`: Bank name for transfers
- `bank_account_number`: Account number for transfers
- `bank_account_name`: Account holder name

### **General Settings**
- `billing_day`: Day of month for bill generation (1-31)
- `late_fee`: Late payment fee amount in MVR
- `grace_period_days`: Grace period before marking overdue
- `gym_name`: Name of the gym
- `gym_address`: Physical address
- `gym_phone`: Contact phone number
- `gym_email`: Contact email address

## 🎉 **Benefits**

### **For Admins**
- **Centralized Management**: All settings in one place
- **Easy Updates**: Simple forms for updating settings
- **Real-time Changes**: Settings take effect immediately
- **No Code Changes**: Update settings without touching code

### **For Users**
- **Accurate Information**: Always see current bank details
- **No Manual Updates**: Bank details update automatically
- **Reliable Service**: Error handling ensures information is always available

**The settings functionality is now fully operational with comprehensive management capabilities!** ⚙️✅