added yoga stuff, i18n, workout tracking and a dashboard to track progress
This commit is contained in:
@@ -1,17 +1,92 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('Dashboard') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
{{ __("You're logged in!") }}
|
||||
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ __('app.dashboard.title') }}</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">{{ __('app.dashboard.subtitle') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div class="text-sm text-gray-500">{{ __('app.dashboard.metrics.workouts') }}</div>
|
||||
<div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{{ $workoutsCount }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div class="text-sm text-gray-500">{{ __('app.dashboard.metrics.sessions') }}</div>
|
||||
<div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{{ $sessionsCount }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div class="text-sm text-gray-500">{{ __('app.dashboard.metrics.completed') }}</div>
|
||||
<div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{{ $completedSessions }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">{{ __('app.dashboard.metrics.completion_rate') }}</div>
|
||||
<div class="text-sm font-semibold text-indigo-600">{{ $completionRate }}%</div>
|
||||
</div>
|
||||
<div class="mt-3 h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
||||
<div class="h-2 bg-gradient-to-r from-emerald-500 to-teal-500" style="width: {{ $completionRate }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<div class="lg:col-span-7 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('app.dashboard.recent_sessions') }}</h2>
|
||||
</div>
|
||||
@if($recentSessions->isEmpty())
|
||||
<div class="mt-3 rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-6 text-sm text-gray-600 dark:text-gray-300">{{ __('app.dashboard.no_sessions') }}</div>
|
||||
@else
|
||||
<ul class="mt-4 space-y-4">
|
||||
@foreach($recentSessions as $s)
|
||||
<li class="rounded-xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 p-4">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div class="text-base font-semibold text-gray-900 dark:text-white">{{ $s['workout_title'] }}</div>
|
||||
<div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
{{ $s['done'] }} / {{ $s['total'] }} · {{ $s['pct'] }}%
|
||||
@if($s['completed_at'])
|
||||
· <span class="text-emerald-600">{{ __('app.dashboard.completed') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="mt-2 h-2 w-56 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
||||
<div class="h-2 bg-indigo-500" style="width: {{ $s['pct'] }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('sessions.show', $s['id']) }}" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">{{ __('app.dashboard.view_session') }}</a>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-5 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ __('app.dashboard.activity_30d') }}</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ __('app.dashboard.activity_30d_help') }}</p>
|
||||
@php
|
||||
$today = now()->startOfDay();
|
||||
$days = [];
|
||||
for ($i = 29; $i >= 0; $i--) { $d = $today->copy()->subDays($i)->format('Y-m-d'); $days[] = $d; }
|
||||
$max = max(1, $dailyActivity->max() ?? 0);
|
||||
@endphp
|
||||
<div class="mt-4 grid grid-cols-10 gap-2">
|
||||
@foreach($days as $d)
|
||||
@php $count = $dailyActivity[$d] ?? 0; $pct = $max ? intval(($count / $max) * 100) : 0; @endphp
|
||||
<div class="h-14 rounded-lg bg-gray-100 dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-700 flex items-center justify-center">
|
||||
<div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
|
||||
<span class="text-xs font-semibold text-indigo-600">{{ $count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user