client/addons/org/ui/_site/script.js

// Simulated organization data - this would be replaced with actual game data
let orgData = {
    name: "Black Rifle Company",
    reputation: 1250,
    funds: 75000,
    transactions: [
        { id: 1, type: "deposit", amount: 5000, description: "Weekly income", date: "2025-04-12T10:30:00" },
        { id: 2, type: "withdrawal", amount: -2000, description: "Vehicle maintenance", date: "2025-04-11T15:45:00" },
        { id: 3, type: "deposit", amount: 3000, description: "Property rent", date: "2025-04-10T09:15:00" },
        { id: 4, type: "withdrawal", amount: -1500, description: "Equipment purchase", date: "2025-04-09T14:20:00" }
    ],
    members: [
        { id: 1, name: "John Doe", role: "owner", status: "online" },
        { id: 2, name: "Jane Smith", role: "admin", status: "online" },
        { id: 3, name: "Mike Johnson", role: "member", status: "offline" },
        { id: 4, name: "Sarah Wilson", role: "member", status: "online" },
        { id: 5, name: "Jane Doe", role: "member", status: "offline" }
    ],
    vehicles: [
        { id: 1, name: "Transport Truck", type: "Vehicle", value: 25000 },
        { id: 2, name: "Patrol Car", type: "Vehicle", value: 15000 }
    ],
    equipment: [
        { id: 1, name: "Combat Gear Set", type: "Equipment", value: 5000 },
        { id: 3, name: "Radio Equipment", type: "Equipment", value: 3000 }
    ],
    properties: [
        { id: 1, name: "Main Base", type: "Property", value: 100000 },
        { id: 2, name: "Storage Facility", type: "Property", value: 50000 }
    ],
    supplies: [
        { id: 1, name: "Medical Supplies", type: "Supply", value: 2000, quantity: 50 },
        { id: 2, name: "Ammunition", type: "Supply", value: 5000, quantity: 1000 },
        { id: 3, name: "Food Rations", type: "Supply", value: 1000, quantity: 100 },
        { id: 4, name: "Repair Kits", type: "Supply", value: 3000, quantity: 25 }
    ],
    memos: [
        {
            id: 1,
            title: "Weekly Mission Update",
            content: "New assignments available in the northern sector. All teams please check your mission boards.",
            author: "John Doe",
            date: "2025-04-12T08:30:00",
            priority: "high"
        },
        {
            id: 2,
            title: "Equipment Maintenance",
            content: "Regular maintenance check required for all vehicles by end of week.",
            author: "Jane Smith",
            date: "2025-04-11T14:15:00",
            priority: "medium"
        }
    ]
};

// Initialize the organization interface
function initializeOrg() {
    updateOrgInfo();
    updateMembers();
    updateAssets();
    updateTransactions();
    updateMemos();
    setupMemoControls();
}

// Update organization info in the header
function updateOrgInfo() {
    document.getElementById('orgName').textContent = orgData.name;
    document.getElementById('orgReputation').textContent = orgData.reputation.toLocaleString();
    document.getElementById('orgFunds').textContent = `$${orgData.funds.toLocaleString()}`;
}

// Update members list
function updateMembers() {
    const membersList = document.getElementById('membersList');
    membersList.innerHTML = '';

    orgData.members.forEach(member => {
        const li = document.createElement('li');
        li.className = 'member-item';
        
        li.innerHTML = `
            <div class="member-info">
                <span class="member-status status-${member.status}"></span>
                <span>${member.name}</span>
                <span class="member-role role-${member.role}">${member.role}</span>
            </div>
        `;
        
        membersList.appendChild(li);
    });
}

// Update assets lists (vehicles, equipment, properties)
function updateAssets() {
    // Update vehicles
    const vehiclesList = document.getElementById('vehiclesList');
    vehiclesList.innerHTML = '';
    orgData.vehicles.forEach(vehicle => {
        const li = document.createElement('li');
        li.className = 'asset-item';
        li.innerHTML = `
            <div class="asset-info">
                <span>${vehicle.name}</span>
                <span class="asset-type">${vehicle.type}</span>
            </div>
            <span class="asset-value">$${vehicle.value.toLocaleString()}</span>
        `;
        vehiclesList.appendChild(li);
    });

    // Update equipment
    const equipmentList = document.getElementById('equipmentList');
    equipmentList.innerHTML = '';
    orgData.equipment.forEach(item => {
        const li = document.createElement('li');
        li.className = 'asset-item';
        li.innerHTML = `
            <div class="asset-info">
                <span>${item.name}</span>
            </div>
        `;
        equipmentList.appendChild(li);
    });

    // Update properties
    const propertiesList = document.getElementById('propertiesList');
    propertiesList.innerHTML = '';
    orgData.properties.forEach(property => {
        const li = document.createElement('li');
        li.className = 'asset-item';
        li.innerHTML = `
            <div class="asset-info">
                <span>${property.name}</span>
                <span class="asset-type">${property.type}</span>
            </div>
            <span class="asset-value">$${property.value.toLocaleString()}</span>
        `;
        propertiesList.appendChild(li);
    });

    // Update supplies
    const suppliesList = document.getElementById('suppliesList');
    suppliesList.innerHTML = '';
    orgData.supplies.forEach(supply => {
        const li = document.createElement('li');
        li.className = 'asset-item';
        li.innerHTML = `
            <div class="asset-info">
                <span>${supply.name}</span>
                <div class="supply-details">
                    <span class="asset-type">${supply.type}</span>
                    <span class="supply-quantity">Qty: ${supply.quantity}</span>
                </div>
            </div>
            <span class="asset-value">$${supply.value.toLocaleString()}</span>
        `;
        suppliesList.appendChild(li);
    });
}

// Update transactions list
function updateTransactions() {
    const transactionsList = document.getElementById('transactionsList');
    transactionsList.innerHTML = '';
    
    // Sort transactions by date (newest first)
    const sortedTransactions = [...orgData.transactions].sort((a, b) => 
        new Date(b.date) - new Date(a.date)
    );
    
    sortedTransactions.forEach(transaction => {
        const li = document.createElement('li');
        li.className = 'transaction-item';
        
        const amount = parseFloat(transaction.amount);
        const isPositive = amount >= 0;
        
        li.innerHTML = `
            <div class="transaction-info">
                <div class="transaction-type">${transaction.type}</div>
                <div class="transaction-details">${transaction.description}</div>
            </div>
            <div class="transaction-amount ${isPositive ? 'amount-positive' : 'amount-negative'}">
                ${isPositive ? '+' : ''}$${Math.abs(amount).toLocaleString()}
            </div>
        `;
        
        transactionsList.appendChild(li);
    });
}

// Update memos list
function updateMemos() {
    const memosList = document.getElementById('memosList');
    memosList.innerHTML = '';

    orgData.memos.forEach(memo => {
        const li = document.createElement('li');
        li.className = 'memo-item';
        
        const date = new Date(memo.date);
        const formattedDate = date.toLocaleDateString('en-US', { 
            year: 'numeric', 
            month: 'short', 
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
        
        li.innerHTML = `
            <div class="memo-header">
                <div class="memo-title">${memo.title}</div>
                <div class="memo-metadata">
                    <span class="memo-author">by ${memo.author}</span>
                    <span class="memo-date">${formattedDate}</span>
                </div>
            </div>
            <div class="memo-content">${memo.content}</div>
        `;
        
        memosList.appendChild(li);
    });
}

// Set up memo controls and dialog
function setupMemoControls() {
    const addMemoBtn = document.getElementById('addMemoBtn');
    
    addMemoBtn.addEventListener('click', () => {
        showMemoDialog();
    });
}

// Show memo creation dialog
function showMemoDialog() {
    const dialog = document.createElement('div');
    dialog.className = 'memo-dialog';
    
    dialog.innerHTML = `
        <form class="memo-form" id="memoForm">
            <div class="form-group">
                <label for="memoTitle">Title</label><br/>
                <input type="text" id="memoTitle" required>
            </div>
            <div class="form-group">
                <label for="memoContent">Content</label><br/>
                <textarea id="memoContent" required></textarea>
            </div>
            <div class="memo-form-buttons">
                <button type="button" class="cancel-btn" id="cancelMemo">Cancel</button>
                <button type="submit" class="submit-btn">Add Memo</button>
            </div>
        </form>
    `;
    
    const overlay = document.createElement('div');
    overlay.className = 'memo-dialog-overlay';
    
    document.body.appendChild(overlay);
    document.body.appendChild(dialog);
    
    const form = dialog.querySelector('#memoForm');
    const cancelBtn = dialog.querySelector('#cancelMemo');
    
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const newMemo = {
            id: orgData.memos.length + 1,
            title: document.getElementById('memoTitle').value,
            content: document.getElementById('memoContent').value,
            author: orgData.members.find(m => m.role === 'owner').name,
            date: new Date().toISOString(),
            priority: "normal"
        };
        
        orgData.memos.unshift(newMemo);
        updateMemos();
        
        closeMemoDialog(dialog, overlay);
    });
    
    cancelBtn.addEventListener('click', () => {
        closeMemoDialog(dialog, overlay);
    });
    
    overlay.addEventListener('click', () => {
        closeMemoDialog(dialog, overlay);
    });
}

// Close memo dialog
function closeMemoDialog(dialog, overlay) {
    document.body.removeChild(dialog);
    document.body.removeChild(overlay);
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeOrg);