feat(hints): contextual help system + FAQ page (MVP)
Infrastructure for a portal-wide in-app help system:
* Users have hints_enabled (default true) and dismissed_hints (JSON
array) columns. User::shouldSeeHint(key) checks both.
* app/Support/Hints.php — single-source-of-truth registry with 14
pilot hints across Service (5), CRM (3), Depozit (3), Finanțe (3).
Each entry has RO/RU/EN title + body + optional next-step + links.
* <x-hint key="wo.dashboard.overview" /> Blade component renders a
small "?" icon with Alpine.js popover; the popover shows title,
body, next-step, related links and an "X" button that POSTs to
/app/hints/{key}/dismiss.
* HintController handles dismiss (per key), toggle (global on/off)
and reset (clear dismissed + re-enable). Routes are auth:web.
* /app/faq page (Filament Page under Admin group) renders the whole
registry grouped by area with a live search box and buttons to
toggle global hints or reset dismissed ones.
* Wired 3 pilot hints into the WO dashboard: title (overview), Docs
tab PDF preview, and the Chat client card.
Follow-ups: extend registry to cover more pages and add <x-hint>
tags where useful. Filament resource fields can also reuse the same
copy via ->hint()/->helperText().
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
<x-filament-panels::page>
|
||||
@php
|
||||
$lc = \App\Support\Hints::locale();
|
||||
$areas = $this->getAreas();
|
||||
$grouped = $this->getGrouped();
|
||||
$user = auth()->user();
|
||||
@endphp
|
||||
|
||||
<style>
|
||||
.faq-shell { max-width: 960px; margin: 0 auto; }
|
||||
.faq-top { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.faq-search { flex: 1; min-width: 260px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
|
||||
.faq-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; }
|
||||
.faq-section { margin-bottom: 32px; }
|
||||
.faq-section-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #111; }
|
||||
.faq-section-hd .faq-icon { font-size: 20px; }
|
||||
.faq-item { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
|
||||
.faq-item summary { padding: 12px 16px; cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #fafafa; user-select: none; }
|
||||
.faq-item summary::-webkit-details-marker { display: none; }
|
||||
.faq-item summary::after { content: '▾'; color: #9ca3af; font-size: 12px; }
|
||||
.faq-item[open] summary { background: #eff6ff; }
|
||||
.faq-item[open] summary::after { content: '▴'; }
|
||||
.faq-body { padding: 14px 16px; font-size: 13px; line-height: 1.5; color: #374151; }
|
||||
.faq-next { color: #059669; font-size: 12px; margin-top: 8px; }
|
||||
.faq-links { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.faq-links a { font-size: 12px; color: #2563eb; text-decoration: none; }
|
||||
.faq-empty { color: #9ca3af; text-align: center; padding: 40px 20px; font-size: 14px; }
|
||||
</style>
|
||||
|
||||
<div class="faq-shell">
|
||||
<div class="faq-top">
|
||||
<input type="text" class="faq-search" placeholder="{{ __('Caută în ghid...') }}" wire:model.live.debounce.300ms="search">
|
||||
<div class="faq-toggle">
|
||||
<span>{{ __('Sugestii pe pagini:') }}</span>
|
||||
<form method="POST" action="{{ route('hints.toggle') }}" style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" style="padding:6px 12px;border-radius:6px;border:1px solid #d1d5db;background:{{ $user?->hints_enabled ? '#10b981' : '#f3f4f6' }};color:{{ $user?->hints_enabled ? '#fff' : '#374151' }};cursor:pointer;font-size:12px;font-weight:500;">
|
||||
{{ $user?->hints_enabled ? __('ACTIVE') : __('INACTIVE') }}
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST" action="{{ route('hints.reset') }}" style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" style="padding:6px 12px;border-radius:6px;border:1px solid #d1d5db;background:#fff;color:#374151;cursor:pointer;font-size:12px;">
|
||||
{{ __('Resetează') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (empty($grouped))
|
||||
<div class="faq-empty">{{ __('Nicio potrivire pentru „:q".', ['q' => $search]) }}</div>
|
||||
@endif
|
||||
|
||||
@foreach ($grouped as $areaKey => $hints)
|
||||
@php $area = $areas[$areaKey] ?? null; @endphp
|
||||
<div class="faq-section">
|
||||
<div class="faq-section-hd">
|
||||
<span class="faq-icon">{{ $area['icon'] ?? '📖' }}</span>
|
||||
<span>{{ $area['label'][$lc] ?? $areaKey }}</span>
|
||||
<span style="color:#9ca3af;font-weight:400;font-size:12px;">({{ count($hints) }})</span>
|
||||
</div>
|
||||
@foreach ($hints as $key => $h)
|
||||
<details class="faq-item">
|
||||
<summary>{{ $h['title'][$lc] ?? $h['title']['ro'] }}</summary>
|
||||
<div class="faq-body">
|
||||
{{ $h['body'][$lc] ?? $h['body']['ro'] }}
|
||||
@if (! empty($h['next'][$lc]))
|
||||
<div class="faq-next">→ {{ $h['next'][$lc] }}</div>
|
||||
@endif
|
||||
@if (! empty($h['links']))
|
||||
<div class="faq-links">
|
||||
@foreach ($h['links'] as $ln)
|
||||
<a href="{{ url($ln['url']) }}">{{ $ln['label_' . $lc] ?? $ln['label_ro'] }} →</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</details>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-filament-panels::page>
|
||||
Reference in New Issue
Block a user