{"id":20128,"date":"2026-03-27T12:39:36","date_gmt":"2026-03-27T12:39:36","guid":{"rendered":"https:\/\/www.usviodr.com\/proyectos-de-reconstruccion-de-usvi\/"},"modified":"2026-04-12T08:32:10","modified_gmt":"2026-04-12T08:32:10","slug":"proyectos-de-reconstruccion-de-usvi","status":"publish","type":"page","link":"https:\/\/www.usviodr.com\/es\/proyectos-de-reconstruccion-de-usvi\/","title":{"rendered":"Proyectos de Reconstrucci\u00f3n de USVI"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"433\" class=\"wp-block-cover__image-background wp-image-1840 size-large\" alt=\"\" src=\"https:\/\/www.usviodr.com\/wp-content\/uploads\/2026\/03\/active-contracts-hero-1024x433.png\" data-object-fit=\"cover\" srcset=\"https:\/\/www.usviodr.com\/wp-content\/uploads\/2026\/03\/active-contracts-hero-1024x433.png 1024w, https:\/\/www.usviodr.com\/wp-content\/uploads\/2026\/03\/active-contracts-hero-300x127.png 300w, https:\/\/www.usviodr.com\/wp-content\/uploads\/2026\/03\/active-contracts-hero-768x325.png 768w, https:\/\/www.usviodr.com\/wp-content\/uploads\/2026\/03\/active-contracts-hero.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-base-2-background-color has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-da7e64e0 wp-block-cover-is-layout-constrained\">\n<h1 class=\"wp-block-heading has-text-align-left\">Proyectos de Reconstrucci\u00f3n de USVI<\/h1>\n<\/div><\/div>\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-da7e64e0 wp-block-group-is-layout-constrained\">    <div class=\"ord-pcards-wrapper\" id=\"ord-pcards-69dc1aa6757fd\">\n    <style>\n        #ord-pcards-69dc1aa6757fd * { box-sizing: border-box; }\n\n        .ord-pcards-wrapper {\n            font-family: 'Poppins', sans-serif;\n                        padding: 50px 20px;\n            background: #f8f9fa;\n        }\n\n        .ord-pcards-search-container {\n            max-width: 620px;\n            margin: 0 auto 30px;\n            position: relative;\n        }\n\n        .ord-pcards-search-input {\n            width: 100%;\n            padding: 16px 20px 16px 55px;\n            border: 2px solid #e0e0e0;\n            border-radius: 50px;\n            font-size: 16px;\n            outline: none;\n            transition: all 0.3s ease;\n        }\n\n        .ord-pcards-search-input:focus {\n            border-color: #0768a9;\n            box-shadow: 0 0 0 4px rgba(7, 104, 169, 0.08);\n        }\n\n        .ord-pcards-search-icon {\n            position: absolute;\n            left: 22px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: #666;\n            font-size: 20px;\n        }\n\n        \/* Alphabetical Filter Bar *\/\n        .ord-pcards-alpha-filter {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            gap: 8px;\n            margin-bottom: 40px;\n            padding: 15px;\n            background: #fff;\n            border-radius: 50px;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n            max-width: 800px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .ord-pcards-alpha-btn {\n            background: #f0f0f0;\n            border: 1px solid #e0e0e0;\n            border-radius: 30px;\n            padding: 8px 16px;\n            font-size: 14px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #495057;\n            min-width: 44px;\n            text-align: center;\n        }\n\n        .ord-pcards-alpha-btn:hover {\n            background: #e0e0e0;\n            border-color: #0768a9;\n        }\n\n        .ord-pcards-alpha-btn.active {\n            background: #0768a9;\n            border-color: #0768a9;\n            color: #fff;\n        }\n\n        .ord-pcards-alpha-clear {\n            background: #f8f9fa;\n            border-color: #dee2e6;\n            color: #dc3545;\n        }\n\n        .ord-pcards-alpha-clear:hover {\n            background: #dc3545;\n            border-color: #dc3545;\n            color: #fff;\n        }\n\n        .ord-pcards-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 30px;\n            max-width: 1400px;\n            margin: 0 auto 40px;\n        }\n\n        .ord-pcards-card {\n            background: #ffffff;\n            border-radius: 16px;\n            overflow: hidden;\n            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);\n            transition: all 0.35s ease;\n        }\n\n        .ord-pcards-card:hover {\n            transform: translateY(-10px);\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);\n        }\n\n        .ord-pcards-card-img {\n            width: 100%;\n            height: 190px;\n            object-fit: contain;\n            background: #eef6fc;\n        }\n\n        .ord-pcards-card-body {\n            padding: 22px;\n        }\n\n        .ord-pcards-card-island {\n            font-size: 15px;\n            font-weight: 700;\n            color: #0768a9;\n            margin-bottom: 8px;\n        }\n\n        .ord-pcards-card-name {\n            font-size: 18px;\n            font-weight: 700;\n            line-height: 1.35;\n            color: #1a1a1a;\n            margin-bottom: 14px;\n            min-height: 54px;\n        }\n\n        .ord-pcards-card-info {\n            font-size: 13.5px;\n            color: #444;\n            margin-bottom: 6px;\n        }\n\n        .ord-pcards-card-dates {\n            display: flex;\n            gap: 12px;\n            margin-top: 8px;\n            padding-top: 8px;\n            border-top: 1px solid #eee;\n        }\n\n        .ord-pcards-card-dates .date-item {\n            flex: 1;\n            font-size: 12px;\n        }\n\n        .ord-pcards-card-dates .date-item strong {\n            display: block;\n            font-size: 11px;\n            color: #0768a9;\n            margin-bottom: 3px;\n            text-transform: uppercase;\n        }\n\n        .ord-pcards-card-actions {\n            display: flex;\n            gap: 12px;\n            margin-top: 22px;\n        }\n\n        .ord-pcards-btn {\n            flex: 1;\n            padding: 13px 18px;\n            border: none;\n            border-radius: 30px;\n            font-weight: 600;\n            font-size: 14px;\n            cursor: pointer;\n            text-align: center;\n            text-decoration: none;\n            transition: all 0.3s;\n        }\n\n        .ord-pcards-btn-readmore {\n            background: #ffc20f;\n            color: #0056b3;\n        }\n        .ord-pcards-btn-readmore:hover { background: #e5af00; }\n\n        .ord-pcards-btn-viewmap {\n            background: #0768a9;\n            color: #fff;\n        }\n        .ord-pcards-btn-viewmap:hover { background: #055a90; }\n\n        \/* Pagination Styles *\/\n        .ord-pcards-pagination {\n            display: flex;\n            justify-content: center;\n            flex-wrap: wrap;\n            gap: 6px;\n            margin-top: 40px;\n        }\n\t\t\n\n        .ord-pcards-page-btn {\n            padding: 10px 15px;\n            border: 1px solid #ddd;\n            background: #fff;\n            color: #333;\n            border-radius: 8px;\n            cursor: pointer;\n            font-weight: 500;\n            min-width: 40px;\n            text-align: center;\n            transition: all 0.3s;\n        }\n\n        .ord-pcards-page-btn:hover {\n            background: #f0f0f0;\n            border-color: #bbb;\n        }\n\n        .ord-pcards-page-btn.active {\n            background: #0768a9;\n            color: #fff;\n            border-color: #0768a9;\n        }\n\n        .ord-pcards-page-btn.disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n\n        .ord-pcards-ellipsis {\n            padding: 10px 8px;\n            color: #666;\n            font-weight: bold;\n        }\n\n        .ord-pcards-no-results {\n            grid-column: 1 \/ -1;\n            text-align: center;\n            padding: 80px 20px;\n            font-size: 18px;\n            color: #666;\n            background: #fff;\n            border-radius: 12px;\n        }\n\t\t\n\n\n        @media (max-width: 768px) {\n            .ord-pcards-grid { grid-template-columns: 1fr; gap: 25px; }\n            .ord-pcards-alpha-filter { border-radius: 20px; padding: 12px; gap: 6px; }\n            .ord-pcards-alpha-btn { padding: 6px 12px; font-size: 12px; min-width: 36px; }\n            .ord-pcards-card-dates { flex-direction: column; gap: 6px; }\n        }\n\t\t\n\n\n    <\/style>\n\n    <!-- Search Bar -->\n    <div class=\"ord-pcards-search-container\">\n        <input type=\"text\" \n               id=\"ord-pcards-69dc1aa6757fd-search\" \n               class=\"ord-pcards-search-input\" \n               placeholder=\"Search by Project Name, Agency or District...\">\n    <\/div>\n\n    <!-- Alphabetical Filter Bar -->\n    <div class=\"ord-pcards-alpha-filter\" id=\"ord-pcards-69dc1aa6757fd-alpha-filter\"><\/div>\n\n    <!-- Cards Grid -->\n    <div class=\"ord-pcards-grid\" id=\"ord-pcards-69dc1aa6757fd-grid\"><\/div>\n\n    <!-- Pagination -->\n    <div class=\"ord-pcards-pagination\" id=\"ord-pcards-69dc1aa6757fd-pagination\"><\/div>\n\n    <script>\n    (function($) {\n        'use strict';\n\n        $(document).ready(function() {\n            var wrapperId   = 'ord-pcards-69dc1aa6757fd';\n            var perPage     = 9;\n            var ajaxNonce   = '355f8b64e0';\n            var ajaxUrl     = 'https:\/\/www.usviodr.com\/wp-admin\/admin-ajax.php';\n            var projectsUrl = '\/projects\/';\n            var cardImage   = '';\n            \n            \/\/ Default image if none set\n            var defaultImage = 'https:\/\/dev-us-vi-odr-latest.pantheonsite.io\/wp-content\/uploads\/2026\/03\/USVI-Map-2026-Vertical-1-1-scaled.png';\n            var finalCardImage = cardImage ? cardImage : defaultImage;\n\n            var $grid       = $('#' + wrapperId + '-grid');\n            var $pagination = $('#' + wrapperId + '-pagination');\n            var $search     = $('#' + wrapperId + '-search');\n            var $alphaFilter = $('#' + wrapperId + '-alpha-filter');\n\n            var allProjectsData = [];\n            var currentPage     = 1;\n            var currentSearchTerm = '';\n            var currentAlphaFilter = '';\n\n            function escapeHtml(text) {\n                if (!text) return '';\n                return String(text)\n                    .replace(\/&\/g, '&amp;')\n                    .replace(\/<\/g, '&lt;')\n                    .replace(\/>\/g, '&gt;')\n                    .replace(\/\"\/g, '&quot;')\n                    .replace(\/'\/g, '&#039;');\n            }\n\n            function formatDate(dateString) {\n                if (!dateString) return 'N\/A';\n                \/\/ If date is in MM\/YYYY format, return as is\n                if (dateString.match(\/^\\d{1,2}\\\/\\d{4}$\/)) {\n                    return dateString;\n                }\n                \/\/ If date is in YYYY-MM-DD format, convert to MM\/YYYY\n                if (dateString.match(\/^\\d{4}-\\d{2}-\\d{2}$\/)) {\n                    var parts = dateString.split('-');\n                    return parts[1] + '\/' + parts[0];\n                }\n                return dateString;\n            }\n\n            function renderCards(projects) {\n                $grid.empty();\n                if (projects.length === 0) {\n                    $grid.html('<div class=\"ord-pcards-no-results\">No SPMO Construction projects found matching your search.<\/div>');\n                    $pagination.empty();\n                    return;\n                }\n\n                var html = '';\n                projects.forEach(function(p) {\n                    var island = p.district ? p.district : 'U.S. Virgin Islands';\n                    var startDate = formatDate(p.start_date);\n                    var endDate = formatDate(p.end_date);\n                    \n                    html += `\n                        <div class=\"ord-pcards-card\">\n                            <img decoding=\"async\" src=\"${finalCardImage}\" \n                                 alt=\"${escapeHtml(p.name)}\" \n                                 class=\"ord-pcards-card-img\"\n                                 onerror=\"this.src='${defaultImage}'\">\n                            <div class=\"ord-pcards-card-body\">\n                                <div class=\"ord-pcards-card-island\">${escapeHtml(island)}<\/div>\n                                <div class=\"ord-pcards-card-name\">${escapeHtml(p.name)}<\/div>\n                                <div class=\"ord-pcards-card-info\"><strong>Agency:<\/strong> ${escapeHtml(p.agency || 'N\/A')}<\/div>\n                                <div class=\"ord-pcards-card-info\"><strong>Status:<\/strong> ${escapeHtml(p.project_phase || 'N\/A')}<\/div>\n                                <div class=\"ord-pcards-card-info\"><strong>Cost:<\/strong> ${escapeHtml(p.total_project_cost || 'N\/A')}<\/div>\n                                <div class=\"ord-pcards-card-dates\">\n                                    <div class=\"date-item\"><strong>Start Date<\/strong> ${escapeHtml(startDate)}<\/div>\n                                    <div class=\"date-item\"><strong>End Date<\/strong> ${escapeHtml(endDate)}<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    `;\n                });\n                $grid.html(html);\n            }\n\n            \/\/ Generate alphabetical filter buttons\n            function generateAlphaFilter(projects) {\n                var letters = {};\n                projects.forEach(function(p) {\n                    if (p.name) {\n                        var firstChar = p.name.trim().charAt(0).toUpperCase();\n                        if (firstChar.match(\/[A-Z]\/)) {\n                            letters[firstChar] = true;\n                        }\n                    }\n                });\n                \n                var sortedLetters = Object.keys(letters).sort();\n                var html = '';\n                \n                sortedLetters.forEach(function(letter) {\n                    var activeClass = (currentAlphaFilter === letter) ? 'active' : '';\n                    html += `<button class=\"ord-pcards-alpha-btn ${activeClass}\" data-alpha=\"${letter}\">${letter}<\/button>`;\n                });\n                \n                var clearActiveClass = (currentAlphaFilter === '') ? 'active' : '';\n                html += `<button class=\"ord-pcards-alpha-btn ord-pcards-alpha-clear ${clearActiveClass}\" data-alpha=\"clear\">All<\/button>`;\n                \n                $alphaFilter.html(html);\n            }\n\n            \/\/ Smart Pagination: 1 2 3 ... Last\n            function renderPagination(totalItems) {\n                $pagination.empty();\n                var totalPages = Math.ceil(totalItems \/ perPage);\n                if (totalPages <= 1) return;\n\n                var html = '';\n                var maxVisible = 5; \/\/ Show max 5 page numbers + ellipsis\n\n                \/\/ Previous\n                html += `<button class=\"ord-pcards-page-btn\" data-page=\"${currentPage-1}\" ${currentPage === 1 ? 'disabled' : ''}>\u2039 Prev<\/button>`;\n\n                if (totalPages <= maxVisible) {\n                    \/\/ Show all pages if few\n                    for (var i = 1; i <= totalPages; i++) {\n                        html += `<button class=\"ord-pcards-page-btn ${i === currentPage ? 'active' : ''}\" data-page=\"${i}\">${i}<\/button>`;\n                    }\n                } else {\n                    \/\/ Smart logic with ellipsis\n                    html += `<button class=\"ord-pcards-page-btn ${currentPage === 1 ? 'active' : ''}\" data-page=\"1\">1<\/button>`;\n\n                    if (currentPage > 3) {\n                        html += `<span class=\"ord-pcards-ellipsis\">...<\/span>`;\n                    }\n\n                    \/\/ Middle pages\n                    var start = Math.max(2, currentPage - 1);\n                    var end   = Math.min(totalPages - 1, currentPage + 1);\n\n                    for (var i = start; i <= end; i++) {\n                        html += `<button class=\"ord-pcards-page-btn ${i === currentPage ? 'active' : ''}\" data-page=\"${i}\">${i}<\/button>`;\n                    }\n\n                    if (currentPage < totalPages - 2) {\n                        html += `<span class=\"ord-pcards-ellipsis\">...<\/span>`;\n                    }\n\n                    html += `<button class=\"ord-pcards-page-btn ${currentPage === totalPages ? 'active' : ''}\" data-page=\"${totalPages}\">${totalPages}<\/button>`;\n                }\n\n                \/\/ Next\n                html += `<button class=\"ord-pcards-page-btn\" data-page=\"${currentPage+1}\" ${currentPage === totalPages ? 'disabled' : ''}>Next \u203a<\/button>`;\n\n                $pagination.html(html);\n            }\n\n            function getFilteredProjects() {\n                var filtered = allProjectsData;\n                \n                \/\/ Apply search filter\n                if (currentSearchTerm) {\n                    filtered = filtered.filter(function(p) {\n                        return (p.name && p.name.toLowerCase().includes(currentSearchTerm)) ||\n                               (p.agency && p.agency.toLowerCase().includes(currentSearchTerm)) ||\n                               (p.district && p.district.toLowerCase().includes(currentSearchTerm));\n                    });\n                }\n                \n                \/\/ Apply alphabetical filter\n                if (currentAlphaFilter) {\n                    filtered = filtered.filter(function(p) {\n                        if (!p.name) return false;\n                        var firstChar = p.name.trim().charAt(0).toUpperCase();\n                        return firstChar === currentAlphaFilter;\n                    });\n                }\n                \n                return filtered;\n            }\n\n            function showPage(page) {\n                var filtered = getFilteredProjects();\n                var totalPages = Math.ceil(filtered.length \/ perPage);\n                currentPage = Math.max(1, Math.min(page, totalPages || 1));\n                \n                var start = (currentPage - 1) * perPage;\n                var paginated = filtered.slice(start, start + perPage);\n\n                renderCards(paginated);\n                renderPagination(filtered.length);\n            }\n\n            \/\/ Load Projects - FILTER FOR SPMO CONSTRUCTION ONLY\n            function loadAllProjects() {\n                $grid.html('<div style=\"grid-column:1\/-1;text-align:center;padding:100px;color:#666;\">Loading SPMO Construction projects...<\/div>');\n\n                $.ajax({\n                    url: ajaxUrl,\n                    type: 'POST',\n                    data: { action: 'ord_get_projects_data', card_type: 'all-projects', nonce: ajaxNonce },\n                    success: function(res) {\n                        if (res.success && res.data) {\n                            \/\/ Filter projects to only show those with project_type = \"SPMO Construction\"\n                            allProjectsData = res.data.filter(function(project) {\n                                return project.project_type && \n                                       project.project_type.toLowerCase().trim() === 'spmo construction';\n                            });\n                        } else {\n                            allProjectsData = [];\n                        }\n                        \n                        generateAlphaFilter(allProjectsData);\n                        currentPage = 1;\n                        currentAlphaFilter = '';\n                        currentSearchTerm = '';\n                        $search.val('');\n                        showPage(1);\n                    },\n                    error: function() {\n                        $grid.html('<div class=\"ord-pcards-no-results\">Failed to load SPMO Construction projects.<\/div>');\n                    }\n                });\n            }\n\n            \/\/ Search\n            $search.on('input keyup', function() {\n                currentSearchTerm = $(this).val().toLowerCase().trim();\n                currentPage = 1;\n                showPage(1);\n            });\n\n            \/\/ Alphabetical Filter Click Handler\n            $alphaFilter.on('click', '.ord-pcards-alpha-btn', function() {\n                var alpha = $(this).data('alpha');\n                \n                if (alpha === 'clear') {\n                    currentAlphaFilter = '';\n                } else {\n                    currentAlphaFilter = alpha;\n                }\n                \n                currentPage = 1;\n                \n                \/\/ Update active state\n                $alphaFilter.find('.ord-pcards-alpha-btn').removeClass('active');\n                $(this).addClass('active');\n                if (alpha === 'clear') {\n                    \/\/ Also clear any previously selected letter's active state\n                    $alphaFilter.find('.ord-pcards-alpha-btn[data-alpha]').each(function() {\n                        if ($(this).data('alpha') !== 'clear') {\n                            $(this).removeClass('active');\n                        }\n                    });\n                }\n                \n                showPage(1);\n            });\n\n            \/\/ Pagination Click Handler\n            $pagination.on('click', '.ord-pcards-page-btn', function() {\n                if ($(this).attr('disabled')) return;\n                var page = parseInt($(this).data('page'));\n                if (page) showPage(page);\n            });\n\n            \/\/ Initialize\n            loadAllProjects();\n        });\n    })(jQuery);\n    <\/script>\n    <\/div>\n    \n<\/div>\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-da7e64e0 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-background\" style=\"background-color:#fef4c7\">Tenga en cuenta: Las fechas de inicio y finalizaci\u00f3n de los proyectos que est\u00e1n en construcci\u00f3n o que a\u00fan no han iniciado la construcci\u00f3n son fechas objetivo y est\u00e1n sujetas a cambios.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tenga en cuenta: Las fechas de inicio y finalizaci\u00f3n de los proyectos que est\u00e1n en construcci\u00f3n o que a\u00fan no han iniciado la construcci\u00f3n son fechas objetivo y est\u00e1n sujetas a cambios.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"project_id":"","notification":"","due_date":"","status":"","show_rebuild":"","footnotes":""},"class_list":["post-20128","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/pages\/20128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/comments?post=20128"}],"version-history":[{"count":1,"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/pages\/20128\/revisions"}],"predecessor-version":[{"id":20129,"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/pages\/20128\/revisions\/20129"}],"wp:attachment":[{"href":"https:\/\/www.usviodr.com\/es\/wp-json\/wp\/v2\/media?parent=20128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}