113 lines
5.9 KiB
PHP
113 lines
5.9 KiB
PHP
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-semibold text-white">Ziele</h1>
|
|
<p class="text-sm text-white/50 mt-1">Was Fox langfristig im Auge behält.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
wire:click="$dispatch('open-new-goal')"
|
|
class="btn-primary"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Neues Ziel
|
|
</button>
|
|
</div>
|
|
|
|
@if ($goals->isEmpty())
|
|
<div class="glass p-12 text-center">
|
|
<div class="text-5xl mb-3">🎯</div>
|
|
<div class="text-white/60">Noch keine Ziele. Leg eines an, damit Fox proaktiv darauf eingeht.</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid gap-3">
|
|
@foreach ($goals as $goal)
|
|
<div wire:key="goal-{{ $goal->id }}" class="glass p-5">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-lg font-medium text-white">{{ $goal->title }}</h2>
|
|
@php
|
|
$statusStyles = [
|
|
'active' => 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30',
|
|
'paused' => 'bg-amber-500/15 text-amber-300 border-amber-500/30',
|
|
'done' => 'bg-primary/20 text-primary border-primary/30',
|
|
'abandoned' => 'bg-white/5 text-white/40 border-white/10',
|
|
];
|
|
@endphp
|
|
<span class="text-xs px-2 py-0.5 rounded-full border {{ $statusStyles[$goal->status] ?? '' }}">
|
|
{{ $goal->status }}
|
|
</span>
|
|
</div>
|
|
@if ($goal->description)
|
|
<p class="text-sm text-white/60 mt-1">{{ $goal->description }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
@if ($goal->status !== 'done')
|
|
<button
|
|
type="button"
|
|
wire:click="setStatus({{ $goal->id }}, 'done')"
|
|
class="p-2 rounded-lg hover:bg-emerald-500/20 text-emerald-400 transition"
|
|
title="Erledigt"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
|
</svg>
|
|
</button>
|
|
@endif
|
|
<button
|
|
type="button"
|
|
wire:click="setStatus({{ $goal->id }}, '{{ $goal->status === 'paused' ? 'active' : 'paused' }}')"
|
|
class="p-2 rounded-lg hover:bg-white/10 text-white/60 transition"
|
|
title="Pause umschalten"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5"/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
wire:click="destroy({{ $goal->id }})"
|
|
wire:confirm="Wirklich löschen?"
|
|
class="p-2 rounded-lg hover:bg-red-500/20 text-white/60 hover:text-red-400 transition"
|
|
title="Löschen"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="flex items-center justify-between text-xs text-white/50 mb-1">
|
|
<span>Fortschritt</span>
|
|
<span>{{ $goal->progress }}%</span>
|
|
</div>
|
|
<div class="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary rounded-full transition-all" style="width: {{ $goal->progress }}%"></div>
|
|
</div>
|
|
<div class="flex gap-1 mt-2">
|
|
@foreach ([0, 25, 50, 75, 100] as $p)
|
|
<button
|
|
type="button"
|
|
wire:click="updateProgress({{ $goal->id }}, {{ $p }})"
|
|
class="text-xs px-2 py-0.5 rounded-md bg-white/5 hover:bg-white/10 text-white/60 transition"
|
|
>
|
|
{{ $p }}%
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<livewire:modals.new-goal />
|
|
</div>
|