Vasyka
d9b198a235
Audit pass against /tmp/service/todo/psauto-pipeline-redesign.html — 10
gaps closed.
1. In-page TOPBAR (mockup had it; was missing): "Pipeline" title,
sep, search box "Caută client, mașină, număr...", and right-side
Filtre / Export / + Deal nou (primary) buttons. Search input is
wire:model.live.debounce 300ms.
2. SEARCH actually filters cards: $searchQuery property in
PipelineBoard scans subject + client_name + plate + code + phone
across all 6 columns, case-insensitive.
3. "+ Deal nou" + "+ Adaugă cerere" (per-column bottom) now open the
SAME right-side panel in "new form" mode. Inline create form:
Nume / Telefon / Auto / Sursă / Notițe → createNewLead() inserts
Lead with status=new, lands in col 1 instantly without leaving page.
Validation: name + phone required.
4. EXPORT button calls exportCsv() — streams a CSV of current filtered
columns (etapă, cod, subiect, client, telefon, auto, sumă,
responsabil, stare timp).
5. PERIOD selector chip shows current month in Romanian
(now()->locale('ro')->isoFormat('MMMM YYYY')) — matches "Iunie 2026".
6. HOVER icons now match mockup exactly per column:
- request: 📅 schedule / 📞 phone / ⋮ edit
- quote: 📅 schedule / 💬 wa / ⋮ edit
- scheduled: 📄 file-plus (start WO) / 💬 wa / ⋮ edit
- in_work: 👁 eye (open WO) / 💬 wa / ✓ mark Gata
- ready: 💰 cash (mark paid) / 📞 phone / ⋮ edit
- paid: NONE (col 6 has no hover actions per mockup)
7. Col 6 "Achitat azi" cards now opacity:0.65, no hover actions,
no time line, no assignee name (just avatar) — exactly as in mockup.
8. Sum display: amount == 0 renders "—" instead of "0 MDL", both in
card footer and list view.
9. "Avans achitat" tag (blue) appears on Ready cards with partial
payment (pay_status='partial'); "Neachitat" amber only when fully
unpaid. Matches mockup col 5 example "Nissan Qashqai · Gata +
Avans achitat".
10. Link tracking quick-action: appears in detail panel "Acțiuni rapide"
grid when WO has tracking_url. Sits alongside WhatsApp / Sună / SMS.
Two-panel architecture: $showNewForm and $openCardKey are mutually
exclusive. Click outside or ✕ closes the panel; opening one closes
the other.
Tests: +4 (createNewLead happy path, validation, search filter,
partial payment tag). Suite 185/185 (was 181).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
547 lines
35 KiB
PHP
547 lines
35 KiB
PHP
<x-filament-panels::page>
|
|
@php
|
|
$columns = $this->getColumns();
|
|
$stats = $this->getStats();
|
|
$detail = $this->getOpenCardDetail();
|
|
@endphp
|
|
|
|
<style>
|
|
:root {
|
|
--pb-bg: #F7F7F5;
|
|
--pb-surface: #FFFFFF;
|
|
--pb-border: rgba(0,0,0,0.08);
|
|
--pb-border-md: rgba(0,0,0,0.14);
|
|
--pb-text: #111;
|
|
--pb-text-2: #555;
|
|
--pb-text-3: #999;
|
|
--pb-blue: #1C6EF2;
|
|
--pb-blue-bg: #EBF2FF;
|
|
--pb-blue-text: #1347A8;
|
|
--pb-green: #16A34A;
|
|
--pb-green-bg: #DCFCE7;
|
|
--pb-green-text: #166534;
|
|
--pb-amber: #D97706;
|
|
--pb-amber-bg: #FEF3C7;
|
|
--pb-amber-text: #92400E;
|
|
--pb-red: #DC2626;
|
|
--pb-red-bg: #FEE2E2;
|
|
--pb-red-text: #991B1B;
|
|
--pb-purple: #7C3AED;
|
|
--pb-purple-bg: #EDE9FE;
|
|
--pb-purple-text: #4C1D95;
|
|
--pb-gray-bg: #F1F0EE;
|
|
--pb-gray-text: #444;
|
|
}
|
|
.dark {
|
|
--pb-bg: #0f172a;
|
|
--pb-surface: #1f2937;
|
|
--pb-border: rgba(255,255,255,0.08);
|
|
--pb-border-md: rgba(255,255,255,0.18);
|
|
--pb-text: #f1f5f9;
|
|
--pb-text-2: #cbd5e1;
|
|
--pb-text-3: #94a3b8;
|
|
--pb-blue-bg: #1e293b;
|
|
--pb-blue-text: #93c5fd;
|
|
--pb-green-bg: #14532d;
|
|
--pb-green-text: #86efac;
|
|
--pb-amber-bg: #422006;
|
|
--pb-amber-text: #fcd34d;
|
|
--pb-red-bg: #450a0a;
|
|
--pb-red-text: #fca5a5;
|
|
--pb-purple-bg: #3b0764;
|
|
--pb-purple-text: #c4b5fd;
|
|
--pb-gray-bg: #374151;
|
|
--pb-gray-text: #d1d5db;
|
|
}
|
|
|
|
/* Break out of Filament chrome */
|
|
.fi-main-ctn:has(.pb-shell) { padding: 0 !important; }
|
|
.fi-main:has(.pb-shell) { padding: 0 !important; }
|
|
.fi-page:has(.pb-shell) > div { padding: 0 !important; gap: 0 !important; }
|
|
.fi-page:has(.pb-shell) .fi-header { display: none !important; }
|
|
.fi-page:has(.pb-shell) { gap: 0 !important; }
|
|
|
|
.pb-shell { background:var(--pb-bg); color:var(--pb-text); margin:0; padding:0; min-height:calc(100vh - 64px); font-size:13px; display:flex; flex-direction:column; }
|
|
|
|
/* TOPBAR */
|
|
.pb-topbar { height:52px; background:var(--pb-surface); border-bottom:1px solid var(--pb-border); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
|
|
.pb-topbar-title { font-size:15px; font-weight:600; letter-spacing:-.2px; }
|
|
.pb-topbar-sep { width:1px; height:18px; background:var(--pb-border-md); }
|
|
.pb-search { display:flex; align-items:center; gap:6px; background:var(--pb-bg); border:1px solid var(--pb-border); border-radius:6px; padding:5px 10px; flex:1; max-width:320px; }
|
|
.pb-search input { border:none; background:transparent; outline:none; font-size:12px; color:var(--pb-text); width:100%; }
|
|
.pb-search-icon { color:var(--pb-text-3); font-size:14px; }
|
|
.pb-topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
|
|
.pb-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--pb-border-md); background:var(--pb-surface); color:var(--pb-text); white-space:nowrap; text-decoration:none; }
|
|
.pb-btn:hover { background:var(--pb-bg); }
|
|
.pb-btn-primary { background:var(--pb-blue); color:#fff !important; border-color:var(--pb-blue); }
|
|
.pb-btn-primary:hover { background:#1557d4; }
|
|
|
|
.pb-stat-strip { background:var(--pb-surface); border-bottom:1px solid var(--pb-border); padding:10px 20px; display:flex; gap:20px; flex-wrap:wrap; flex-shrink:0; }
|
|
.pb-stat-item { display:flex; flex-direction:column; gap:2px; min-width:60px; }
|
|
.pb-stat-val { font-size:16px; font-weight:600; }
|
|
.pb-stat-lbl { font-size:10px; color:var(--pb-text-3); white-space:nowrap; }
|
|
.pb-stat-sep { width:1px; background:var(--pb-border); align-self:stretch; }
|
|
|
|
.pb-filter-bar { background:var(--pb-surface); border-bottom:1px solid var(--pb-border); padding:8px 20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
|
|
.pb-view-toggle { display:flex; background:var(--pb-bg); border-radius:6px; padding:2px; border:1px solid var(--pb-border); }
|
|
.pb-vt-btn { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:500; cursor:pointer; color:var(--pb-text-3); }
|
|
.pb-vt-btn.active { background:var(--pb-surface); color:var(--pb-text); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
|
|
.pb-chip { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; cursor:pointer; border:1px solid var(--pb-border); background:var(--pb-surface); color:var(--pb-text-2); }
|
|
.pb-chip:hover { border-color:var(--pb-border-md); }
|
|
.pb-chip.active { background:var(--pb-blue-bg); border-color:#93B8F9; color:var(--pb-blue-text); }
|
|
.pb-filter-sep { width:1px; height:20px; background:var(--pb-border); }
|
|
.pb-period { display:flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--pb-border); border-radius:6px; font-size:11px; background:var(--pb-surface); color:var(--pb-text-2); }
|
|
.pb-total { margin-left:auto; font-size:11px; color:var(--pb-text-2); }
|
|
.pb-total strong { color:var(--pb-text); }
|
|
|
|
.pb-board { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:16px 20px; align-items:flex-start; flex:1; min-height:0; }
|
|
.pb-col { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; height:100%; }
|
|
.pb-col.over .pb-col-body { background:var(--pb-blue-bg); border-radius:8px; }
|
|
.pb-col-head { background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px; padding:10px 12px; flex-shrink:0; }
|
|
.pb-col-head-top { display:flex; align-items:center; justify-content:space-between; }
|
|
.pb-col-name { font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; }
|
|
.pb-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
|
.pb-col-count { font-size:10px; font-weight:600; background:var(--pb-bg); padding:1px 6px; border-radius:8px; color:var(--pb-text-2); }
|
|
.pb-col-sum { font-size:11px; color:var(--pb-text-3); margin-top:3px; }
|
|
.pb-col-sum strong { color:var(--pb-text-2); }
|
|
.pb-col-body { flex:1; display:flex; flex-direction:column; gap:6px; overflow-y:auto; padding:2px; transition:background .15s; min-height:60px; }
|
|
.pb-col-body::-webkit-scrollbar { width:3px; }
|
|
.pb-col-body::-webkit-scrollbar-thumb { background:var(--pb-border-md); border-radius:2px; }
|
|
|
|
.pb-deal { background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px; padding:11px 12px; cursor:pointer; transition:all .12s; position:relative; }
|
|
.pb-deal:hover { border-color:var(--pb-border-md); box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-1px); }
|
|
.pb-deal.dragging { opacity:0.4; }
|
|
.pb-deal-urgent { position:absolute; top:0; left:0; width:3px; height:100%; background:var(--pb-red); border-radius:10px 0 0 10px; }
|
|
.pb-deal-id { font-size:10px; color:var(--pb-text-3); font-weight:500; letter-spacing:.3px; margin-bottom:4px; }
|
|
.pb-deal-subject { font-size:12px; font-weight:600; margin-bottom:3px; line-height:1.3; }
|
|
.pb-deal-car { font-size:11px; color:var(--pb-text-2); display:flex; align-items:center; gap:4px; margin-bottom:6px; }
|
|
.pb-deal-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
|
|
.pb-tag { font-size:10px; font-weight:500; padding:2px 7px; border-radius:4px; white-space:nowrap; }
|
|
.pb-tag-blue { background:var(--pb-blue-bg); color:var(--pb-blue-text); }
|
|
.pb-tag-green { background:var(--pb-green-bg); color:var(--pb-green-text); }
|
|
.pb-tag-amber { background:var(--pb-amber-bg); color:var(--pb-amber-text); }
|
|
.pb-tag-red { background:var(--pb-red-bg); color:var(--pb-red-text); }
|
|
.pb-tag-gray { background:var(--pb-gray-bg); color:var(--pb-gray-text); }
|
|
.pb-tag-purple { background:var(--pb-purple-bg); color:var(--pb-purple-text); }
|
|
.pb-deal-footer { display:flex; align-items:center; justify-content:space-between; }
|
|
.pb-deal-assignee { display:flex; align-items:center; gap:5px; }
|
|
.pb-av { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; }
|
|
.pb-av-blue { background:var(--pb-blue-bg); color:var(--pb-blue-text); }
|
|
.pb-av-green { background:var(--pb-green-bg); color:var(--pb-green-text); }
|
|
.pb-av-purple { background:var(--pb-purple-bg); color:var(--pb-purple-text); }
|
|
.pb-av-amber { background:var(--pb-amber-bg); color:var(--pb-amber-text); }
|
|
.pb-av-gray { background:var(--pb-gray-bg); color:var(--pb-gray-text); }
|
|
.pb-deal-name { font-size:11px; color:var(--pb-text-2); }
|
|
.pb-deal-amount { font-size:12px; font-weight:600; }
|
|
.pb-deal-time { font-size:10px; color:var(--pb-text-3); margin-top:5px; display:flex; align-items:center; gap:3px; }
|
|
.pb-deal-time.overdue { color:var(--pb-red); }
|
|
.pb-progress-bar { height:3px; background:var(--pb-bg); border-radius:2px; overflow:hidden; margin-top:6px; }
|
|
.pb-progress-fill { height:100%; border-radius:2px; background:var(--pb-purple); }
|
|
|
|
/* Hover floating action buttons */
|
|
.pb-deal-actions { position:absolute; top:8px; right:8px; display:none; gap:3px; z-index:2; }
|
|
.pb-deal:hover .pb-deal-actions { display:flex; }
|
|
.pb-act-btn { width:24px; height:24px; border-radius:5px; border:1px solid var(--pb-border); background:var(--pb-surface); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--pb-text-2); font-size:13px; text-decoration:none; }
|
|
.pb-act-btn:hover { background:var(--pb-bg); color:var(--pb-text); border-color:var(--pb-border-md); }
|
|
|
|
/* Col 6 (Achitat azi): faded, no hover actions */
|
|
.pb-col[data-col="paid"] .pb-deal { opacity:0.65; }
|
|
.pb-col[data-col="paid"] .pb-deal-actions { display:none !important; }
|
|
|
|
.pb-add-card { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px dashed var(--pb-border-md); color:var(--pb-text-3); font-size:11px; cursor:pointer; background:transparent; text-decoration:none; flex-shrink:0; }
|
|
.pb-add-card:hover { border-color:var(--pb-blue); color:var(--pb-blue); background:var(--pb-blue-bg); }
|
|
|
|
.pb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:100; opacity:0; pointer-events:none; transition:opacity .2s; }
|
|
.pb-overlay.open { opacity:1; pointer-events:all; }
|
|
.pb-panel { position:fixed; right:0; top:0; bottom:0; width:440px; max-width:92vw; background:var(--pb-surface); border-left:1px solid var(--pb-border); z-index:101; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); overflow:hidden; display:flex; flex-direction:column; }
|
|
.pb-panel.open { transform:translateX(0); }
|
|
.pb-panel-head { padding:16px 20px 12px; border-bottom:1px solid var(--pb-border); display:flex; align-items:flex-start; justify-content:space-between; background:var(--pb-surface); flex-shrink:0; }
|
|
.pb-panel-title { font-size:15px; font-weight:600; line-height:1.3; }
|
|
.pb-panel-id { font-size:11px; color:var(--pb-text-3); margin-top:2px; }
|
|
.pb-close-btn { width:28px; height:28px; border-radius:6px; border:1px solid var(--pb-border); background:var(--pb-bg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
|
|
.pb-panel-body { padding:16px 20px; flex:1; overflow-y:auto; }
|
|
.pb-pfield { margin-bottom:14px; }
|
|
.pb-pfield-label { font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
|
|
.pb-pfield-val { font-size:13px; font-weight:500; }
|
|
.pb-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
|
|
.pb-panel-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--pb-border); }
|
|
.pb-panel-sec-title { font-size:11px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
|
|
.pb-stage-stepper { display:flex; gap:4px; }
|
|
.pb-stage-step { flex:1; height:4px; border-radius:2px; background:var(--pb-bg); }
|
|
.pb-stage-step.done { background:var(--pb-green); }
|
|
.pb-stage-step.current { background:var(--pb-blue); }
|
|
.pb-stage-labels { display:flex; gap:4px; margin-top:5px; }
|
|
.pb-stage-lbl { flex:1; font-size:9px; color:var(--pb-text-3); text-align:center; }
|
|
.pb-stage-lbl.current { color:var(--pb-blue); font-weight:600; }
|
|
.pb-activity-item { display:flex; gap:10px; margin-bottom:10px; }
|
|
.pb-act-icon { width:24px; height:24px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; }
|
|
.pb-act-text { font-size:12px; color:var(--pb-text-2); flex:1; }
|
|
.pb-act-time { font-size:10px; color:var(--pb-text-3); margin-top:1px; }
|
|
.pb-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
|
|
.pb-quick-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px; font-size:11px; border:1px solid var(--pb-border-md); border-radius:6px; background:var(--pb-surface); color:var(--pb-text); cursor:pointer; text-decoration:none; }
|
|
.pb-quick-btn:hover { background:var(--pb-bg); }
|
|
.pb-quick-btn.primary { background:var(--pb-blue); color:#fff !important; border-color:var(--pb-blue); }
|
|
.pb-quick-btn.primary:hover { background:#1557d4; }
|
|
|
|
.pb-panel-actions { padding:12px 20px; border-top:1px solid var(--pb-border); display:flex; gap:8px; background:var(--pb-surface); flex-shrink:0; }
|
|
.pb-panel-actions .pb-quick-btn { flex:1; }
|
|
|
|
/* New-card form */
|
|
.pb-form-field { margin-bottom:12px; }
|
|
.pb-form-field label { display:block; font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
|
|
.pb-form-field input, .pb-form-field textarea, .pb-form-field select { width:100%; padding:8px 10px; font-size:13px; border:1px solid var(--pb-border-md); border-radius:6px; background:var(--pb-surface); color:var(--pb-text); outline:none; font-family:inherit; }
|
|
.pb-form-field input:focus, .pb-form-field textarea:focus, .pb-form-field select:focus { border-color:var(--pb-blue); }
|
|
.pb-form-field textarea { resize:vertical; min-height:60px; }
|
|
|
|
.pb-empty-col { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 12px; color:var(--pb-text-3); font-size:11px; text-align:center; }
|
|
</style>
|
|
|
|
<div class="pb-shell" x-data="{ view: 'kanban', dragKey: null }" wire:poll.10s>
|
|
{{-- TOPBAR --}}
|
|
<div class="pb-topbar">
|
|
<span class="pb-topbar-title">Pipeline</span>
|
|
<div class="pb-topbar-sep"></div>
|
|
<div class="pb-search">
|
|
<span class="pb-search-icon">🔍</span>
|
|
<input placeholder="Caută client, mașină, număr..." wire:model.live.debounce.300ms="searchQuery" />
|
|
</div>
|
|
<div class="pb-topbar-right">
|
|
<button class="pb-btn" wire:click="setFilter('urgent')">⚠ Filtre</button>
|
|
<a class="pb-btn" wire:click="exportCsv" wire:loading.attr="disabled">⬇ Export</a>
|
|
<button class="pb-btn pb-btn-primary" wire:click="openNewForm">+ Deal nou</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- STAT STRIP --}}
|
|
<div class="pb-stat-strip">
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val">{{ $stats['active'] }}</span>
|
|
<span class="pb-stat-lbl">Total deals active</span>
|
|
</div>
|
|
<div class="pb-stat-sep"></div>
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val" style="color:var(--pb-blue)">{{ number_format($stats['pipeline_mdl'], 0, '.', ' ') }}</span>
|
|
<span class="pb-stat-lbl">MDL pipeline total</span>
|
|
</div>
|
|
<div class="pb-stat-sep"></div>
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val" style="color:var(--pb-green)">{{ number_format($stats['closed_today_mdl'], 0, '.', ' ') }}</span>
|
|
<span class="pb-stat-lbl">MDL închise azi</span>
|
|
</div>
|
|
<div class="pb-stat-sep"></div>
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val" style="color:var(--pb-amber)">{{ $stats['need_action'] }}</span>
|
|
<span class="pb-stat-lbl">Necesită acțiune</span>
|
|
</div>
|
|
<div class="pb-stat-sep"></div>
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val">{{ $stats['conversion_rate'] }}%</span>
|
|
<span class="pb-stat-lbl">Rata conversie</span>
|
|
</div>
|
|
<div class="pb-stat-sep"></div>
|
|
<div class="pb-stat-item">
|
|
<span class="pb-stat-val" style="color:var(--pb-red)">{{ $stats['overdue'] }}</span>
|
|
<span class="pb-stat-lbl">Depășit termen</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- FILTER BAR --}}
|
|
<div class="pb-filter-bar">
|
|
<div class="pb-view-toggle">
|
|
<div class="pb-vt-btn" :class="view==='kanban' && 'active'" @click="view='kanban'">📋 Kanban</div>
|
|
<div class="pb-vt-btn" :class="view==='list' && 'active'" @click="view='list'">≡ Listă</div>
|
|
</div>
|
|
<div class="pb-filter-sep"></div>
|
|
<div class="pb-chip {{ $activeFilter === 'all' ? 'active' : '' }}" wire:click="setFilter('all')">Toate</div>
|
|
<div class="pb-chip {{ $activeFilter === 'mine' ? 'active' : '' }}" wire:click="setFilter('mine')">👤 Ale mele</div>
|
|
<div class="pb-chip {{ $activeFilter === 'urgent' ? 'active' : '' }}" wire:click="setFilter('urgent')" style="color:var(--pb-red-text)">⚠ Urgente</div>
|
|
<div class="pb-chip {{ $activeFilter === 'today' ? 'active' : '' }}" wire:click="setFilter('today')">📅 Azi</div>
|
|
<div class="pb-filter-sep"></div>
|
|
<div class="pb-period">📅 {{ now()->locale('ro')->isoFormat('MMMM YYYY') }}</div>
|
|
<div class="pb-total">Pipeline: <strong>{{ number_format($stats['pipeline_mdl'], 0, '.', ' ') }} MDL</strong> · <strong>{{ $stats['active'] }} deals</strong></div>
|
|
</div>
|
|
|
|
{{-- KANBAN --}}
|
|
<div class="pb-board" x-show="view==='kanban'">
|
|
@foreach ($columns as $colKey => $col)
|
|
<div class="pb-col" data-col="{{ $colKey }}"
|
|
@dragover.prevent="$el.classList.add('over')"
|
|
@dragleave="$el.classList.remove('over')"
|
|
@drop.prevent="
|
|
$el.classList.remove('over');
|
|
if (dragKey) {
|
|
$wire.moveCard(dragKey, '{{ $colKey }}');
|
|
dragKey = null;
|
|
}
|
|
">
|
|
<div class="pb-col-head">
|
|
<div class="pb-col-head-top">
|
|
<div class="pb-col-name">
|
|
<div class="pb-col-dot" style="background:{{ $col['color'] }}"></div>
|
|
{{ $col['label'] }}
|
|
</div>
|
|
<span class="pb-col-count">{{ $col['count'] }}</span>
|
|
</div>
|
|
<div class="pb-col-sum"><strong>{{ number_format($col['sum'], 0, '.', ' ') }} MDL</strong></div>
|
|
</div>
|
|
<div class="pb-col-body">
|
|
@forelse ($col['cards'] as $card)
|
|
<div class="pb-deal"
|
|
draggable="true"
|
|
wire:click="openCard('{{ $card['key'] }}')"
|
|
@dragstart="dragKey='{{ $card['key'] }}'; $el.classList.add('dragging')"
|
|
@dragend="$el.classList.remove('dragging')">
|
|
@if ($card['urgent'])
|
|
<div class="pb-deal-urgent"></div>
|
|
@endif
|
|
<div class="pb-deal-actions" @click.stop>
|
|
@if ($colKey === 'request')
|
|
{{-- 📅 calendar-plus / 📞 phone / ⋮ --}}
|
|
<a class="pb-act-btn" wire:click.stop="quickSchedule('{{ $card['key'] }}')" title="Programare">📅</a>
|
|
@if (!empty($card['phone']))<a class="pb-act-btn" href="tel:{{ $card['phone'] }}" @click.stop title="Sună">📞</a>@endif
|
|
<a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
|
|
@elseif ($colKey === 'quote')
|
|
{{-- 📅 / 💬 message / ⋮ --}}
|
|
<a class="pb-act-btn" wire:click.stop="quickSchedule('{{ $card['key'] }}')" title="Programare">📅</a>
|
|
@if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
|
|
<a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
|
|
@elseif ($colKey === 'scheduled')
|
|
{{-- 📄+ file-plus (start WO) / 💬 / ⋮ --}}
|
|
<a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'in_work')" title="Începe lucrul (creează fișă)">📄</a>
|
|
@if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
|
|
<a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
|
|
@elseif ($colKey === 'in_work')
|
|
{{-- 👁 eye / 💬 / ⋮ --}}
|
|
<a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Deschide fișa">👁</a>
|
|
@if (!empty($card['phone']))<a class="pb-act-btn" href="https://wa.me/{{ preg_replace('/\D/', '', $card['phone']) }}" target="_blank" @click.stop title="WhatsApp">💬</a>@endif
|
|
<a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'ready')" title="Marchează Gata">✓</a>
|
|
@elseif ($colKey === 'ready')
|
|
{{-- 💰 cash / 💬 / ⋮ --}}
|
|
<a class="pb-act-btn" wire:click.stop="moveCard('{{ $card['key'] }}', 'paid')" title="Achitat">💰</a>
|
|
@if (!empty($card['phone']))<a class="pb-act-btn" href="tel:{{ $card['phone'] }}" @click.stop title="Sună">📞</a>@endif
|
|
<a class="pb-act-btn" href="{{ $card['edit_url'] }}" @click.stop title="Editare">⋮</a>
|
|
@endif
|
|
</div>
|
|
<div class="pb-deal-id">{{ $card['code'] }}</div>
|
|
<div class="pb-deal-subject">{{ $card['subject'] }}</div>
|
|
<div class="pb-deal-car">🚗 {{ $card['plate'] ?: '—' }} · {{ $card['client_name'] }}</div>
|
|
@if (!empty($card['tags']))
|
|
<div class="pb-deal-meta">
|
|
@foreach ($card['tags'] as $tag)
|
|
<span class="pb-tag pb-tag-{{ $tag['color'] }}">{{ $tag['label'] }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
<div class="pb-deal-footer">
|
|
<div class="pb-deal-assignee">
|
|
<div class="pb-av pb-av-{{ $card['assignee']['color'] }}">{{ $card['assignee']['initials'] }}</div>
|
|
@if ($colKey !== 'paid')<span class="pb-deal-name">{{ $card['assignee']['name'] }}</span>@endif
|
|
</div>
|
|
<span class="pb-deal-amount">{{ $card['amount'] > 0 ? number_format($card['amount'], 0, '.', ' ') . ' MDL' : '—' }}</span>
|
|
</div>
|
|
@if (!is_null($card['progress_pct']))
|
|
<div class="pb-progress-bar"><div class="pb-progress-fill" style="width:{{ $card['progress_pct'] }}%"></div></div>
|
|
@endif
|
|
@if ($card['time_text'] && $colKey !== 'paid')
|
|
<div class="pb-deal-time {{ $card['time_overdue'] ? 'overdue' : '' }}">
|
|
@if ($card['time_icon']==='check')✓@elseif($card['time_icon']==='phone')📞@elseif($card['time_icon']==='message')💬@else⏱@endif
|
|
{{ $card['time_text'] }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div class="pb-empty-col">Gol — trage un card aici</div>
|
|
@endforelse
|
|
@if ($colKey !== 'paid')
|
|
<button type="button" class="pb-add-card" wire:click="openNewForm">+ Adaugă cerere</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- LIST VIEW --}}
|
|
<div x-show="view==='list'" style="padding:16px 20px; flex:1; overflow:auto;" x-cloak>
|
|
<table style="width:100%; border-collapse:collapse; background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:10px;">
|
|
<thead>
|
|
<tr>
|
|
@foreach (['#', 'Subiect', 'Client', 'Auto', 'Etapă', 'Sumă', 'Responsabil', 'Stare timp'] as $h)
|
|
<th style="text-align:left; padding:8px 12px; font-size:10px; font-weight:600; color:var(--pb-text-3); text-transform:uppercase; border-bottom:1px solid var(--pb-border);">{{ $h }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($columns as $colKey => $col)
|
|
@foreach ($col['cards'] as $card)
|
|
<tr wire:click="openCard('{{ $card['key'] }}')" style="cursor:pointer; border-bottom:1px solid var(--pb-border);">
|
|
<td style="padding:10px 12px; font-size:12px; color:var(--pb-text-3);">{{ $card['code'] }}</td>
|
|
<td style="padding:10px 12px; font-size:13px; font-weight:500;">{{ $card['subject'] }}</td>
|
|
<td style="padding:10px 12px; font-size:12px;">{{ $card['client_name'] }}</td>
|
|
<td style="padding:10px 12px; font-size:12px;">{{ $card['plate'] }}</td>
|
|
<td style="padding:10px 12px;"><span class="pb-tag pb-tag-gray">{{ $col['label'] }}</span></td>
|
|
<td style="padding:10px 12px; font-size:12px; font-weight:600;">{{ $card['amount'] > 0 ? number_format($card['amount'], 0, '.', ' ') . ' MDL' : '—' }}</td>
|
|
<td style="padding:10px 12px; font-size:12px;">{{ $card['assignee']['name'] }}</td>
|
|
<td style="padding:10px 12px; font-size:11px; color:{{ $card['time_overdue'] ? 'var(--pb-red)' : 'var(--pb-text-3)' }};">{{ $card['time_text'] }}</td>
|
|
</tr>
|
|
@endforeach
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- PANEL: NEW FORM mode --}}
|
|
<div class="pb-overlay {{ $showNewForm ? 'open' : '' }}" wire:click="$set('showNewForm', false)"></div>
|
|
<div class="pb-panel {{ $showNewForm ? 'open' : '' }}">
|
|
@if ($showNewForm)
|
|
<div class="pb-panel-head">
|
|
<div>
|
|
<div class="pb-panel-title">Cerere nouă</div>
|
|
<div class="pb-panel-id">Va fi adăugată în Cerere nouă</div>
|
|
</div>
|
|
<div class="pb-close-btn" wire:click="$set('showNewForm', false)">✕</div>
|
|
</div>
|
|
<form class="pb-panel-body" wire:submit.prevent="createNewLead">
|
|
<div class="pb-form-field">
|
|
<label>Nume *</label>
|
|
<input type="text" wire:model="newName" placeholder="Ion Popescu" autofocus>
|
|
</div>
|
|
<div class="pb-form-field">
|
|
<label>Telefon *</label>
|
|
<input type="text" wire:model="newPhone" placeholder="+373 69 ...">
|
|
</div>
|
|
<div class="pb-form-field">
|
|
<label>Auto / model</label>
|
|
<input type="text" wire:model="newCar" placeholder="VW Passat 2018">
|
|
</div>
|
|
<div class="pb-form-field">
|
|
<label>Sursă</label>
|
|
<select wire:model="newSource">
|
|
@foreach (\App\Models\Tenant\Lead::SOURCES as $val => $lbl)
|
|
<option value="{{ $val }}">{{ $lbl }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="pb-form-field">
|
|
<label>Notițe / reclamație</label>
|
|
<textarea wire:model="newNotes" placeholder="Ce a spus clientul..."></textarea>
|
|
</div>
|
|
</form>
|
|
<div class="pb-panel-actions">
|
|
<button type="button" class="pb-quick-btn" wire:click="$set('showNewForm', false)">Anulează</button>
|
|
<button type="button" class="pb-quick-btn primary" wire:click="createNewLead">Creează cerere</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- PANEL: DETAIL mode --}}
|
|
<div class="pb-overlay {{ $openCardKey && !$showNewForm ? 'open' : '' }}" wire:click="closeCard()"></div>
|
|
<div class="pb-panel {{ $openCardKey && !$showNewForm ? 'open' : '' }}">
|
|
@if ($detail && !$showNewForm)
|
|
<div class="pb-panel-head">
|
|
<div>
|
|
<div class="pb-panel-title">{{ $detail['title'] }}</div>
|
|
<div class="pb-panel-id">{{ $detail['subtitle'] }}</div>
|
|
</div>
|
|
<div class="pb-close-btn" wire:click="closeCard()">✕</div>
|
|
</div>
|
|
<div class="pb-panel-body">
|
|
<div>
|
|
<div class="pb-panel-sec-title">Progres etapă</div>
|
|
<div class="pb-stage-stepper">
|
|
@foreach ($detail['stages'] as $st)
|
|
<div class="pb-stage-step {{ $st['done'] ? 'done' : '' }} {{ $st['current'] ? 'current' : '' }}"></div>
|
|
@endforeach
|
|
</div>
|
|
<div class="pb-stage-labels">
|
|
@foreach ($detail['stages'] as $st)
|
|
<div class="pb-stage-lbl {{ $st['current'] ? 'current' : '' }}">{{ $st['label'] }}</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pb-panel-section">
|
|
<div class="pb-two-cols">
|
|
@foreach ($detail['fields'] as $label => $value)
|
|
@if ($value)
|
|
<div class="pb-pfield">
|
|
<div class="pb-pfield-label">{{ $label }}</div>
|
|
<div class="pb-pfield-val" @if($label==='Telefon') style="color:var(--pb-blue)" @endif>{{ $value }}</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
@if ($detail['note'])
|
|
<div class="pb-pfield">
|
|
<div class="pb-pfield-label">Notițe / Reclamație</div>
|
|
<div style="font-size:12px; color:var(--pb-text-2); white-space:pre-wrap;">{{ $detail['note'] }}</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if (!empty($detail['wo']))
|
|
<div class="pb-panel-section">
|
|
<div class="pb-panel-sec-title">Fișă de lucru</div>
|
|
<div style="background:var(--pb-purple-bg); border:1px solid #DDD6FE; border-radius:6px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between;">
|
|
<div>
|
|
<div style="font-size:12px; font-weight:600; color:var(--pb-purple-text);">{{ $detail['wo']['number'] }} · {{ $detail['wo']['status_label'] }}</div>
|
|
<div style="font-size:11px; color:var(--pb-purple-text); opacity:.8; margin-top:2px;">
|
|
@if (!is_null($detail['wo']['progress_pct'])){{ $detail['wo']['progress_pct'] }}% finalizat @endif
|
|
@if ($detail['wo']['eta']) · ETA {{ $detail['wo']['eta'] }} @endif
|
|
</div>
|
|
</div>
|
|
<a class="pb-quick-btn" style="padding:4px 10px;" href="{{ $detail['edit_url'] }}">↗ Deschide</a>
|
|
</div>
|
|
@if (!empty($detail['wo']['has_pending_approval']))
|
|
<div style="margin-top:8px; background:var(--pb-amber-bg); border:1px solid #FDE68A; border-radius:6px; padding:8px 12px;">
|
|
<div style="font-size:11px; font-weight:600; color:var(--pb-amber-text);">⚠ Necesită aprobare client</div>
|
|
<div style="font-size:11px; color:var(--pb-amber-text); margin-top:2px;">Deschide fișa pentru aprobare lucrare/piesă.</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@if (!empty($detail['activity']))
|
|
<div class="pb-panel-section">
|
|
<div class="pb-panel-sec-title">Activitate recentă</div>
|
|
@foreach ($detail['activity'] as $a)
|
|
<div class="pb-activity-item">
|
|
<div class="pb-act-icon" style="background:var(--pb-blue-bg); color:var(--pb-blue-text);">●</div>
|
|
<div>
|
|
<div class="pb-act-text">{{ $a['text'] }}</div>
|
|
<div class="pb-act-time">{{ $a['time'] }}</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<div class="pb-panel-section">
|
|
<div class="pb-panel-sec-title">Acțiuni rapide</div>
|
|
<div class="pb-quick-grid">
|
|
@if (!empty($detail['phone']))
|
|
<a class="pb-quick-btn" target="_blank" href="https://wa.me/{{ preg_replace('/\D/', '', $detail['phone']) }}">💚 WhatsApp</a>
|
|
<a class="pb-quick-btn" href="tel:{{ $detail['phone'] }}">📞 Sună</a>
|
|
<a class="pb-quick-btn" href="sms:{{ $detail['phone'] }}">💬 SMS</a>
|
|
@endif
|
|
@if (!empty($detail['wo']['tracking_url']))
|
|
<a class="pb-quick-btn" href="{{ $detail['wo']['tracking_url'] }}" target="_blank">🔗 Link tracking</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pb-panel-actions">
|
|
@php $kind = explode(':', $openCardKey)[0] ?? '' @endphp
|
|
@if (in_array($kind, ['lead', 'deal']) && empty($detail['wo']))
|
|
<a class="pb-quick-btn" wire:click="quickSchedule('{{ $openCardKey }}')">📅 Programează</a>
|
|
<a class="pb-quick-btn primary" href="{{ $detail['edit_url'] }}">↗ Deschide deal</a>
|
|
@elseif ($kind === 'wo')
|
|
<a class="pb-quick-btn" href="{{ $this->calendarUrl() }}">📅 Calendar</a>
|
|
<a class="pb-quick-btn primary" href="{{ $detail['edit_url'] }}">↗ Deschide Fișă</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-filament-panels::page>
|