Retrieves organization transaction data. Click 'Query' to begin.


    
    
        
        const CLOUD_RUN_URL = "https://christaidintlgivebutterquery-177584565771.us-south1.run.app"; 
        const GOOGLE_CLIENT_ID = "177584565771-ogbevk5u833dv5qoqhkcs32pi7sgbu5o.apps.googleusercontent.com"; 

        const button = document.getElementById('fetchDataButton');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const resultsDisplay = document.getElementById('resultsDisplay');

        let tokenClient = null; 

        // --- Core Invocation Logic ---
        function callCloudRun(idToken) {
            
            loadingIndicator.style.display = 'block';
            resultsDisplay.style.display = 'none';
            button.disabled = true;

            const payload = {
                "fields_to_keep": ["id", "amount", "status", "donor_name", "created_at", "donor_email"]
            };
            
            fetch(CLOUD_RUN_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${idToken}`, 
                },
                body: JSON.stringify(payload)
            })
            .then(response => response.json().then(data => ({ status: response.status, body: data })))
            .then(res => {
                if (res.status === 403) {
                     resultsDisplay.textContent = "ACCESS DENIED (403 Forbidden). Ensure you are logged into your organization's Google Workspace account in this browser and have granted permission.";
                } else if (!res.status.toString().startsWith('2')) {
                    resultsDisplay.textContent = `Error ${res.status}: ${res.body.error || JSON.stringify(res.body, null, 2)}`;
                } else {
                    const transactionCount = res.body.length || 0;
                    resultsDisplay.textContent = `Successfully fetched ${transactionCount} transactions.\n\n${JSON.stringify(res.body, null, 2)}`;
                }
            })
            .catch(error => {
                resultsDisplay.textContent = `A network or fetch error occurred: ${error.message}.`;
            })
            .finally(() => {
                loadingIndicator.style.display = 'none';
                resultsDisplay.style.display = 'block';
                button.disabled = false;
            });
        }


        // --- Authentication Flow ---
        function handleAuthAndQuery() {
            tokenClient.callback = (resp) => {
                if (resp.error) {
                    resultsDisplay.textContent = "Authentication failed. You must grant permission and be signed into your organization's Google account.";
                    resultsDisplay.style.display = 'block';
                    button.disabled = false;
                } else {
                    callCloudRun(resp.access_token);
                }
            };
            
            tokenClient.requestAccessToken();
        }
        
        // --- Initialization ---
        window.onload = function() {
            // Check if the GIS script loaded, if not, authentication will fail.
            if (typeof google === 'undefined' || typeof google.accounts === 'undefined') {
                resultsDisplay.textContent = "Authentication setup error: Google Identity Services script is missing or failed to load. Please ensure the  tag is present in your page's header.";
                resultsDisplay.style.display = 'block';
                return;
            }

            tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: GOOGLE_CLIENT_ID,
                scope: 'openid email profile',
                callback: '', 
            });

            button.addEventListener('click', handleAuthAndQuery);
            
            applyStyles();
        };

        // --- Styling Function (From Previous Steps) ---
        function applyStyles() {
            const container = document.querySelector('.cloud-run-container');
            const primaryColor = getComputedStyle(document.body).getPropertyValue('--color-accent') || '#f58738';
            const buttonTextColor = getComputedStyle(document.body).getPropertyValue('--color-7') || '#ffffff';
            
            button.style.backgroundColor = primaryColor;
            button.style.color = buttonTextColor;
            
            container.style.fontFamily = getComputedStyle(document.body).fontFamily || 'sans-serif';
            container.style.fontSize = getComputedStyle(document.body).fontSize || '16px';
            
            container.style.maxWidth = '100%';
            container.style.padding = '10px';
        }