Skip to content

Commit b69ed8a

Browse files
me-shaonme-shaon
authored
Merge pull request #81 from iz-ahmad/dark-theme-support-pr-72
feat: add dark theme support to the analytics dashboard (from PR #72, resolving merge conflicts)
2 parents 49e953b + c4f562f commit b69ed8a

13 files changed

Lines changed: 93 additions & 65 deletions

‎.github/workflows/run-tests.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,14 @@ jobs:
3434
testbench: 11.*
3535
carbon: ^3.0
3636
exclude:
37+
- laravel: 10.*
38+
php: 8.4
39+
- laravel: 10.*
40+
php: 8.5
3741
- laravel: 11.*
3842
php: 8.1
43+
- laravel: 11.*
44+
php: 8.5
3945
- laravel: 12.*
4046
php: 8.1
4147
- laravel: 13.*

‎resources/views/analytics.blade.php‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
11
<x-request-analytics::layouts.app>
2-
<main class="container px-4 sm:px-6 lg:px-8 py-8">
2+
<main class="container px-4 sm:px-6 lg:px-8 py-8" x-data="{ darkMode: localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) }">
33
<!-- Header Section -->
44
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
55
<div class="w-full sm:w-auto">
6-
<h1 class="text-2xl font-semibold text-gray-900 mb-2">Analytics Dashboard</h1>
7-
<p class="text-sm text-gray-500">Track your website performance and user insights</p>
6+
<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Analytics Dashboard</h1>
7+
<p class="text-sm text-gray-500 dark:text-gray-400">Track your website performance and user insights</p>
88
</div>
9-
<div class="w-full sm:w-auto">
9+
<div class="w-full sm:w-auto flex items-center gap-3">
10+
<!-- Dark Mode Toggle -->
11+
<button
12+
@click="darkMode = !darkMode; localStorage.theme = darkMode ? 'dark' : 'light'; document.documentElement.classList.toggle('dark', darkMode)"
13+
class="flex items-center justify-center w-10 h-10 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
14+
title="Toggle dark mode"
15+
>
16+
<!-- Sun Icon -->
17+
<svg x-show="darkMode" class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
18+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
19+
</svg>
20+
<!-- Moon Icon -->
21+
<svg x-show="!darkMode" class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
22+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
23+
</svg>
24+
</button>
25+
1026
<form method="GET" action="{{ route(config('request-analytics.route.name')) }}" class="flex items-center gap-2 flex-wrap">
1127
<x-request-analytics::core.calendar-filter
1228
:dateRange="$dateRange"
1329
:startDate="request('start_date')"
1430
:endDate="request('end_date')"
1531
/>
16-
<select name="request_category" class="bg-white border border-gray-300 rounded-lg px-3 pr-6 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-10">
32+
<select name="request_category" class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg px-3 pr-6 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-10">
1733
<option value="" {{ !request('request_category') ? 'selected' : '' }}>All Requests</option>
1834
<option value="web" {{ request('request_category') == 'web' ? 'selected' : '' }}>Web Only</option>
1935
<option value="api" {{ request('request_category') == 'api' ? 'selected' : '' }}>API Only</option>
2036
</select>
21-
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2.5 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors h-10">
37+
<button type="submit" class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-900 transition-colors h-10">
2238
Apply Filters
2339
</button>
2440
</form>
@@ -27,51 +43,51 @@
2743

2844
<!-- Key Metrics Cards -->
2945
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
30-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
46+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md dark:hover:shadow-gray-900/50 transition-shadow duration-200">
3147
<x-request-analytics::stats.count label="Views" :value='$average["views"]'/>
3248
</div>
33-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
49+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md dark:hover:shadow-gray-900/50 transition-shadow duration-200">
3450
<x-request-analytics::stats.count label="Visitors" :value='$average["visitors"]'/>
3551
</div>
36-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
52+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md dark:hover:shadow-gray-900/50 transition-shadow duration-200">
3753
<x-request-analytics::stats.count label="Bounce Rate" :value='$average["bounce_rate"]'/>
3854
</div>
39-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
55+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md dark:hover:shadow-gray-900/50 transition-shadow duration-200">
4056
<x-request-analytics::stats.count label="Average Visit Time" :value='$average["average_visit_time"]'/>
4157
</div>
4258
</div>
4359

4460
<!-- Chart Section -->
45-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8">
61+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 mb-8">
4662
<div class="mb-4">
47-
<h2 class="text-lg font-semibold text-gray-900">Traffic Overview</h2>
48-
<p class="text-sm text-gray-500">Daily visitor and page view trends</p>
63+
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Traffic Overview</h2>
64+
<p class="text-sm text-gray-500 dark:text-gray-400">Daily visitor and page view trends</p>
4965
</div>
5066
<x-request-analytics::stats.chart :labels='$labels' :datasets='$datasets' type="line"/>
5167
</div>
5268

5369
<!-- Analytics Grid -->
54-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
55-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
70+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8 ">
71+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
5672
<x-request-analytics::analytics.pages :pages='$pages'/>
5773
</div>
58-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
74+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
5975
<x-request-analytics::analytics.referrers :referrers='$referrers'/>
6076
</div>
6177
</div>
6278

6379
<!-- Additional Analytics -->
6480
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
65-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
81+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
6682
<x-request-analytics::analytics.browsers :browsers='$browsers'/>
6783
</div>
68-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
84+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
6985
<x-request-analytics::analytics.operating-systems :operatingSystems='$operatingSystems'/>
7086
</div>
71-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
87+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
7288
<x-request-analytics::analytics.devices :devices='$devices'/>
7389
</div>
74-
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
90+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
7591
<x-request-analytics::analytics.countries :countries='$countries'/>
7692
</div>
7793
</div>

‎resources/views/components/analytics/browsers.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,6 @@ function getBrowserImage($browser): string {
4646
imgSrc="{{ getBrowserImage($browser['browser']) }}"
4747
/>
4848
@empty
49-
<p class="text-sm text-gray-500 text-center py-5">No browsers</p>
49+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No browsers</p>
5050
@endforelse
5151
</x-request-analytics::stats.list>

‎resources/views/components/analytics/countries.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
imgSrc="https://www.worldatlas.com/r/w236/img/flag/{{$country['code']}}-flag.jpg"
3535
/>
3636
@empty
37-
<p class="text-sm text-gray-500 text-center py-5">No countries</p>
37+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No countries</p>
3838
@endforelse
3939
</x-request-analytics::stats.list>

‎resources/views/components/analytics/devices.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,6 @@ function getDeviceImage($device): string {
4646
imgSrc="{{ getDeviceImage($device['name']) }}"
4747
/>
4848
@empty
49-
<p class="text-sm text-gray-500 text-center py-5">No devices</p>
49+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No devices</p>
5050
@endforelse
5151
</x-request-analytics::stats.list>

‎resources/views/components/analytics/operating-systems.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,6 @@ function getOperatingSystemImage($os): string {
5353
imgSrc="{{ getOperatingSystemImage($os['name']) }}"
5454
/>
5555
@empty
56-
<p class="text-sm text-gray-500 text-center py-5">No operating systems</p>
56+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No operating systems</p>
5757
@endforelse
5858
</x-request-analytics::stats.list>

‎resources/views/components/analytics/pages.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,6 @@
3333
percentage="{{ $page['percentage'] }}"
3434
/>
3535
@empty
36-
<p class="text-sm text-gray-500 text-center py-5">No pages</p>
36+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No pages</p>
3737
@endforelse
3838
</x-request-analytics::stats.list>

‎resources/views/components/analytics/referrers.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,6 @@
3333
percentage="{{ $referrer['percentage'] }}"
3434
/>
3535
@empty
36-
<p class="text-sm text-gray-500 text-center py-5">No referrers</p>
36+
<p class="text-sm text-gray-500 dark:text-gray-400 text-center py-5">No referrers</p>
3737
@endforelse
3838
</x-request-analytics::stats.list>

0 commit comments

Comments
 (0)