ccd922b5bb
Some checks are pending
Scan for leaked secrets using Kingfisher / kingfisher-secrets-scan (push) Waiting to run
Gemini PR Review / Gemini PR Review (pull_request) Waiting to run
Scan for leaked secrets using Kingfisher / kingfisher-secrets-scan (pull_request) Waiting to run
Laravel Larastan / larastan (pull_request) Waiting to run
Laravel Pint / pint (pull_request) Waiting to run
735 lines
52 KiB
PHP
735 lines
52 KiB
PHP
<div style="position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:0.75rem;">
|
|
<style>
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
|
|
|
|
.cb-mode-card {
|
|
background: #111827;
|
|
border: 1px solid #374151;
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
transition: border-color .2s, background .2s;
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
.cb-mode-card:hover { border-color: #f59e0b; background: #1a2436; }
|
|
|
|
.cb-report-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.4rem 0.875rem;
|
|
border-radius: 9999px;
|
|
border: 1px solid #374151;
|
|
background: #111827;
|
|
color: #9ca3af;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: border-color .15s, background .15s, color .15s;
|
|
}
|
|
.cb-report-pill:hover { border-color: #f59e0b; color: #f9fafb; background: #1a2436; }
|
|
.cb-report-pill.active-prod { border-color: #f59e0b; background: #f59e0b22; color: #f59e0b; }
|
|
.cb-report-pill.active-inv { border-color: #10b981; background: #10b98122; color: #10b981; }
|
|
.cb-report-pill.active-inv-stat { border-color: #3b82f6; background: #3b82f622; color: #3b82f6; }
|
|
|
|
.cb-chat-bubble-user {
|
|
align-self: flex-end;
|
|
background: #f59e0b;
|
|
color: #1f2937;
|
|
border-radius: 1rem 1rem 0.25rem 1rem;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
max-width: 85%;
|
|
line-height: 1.5;
|
|
animation: fadeIn .2s ease;
|
|
word-break: break-word;
|
|
}
|
|
.cb-chat-bubble-assistant {
|
|
align-self: flex-start;
|
|
background: #1f2937;
|
|
border: 1px solid #374151;
|
|
color: #f9fafb;
|
|
border-radius: 1rem 1rem 1rem 0.25rem;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.8125rem;
|
|
max-width: 90%;
|
|
line-height: 1.6;
|
|
animation: fadeIn .2s ease;
|
|
word-break: break-word;
|
|
white-space: pre-line;
|
|
}
|
|
.cb-typing-dot {
|
|
display:inline-block; width:6px; height:6px; border-radius:50%;
|
|
background:#f59e0b; animation: pulse 1.2s ease infinite;
|
|
}
|
|
.cb-typing-dot:nth-child(2) { animation-delay:.2s; }
|
|
.cb-typing-dot:nth-child(3) { animation-delay:.4s; }
|
|
</style>
|
|
|
|
{{-- ── Chat Panel ──────────────────────────────────────────────────────── --}}
|
|
@if($isOpen)
|
|
<div style="width:380px;background:#1f2937;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);border:1px solid #374151;display:flex;flex-direction:column;overflow:hidden;">
|
|
|
|
{{-- ── Header ── --}}
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:#f59e0b;flex-shrink:0;">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1.25rem;height:1.25rem;color:#fff;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" />
|
|
</svg>
|
|
<span style="font-weight:600;font-size:0.875rem;color:#fff;">Report Assistant ⒶⓇ</span>
|
|
|
|
{{-- Mode badge --}}
|
|
@if($mode !== 'select')
|
|
<span style="background:rgba(0,0,0,.2);color:#fff;font-size:0.65rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:9999px;letter-spacing:.05em;text-transform:uppercase;">
|
|
{{ $mode }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div style="display:flex;align-items:center;gap:0.5rem;">
|
|
{{-- Back to mode select (only when in a mode) --}}
|
|
@if($mode !== 'select')
|
|
<button wire:click="setMode('select')" title="Switch Mode"
|
|
style="background:rgba(0,0,0,.2);border:none;cursor:pointer;padding:0.25rem 0.5rem;border-radius:0.375rem;color:#fff;font-size:0.7rem;font-weight:600;display:flex;align-items:center;gap:0.25rem;">
|
|
<svg style="width:0.75rem;height:0.75rem;" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
</svg>
|
|
Switch
|
|
</button>
|
|
@endif
|
|
|
|
{{-- Reset --}}
|
|
<button wire:click="resetForm" title="Reset"
|
|
style="background:transparent;border:none;cursor:pointer;padding:0.25rem;border-radius:0.25rem;color:#fff;display:flex;align-items:center;">
|
|
<svg style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- Close --}}
|
|
<button wire:click="toggleChat" title="Close"
|
|
style="background:transparent;border:none;cursor:pointer;padding:0.25rem;border-radius:0.25rem;color:#fff;display:flex;align-items:center;">
|
|
<svg style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── MODE SELECT SCREEN ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
@if($mode === 'select')
|
|
<div style="padding:1.25rem;display:flex;flex-direction:column;gap:1rem;">
|
|
|
|
<div style="text-align:center;">
|
|
<p style="color:#9ca3af;font-size:0.8125rem;margin:0 0 0.25rem;">How would you like to query?</p>
|
|
<p style="color:#6b7280;font-size:0.7rem;margin:0;">Choose a mode to get started</p>
|
|
</div>
|
|
|
|
<div style="display:flex;gap:0.75rem;">
|
|
|
|
{{-- Basic card --}}
|
|
<button wire:click="setMode('basic')" class="cb-mode-card" style="border:none;width:50%;">
|
|
<div style="display:flex;justify-content:center;margin-bottom:0.625rem;">
|
|
<div style="background:#f59e0b22;border-radius:0.625rem;padding:0.625rem;">
|
|
<svg style="width:1.5rem;height:1.5rem;color:#f59e0b;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p style="color:#f9fafb;font-size:0.875rem;font-weight:700;margin:0 0 0.25rem;">Basic</p>
|
|
<p style="color:#6b7280;font-size:0.7rem;margin:0;line-height:1.4;">Input the required information to generate reports</p>
|
|
</button>
|
|
|
|
{{-- Advanced card --}}
|
|
<button wire:click="setMode('advanced')" class="cb-mode-card" style="border:none;width:50%;">
|
|
<div style="display:flex;justify-content:center;margin-bottom:0.625rem;">
|
|
<div style="background:#8b5cf622;border-radius:0.625rem;padding:0.625rem;">
|
|
<svg style="width:1.5rem;height:1.5rem;color:#8b5cf6;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p style="color:#f9fafb;font-size:0.875rem;font-weight:700;margin:0 0 0.25rem;">Advanced</p>
|
|
<p style="color:#6b7280;font-size:0.7rem;margin:0;line-height:1.4;">Ask anything in plain English — powered by Gemini AI</p>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
{{-- Hint --}}
|
|
<div style="background:#111827;border-radius:0.5rem;padding:0.75rem;border:1px solid #374151;">
|
|
<p style="color:#6b7280;font-size:0.7rem;margin:0;line-height:1.5;">
|
|
💡 <strong style="color:#9ca3af;">Tip:</strong> Use <em>Advanced</em> to just describe what you need in plain English — Gemini will figure out the rest
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── BASIC MODE ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
@if($mode === 'basic')
|
|
<div style="padding:1rem;display:flex;flex-direction:column;gap:0.875rem;max-height:480px;overflow-y:auto;">
|
|
|
|
{{-- ── Report Type Selector (dropdown) ──────────────────────────── --}}
|
|
<div style="position:relative;">
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.5rem;">Report Type</label>
|
|
{{-- Custom wrapper gives us the chevron icon and accent border on selection --}}
|
|
<div style="position:relative;">
|
|
<select
|
|
wire:change="setReportType($event.target.value)"
|
|
style="
|
|
width:100%;
|
|
appearance:none;
|
|
-webkit-appearance:none;
|
|
background:#111827;
|
|
border:1px solid {{ $reportType !== '' ? '#f59e0b' : '#374151' }};
|
|
border-radius:0.5rem;
|
|
color:{{ $reportType !== '' ? '#f9fafb' : '#6b7280' }};
|
|
padding:0.55rem 2.25rem 0.55rem 0.875rem;
|
|
font-size:0.8125rem;
|
|
font-weight:{{ $reportType !== '' ? '600' : '400' }};
|
|
outline:none;
|
|
cursor:pointer;
|
|
transition:border-color .15s, color .15s;
|
|
">
|
|
<option value="" {{ $reportType === '' ? 'selected' : '' }}>— Select Report Type —</option>
|
|
<option value="production" {{ $reportType === 'production' ? 'selected' : '' }}>📊 Production Report</option>
|
|
<option value="invoice" {{ $reportType === 'invoice' ? 'selected' : '' }}>📄 Invoice Report</option>
|
|
<option value="invoice_status" {{ $reportType === 'invoice_status' ? 'selected' : '' }}>🔍 Invoice Status</option>
|
|
</select>
|
|
{{-- Chevron icon --}}
|
|
<div style="pointer-events:none;position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);">
|
|
<svg style="width:0.875rem;height:0.875rem;color:{{ $reportType !== '' ? '#f59e0b' : '#6b7280' }};" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Placeholder when no report type selected ─────────────────── --}}
|
|
@if($reportType === '')
|
|
<div style="background:#111827;border:1px dashed #374151;border-radius:0.625rem;padding:1.25rem;text-align:center;">
|
|
<svg style="width:2rem;height:2rem;color:#4b5563;margin:0 auto 0.5rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
|
|
</svg>
|
|
<p style="color:#6b7280;font-size:0.8rem;margin:0;line-height:1.5;">Select a report type from the dropdown to get started</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── PRODUCTION REPORT FORM ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
@if($reportType === 'production')
|
|
|
|
{{-- Plant --}}
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Plant</label>
|
|
<select wire:model.live="selectedPlantId"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;">
|
|
<option value="">— Select Plant —</option>
|
|
@foreach($plants as $plant)
|
|
<option value="{{ $plant->id }}">{{ $plant->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Line --}}
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">
|
|
Line <span style="color:#6b7280;font-weight:400;">(optional — leave blank for all lines)</span>
|
|
</label>
|
|
<select wire:model.live="selectedLineId"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;"
|
|
@if(!$selectedPlantId) disabled @endif>
|
|
<option value="">— All Lines —</option>
|
|
@foreach($lines as $line)
|
|
<option value="{{ $line->id }}">{{ $line->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@if(!$selectedPlantId)
|
|
<p style="font-size:0.7rem;color:#6b7280;margin-top:0.25rem;">Select a plant first</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Date Range --}}
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">From</label>
|
|
<input type="date" wire:model="dateFrom"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;box-sizing:border-box;" />
|
|
</div>
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">To</label>
|
|
<input type="date" wire:model="dateTo"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;box-sizing:border-box;" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Fetch Button --}}
|
|
<button wire:click="fetchProduction"
|
|
wire:loading.attr="disabled"
|
|
wire:target="fetchProduction"
|
|
style="width:100%;background:#f59e0b;color:#fff;border:none;border-radius:0.5rem;padding:0.625rem;font-size:0.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;">
|
|
<span wire:loading.remove wire:target="fetchProduction" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
|
|
</svg>
|
|
Get Production Count
|
|
</span>
|
|
<span wire:loading wire:target="fetchProduction" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;animation:spin 1s linear infinite;" fill="none" viewBox="0 0 24 24">
|
|
<circle style="opacity:.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path style="opacity:.75;" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>
|
|
Fetching…
|
|
</span>
|
|
</button>
|
|
|
|
{{-- Production Result --}}
|
|
@if($hasResult)
|
|
<div style="background:#111827;border:1px solid #f59e0b;border-radius:0.5rem;padding:0.875rem;display:flex;gap:0.75rem;align-items:flex-start;animation:fadeIn .25s ease;">
|
|
<svg style="width:1.25rem;height:1.25rem;color:#f59e0b;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
|
|
</svg>
|
|
<p style="font-size:0.8125rem;color:#f9fafb;line-height:1.5;margin:0;">{{ $result }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
@endif {{-- end production --}}
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── INVOICE REPORT FORM (type lookup) ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
@if($reportType === 'invoice')
|
|
|
|
{{-- Plant --}}
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Plant</label>
|
|
<select wire:model.live="invoicePlantId"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;">
|
|
<option value="">— Select Plant —</option>
|
|
@foreach($plants as $plant)
|
|
<option value="{{ $plant->id }}">{{ $plant->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Item Code --}}
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Item Code</label>
|
|
<input
|
|
type="text"
|
|
wire:model="invoiceItemCode"
|
|
wire:keydown.enter="fetchInvoiceReport"
|
|
placeholder="e.g. 674071"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;box-sizing:border-box;font-family:monospace;"
|
|
/>
|
|
<p style="font-size:0.7rem;color:#6b7280;margin-top:0.25rem;">Press Enter or click the button below</p>
|
|
</div>
|
|
|
|
{{-- Fetch Button --}}
|
|
<button wire:click="fetchInvoiceReport"
|
|
wire:loading.attr="disabled"
|
|
wire:target="fetchInvoiceReport"
|
|
style="width:100%;background:#10b981;color:#fff;border:none;border-radius:0.5rem;padding:0.625rem;font-size:0.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;">
|
|
<span wire:loading.remove wire:target="fetchInvoiceReport" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
|
</svg>
|
|
Check Invoice Type
|
|
</span>
|
|
<span wire:loading wire:target="fetchInvoiceReport" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;animation:spin 1s linear infinite;" fill="none" viewBox="0 0 24 24">
|
|
<circle style="opacity:.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path style="opacity:.75;" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>
|
|
Fetching…
|
|
</span>
|
|
</button>
|
|
|
|
{{-- Invoice Report Result --}}
|
|
@if($hasInvoiceResult)
|
|
<div style="background:#111827;border:1px solid #10b981;border-radius:0.5rem;padding:0.875rem;display:flex;gap:0.75rem;align-items:flex-start;animation:fadeIn .25s ease;">
|
|
@if(str_contains($invoiceResult, 'serial invoice'))
|
|
<svg style="width:1.25rem;height:1.25rem;color:#10b981;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z" />
|
|
</svg>
|
|
@elseif(str_contains($invoiceResult, 'material invoice'))
|
|
<svg style="width:1.25rem;height:1.25rem;color:#10b981;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
|
</svg>
|
|
@elseif(str_contains($invoiceResult, 'does not exist') || str_contains($invoiceResult, 'not found'))
|
|
<svg style="width:1.25rem;height:1.25rem;color:#f59e0b;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
@else
|
|
<svg style="width:1.25rem;height:1.25rem;color:#10b981;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
</svg>
|
|
@endif
|
|
<p style="font-size:0.8125rem;color:#f9fafb;line-height:1.5;margin:0;">{{ $invoiceResult }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
@endif {{-- end invoice report --}}
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── INVOICE STATUS FORM (scan status) ── NEW ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════ --}}
|
|
@if($reportType === 'invoice_status')
|
|
|
|
{{-- Description banner --}}
|
|
<div style="background:#1e3a5f;border:1px solid #3b82f633;border-radius:0.5rem;padding:0.625rem 0.75rem;display:flex;gap:0.5rem;align-items:flex-start;">
|
|
<svg style="width:1rem;height:1rem;color:#60a5fa;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
|
</svg>
|
|
<p style="font-size:0.7rem;color:#93c5fd;line-height:1.5;margin:0;">
|
|
Enter an invoice number to see how many serial numbers have been scanned, how many are pending, and the list of unscanned serials.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Invoice Number input --}}
|
|
<div>
|
|
<label style="display:block;font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Invoice Number</label>
|
|
<input
|
|
type="text"
|
|
wire:model="invoiceNumber"
|
|
wire:keydown.enter="fetchInvoiceStatus"
|
|
placeholder="e.g. 3RA0013333"
|
|
style="width:100%;background:#111827;border:1px solid #374151;border-radius:0.5rem;color:#f9fafb;padding:0.5rem 0.75rem;font-size:0.8125rem;outline:none;box-sizing:border-box;font-family:monospace;letter-spacing:0.03em;"
|
|
/>
|
|
<p style="font-size:0.7rem;color:#6b7280;margin-top:0.25rem;">Press Enter or click the button below</p>
|
|
</div>
|
|
|
|
{{-- Fetch Button --}}
|
|
<button wire:click="fetchInvoiceStatus"
|
|
wire:loading.attr="disabled"
|
|
wire:target="fetchInvoiceStatus"
|
|
style="width:100%;background:#3b82f6;color:#fff;border:none;border-radius:0.5rem;padding:0.625rem;font-size:0.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;">
|
|
<span wire:loading.remove wire:target="fetchInvoiceStatus" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z" />
|
|
</svg>
|
|
Check Scan Status
|
|
</span>
|
|
<span wire:loading wire:target="fetchInvoiceStatus" style="display:flex;align-items:center;gap:0.5rem;">
|
|
<svg style="width:1rem;height:1rem;animation:spin 1s linear infinite;" fill="none" viewBox="0 0 24 24">
|
|
<circle style="opacity:.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path style="opacity:.75;" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>
|
|
Fetching…
|
|
</span>
|
|
</button>
|
|
|
|
{{-- Invoice Status Result --}}
|
|
@if($hasInvoiceStatusResult)
|
|
|
|
@php
|
|
$sd = $invoiceStatusData;
|
|
$sdType = $sd['type'] ?? 'error';
|
|
$sdTotal = $sd['total'] ?? 0;
|
|
$sdScanned = $sd['scanned'] ?? 0;
|
|
$sdNot = $sd['not_scanned'] ?? 0;
|
|
$sdSerials = $sd['unscanned_serials'] ?? [];
|
|
$sdCount = count($sdSerials);
|
|
$sdInv = $sd['invoice_number'] ?? '';
|
|
$isGood = $sdType === 'all_scanned';
|
|
$isWarn = in_array($sdType, ['error', 'not_found', 'invalid']);
|
|
$borderCol = $isGood ? '#10b981' : ($isWarn ? '#f59e0b' : '#3b82f6');
|
|
@endphp
|
|
|
|
<div style="background:#111827;border:1px solid {{ $borderCol }};border-radius:0.5rem;padding:0.875rem;animation:fadeIn .25s ease;">
|
|
|
|
{{-- ── Icon + summary row ── --}}
|
|
<div style="display:flex;gap:0.75rem;align-items:flex-start;">
|
|
@if($isGood)
|
|
<svg style="width:1.25rem;height:1.25rem;color:#10b981;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
@elseif($isWarn)
|
|
<svg style="width:1.25rem;height:1.25rem;color:#f59e0b;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
@else
|
|
<svg style="width:1.25rem;height:1.25rem;color:#3b82f6;flex-shrink:0;margin-top:0.1rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z" />
|
|
</svg>
|
|
@endif
|
|
|
|
<div style="flex:1;min-width:0;">
|
|
<p style="font-size:0.8125rem;color:#f9fafb;line-height:1.6;margin:0;">
|
|
{{ $sd['message'] ?? $invoiceStatusResult }}
|
|
</p>
|
|
|
|
{{-- ── Count pills (only for real invoice data) ── --}}
|
|
@if($sdTotal > 0)
|
|
<div style="display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.625rem;">
|
|
<span style="background:#1e3a2f;border:1px solid #10b98155;color:#6ee7b7;font-size:0.68rem;font-weight:700;padding:0.2rem 0.55rem;border-radius:9999px;">
|
|
Total: {{ $sdTotal }}
|
|
</span>
|
|
<span style="background:#1a3350;border:1px solid #3b82f655;color:#93c5fd;font-size:0.68rem;font-weight:700;padding:0.2rem 0.55rem;border-radius:9999px;">
|
|
✔ Scanned: {{ $sdScanned }}
|
|
</span>
|
|
@if($sdNot > 0)
|
|
<span style="background:#3b1a1a;border:1px solid #ef444455;color:#fca5a5;font-size:0.68rem;font-weight:700;padding:0.2rem 0.55rem;border-radius:9999px;">
|
|
✘ Not scanned: {{ $sdNot }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Unscanned serial numbers section ── --}}
|
|
@if($sdCount > 0)
|
|
<div style="margin-top:0.875rem;border-top:1px solid #374151;padding-top:0.75rem;">
|
|
|
|
<p style="font-size:0.72rem;font-weight:600;color:#9ca3af;margin:0 0 0.5rem;text-transform:uppercase;letter-spacing:.05em;">
|
|
Unscanned serial numbers
|
|
<span style="background:#3b1a1a;color:#fca5a5;border-radius:9999px;padding:0.1rem 0.45rem;font-size:0.68rem;margin-left:0.25rem;">
|
|
{{ $sdCount }}
|
|
</span>
|
|
</p>
|
|
|
|
{{-- Serial chips — first 10, or all when expanded --}}
|
|
@php
|
|
$visibleSerials = $showAllUnscanned
|
|
? $sdSerials
|
|
: array_slice($sdSerials, 0, 10);
|
|
$hiddenCount = $sdCount - 10;
|
|
@endphp
|
|
|
|
<div style="display:flex;flex-wrap:wrap;gap:0.35rem;
|
|
@if($showAllUnscanned) max-height:200px;overflow-y:auto;padding-right:2px; @endif">
|
|
@foreach($visibleSerials as $serial)
|
|
<span style="
|
|
display:inline-block;
|
|
background:#1e293b;
|
|
border:1px solid #475569;
|
|
color:#e2e8f0;
|
|
font-family:monospace;
|
|
font-size:0.72rem;
|
|
padding:0.2rem 0.5rem;
|
|
border-radius:0.3rem;
|
|
white-space:nowrap;
|
|
">{{ $serial }}</span>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Show more / Show less button --}}
|
|
@if($sdCount > 10)
|
|
<button
|
|
wire:click="toggleShowAllUnscanned"
|
|
style="
|
|
margin-top:0.625rem;
|
|
background:transparent;
|
|
border:1px solid #3b82f655;
|
|
border-radius:0.375rem;
|
|
color:#60a5fa;
|
|
font-size:0.75rem;
|
|
font-weight:600;
|
|
padding:0.3rem 0.75rem;
|
|
cursor:pointer;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:0.35rem;
|
|
transition:background .15s, border-color .15s;
|
|
"
|
|
onmouseover="this.style.background='#1e3a5f';this.style.borderColor='#3b82f6';"
|
|
onmouseout="this.style.background='transparent';this.style.borderColor='#3b82f655';">
|
|
@if($showAllUnscanned)
|
|
<svg style="width:0.75rem;height:0.75rem;" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
|
</svg>
|
|
Show less
|
|
@else
|
|
<svg style="width:0.75rem;height:0.75rem;" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
Show {{ $hiddenCount }} more…
|
|
@endif
|
|
</button>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
@endif {{-- end invoice_status --}}
|
|
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
{{-- ── ADVANCED MODE ── --}}
|
|
{{-- ══════════════════════════════════════════════════════════════════ --}}
|
|
@if($mode === 'advanced')
|
|
<div style="display:flex;flex-direction:column;height:420px;">
|
|
|
|
{{-- ── Conversation area ── --}}
|
|
<div id="cb-scroll-area"
|
|
style="flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.75rem;scroll-behavior:smooth;"
|
|
x-data
|
|
x-init="
|
|
const el = document.getElementById('cb-scroll-area');
|
|
const observer = new MutationObserver(() => el.scrollTop = el.scrollHeight);
|
|
observer.observe(el, { childList:true, subtree:true });
|
|
">
|
|
|
|
@if(empty($chatHistory))
|
|
{{-- ── Empty state ── --}}
|
|
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding:1rem 0;">
|
|
<div style="background:#8b5cf622;border-radius:50%;padding:1rem;">
|
|
<svg style="width:2rem;height:2rem;color:#8b5cf6;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center;">
|
|
<p style="color:#f9fafb;font-size:0.875rem;font-weight:600;margin:0 0 0.25rem;">AI-Powered Assistant</p>
|
|
<p style="color:#6b7280;font-size:0.75rem;margin:0;line-height:1.5;">Ask anything in plain English — tap an example below to get started</p>
|
|
</div>
|
|
|
|
{{-- Example prompt cards --}}
|
|
<div style="display:flex;flex-direction:column;gap:0.375rem;width:100%;">
|
|
|
|
{{-- Card 1 — Invoice scan status --}}
|
|
<button
|
|
wire:click="$set('advancedQuestion', 'Is invoice 3RA0013333 fully scanned?')"
|
|
style="background:#111827;border:1px solid #8b5cf6;border-radius:0.5rem;padding:0.625rem 0.75rem;color:#f9fafb;font-size:0.75rem;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:0.25rem;"
|
|
onmouseover="this.style.background='#1a1245'"
|
|
onmouseout="this.style.background='#111827'">
|
|
<span style="color:#8b5cf6;font-weight:700;font-size:0.65rem;text-transform:uppercase;letter-spacing:.06em;">📋 Invoice Scan Status</span>
|
|
<span style="color:#d1d5db;line-height:1.5;font-style:italic;">"Is invoice 3RA0013333 fully scanned?"</span>
|
|
</button>
|
|
|
|
{{-- Card 2 — Invoice type lookup --}}
|
|
<button
|
|
wire:click="$set('advancedQuestion', 'Is item 674071 a serial or material invoice for Chennai plant?')"
|
|
style="background:#111827;border:1px solid #10b981;border-radius:0.5rem;padding:0.625rem 0.75rem;color:#f9fafb;font-size:0.75rem;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:0.25rem;"
|
|
onmouseover="this.style.background='#0d2e24'"
|
|
onmouseout="this.style.background='#111827'">
|
|
<span style="color:#10b981;font-weight:700;font-size:0.65rem;text-transform:uppercase;letter-spacing:.06em;">📄 Invoice Type Lookup</span>
|
|
<span style="color:#d1d5db;line-height:1.5;font-style:italic;">"Is item 674071 serial or material for Chennai plant?"</span>
|
|
</button>
|
|
|
|
{{-- Card 3 — Production report --}}
|
|
<button
|
|
wire:click="$set('advancedQuestion', 'Show production count for Vahinie Unit 2 this month')"
|
|
style="background:#111827;border:1px solid #f59e0b;border-radius:0.5rem;padding:0.625rem 0.75rem;color:#f9fafb;font-size:0.75rem;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:0.25rem;"
|
|
onmouseover="this.style.background='#2a1e05'"
|
|
onmouseout="this.style.background='#111827'">
|
|
<span style="color:#f59e0b;font-weight:700;font-size:0.65rem;text-transform:uppercase;letter-spacing:.06em;">📊 Production Report</span>
|
|
<span style="color:#d1d5db;line-height:1.5;font-style:italic;">"Show production count for Vahinie Unit 2 this month"</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ── Chat bubbles ── --}}
|
|
@foreach($chatHistory as $message)
|
|
@if($message['role'] === 'user')
|
|
<div style="display:flex;justify-content:flex-end;">
|
|
<div class="cb-chat-bubble-user">{{ $message['content'] }}</div>
|
|
</div>
|
|
@else
|
|
<div style="display:flex;justify-content:flex-start;gap:0.5rem;align-items:flex-start;">
|
|
<div style="background:#8b5cf622;border-radius:50%;padding:0.3rem;flex-shrink:0;margin-top:0.1rem;">
|
|
<svg style="width:0.875rem;height:0.875rem;color:#8b5cf6;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="cb-chat-bubble-assistant">{{ $message['content'] }}</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
|
|
{{-- ── Typing indicator ── --}}
|
|
@if($isAdvancedLoading)
|
|
<div style="display:flex;justify-content:flex-start;gap:0.5rem;align-items:flex-start;">
|
|
<div style="background:#8b5cf622;border-radius:50%;padding:0.3rem;flex-shrink:0;margin-top:0.1rem;">
|
|
<svg style="width:0.875rem;height:0.875rem;color:#8b5cf6;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="cb-chat-bubble-assistant" style="display:flex;align-items:center;gap:0.375rem;padding:0.625rem 0.875rem;">
|
|
<span class="cb-typing-dot"></span>
|
|
<span class="cb-typing-dot"></span>
|
|
<span class="cb-typing-dot"></span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
{{-- ── Input bar ── --}}
|
|
<div style="border-top:1px solid #374151;padding:0.75rem;background:#1a2233;flex-shrink:0;">
|
|
<div style="display:flex;gap:0.5rem;align-items:flex-end;">
|
|
<textarea
|
|
wire:model="advancedQuestion"
|
|
wire:keydown.enter.prevent="askAdvanced"
|
|
placeholder="Ask anything, e.g. 'Is invoice 3RA0013333 scanned?'"
|
|
rows="1"
|
|
style="flex:1;background:#111827;border:1px solid #374151;border-radius:0.625rem;color:#f9fafb;padding:0.625rem 0.75rem;font-size:0.8125rem;outline:none;resize:none;line-height:1.5;font-family:monospace;max-height:80px;overflow-y:auto;"
|
|
oninput="this.style.height='auto';this.style.height=Math.min(this.scrollHeight,80)+'px'"
|
|
@if($isAdvancedLoading) disabled @endif
|
|
></textarea>
|
|
<button wire:click="askAdvanced"
|
|
wire:loading.attr="disabled"
|
|
wire:target="askAdvanced"
|
|
@if($isAdvancedLoading) disabled @endif
|
|
style="background:#8b5cf6;border:none;border-radius:0.625rem;padding:0.625rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:{{ $isAdvancedLoading ? '.5' : '1' }};">
|
|
<span wire:loading.remove wire:target="askAdvanced">
|
|
<svg style="width:1rem;height:1rem;color:#fff;" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
|
|
</svg>
|
|
</span>
|
|
<span wire:loading wire:target="askAdvanced">
|
|
<svg style="width:1rem;height:1rem;color:#fff;animation:spin 1s linear infinite;" fill="none" viewBox="0 0 24 24">
|
|
<circle style="opacity:.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path style="opacity:.75;" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<p style="color:#4b5563;font-size:0.65rem;margin:0.375rem 0 0;text-align:center;">
|
|
Press Enter to send · Ask anything in plain English
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ── FAB Toggle Button ───────────────────────────────────────────────── --}}
|
|
<button wire:click="toggleChat" title="Production Assistant"
|
|
style="width:56px;height:56px;background-color:#f59e0b;color:#fff;border-radius:9999px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;">
|
|
@if($isOpen)
|
|
<svg style="width:1.5rem;height:1.5rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
@else
|
|
<svg style="width:1.6rem;height:1.6rem;" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 3C7.03 3 3 6.58 3 11c0 2.1.85 4 2.24 5.43L4.5 21l4.86-1.62A9.54 9.54 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z" />
|
|
<circle cx="9" cy="11" r="0.85" fill="currentColor" stroke="none" />
|
|
<circle cx="12" cy="11" r="0.85" fill="currentColor" stroke="none" />
|
|
<circle cx="15" cy="11" r="0.85" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
@endif
|
|
</button>
|
|
</div>
|