Portfolio Overview Template

<!-- Portfolio Overview Template Structure -->
<div class="portfolio-dashboard" x-data="portfolioTemplate()">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <h2>Global Portfolio Overview</h2>
        <div class="controls">
            <select x-model="selectedPeriod">
                <option value="6m">Last 6 months</option>
                <option value="1y">Last year</option>
            </select>
        </div>
    </div>

    <!-- KPI Grid -->
    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-value" x-text="formatCurrency(portfolioData.totalValue)"></div>
            <div class="kpi-label">Total Portfolio Value</div>
            <div class="kpi-trend">+12%</div>
        </div>
        <!-- Additional KPI cards... -->
    </div>

    <!-- Charts Grid -->
    <div class="charts-grid">
        <div class="chart-container">
            <canvas x-ref="portfolioChart"></canvas>
        </div>
        <div class="chart-container">
            <canvas x-ref="growthChart"></canvas>
        </div>
    </div>

    <!-- Data Tables -->
    <div class="tables-grid">
        <div class="regional-impact-table">
            <!-- Table implementation -->
        </div>
        <div class="top-grants-list">
            <!-- Grant cards implementation -->
        </div>
    </div>
</div>

function portfolioTemplate() {
    return {
        // Template state
        theme: 'light',
        showCode: false,
        previewMode: false,
        selectedPeriod: '1y',
        showRegionalDetails: false,

        // Portfolio data
        portfolioData: {
            totalValue: 24500000,
            totalValueTrend: 12,
            activeGrants: 156,
            activeGrantsTrend: 23,
            countriesReached: 18,
            countriesReachedTrend: 3,
            beneficiariesImpacted: 2400000,
            beneficiariesImpactedTrend: 18
        },

        // Regional data
        regionalData: [
            { name: 'Sub-Saharan Africa', grants: 45, investment: 8500000, impactScore: 92 },
            { name: 'South Asia', grants: 38, investment: 7200000, impactScore: 88 },
            { name: 'Latin America', grants: 42, investment: 6800000, impactScore: 85 },
            { name: 'Southeast Asia', grants: 31, investment: 2000000, impactScore: 78 }
        ],

        // Top performing grants
        topGrants: [
            {
                id: 1,
                title: 'Urban Health Initiative Romania',
                organization: 'Health Partners International',
                amount: 850000,
                country: 'Romania',
                status: 'Active',
                impactScore: 94
            },
            // Additional grants...
        ],

        // Recent activity
        recentActivity: [
            { id: 1, type: 'grant', description: 'New grant approved for Ghana Health Initiative', time: '2 hours ago' },
            { id: 2, type: 'report', description: 'Q3 impact report generated', time: '5 hours ago' },
            // Additional activities...
        ],

        // Charts
        portfolioChart: null,
        growthChart: null,

        // Initialization
        init() {
            this.initTheme();
            this.initCharts();
            this.loadDashboardData();
        },

        // Chart initialization
        initCharts() {
            this.$nextTick(() => {
                this.initPortfolioChart();
                this.initGrowthChart();
            });
        },

        // Portfolio distribution chart
        initPortfolioChart() {
            const ctx = this.$refs.portfolioChart.getContext('2d');
            this.portfolioChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Health Systems', 'Education', 'Climate Action', 'Digital Innovation'],
                    datasets: [{
                        data: [35, 28, 22, 15],
                        backgroundColor: ['#e91e63', '#2196f3', '#4caf50', '#ff9800']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom' }
                    }
                }
            });
        },

        // Methods
        updateDashboard() {
            // Update dashboard based on selected period
        },

        exportAs(format) {
            console.log('Exporting as', format);
        },

        formatCurrency(amount) {
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'CHF',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(amount);
        },

        formatNumber(number) {
            if (number >= 1000000) {
                return (number / 1000000).toFixed(1) + 'M';
            } else if (number >= 1000) {
                return (number / 1000).toFixed(0) + 'K';
            }
            return number.toString();
        }
    };
}