Add customer contact inquiry system, automated receipt emails, admin communication inbox, and customer profile management
This commit is contained in:
@@ -56,11 +56,24 @@
|
||||
>
|
||||
<i data-lucide="package" class="w-3.5 h-3.5"></i>
|
||||
<span>Mijn Bestellingen</span>
|
||||
<span class="px-1.5 py-0.2 rounded-md text-[10px] {{ $tab === 'orders' ? 'bg-slate-100 text-slate-700' : 'bg-slate-200/60 text-slate-600' }}">
|
||||
<span class="px-1.5 py-0.2 rounded-md text-[10px] bg-slate-200/60 text-slate-700">
|
||||
{{ $orders->count() }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="tab = 'messages'"
|
||||
:class="tab === 'messages' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900'"
|
||||
class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer"
|
||||
>
|
||||
<i data-lucide="message-square" class="w-3.5 h-3.5"></i>
|
||||
<span>Mijn Vragen</span>
|
||||
<span class="px-1.5 py-0.2 rounded-md text-[10px] bg-slate-200/60 text-slate-700">
|
||||
{{ $communications->count() }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="tab = 'profile'"
|
||||
@@ -153,6 +166,86 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- TAB: MIJN VRAGEN & COMMUNICATIE -->
|
||||
<div x-show="tab === 'messages'" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-sm font-bold text-slate-900">Jouw gestelde vragen aan Jouwdriedee.nl</h2>
|
||||
<p class="text-xs text-slate-500">Volg hier jouw berichten en antwoorden van onze printstudio.</p>
|
||||
</div>
|
||||
<a href="{{ route('contact.index') }}" class="px-3.5 py-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition flex items-center space-x-1.5 shadow-xs">
|
||||
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
|
||||
<span>Nieuwe vraag stellen</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($communications->isEmpty())
|
||||
<div class="p-10 text-center rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-2.5">
|
||||
<div class="w-10 h-10 rounded-xl bg-slate-100 text-slate-400 flex items-center justify-center mx-auto">
|
||||
<i data-lucide="message-square" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-slate-900">Nog geen vragen gesteld</h3>
|
||||
<p class="text-xs text-slate-500 max-w-xs mx-auto">
|
||||
Heb je een vraag over een model, levering of materiaal? Stel hem gerust!
|
||||
</p>
|
||||
<div class="pt-2">
|
||||
<a href="{{ route('contact.index') }}" class="inline-flex items-center space-x-1.5 px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition shadow-xs">
|
||||
<i data-lucide="message-square" class="w-3.5 h-3.5"></i>
|
||||
<span>Vraag stellen aan de shop</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-3">
|
||||
@foreach($communications as $comm)
|
||||
<div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-2xs space-y-3">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-2.5 border-b border-slate-100 gap-2">
|
||||
<div>
|
||||
<span class="font-mono text-xs text-slate-400">#{{ $comm->id }}</span>
|
||||
<h3 class="font-bold text-slate-900 text-xs sm:text-sm inline ml-1">{{ $comm->subject }}</h3>
|
||||
<span class="text-xs text-slate-400 ml-2">• {{ $comm->created_at->format('d-m-Y om H:i') }}</span>
|
||||
</div>
|
||||
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold self-start sm:self-auto
|
||||
@if($comm->status === 'new') bg-sky-50 text-sky-700 border border-sky-200/60
|
||||
@elseif($comm->status === 'in_progress') bg-amber-50 text-amber-700 border border-amber-200/60
|
||||
@elseif($comm->status === 'resolved') bg-emerald-50 text-emerald-700 border border-emerald-200/60
|
||||
@else bg-slate-100 text-slate-600 border border-slate-200/60 @endif">
|
||||
{{ $comm->status_label }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Oorspronkelijke vraag -->
|
||||
<div class="text-xs text-slate-700 leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100">
|
||||
<span class="font-semibold text-slate-900 block text-[11px] mb-1">Jouw vraag:</span>
|
||||
{{ $comm->message }}
|
||||
</div>
|
||||
|
||||
<!-- Eventuele antwoorden van de shop -->
|
||||
@if($comm->replies->isNotEmpty())
|
||||
<div class="space-y-2 pt-1">
|
||||
<span class="text-[11px] font-semibold text-emerald-700 block">Antwoord van Jouwdriedee.nl:</span>
|
||||
@foreach($comm->replies as $reply)
|
||||
<div class="p-3 rounded-xl bg-emerald-50/60 border border-emerald-200/70 text-xs text-slate-800 space-y-1">
|
||||
<div class="flex items-center justify-between text-[10px] text-emerald-700 font-medium">
|
||||
<span>Studio Specialist</span>
|
||||
<span>{{ $reply->created_at->format('d-m-Y H:i') }}</span>
|
||||
</div>
|
||||
<div class="whitespace-pre-wrap">{{ $reply->message }}</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="text-[11px] text-slate-400 italic">
|
||||
We hebben jouw vraag in behandeling. Je ontvangt zo snel mogelijk antwoord via e-mail.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: PROFIEL & BEVEILIGING -->
|
||||
<div x-show="tab === 'profile'" class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user