155 lines
9.9 KiB
PHP
155 lines
9.9 KiB
PHP
<!-- Customer Analytics Section -->
|
|
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6 mt-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-zinc-900 dark:text-white dark:text-white">Customer Analytics</h2>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-sm text-zinc-500 dark:text-zinc-400">Customer Insights</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(isset($customerAnalytics) && count($customerAnalytics) > 0)
|
|
<!-- Customer Stats Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-blue-100 text-sm">Total Customers</p>
|
|
<p class="text-2xl font-bold">{{ number_format($customerAnalytics['total_customers'] ?? 0) }}</p>
|
|
</div>
|
|
<i class="fas fa-users text-blue-200 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-green-100 text-sm">New Customers</p>
|
|
<p class="text-2xl font-bold">{{ number_format($customerAnalytics['new_customers'] ?? 0) }}</p>
|
|
</div>
|
|
<i class="fas fa-user-plus text-green-200 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-purple-100 text-sm">Retention Rate</p>
|
|
<p class="text-2xl font-bold">{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</p>
|
|
</div>
|
|
<i class="fas fa-heart text-purple-200 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-orange-100 text-sm">Avg Order Value</p>
|
|
<p class="text-2xl font-bold">${{ number_format($customerAnalytics['avg_order_value'] ?? 0, 2) }}</p>
|
|
</div>
|
|
<i class="fas fa-dollar-sign text-orange-200 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Customer Acquisition Trend -->
|
|
<div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Customer Insights</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
|
|
<span class="text-gray-700 dark:text-gray-300">New Customer Acquisition</span>
|
|
<span class="text-lg font-bold text-green-600">+{{ $customerAnalytics['new_customers'] ?? 0 }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
|
|
<span class="text-gray-700 dark:text-gray-300">Returning Customers</span>
|
|
<span class="text-lg font-bold text-blue-600">{{ $customerAnalytics['customer_retention_count'] ?? 0 }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center p-3 bg-white dark:bg-zinc-800 rounded-lg">
|
|
<span class="text-gray-700 dark:text-gray-300">Customer Retention Rate</span>
|
|
<span class="text-lg font-bold text-purple-600">{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</span>
|
|
</div>
|
|
|
|
<!-- Retention Rate Progress Bar -->
|
|
<div class="mt-4">
|
|
<div class="flex justify-between text-sm text-zinc-600 dark:text-zinc-400 dark:text-gray-400 mb-1">
|
|
<span>Retention Performance</span>
|
|
<span>{{ number_format($customerAnalytics['customer_retention_rate'] ?? 0, 1) }}%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 dark:bg-zinc-600 rounded-full h-2">
|
|
<div class="bg-purple-600 h-2 rounded-full transition-all duration-300"
|
|
style="width: {{ min($customerAnalytics['customer_retention_rate'] ?? 0, 100) }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Customers -->
|
|
<div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Top Customers</h3>
|
|
|
|
@if(isset($customerAnalytics['top_customers']) && count($customerAnalytics['top_customers']) > 0)
|
|
<div class="space-y-3">
|
|
@foreach($customerAnalytics['top_customers']->take(8) as $customer)
|
|
<div class="flex items-center justify-between p-3 bg-white dark:bg-zinc-800 rounded-lg hover:shadow-md transition-shadow">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
|
|
{{ strtoupper(substr($customer->first_name, 0, 1) . substr($customer->last_name, 0, 1)) }}
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-zinc-900 dark:text-white dark:text-white">{{ $customer->full_name }}</p>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">{{ $customer->service_orders_count }} orders</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-green-600">${{ number_format($customer->total_spent ?? 0, 2) }}</p>
|
|
<p class="text-xs text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Total Spent</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="text-center py-8">
|
|
<i class="fas fa-users text-4xl text-gray-300 dark:text-zinc-600 dark:text-zinc-400 mb-2"></i>
|
|
<p class="text-zinc-500 dark:text-zinc-400 dark:text-gray-400">No customer data available</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Segmentation -->
|
|
<div class="mt-6 bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white mb-4">Customer Segmentation</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
|
|
<i class="fas fa-crown text-yellow-500 text-2xl mb-2"></i>
|
|
<h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">VIP Customers</h4>
|
|
<p class="text-2xl font-bold text-yellow-600">{{ isset($customerAnalytics['top_customers']) ? $customerAnalytics['top_customers']->where('service_orders_count', '>=', 5)->count() : 0 }}</p>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">5+ orders</p>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
|
|
<i class="fas fa-star text-blue-500 text-2xl mb-2"></i>
|
|
<h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">Regular Customers</h4>
|
|
<p class="text-2xl font-bold text-blue-600">{{ isset($customerAnalytics['top_customers']) ? $customerAnalytics['top_customers']->whereBetween('service_orders_count', [2, 4])->count() : 0 }}</p>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">2-4 orders</p>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-gray-600 rounded-lg p-4 text-center">
|
|
<i class="fas fa-user text-green-500 text-2xl mb-2"></i>
|
|
<h4 class="font-semibold text-zinc-900 dark:text-white dark:text-white">New Customers</h4>
|
|
<p class="text-2xl font-bold text-green-600">{{ $customerAnalytics['new_customers'] ?? 0 }}</p>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">This period</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="text-center py-12">
|
|
<i class="fas fa-chart-pie text-6xl text-gray-300 dark:text-zinc-600 dark:text-zinc-400 mb-4"></i>
|
|
<p class="text-zinc-500 dark:text-zinc-400 dark:text-gray-400 text-lg">No customer analytics data available for the selected period</p>
|
|
</div>
|
|
@endif
|
|
</div>
|