refactor: Simplify attendee profile page UI/UX

## Summary
• Removed duplicate profile information section - now only one contact info section
• Removed "Activity Over Time" chart and Chart.js dependency
• Harmonized styling with existing plugin UI patterns

## Changes
- Consolidated profile header with page title and action buttons
- Used consistent table layout for contact information
- Applied dashboard-style statistics cards
- Removed Chart.js enqueue and JavaScript functionality
- Updated CSS to match plugin's existing styling patterns
- Simplified JavaScript to handle only timeline animations

## UI Improvements
- Cleaner, more focused layout without redundant information
- Better responsive design for mobile devices
- Consistent styling with other plugin pages
- Improved print layout

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/hvac-attendee-profile.css

@@ -1,5 +1,6 @@
 /**
  * HVAC Attendee Profile Styles
+ * Harmonized with existing plugin styles
  */
 
 .hvac-attendee-profile {
@@ -11,240 +12,151 @@
 /* Profile Header */
 .hvac-profile-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 30px;
+    margin-bottom: 2em;
-    background: #fff;
+    padding-bottom: 1em;
-    padding: 30px;
+    border-bottom: 1px solid #e0e0e0;
-    border-radius: 12px;
+    flex-wrap: wrap;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    margin-bottom: 30px;
-}
-
-.hvac-profile-avatar {
-    flex-shrink: 0;
-}
-
-.hvac-profile-avatar img {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    object-fit: cover;
-    border: 4px solid #f0f4f8;
-}
-
-.hvac-avatar-placeholder {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background: #f0f4f8;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #8b95a1;
-}
-
-.hvac-avatar-placeholder i {
-    font-size: 80px;
 }
 
 .hvac-profile-title h1 {
-    margin: 0 0 10px 0;
+    margin: 0 0 0.5em 0;
-    font-size: 32px;
+    color: #333;
-    color: #1e293b;
+    font-size: 1.8rem;
     font-weight: 600;
 }
 
-.hvac-profile-email {
+.hvac-profile-subtitle {
-    margin: 0;
+    color: #666;
-    color: #64748b;
+    font-size: 1.1rem;
-    font-size: 16px;
+    font-weight: 500;
+    display: block;
 }
 
-/* Statistics Section */
+.hvac-profile-actions {
-.hvac-stats-section {
-    margin-bottom: 40px;
-}
-
-.hvac-stats-section h2 {
-    font-size: 24px;
-    color: #1e293b;
-    margin-bottom: 20px;
     display: flex;
-    align-items: center;
     gap: 10px;
+    flex-wrap: wrap;
 }
 
-.hvac-stats-section h2 i {
+.hvac-profile-actions a,
-    color: #007cba;
+.hvac-profile-actions button {
-    font-size: 20px;
+    min-width: 120px;
+    text-align: center;
 }
 
-.hvac-stats-grid {
+/* Statistics Row - Matching Dashboard Styles */
-    display: grid;
+.hvac-stats-row {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    display: flex;
-    gap: 20px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: -10px;
+    margin-bottom: 2em;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.hvac-stat-col {
+    flex: 1;
+    min-width: 160px;
+    padding: 10px;
+    margin-bottom: 0.5em;
 }
 
 .hvac-stat-card {
-    background: #fff;
+    border: 1px solid #e0e0e0;
-    border-radius: 12px;
+    border-radius: 5px;
-    padding: 25px;
+    padding: 1.5em;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    background: white;
-    display: flex;
+    text-align: center;
-    align-items: center;
+    width: 100%;
-    gap: 20px;
+    flex-grow: 1;
-    transition: transform 0.2s ease;
+    height: 100%;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .hvac-stat-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-.hvac-stat-icon {
+.hvac-stat-card h3 {
-    width: 60px;
+    margin-top: 0;
-    height: 60px;
+    margin-bottom: 0.5em;
-    border-radius: 12px;
+    font-size: 1.1em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    flex-shrink: 0;
-}
-
-.hvac-stat-card:nth-child(1) .hvac-stat-icon {
-    background: #e0f2fe;
-    color: #0284c7;
-}
-
-.hvac-stat-card:nth-child(2) .hvac-stat-icon {
-    background: #f0fdf4;
-    color: #16a34a;
-}
-
-.hvac-stat-card:nth-child(3) .hvac-stat-icon {
-    background: #fef3c7;
-    color: #d97706;
-}
-
-.hvac-stat-card:nth-child(4) .hvac-stat-icon {
-    background: #fce7f3;
-    color: #db2777;
-}
-
-.hvac-stat-content {
-    flex: 1;
-}
-
-.hvac-stat-value {
-    font-size: 32px;
-    font-weight: 700;
-    color: #1e293b;
-    line-height: 1;
-    margin-bottom: 5px;
-}
-
-.hvac-stat-label {
-    color: #64748b;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-/* Profile Information Section */
-.hvac-profile-section {
-    background: #fff;
-    border-radius: 12px;
-    padding: 30px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    margin-bottom: 40px;
-}
-
-.hvac-profile-section h2 {
-    font-size: 24px;
-    color: #1e293b;
-    margin-bottom: 25px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.hvac-profile-section h2 i {
     color: #007cba;
-    font-size: 20px;
+    font-weight: 600;
 }
 
-.hvac-profile-info {
+.stat-value {
-    display: flex;
+    font-size: 2.4em;
-    flex-direction: column;
+    font-weight: 700;
-    gap: 20px;
+    color: #333;
+    line-height: 1;
 }
 
-.hvac-info-row {
+/* Content Sections */
-    display: flex;
+.hvac-content-section {
-    align-items: center;
+    margin-bottom: 2em;
-    padding: 15px 0;
+    padding: 1.5em;
-    border-bottom: 1px solid #f1f5f9;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
-.hvac-info-row:last-child {
+.hvac-content-section h2 {
+    margin-top: 0;
+    margin-bottom: 1em;
+    font-size: 1.4rem;
+    color: #333;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+/* Info Table */
+.hvac-info-table {
+    overflow-x: auto;
+}
+
+.hvac-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.hvac-table td {
+    padding: 0.75em 1em;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.hvac-table tr:last-child td {
     border-bottom: none;
 }
 
-.hvac-info-label {
+.hvac-label {
-    flex: 0 0 200px;
+    font-weight: 600;
-    color: #64748b;
+    color: #666;
-    font-weight: 500;
+    width: 150px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
 }
 
-.hvac-info-label i {
+.hvac-table a {
-    width: 20px;
-    text-align: center;
-    color: #94a3b8;
-}
-
-.hvac-info-value {
-    flex: 1;
-    color: #1e293b;
-    font-weight: 500;
-}
-
-.hvac-info-value a {
     color: #007cba;
     text-decoration: none;
 }
 
-.hvac-info-value a:hover {
+.hvac-table a:hover {
     text-decoration: underline;
 }
 
-/* Timeline Section */
+/* Timeline */
-.hvac-timeline-section {
-    margin-bottom: 40px;
-}
-
-.hvac-timeline-section h2 {
-    font-size: 24px;
-    color: #1e293b;
-    margin-bottom: 25px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.hvac-timeline-section h2 i {
-    color: #007cba;
-    font-size: 20px;
-}
-
 .hvac-no-activity {
     text-align: center;
-    color: #64748b;
+    color: #666;
-    padding: 40px;
+    padding: 2em;
-    background: #f8fafc;
+    background: #f9f9f9;
-    border-radius: 8px;
+    border-radius: 5px;
 }
 
 .hvac-timeline {
@@ -254,28 +166,25 @@
 
 .hvac-timeline-item {
     position: relative;
-    margin-bottom: 40px;
+    margin-bottom: 2em;
     display: flex;
     align-items: flex-start;
-    gap: 30px;
+    gap: 20px;
 }
 
 .hvac-timeline-date {
     flex: 0 0 150px;
     text-align: right;
     padding-top: 5px;
-}
-
-.hvac-timeline-date {
     font-weight: 600;
-    color: #1e293b;
+    color: #333;
     font-size: 14px;
 }
 
 .hvac-timeline-time {
     display: block;
     font-weight: 400;
-    color: #94a3b8;
+    color: #999;
     font-size: 12px;
     margin-top: 2px;
 }
@@ -305,22 +214,22 @@
     top: 40px;
     width: 2px;
     height: calc(100% + 20px);
-    background: #e2e8f0;
+    background: #e0e0e0;
     z-index: 1;
 }
 
 .hvac-timeline-content {
     flex: 1;
     background: #fff;
-    padding: 20px;
+    padding: 1.5em;
-    border-radius: 8px;
+    border-radius: 5px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     margin-left: 40px;
 }
 
 .hvac-timeline-content h4 {
-    margin: 0 0 10px 0;
+    margin: 0 0 0.5em 0;
-    color: #1e293b;
+    color: #333;
     font-size: 16px;
     font-weight: 600;
 }
@@ -335,8 +244,8 @@
 }
 
 .hvac-checkin-status.checked-in {
-    background: #dcfce7;
+    background: #d4edda;
-    color: #15803d;
+    color: #155724;
 }
 
 .hvac-checkin-status.not-checked-in {
@@ -347,8 +256,8 @@
 .hvac-certificate-number {
     display: inline-block;
     padding: 4px 12px;
-    background: #fef3c7;
+    background: #fff3cd;
-    color: #a16207;
+    color: #856404;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
@@ -373,148 +282,86 @@
     margin-left: 5px;
 }
 
-/* Timeline Chart Section */
+/* Icon for profile links */
-.hvac-timeline-chart-section {
+.hvac-attendee-profile-icon {
-    background: #fff;
+    display: inline-block;
-    border-radius: 12px;
+    margin-left: 10px;
-    padding: 30px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    margin-bottom: 40px;
-}
-
-.hvac-timeline-chart-section h2 {
-    font-size: 24px;
-    color: #1e293b;
-    margin-bottom: 25px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.hvac-timeline-chart-section h2 i {
     color: #007cba;
-    font-size: 20px;
-}
-
-.hvac-chart-container {
-    position: relative;
-    height: 400px;
-}
-
-/* Action Buttons */
-.hvac-profile-actions {
-    display: flex;
-    gap: 15px;
-    justify-content: center;
-    margin-top: 40px;
-}
-
-.hvac-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-weight: 500;
     text-decoration: none;
-    transition: all 0.2s ease;
-    border: none;
-    cursor: pointer;
     font-size: 16px;
+    vertical-align: middle;
 }
 
-.hvac-button.hvac-primary {
+.hvac-attendee-profile-icon:hover {
-    background: #007cba;
+    color: #005a87;
-    color: #fff;
-}
-
-.hvac-button.hvac-primary:hover {
-    background: #005a87;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3);
-}
-
-.hvac-button.hvac-secondary {
-    background: #f3f4f6;
-    color: #374151;
-}
-
-.hvac-button.hvac-secondary:hover {
-    background: #e5e7eb;
-}
-
-.hvac-button.hvac-ghost {
-    background: transparent;
-    color: #6b7280;
-    border: 1px solid #e5e7eb;
-}
-
-.hvac-button.hvac-ghost:hover {
-    background: #f9fafb;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
     .hvac-profile-header {
-        flex-direction: column;
-        text-align: center;
-    }
-    
-    .hvac-stats-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .hvac-info-row {
         flex-direction: column;
         align-items: flex-start;
-        gap: 5px;
+        gap: 1em;
-    }
-    
-    .hvac-info-label {
-        flex: unset;
-    }
-    
-    .hvac-timeline-item {
-        flex-direction: column;
-        padding-left: 50px;
-    }
-    
-    .hvac-timeline-date {
-        text-align: left;
-        flex: unset;
-        order: 2;
-        margin-top: 10px;
-    }
-    
-    .hvac-timeline-marker {
-        left: 0;
-    }
-    
-    .hvac-timeline-connector {
-        left: 19px;
-    }
-    
-    .hvac-timeline-content {
-        margin-left: 0;
     }
     
     .hvac-profile-actions {
+        width: 100%;
+    }
+    
+    .hvac-profile-actions a,
+    .hvac-profile-actions button {
+        flex: 1;
+        min-width: auto;
+    }
+    
+    .hvac-stats-row {
         flex-direction: column;
     }
     
-    .hvac-button {
+    .hvac-stat-col {
         width: 100%;
-        justify-content: center;
+        padding: 5px 0;
+    }
+    
+    .hvac-timeline {
+        padding-left: 20px;
+    }
+    
+    .hvac-timeline-date {
+        flex: 0 0 100px;
+        font-size: 12px;
+    }
+    
+    .hvac-timeline-marker {
+        left: 118px;
+        width: 30px;
+        height: 30px;
+    }
+    
+    .hvac-timeline-connector {
+        left: 132px;
+    }
+    
+    .hvac-timeline-content {
+        margin-left: 20px;
+        padding: 1em;
     }
 }
 
 /* Print Styles */
 @media print {
-    .hvac-profile-actions {
+    .hvac-profile-actions,
-        display: none;
+    .ast-button {
+        display: none !important;
     }
     
-    .hvac-timeline-chart-section {
+    .hvac-attendee-profile {
+        padding: 0;
+    }
+    
+    .hvac-content-section {
+        box-shadow: none;
+        border: 1px solid #ddd;
         page-break-inside: avoid;
     }
     

wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/hvac-attendee-profile.js

@@ -1,288 +1,51 @@
 /**
  * HVAC Attendee Profile JavaScript
+ * Handles timeline animations and interactions
  */
 
-(function($) {
+jQuery(document).ready(function($) {
     'use strict';
 
-    $(document).ready(function() {
+    // Animate timeline items on scroll
-        // Initialize timeline chart if data exists
+    function animateTimeline() {
-        if (typeof hvacTimelineData !== 'undefined' && hvacTimelineData.length > 0) {
+        $('.hvac-timeline-item').each(function() {
-            initializeTimelineChart();
+            var $this = $(this);
-        }
+            var elementTop = $this.offset().top;
+            var elementBottom = elementTop + $this.outerHeight();
+            var viewportTop = $(window).scrollTop();
+            var viewportBottom = viewportTop + $(window).height();
 
-        // Add smooth scrolling for timeline
+            if (elementBottom > viewportTop && elementTop < viewportBottom) {
-        smoothScrollTimeline();
+                $this.addClass('hvac-timeline-visible');
-        
-        // Initialize tooltips
-        initializeTooltips();
-    });
-    
-    /**
-     * Initialize the timeline chart using Chart.js
-     */
-    function initializeTimelineChart() {
-        const ctx = document.getElementById('hvac-timeline-chart');
-        if (!ctx) return;
-        
-        // Process timeline data for the chart
-        const chartData = processTimelineData();
-        
-        // Create the chart
-        new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: chartData.labels,
-                datasets: [
-                    {
-                        label: 'Registrations',
-                        data: chartData.registrations,
-                        borderColor: '#007cba',
-                        backgroundColor: 'rgba(0, 124, 186, 0.1)',
-                        borderWidth: 2,
-                        pointRadius: 4,
-                        pointHoverRadius: 6,
-                        tension: 0.4
-                    },
-                    {
-                        label: 'Events Attended',
-                        data: chartData.attended,
-                        borderColor: '#28a745',
-                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
-                        borderWidth: 2,
-                        pointRadius: 4,
-                        pointHoverRadius: 6,
-                        tension: 0.4
-                    },
-                    {
-                        label: 'Certificates Earned',
-                        data: chartData.certificates,
-                        borderColor: '#ffc107',
-                        backgroundColor: 'rgba(255, 193, 7, 0.1)',
-                        borderWidth: 2,
-                        pointRadius: 4,
-                        pointHoverRadius: 6,
-                        tension: 0.4
-                    }
-                ]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: {
-                    mode: 'index',
-                    intersect: false
-                },
-                plugins: {
-                    legend: {
-                        position: 'top',
-                        labels: {
-                            usePointStyle: true,
-                            padding: 15,
-                            font: {
-                                size: 14
-                            }
-                        }
-                    },
-                    tooltip: {
-                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                        titleFont: {
-                            size: 14
-                        },
-                        bodyFont: {
-                            size: 13
-                        },
-                        padding: 12,
-                        cornerRadius: 8,
-                        displayColors: true,
-                        callbacks: {
-                            title: function(tooltipItems) {
-                                return tooltipItems[0].label;
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    x: {
-                        display: true,
-                        title: {
-                            display: true,
-                            text: 'Month',
-                            font: {
-                                size: 14
-                            }
-                        },
-                        grid: {
-                            display: false
-                        }
-                    },
-                    y: {
-                        display: true,
-                        title: {
-                            display: true,
-                            text: 'Count',
-                            font: {
-                                size: 14
-                            }
-                        },
-                        beginAtZero: true,
-                        ticks: {
-                            stepSize: 1,
-                            precision: 0
-                        },
-                        grid: {
-                            borderDash: [5, 5]
-                        }
-                    }
-                }
             }
         });
     }
 
-    /**
+    // Initial animation check
-     * Process timeline data for chart display
+    animateTimeline();
-     */
-    function processTimelineData() {
-        // Group events by month
-        const monthlyData = {};
 
-        hvacTimelineData.forEach(function(event) {
+    // Animate on scroll
-            const date = new Date(event.date);
+    $(window).on('scroll', animateTimeline);
-            const monthKey = date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
 
-            if (!monthlyData[monthKey]) {
+    // Print functionality
-                monthlyData[monthKey] = {
+    $('.hvac-button[onclick*="print"]').on('click', function(e) {
-                    registrations: 0,
+        e.preventDefault();
-                    attended: 0,
+        window.print();
-                    certificates: 0
-                };
-            }
-            
-            switch(event.type) {
-                case 'registration':
-                    monthlyData[monthKey].registrations++;
-                    break;
-                case 'event':
-                    if (event.checked_in) {
-                        monthlyData[monthKey].attended++;
-                    }
-                    break;
-                case 'certificate':
-                    monthlyData[monthKey].certificates++;
-                    break;
-            }
     });
 
-        // Sort months and create arrays for chart
+    // Smooth scroll for timeline
-        const sortedMonths = Object.keys(monthlyData).sort();
+    $('.hvac-timeline-item').on('click', '.hvac-event-link', function(e) {
-        const labels = [];
+        // Allow default link behavior but add tracking if needed
-        const registrations = [];
+        console.log('Event link clicked:', $(this).attr('href'));
-        const attended = [];
-        const certificates = [];
-        
-        // Get last 12 months of data
-        const lastMonths = sortedMonths.slice(-12);
-        
-        lastMonths.forEach(function(monthKey) {
-            const [year, month] = monthKey.split('-');
-            const date = new Date(year, month - 1);
-            labels.push(date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }));
-            
-            registrations.push(monthlyData[monthKey].registrations);
-            attended.push(monthlyData[monthKey].attended);
-            certificates.push(monthlyData[monthKey].certificates);
     });
 
-        return {
+    // Add hover effects to timeline items
-            labels: labels,
+    $('.hvac-timeline-item').hover(
-            registrations: registrations,
+        function() {
-            attended: attended,
+            $(this).find('.hvac-timeline-content').addClass('hvac-timeline-hover');
-            certificates: certificates
+        },
-        };
+        function() {
+            $(this).find('.hvac-timeline-content').removeClass('hvac-timeline-hover');
         }
-    
+    );
-    /**
-     * Add smooth scrolling to timeline
-     */
-    function smoothScrollTimeline() {
-        // Add hover effect to timeline items
-        $('.hvac-timeline-item').on('mouseenter', function() {
-            $(this).find('.hvac-timeline-content').addClass('hover');
-        }).on('mouseleave', function() {
-            $(this).find('.hvac-timeline-content').removeClass('hover');
 });
-        
-        // Add animation on scroll
-        const observer = new IntersectionObserver(function(entries) {
-            entries.forEach(function(entry) {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
-                }
-            });
-        }, {
-            threshold: 0.1
-        });
-        
-        document.querySelectorAll('.hvac-timeline-item').forEach(function(item) {
-            observer.observe(item);
-        });
-    }
-    
-    /**
-     * Initialize tooltips
-     */
-    function initializeTooltips() {
-        // Add tooltips to stat cards
-        $('.hvac-stat-card').each(function() {
-            const label = $(this).find('.hvac-stat-label').text();
-            $(this).attr('title', 'View ' + label + ' details');
-        });
-        
-        // Add tooltips to timeline markers
-        $('.hvac-timeline-marker').each(function() {
-            const item = $(this).closest('.hvac-timeline-item');
-            const type = item.data('type');
-            let tooltip = '';
-            
-            switch(type) {
-                case 'registration':
-                    tooltip = 'Event Registration';
-                    break;
-                case 'event':
-                    tooltip = 'Event Attendance';
-                    break;
-                case 'certificate':
-                    tooltip = 'Certificate Earned';
-                    break;
-            }
-            
-            $(this).attr('title', tooltip);
-        });
-    }
-    
-    // Add CSS for animations
-    const style = document.createElement('style');
-    style.innerHTML = `
-        .hvac-timeline-item {
-            opacity: 0;
-            transform: translateY(20px);
-            transition: opacity 0.5s ease, transform 0.5s ease;
-        }
-        
-        .hvac-timeline-item.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        
-        .hvac-timeline-content {
-            transition: box-shadow 0.3s ease, transform 0.3s ease;
-        }
-        
-        .hvac-timeline-content.hover {
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-            transform: translateX(5px);
-        }
-    `;
-    document.head.appendChild(style);
-    
-})(jQuery);

wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/class-attendee-profile.php

@@ -60,15 +60,6 @@ class HVAC_Attendee_Profile {
             return;
         }
         
-        // Enqueue Chart.js for timeline visualization
-        wp_enqueue_script(
-            'chartjs',
-            'https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js',
-            array(),
-            '3.9.1',
-            true
-        );
-        
         // Enqueue custom styles and scripts
         wp_enqueue_style(
             'hvac-attendee-profile',
@@ -80,7 +71,7 @@ class HVAC_Attendee_Profile {
         wp_enqueue_script(
             'hvac-attendee-profile',
             HVAC_CE_PLUGIN_URL . 'assets/js/hvac-attendee-profile.js',
-            array('jquery', 'chartjs'),
+            array('jquery'),
             HVAC_CE_VERSION,
             true
         );

wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/attendee/template-attendee-profile.php

@@ -19,137 +19,93 @@ $timeline = $attendee_data['timeline'];
 
 <div class="hvac-attendee-profile">
     
-    <!-- Profile Header -->
+    <!-- Page Header -->
     <div class="hvac-profile-header">
-        <div class="hvac-profile-avatar">
-            <?php if (!empty($profile['avatar_url'])): ?>
-                <img src="<?php echo esc_url($profile['avatar_url']); ?>" alt="<?php echo esc_attr($profile['name']); ?>">
-            <?php else: ?>
-                <div class="hvac-avatar-placeholder">
-                    <i class="fas fa-user-circle"></i>
-                </div>
-            <?php endif; ?>
-        </div>
         <div class="hvac-profile-title">
-            <h1><?php echo esc_html($profile['name']); ?></h1>
+            <h1>Attendee Profile</h1>
-            <p class="hvac-profile-email"><?php echo esc_html($profile['email']); ?></p>
+            <span class="hvac-profile-subtitle"><?php echo esc_html($profile['name']); ?></span>
+        </div>
+        <div class="hvac-profile-actions">
+            <a href="mailto:<?php echo esc_attr($profile['email']); ?>" class="ast-button ast-button-primary">
+                <i class="fas fa-envelope"></i> Email Attendee
+            </a>
+            <button class="ast-button ast-button-secondary" onclick="window.print()">
+                <i class="fas fa-print"></i> Print
+            </button>
+            <a href="<?php echo esc_url(wp_get_referer() ?: home_url('/hvac-dashboard/')); ?>" class="ast-button ast-button-secondary">
+                <i class="fas fa-arrow-left"></i> Back
+            </a>
         </div>
     </div>
 
     <!-- Statistics Section -->
-    <div class="hvac-stats-section">
+    <div class="hvac-stats-row">
-        <h2>
+        <div class="hvac-stat-col">
-            <i class="fas fa-chart-line"></i>
-            Activity Summary
-        </h2>
-        <div class="hvac-stats-grid">
             <div class="hvac-stat-card">
-                <div class="hvac-stat-icon">
+                <h3>Total Purchases</h3>
-                    <i class="fas fa-shopping-cart"></i>
+                <div class="stat-value"><?php echo number_format($stats['total_purchases']); ?></div>
-                </div>
-                <div class="hvac-stat-content">
-                    <div class="hvac-stat-value"><?php echo number_format($stats['total_purchases']); ?></div>
-                    <div class="hvac-stat-label">Purchases Made</div>
             </div>
         </div>
-            
+        <div class="hvac-stat-col">
             <div class="hvac-stat-card">
-                <div class="hvac-stat-icon">
+                <h3>Events Registered</h3>
-                    <i class="fas fa-calendar-alt"></i>
+                <div class="stat-value"><?php echo number_format($stats['events_registered']); ?></div>
-                </div>
-                <div class="hvac-stat-content">
-                    <div class="hvac-stat-value"><?php echo number_format($stats['events_registered']); ?></div>
-                    <div class="hvac-stat-label">Events Registered</div>
             </div>
         </div>
-            
+        <div class="hvac-stat-col">
             <div class="hvac-stat-card">
-                <div class="hvac-stat-icon">
+                <h3>Events Attended</h3>
-                    <i class="fas fa-check-circle"></i>
+                <div class="stat-value"><?php echo number_format($stats['events_checked_in']); ?></div>
-                </div>
-                <div class="hvac-stat-content">
-                    <div class="hvac-stat-value"><?php echo number_format($stats['events_checked_in']); ?></div>
-                    <div class="hvac-stat-label">Events Attended</div>
             </div>
         </div>
-            
+        <div class="hvac-stat-col">
             <div class="hvac-stat-card">
-                <div class="hvac-stat-icon">
+                <h3>Certificates Earned</h3>
-                    <i class="fas fa-certificate"></i>
+                <div class="stat-value"><?php echo number_format($stats['certificates_earned']); ?></div>
-                </div>
-                <div class="hvac-stat-content">
-                    <div class="hvac-stat-value"><?php echo number_format($stats['certificates_earned']); ?></div>
-                    <div class="hvac-stat-label">Certificates Earned</div>
-                </div>
             </div>
         </div>
     </div>
 
     <!-- Profile Information Section -->
-    <div class="hvac-profile-section">
+    <div class="hvac-content-section">
-        <h2>
+        <h2>Contact Information</h2>
-            <i class="fas fa-user"></i>
+        <div class="hvac-info-table">
-            Profile Information
+            <table class="hvac-table">
-        </h2>
+                <tbody>
-        <div class="hvac-profile-info">
+                    <tr>
-            <div class="hvac-info-row">
+                        <td class="hvac-label">Name</td>
-                <div class="hvac-info-label">
+                        <td><?php echo esc_html($profile['name']); ?></td>
-                    <i class="fas fa-user"></i>
+                    </tr>
-                    Name
+                    <tr>
-                </div>
+                        <td class="hvac-label">Email</td>
-                <div class="hvac-info-value"><?php echo esc_html($profile['name']); ?></div>
+                        <td><a href="mailto:<?php echo esc_attr($profile['email']); ?>"><?php echo esc_html($profile['email']); ?></a></td>
-            </div>
+                    </tr>
-            
-            <div class="hvac-info-row">
-                <div class="hvac-info-label">
-                    <i class="fas fa-envelope"></i>
-                    Email
-                </div>
-                <div class="hvac-info-value">
-                    <a href="mailto:<?php echo esc_attr($profile['email']); ?>"><?php echo esc_html($profile['email']); ?></a>
-                </div>
-            </div>
-            
                     <?php if (!empty($profile['phone'])): ?>
-            <div class="hvac-info-row">
+                    <tr>
-                <div class="hvac-info-label">
+                        <td class="hvac-label">Phone</td>
-                    <i class="fas fa-phone"></i>
+                        <td><a href="tel:<?php echo esc_attr($profile['phone']); ?>"><?php echo esc_html($profile['phone']); ?></a></td>
-                    Phone
+                    </tr>
-                </div>
-                <div class="hvac-info-value">
-                    <a href="tel:<?php echo esc_attr($profile['phone']); ?>"><?php echo esc_html($profile['phone']); ?></a>
-                </div>
-            </div>
                     <?php endif; ?>
-            
                     <?php if (!empty($profile['company'])): ?>
-            <div class="hvac-info-row">
+                    <tr>
-                <div class="hvac-info-label">
+                        <td class="hvac-label">Company</td>
-                    <i class="fas fa-building"></i>
+                        <td><?php echo esc_html($profile['company']); ?></td>
-                    Company
+                    </tr>
-                </div>
-                <div class="hvac-info-value"><?php echo esc_html($profile['company']); ?></div>
-            </div>
                     <?php endif; ?>
-            
                     <?php if (!empty($profile['state'])): ?>
-            <div class="hvac-info-row">
+                    <tr>
-                <div class="hvac-info-label">
+                        <td class="hvac-label">State</td>
-                    <i class="fas fa-map-marker-alt"></i>
+                        <td><?php echo esc_html($profile['state']); ?></td>
-                    State
+                    </tr>
-                </div>
-                <div class="hvac-info-value"><?php echo esc_html($profile['state']); ?></div>
-            </div>
                     <?php endif; ?>
+                </tbody>
+            </table>
         </div>
     </div>
 
     <!-- Timeline Section -->
-    <div class="hvac-timeline-section">
+    <div class="hvac-content-section">
-        <h2>
+        <h2>Activity Timeline</h2>
-            <i class="fas fa-history"></i>
-            Activity Timeline
-        </h2>
         
         <?php if (empty($timeline)): ?>
             <p class="hvac-no-activity">No activity recorded for this attendee.</p>
@@ -190,33 +146,4 @@ $timeline = $attendee_data['timeline'];
             </div>
         <?php endif; ?>
     </div>
-    
-    <!-- Timeline Chart -->
-    <div class="hvac-timeline-chart-section">
-        <h2>
-            <i class="fas fa-chart-bar"></i>
-            Activity Over Time
-        </h2>
-        <div class="hvac-chart-container">
-            <canvas id="hvac-timeline-chart"></canvas>
 </div>
-    </div>
-    
-    <!-- Action Buttons -->
-    <div class="hvac-profile-actions">
-        <a href="mailto:<?php echo esc_attr($profile['email']); ?>" class="hvac-button hvac-primary">
-            <i class="fas fa-envelope"></i> Email Attendee
-        </a>
-        <button class="hvac-button hvac-secondary" onclick="window.print()">
-            <i class="fas fa-print"></i> Print Profile
-        </button>
-        <a href="<?php echo esc_url(wp_get_referer() ?: home_url('/hvac-dashboard/')); ?>" class="hvac-button hvac-ghost">
-            <i class="fas fa-arrow-left"></i> Back
-        </a>
-    </div>
-</div>
-
-<script>
-// Pass timeline data to JavaScript
-var hvacTimelineData = <?php echo json_encode($timeline); ?>;
-</script>