404Forbiden

✏️ Editing: owner-dashboard.php

<?php
/* Template Name: Owner Dashboard */

get_header();

$current_user = wp_get_current_user();
$user_id = $current_user->ID;

// Get total vehicles (published by this user)
// Get total vehicles (published + pending) by this user
$total_vehicles = new WP_Query([
  'post_type' => 'estate_property',
  'author' => $user_id,
  'post_status' => ['publish', 'pending'], // include both published and pending
  'posts_per_page' => -1,
]);
$total_vehicles_count = $total_vehicles->found_posts;

// Get active vehicles (published + meta 'vehicle_status' = 'active')
$active_vehicles = new WP_Query([
    'post_type' => 'estate_property',
    'author' => $user_id,
    'post_status' => 'publish',
    'meta_query' => [
        [
            'key' => 'vehicle_status',
            'value' => 'active',
        ],
    ],
    'posts_per_page' => -1,
]);
$active_vehicles_count = $active_vehicles->found_posts;

// Get pending approval vehicles (status 'pending')
$pending_vehicles = new WP_Query([
    'post_type' => 'estate_property',
    'author' => $user_id,
    'post_status' => 'pending',
    'posts_per_page' => -1,
]);
$pending_approvals_count = $pending_vehicles->found_posts;

// Total earnings - currently dummy static value
$total_earnings = 58.98;

// Monthly earnings - static data for chart
$monthly_earnings = [1200, 1400, 1650, 1500, 1800, 2100];

// Recent activity - static data for demo
$recent_activity = [
    'New rental started for <strong>Toyota Camry</strong><br><small class="hrsago">2 hours ago</small>',
    'Payment received - <strong>$89.99</strong><br><small class="hrsago">5 hours ago</small>',
    'Vehicle approved: <strong>Honda Accord</strong><br><small class="hrsago">1 day ago</small>',
];

?>
<style>
.tabs-contents {
  display: none;
}
.tabs-contents.active {
  display: block;
}
.tabs-buttons {
  padding: 8px 16px;
  margin-right: 5px;
  cursor: pointer;
  background: #eee;
  border: none;
  border-radius: 4px;
  font-weight: normal;
  transition: background-color 0.3s;
}
.tabs-buttons.active {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}
</style>

<div class="owner-dashboard">
	<div class="owneraddvehicles">
		<div class="userwelcome">
    <h2 class="ownerdashboardd">Owner Dashboard</h2>
	  <p class="ownername">Welcome back, <?php echo esc_html($current_user->display_name); ?>!</p>
		</div>
	
<div  class="plusvehicle" style="text-align: right; margin: 10px 0;">
    <a href="/bookings/add-new-listing-2" class="add-vehicle-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-plus h-4 w-4 mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path><path d="M12 8v8"></path></svg>Add Vehicle</a>
</div>
	</div>

<div class="tab-bars">
		<div class="bars-tabs">
        <button class="main-tabs-buttons active" data-tab="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-column h-4 w-4 mr-2"><line x1="18" x2="18" y1="20" y2="10"></line><line x1="12" x2="12" y1="20" y2="4"></line><line x1="6" x2="6" y1="20" y2="14"></line></svg>Dashboard</button>
        <button class="main-tabs-buttons" data-tab="vehicles"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-car h-4 w-4 mr-2"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg>My Vehicles</button>
        <button class="main-tabs-buttons" data-tab="revenue"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign h-4 w-4 mr-2"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>Revenue</button>
        <button class="main-tabs-buttons" data-tab="reporting"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-4 w-4 mr-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Reporting</button>
        <button class="main-tabs-buttons" data-tab="maintenance"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-4 w-4 mr-2"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>Maintenance</button>
        <button class="main-tabs-buttons" data-tab="vehicle-health"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-pulse h-4 w-4 mr-2"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"></path></svg>Vehicle Health</button>
        <button class="main-tabs-buttons" data-tab="account"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user h-4 w-4 mr-2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>Account</button>
    </div>
	</div>

<div id="dashboard" class="tabs-contents active">
        <div class="dashboard-cards">
			<div class="bars"><span class="svgpic"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-car h-8 w-8 text-blue-600"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg><strong class="dasboardbarss">Total Vehicles<br><span class="barcounting"><?php echo esc_html($total_vehicles_count); ?></span></strong></span></div>
			<div class="bars"><span class="svgpic"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-8 w-8 text-green-600"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><strong class="dasboardbarss">Active Vehicles<br><span class="barcounting"><?php echo esc_html($active_vehicles_count); ?></span></strong></span></div>
				
			<div class="bars"><span class="svgpic"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign h-8 w-8 text-green-600"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg><strong class="dasboardbarss">Total Earnings<br><span class="barcounting">$<?php echo number_format($total_earnings, 2); ?></span></strong></span></div>
			<div class="bars"><span class="svgpic"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-8 w-8 text-orange-600"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><strong class="dasboardbarss">Pending Approvals<br><span class="barcounting"><?php echo esc_html($pending_approvals_count); ?></span></strong></span></div>
        </div>
		<div class="monthlyrecentgraph">
        <div class="monthlychartgraph">
        <h3 class="monthlyearning">Monthly Earnings</h3>
        <canvas id="monthlyEarningsChart" height="100"></canvas>
		</div>
         <div class="recentssactivity">
        <h3 class="recentactv">Recent Activity</h3>
        <ul class="recent-activities">
            <?php foreach ($recent_activity as $activity): ?>
			<li class="recentwpkey"><span class="recactvsvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-4 w-4 text-blue-600"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg></span><span class="newewenr"><?php echo wp_kses_post($activity); ?></span></li>

<?php endforeach; ?>
        </ul>
		</div>
		</div>
    </div>

<div id="vehicles" class="tabs-contents">

<h2>My Vehicles</h2>

<div class="vehicle-stats-cards" style="display:flex; gap:20px; margin-bottom:20px;">
    <div class="vehiclecardetailss" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
		<span class="svgpics"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-car h-8 w-8 text-blue-600"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg></span><strong class="vehilesdetls">Total Vehicles<br>
			<span style="font-size: 24px;"><?php echo esc_html($total_vehicles_count); ?></span></strong>
    </div>
    <div class="vehiclecardetailss" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
		<span class="svgpics"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-8 w-8 text-green-600"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></span><strong class="vehilesdetls">Available<br>
			<span style="font-size: 24px;"><?php echo esc_html($active_vehicles_count); ?></span></strong>
    </div>
    <div class="vehiclecardetailss" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
		<span class="svgpics"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-8 w-8 text-blue-600"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></span><strong class="vehilesdetls">Rented<br>
		<span style="font-size: 24px;">0</span></strong> 
    </div>
    <div class="vehiclecardetailss" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
		<span class="svgpics"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-8 w-8 text-orange-600"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span><strong class="vehilesdetls">Pending<br>
			<span style="font-size: 24px;"><?php echo esc_html($pending_approvals_count); ?></span></strong>
    </div>
  </div>

<div class="vehicle-sub-tabs" style="margin-bottom:15px;">
    <button class="sub-tab-btn active" data-filter="all" style="padding:8px 16px; margin-right:8px; cursor:pointer;">All Vehicles</button>
    <button class="sub-tab-btn" data-filter="available" style="padding:8px 16px; margin-right:8px; cursor:pointer;">Available</button>
    <button class="sub-tab-btn" data-filter="rented" style="padding:8px 16px; margin-right:8px; cursor:pointer;">Rented</button>
    <button class="sub-tab-btn" data-filter="pending" style="padding:8px 16px; cursor:pointer;">Pending</button>
  </div>

<div id="vehicles-list" style="display:flex; flex-direction: column; gap:15px;">

<?php
    // Query vehicles for this user
    $vehicles_query = new WP_Query([
      'post_type' => 'estate_property',
      'author' => $user_id,
      'posts_per_page' => -1,
      'post_status' => ['publish', 'pending'] // get published + pending vehicles
    ]);
	  
    if($vehicles_query->have_posts()):
      while($vehicles_query->have_posts()): $vehicles_query->the_post();

// Get vehicle status from meta
      $vehicle_status = get_post_meta(get_the_ID(), 'vehicle_status', true);
      if(!$vehicle_status) {
        // fallback if meta not set, treat published as available
        $vehicle_status = (get_post_status() == 'publish') ? 'available' : 'pending';
      }

// For rented status, if you have a meta or logic, replace here
      // For demo, assuming no rented vehicles yet.

<div class="vehicle-item" data-status="<?php echo esc_attr(strtolower($vehicle_status)); ?>" style="border:1px solid #ccc; padding:15px; border-radius:8px; display:flex; justify-content: space-between; align-items: center;">
       
			 <div class="vehiclesssitemsss">
			<span class="camrysvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-car h-8 w-8 text-gray-600"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg></span>
			<div class="headcolorsixty">
          <h3 class="vehiclesitemheadinggg" style="margin:0;"><?php the_title(); ?></h3>
			
          <p class="colorname" style="margin:4px 0; color:#555;"><?php echo esc_html(get_post_meta(get_the_ID(), 'color', true)); ?> &bull; <?php echo esc_html(get_post_meta(get_the_ID(), 'licence_plate', true)); ?></p>
          <p class="sixtyfive" style="margin:0; color:#888;">$<?php echo esc_html(get_post_meta(get_the_ID(), 'Vehicle_price', true)); ?>/day</p>
			</div>
			</div>
        
        <div class="statusvehicless" style="text-align:right;">
          <span style="padding:4px 8px; border-radius:12px; font-size:12px; background-color: <?php
            switch(strtolower($vehicle_status)){
              case 'available': echo '#d1e7dd'; break;
              case 'pending': echo '#f8d7da'; break;
              case 'rented': echo '#cff4fc'; break;
              default: echo '#e2e3e5'; break;
            }
          ?>; color: <?php
            switch(strtolower($vehicle_status)){
              case 'available': echo '#0f5132'; break;
              case 'pending': echo '#842029'; break;
              case 'rented': echo '#055160'; break;
              default: echo '#41464b'; break;
            }
          ?>">
            <?php echo ucfirst($vehicle_status); ?>
          </span>
         
          <a href="<?php the_permalink(); ?>" style="padding:6px 12px; background:#4CAF50; color:white; border-radius:4px; text-decoration:none;">View Details</a>
        </div>
      </div>

<?php
      endwhile;
      wp_reset_postdata();
    else: ?>
      <p>No vehicles found.</p>
    <?php endif; ?>

</div>

<!-- 	<div id="vehicles-list" style="display:flex; flex-direction: column; gap:15px;">

<!-- Static Vehicle Item 
  <div class="vehicle-item" data-status="available" style="border:1px solid #ccc; padding:15px; border-radius:8px; display:flex; justify-content: space-between; align-items: center;">
    <div class="vehiclesssitemsss">
		<span class="camrysvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-car h-8 w-8 text-gray-600"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg></span>
		<div class="headcolorsixty">
			
		<span class="vehiclesitemheadinggg">2022 Toyota Camry</span>
      <p class="colorname" style="margin:4px 0; color:#555;">Silver • TEST123</p>
      <p class="sixtyfive" style="margin:0; color:#888;">$65/day</p>
    </div>
	  </div>
    <div class="statusvehicless" style="text-align:right;">
      <span style="padding:4px 8px; border-radius:12px; font-size:12px; background-color:#d1e7dd; color:#0f5132;">
        Available
      </span>

<a href="#" style="padding:6px 12px; background:#4CAF50; color:white; border-radius:4px; text-decoration:none;">View Details</a>
    </div>
  </div>

</div> -->

</div>

<script>
document.querySelectorAll('.sub-tab-btn').forEach(button => {
  button.addEventListener('click', () => {
    // Remove active class from all buttons
    document.querySelectorAll('.sub-tab-btn').forEach(btn => btn.classList.remove('active'));
    // Add active to clicked button
    button.classList.add('active');

const filter = button.getAttribute('data-filter');
    const vehicles = document.querySelectorAll('#vehicles-list .vehicle-item');

vehicles.forEach(vehicle => {
      if(filter === 'all' || vehicle.getAttribute('data-status') === filter) {
        vehicle.style.display = 'flex'; // Show vehicle
      } else {
        vehicle.style.display = 'none'; // Hide vehicle
      }
    });
  });
});
</script>

<div id="revenue" class="tabs-contents">
        
		
<div class="revenue-overview">
    <h3>Revenue Overview</h3>
    <div class="dashboard-cards">
        <div class="bars">
			<span class="svgimgs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign h-8 w-8 text-green-600"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></span><span class="revencards"><strong>Total Earnings</strong><br>
            <span style="font-size: 1.3em; font-weight: bold;">$<?php echo number_format($total_earnings, 2); ?></span></span>
        </div>
        <div class="bars">
			<span class="svgimgs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dollar-sign h-8 w-8 text-blue-600"><circle cx="12" cy="12" r="10"></circle><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path><path d="M12 18V6"></path></svg></span><span class="revencards"><strong>This Month</strong><br>
            <span style="font-size: 1.3em; font-weight: bold;">$2,100</span></span> 
        </div>
        <div class="bars">
			<span class="svgimgs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-column h-8 w-8 text-purple-600"><line x1="18" x2="18" y1="20" y2="10"></line><line x1="12" x2="12" y1="20" y2="4"></line><line x1="6" x2="6" y1="20" y2="14"></line></svg></span><span class="revencards"><strong>Average Daily</strong><br>
            <span style="font-size: 1.3em; font-weight: bold;">$85</span> </span>
        </div>
    </div>
    <div class="revmonearn">
    <h3 class="monearn">Monthly Earnings</h3>
    <canvas id="revenueMonthlyChart" height="100"></canvas>
	</div>
      <div class="recetrahead-trans">
    <h3 class="recetrahead">Recent Transactions</h3>
    <div class="recent-transactions">
        <?php
        // Static transactions for now
        $transactions = [
            ['vehicle' => 'Toyota Camry', 'renter' => 'John D.', 'date' => '8/11/2025', 'amount' => '65.00', 'status' => 'Paid'],
            ['vehicle' => 'Toyota Suv', 'renter' => 'John D.', 'date' => '8/12/2025', 'amount' => '45.00', 'status' => 'Paid'],
            ['vehicle' => 'Toyota Sports', 'renter' => 'Michael R.', 'date' => '8/13/2025', 'amount' => '455.00', 'status' => 'Paid'],
            ['vehicle' => 'Toyota Luxury', 'renter' => 'Sarah J.', 'date' => '8/14/2025', 'amount' => '125.00', 'status' => 'Paid'],
            ['vehicle' => 'Toyota Test Car', 'renter' => 'Michael R.', 'date' => '8/15/2025', 'amount' => '65.00', 'status' => 'Paid'],
        ];
        foreach ($transactions as $txn): ?>
            <div class="txn-box">
                <div>
                    <strong><?php echo esc_html($txn['vehicle']); ?></strong><br>
                    <small><?php echo esc_html($txn['renter']); ?> • <?php echo esc_html($txn['date']); ?></small>
                </div>
                <div class="rvnsttrans" style="text-align: right;">
                    <strong style="color: green;">+$<?php echo esc_html($txn['amount']); ?></strong><br>
                    <span class="txn-status"><?php echo esc_html($txn['status']); ?></span>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
	</div>
</div>

</div>

<h2 class="maintenanhead">Vehicle Maintenance</h2>
  <p class="maintenanpara">Track and gamify your vehicle maintenance with achievements</p>

<div class="mainachieve" style="margin-bottom: 20px;">
    <button id="maintenanceTab" class="maintenance-tab-buttons active">Maintenance Tasks</button>
    <button id="achievementsTab" class="maintenance-tab-buttons">Achievements</button>
  </div>

<div id="maintenance-tasks">

<div id="maintenance-stats" style="display: flex; gap: 20px; margin-bottom: 20px;">
      <div class="threemaintainlevel">
        <div class="mainssbarslevel" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
          <strong class="maintainlevelss">Maintenance Level</strong><br>
          <span class="mehanic" style="font-size: 18px; color: green;">Mechanic</span>
          <div class="levelnext" style="background: #eee; height: 6px; margin-top: 8px;">
            <div class="levelsss" style="width: 30%; height: 6px; background: green;"></div>
          </div>
          <small class="smallbar">25 points to next level</small>
        </div>
        <div class="maintenancescore" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
          <strong>Maintenance Score</strong><br>
          <span style="font-size: 22px;">175</span><br>
          <small>Based on 23 completed tasks</small>
        </div>
        <div class="maintenancetime" style="flex:1; padding:15px; border:1px solid #ddd; border-radius:8px;">
          <strong>On-Time Rate</strong><br>
          <span style="font-size: 22px; color: green;">91%</span><br>
          <small>21 of 23 tasks completed on time</small>
        </div>
      </div>
    </div>

<div class="maintatitlesssssttt">
      <h3 class="maintshedule">Maintenance Schedule</h3>
      <p class="mainttrack">Track and manage vehicle maintenance requirements</p>

<div class="maintenancetitle" style="border: 1px solid #ccc; padding:15px; border-left: 6px solid green; border-radius:8px; margin-bottom:10px; background-color: #dbeafe;">
        <div class="zzzzzzz">
          <div class="zzsvg">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplet h-5 w-5"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path></svg>
          </div>
          <strong class="task-title oil-change">Oil Change<br>
            <small>Regular oil change with filter replacement</small><br>
            <small><strong>Due:</strong> 128,500 miles • ⭐ 10 points</small>
          </strong>
        </div>
        <div class="uuuuuuuu">
          <span style="padding:4px 8px; border-radius:12px; background: #eee;">Upcoming</span>
          <button style="float:right; background:green; color:white; padding:6px 12px; border:none; border-radius:4px;">Mark Complete</button>
        </div>
      </div>

<div class="maintenancetitle" style="border: 1px solid #ccc; padding:15px; border-left: 6px solid green; border-radius:8px; margin-bottom:10px; background-color: #fef3c7;">
        <div class="zzzzzzz">
          <div class="zzsvg">
            
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gauge h-5 w-5"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg>
          </div>
          <strong class="task-title tire-rotation">Tire Rotation<br>
            <small>Rotate tires to ensure even wear</small><br>
            <small><strong>Due:</strong> 128,500 miles • ⭐ 15 points</small>
          </strong>
        </div>
        <div class="uuuuuuuu">
          <span style="padding:4px 8px; border-radius:12px; background: #eee;">Due Soon</span>
          <button style="float:right; background:green; color:white; padding:6px 12px; border:none; border-radius:4px;">Mark Complete</button>
        </div>
      </div>

<div class="maintenancetitle" style="border: 1px solid #ccc; padding:15px; border-left: 6px solid green; border-radius:8px; margin-bottom:10px; background-color: #fee2e2;">
        <div class="zzzzzzz">
          <div class="zzsvg">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-5 w-5"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
          </div>
          <strong class="task-title brake-inspection">Brake Inspection<br>
            <small>Check brake pads, rotors, and fluid levels</small><br>
            <small><strong>Due:</strong> 130,800 miles • ⭐ 20 points</small>
          </strong>
        </div>
        <div class="uuuuuuuu">
          <span style="padding:4px 8px; border-radius:12px; background: #eee;">Overdue</span>
          <button style="float:right; background:green; color:white; padding:6px 12px; border:none; border-radius:4px;">Mark Complete</button>
        </div>
      </div>

<div class="maintenancetitle" style="border: 1px solid #ccc; padding:15px; border-left: 6px solid green; border-radius:8px; margin-bottom:10px; background-color: #d1fae5;">
        <div class="zzzzzzz">
          <div class="zzsvg">
            
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bolt h-5 w-5"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><circle cx="12" cy="12" r="4"></circle></svg>
          </div>
          <strong class="task-title air-filter-replacement">Air Filter Replacement<br>
            <small>Replace engine air filter</small><br>
            <small><strong>Due:</strong> 100,800 miles on 5/18/2025 • ⭐ 10 points</small>
          </strong>
        </div>
        <div class="uuuuuuuu">
          <span style="padding:4px 8px; border-radius:12px; background: #eee;">Completed</span>
          
        </div>
      </div>
		<div class="custombtn" style="margin-top: 20px;">
      <button style="background: #ddd; padding: 8px 16px; border-radius: 4px;">Add Custom Task</button>
      <button style="float: right; background: green; color:white; padding: 8px 16px; border: none; border-radius: 4px;">Log Maintenance</button>
    </div>

</div>
  </div>

<div id="maintenance-achievements" style="display:none;">
   
    <div class="achievemntarray" style="display: flex; flex-wrap: wrap; gap: 20px;">
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-8 w-8 text-yellow-500"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></span><span class=achieverecord>Perfect Record</span>
		  <p class="achievevehicle">
			  Maintained vehicle with no missed service dates
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Complete all scheduled maintenance on time for 6 months</small></p>
        <span class="achievemarks" style="color: #888;">In Progress</span>
      </div>
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplet h-8 w-8 text-blue-500"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path></svg></span><span class=achieverecord>Oil Change Master</span>
		  <p class="achievevehicle">
			  Consistently changed oil on schedule
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Complete 5 consecutive oil changes on time</small></p>
        <span class="achievemarks" style="color: green;">Earned</span>
      </div>
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gauge h-8 w-8 text-green-500"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg></span><span class=achieverecord>Tire Pro</span>
		  <p class="achievevehicle">
			  Maintained optimal tire pressure and rotation schedule
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Record 10 tire pressure checks and 3 rotations</small></p>
        <span class="achievemarks" style="color: green;">Earned</span>
      </div>
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert h-8 w-8 text-orange-500"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span class=achieverecord>Emergency Ready</span>
		  <p class="achievevehicle">
			  Vehicle always prepared for emergencies
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Maintain emergency kit, spare tire, and jumper cables</small></p>
        <span class="achievemarks" style="color: green;">Earned</span>
      </div>
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-8 w-8 text-teal-500"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></span><span class=achieverecord>Eco Driver</span>
		  <p class="achievevehicle">
			  Maintained optimal fuel efficiency
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Record 15% better than average MPG for 3 months</small></p>
        <span class="achievemarks" style="color: #888;">In Progress</span>
      </div>
      <div class="achivementtitle" style="flex:1 1 30%; border: 1px solid #ccc; border-radius:8px; padding:15px;">
		  <span class="achivesvg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award h-8 w-8 text-purple-500"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></span><span class=achieverecord>Longevity Expert</span>
		  <p class="achievevehicle">
			  Extended vehicle lifespan through proper maintenance
		  </p>
        <p class="achieveddd"><strong>Requirements:</strong><small>Reach 100,000 miles with all maintenance records complete</small></p>
        <span class="achievemarks" style="color: #888;">In Progress</span>
      </div>
    </div>
  </div>

<script>
    document.getElementById('maintenanceTab').addEventListener('click', function () {
      this.classList.add('active');
      document.getElementById('achievementsTab').classList.remove('active');
      document.getElementById('maintenance-tasks').style.display = 'block';
      document.getElementById('maintenance-achievements').style.display = 'none';
    });

document.getElementById('achievementsTab').addEventListener('click', function () {
      this.classList.add('active');
      document.getElementById('maintenanceTab').classList.remove('active');
      document.getElementById('maintenance-tasks').style.display = 'none';
      document.getElementById('maintenance-achievements').style.display = 'block';
    });
  </script>

</div>

<div id="vehicle-health" class="tabs-contents" style="padding: 20px; font-family: Arial, sans-serif; max-width: 600px; margin: auto;">
 <div class="vehicle-health-score">
	 
  <h2 style="color: #007a33; font-weight: 700; display: flex; align-items: center; gap: 8px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-pulse h-5 w-5 text-primary"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"></path></svg>Vehicle Health Score
  </h2>
  <p style="color: #555; margin-bottom: 30px;">A comprehensive assessment of your vehicle's overall condition</p>
	</div>

<div class="progresscontainer" style="display: flex; justify-content: center; align-items: center; margin-bottom: 40px;">
    <svg width="160" height="160" viewBox="0 0 160 160">
      <circle
        cx="80" cy="80" r="70"
        stroke="#e0e0e0" stroke-width="15" fill="none"
      />
      <circle
        cx="80" cy="80" r="70"
        stroke="#007a33" stroke-width="15" fill="none"
        stroke-linecap="round"
        stroke-dasharray="439.82"
        stroke-dashoffset="79.17"
        transform="rotate(-90 80 80)"
      />
      <text x="50%" y="50%" class="eghtwo" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="700" fill="#10b981">82</text>
      <text x="50%" y="65%" class="goodbest" dominant-baseline="middle" text-anchor="middle" font-size="14" font-weight="500" fill="#10b981">Good</text>
    </svg>
  </div>

<div class="compohealth">

<h3 class="compnenthlth" style="color: #333; font-weight: 700; margin-bottom: 10px;">Component Health</h3>

<div class="complost" style="display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin: auto;">

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up h-4 w-4 text-emerald-500"><path d="M7 10v12"></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Engine</span>
				<div class="enginemark" style="font-weight: 600; width: 30px; text-align: right; color: #007a33;">90</div></div>
			 <div  class="enginebar" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="enginesbars" style="width: 90%; height: 100%;"></div>
      </div>
    </div>
		<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/11/2025
			</span> </span> </div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-4 w-4 text-green-500"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Transmission</span>
				<div class="transmismark" style="font-weight: 600; width: 30px; text-align: right; color: #ffa500;">75</div></div>
			 <div class="transmisbar"style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="transmisbars" style="width: 75%; height: 100%;"></div>
      </div>
		</div>
		<span class="healthsvgss">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/12/2025</span></span>
    </div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="redsvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info h-4 w-4 text-yellow-500"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Brakes</span>
     	<div class="brakemark" style="font-weight: 600; width: 30px; text-align: right; color: #007a33;">80</div></div>
			 <div class="brakebar" style=" height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="brakesbars" style="width: 80%; height: 100%;"></div>
      </div>
    </div>
			<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/13/2025</span>
		</span>  </div>

<div  class="componentbar" style="display: flex; align-items: center; gap: 10px;">
	<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up h-4 w-4 text-emerald-500"><path d="M7 10v12"></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Tires</span>
      
				<div class="tiremark" style="font-weight: 600; width: 30px; text-align: right; color: #007a33;">85</div></div>
			<div class="tiresbar" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="tirebars" style="width: 85%; height: 100%;"></div>
      </div>
    </div>
			<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/14/2025</span>
		</span>  </div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-4 w-4 text-green-500"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Battery</span>
     
				<div class="battermark" style="font-weight: 600; width: 30px; text-align: right; color: #ffa500;">60</div></div>
			 <div class="batterybars" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="batterbars" style="width: 60%; height: 100%;"></div>
      </div>
    </div>
			<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/15/2025</span>
		</span>  </div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="redsvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info h-4 w-4 text-yellow-500"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Fluids</span>
    
				<div class="fluidmark" style="font-weight: 600; width: 30px; text-align: right; color: #ffa500;">70</div></div>
			  <div class="fluidsbar" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="fluidsbars" style="width: 70%; height: 100%;"></div>
      </div>
    </div>
			<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/16/2025</span>
		</span></div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big h-4 w-4 text-green-500"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Electrical</span>
     
				<div class="electricmarks" style="font-weight: 600; width: 30px; text-align: right; color: #ff4d4d;">50</div></div>
			 <div class="electricbarssss" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="electricityba" style="width: 50%; height: 100%;"></div>
      </div>
    </div>
		<span class="healthsvgss">	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/17/2025</span>
		</span> </div>

<div class="componentbar" style="display: flex; align-items: center; gap: 10px;">
		<span class="greensvg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up h-4 w-4 text-emerald-500"><path d="M7 10v12"></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path></svg></span>
		<div class="equipmtbar">
			<div class="vehiclecompo">
		<span class="equipmt">Safety Systems</span>
     
				<div class="safetymark" style="font-weight: 600; width: 30px; text-align: right; color: #ffa500;">65</div></div>
			 <div class="safetybar" style="height: 6px; border-radius: 8px; flex-grow: 1; overflow: hidden;">
        <div class="safetybars" style="width: 65%; height: 100%;"></div>
      </div>
    </div>
			<span class="healthsvgss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3 w-3 inline mr-1"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="healthdate">8/18/2025</span>
		</span>		</div>
  </div>

<div class="lasassnew">
  <p  class="lastass" style="font-size: 14px; color: #555; margin-top: 40px; text-align: right;">
    Last full assessment: 5/22/2025 &nbsp;&nbsp;
    <a href="#" class="scheulenew" style="color: #007a33; text-decoration: none; font-weight: 600;">Schedule new assessment</a>
  </p>
		</div>

</div>
	</div>

<div id="account" class="tabs-contents" style="padding: 20px; max-width: 600px; margin: auto; font-family: Arial, sans-serif;">
   <?php
// Get current logged-in user info
$current_user = wp_get_current_user();

if ( $current_user->ID != 0 ) :

// User meta keys for Account Info
    $phone = get_user_meta( $current_user->ID, 'phone', true );
    
    // Corrected logic as per  instruction
    $complycube_status = get_user_meta( $current_user->ID, 'complycube_clientStatus', true );
    $verification_status = ($complycube_status == "") ? 'pending' : $complycube_status;

// User meta keys for Business Info
    $company_name = get_user_meta( $current_user->ID, 'company_name', true );
    $square_location_id = get_user_meta( $current_user->ID, 'square_location_id', true );

// Fallback values
    $phone = !empty($phone) ? $phone : 'Not provided';
    $company_name = !empty($company_name) ? $company_name : 'Not provided';
    $square_location_id = !empty($square_location_id) ? $square_location_id : 'Not provided';

// Status color logic
    $status_color = 'red';
    if ( strtolower($verification_status) == 'verified' ) {
        $status_color = 'green';
    } elseif ( strtolower($verification_status) == 'pending' ) {
        $status_color = 'orange';
    }
?>

<div class="accountinformation">
    <h2 class="accountinfm">Account Information</h2>
    <p class="acntpara">Manage your owner account settings</p>

<div>
            <p><strong class="acntrelinfm">Full Name</strong><br>
                <span class="acntpara"><?php echo esc_html( $current_user->display_name ); ?></span>
            </p>
            <p><strong class="acntrelinfm">Phone</strong><br>
                <span class="acntpara"><?php echo esc_html( $phone ); ?></span>
            </p>
        </div>

<div>
            <p><strong class="acntrelinfm">Email</strong><br>
                <span class="acntpara"><?php echo esc_html( $current_user->user_email ); ?></span>
            </p>
            <p><strong class="acntrelinfm">Verification Status</strong><br>
                <span class="verfbtnbg" style="background-color: <?php echo $status_color; ?>; color: white; padding: 4px 8px; border-radius: 12px; font-weight: 600;">
                    <span class="verfbtn"><?php echo esc_html( $verification_status ); ?></span>
                </span>
            </p>
        </div>

</div>
</div>

<div class="businessinfm">
    <h2 class="accountinfm" style="margin-top: 40px;">Business Information</h2>

<div class="accntcomp" style="display: flex; justify-content: space-between; max-width: 600px;  padding: 15px; border-radius: 8px;">
        <div>
            <p><strong class="acntrelinfm">Company Name</strong><br><span class="acntpara"><?php echo esc_html( $company_name ); ?></span></p>
        </div>

<div>
			<p><strong class="acntrelinfm">Square Location ID</strong><br><span class="acntpara"><?php echo esc_html( $square_location_id ); ?></span></p>
        </div>
    </div>

<?php else: ?>

<p>Please <a href="<?php echo wp_login_url(); ?>">log in</a> to view your account information.</p>

<?php endif; ?>
</div>
	</div>

</div>

<script>
document.querySelectorAll('.main-tabs-buttons').forEach(button => {
  button.addEventListener('click', () => {
    const tab = button.getAttribute('data-tab');

// Remove 'active' from all tab buttons and contents
    document.querySelectorAll('.main-tabs-buttons').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tabs-contents').forEach(content => content.classList.remove('active'));

// Activate the selected tab and its content
    button.classList.add('active');
    document.getElementById(tab).classList.add('active');
  });
});
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// Dashboard chart
const ctx1 = document.getElementById('monthlyEarningsChart').getContext('2d');
const dashboardChart = new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: chartLabels,
        datasets: [{
            label: 'Earnings',
            data: chartData,
            backgroundColor: 'green'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
});

// Revenue chart
const ctx2 = document.getElementById('revenueMonthlyChart').getContext('2d');
const revenueChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: chartLabels,
        datasets: [{
            label: 'Earnings',
            data: chartData,
            backgroundColor: 'green'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
});
</script>

<?php get_footer(); ?>

Sid Gifari From Gifari Industries - BD Cyber Security Team