spouliot
7ad7d84016
Both pages were blank on phones because mobile-cards.css hides .table-responsive below 992px but neither page had a .mobile-card-view section. Added card-per-row mobile layout to match the Customers page pattern — tappable cards with status badges, key fields, and action buttons sized for touch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
273 lines
15 KiB
Plaintext
273 lines
15 KiB
Plaintext
@model List<PowderCoating.Application.DTOs.Kiosk.KioskSessionListDto>
|
|
@using PowderCoating.Core.Enums
|
|
@{
|
|
ViewData["Title"] = "Customer Intakes";
|
|
string activeFilter = ViewBag.ActiveFilter as string ?? "all";
|
|
}
|
|
|
|
<div>
|
|
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<i class="bi bi-clipboard-check fs-3 text-primary"></i>
|
|
<div>
|
|
<h1 class="h3 fw-bold mb-0">Customer Intakes</h1>
|
|
<p class="text-muted mb-0">Walk-in and remote intake sessions</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<a href="/Kiosk/SendRemoteLink" class="btn btn-outline-primary btn-sm">
|
|
<i class="bi bi-envelope-at me-1"></i> Send Remote Link
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
@* Filter tabs *@
|
|
<ul class="nav nav-tabs mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link @(activeFilter == "all" ? "active" : "")" href="?filter=all">All (@Model.Count)</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link @(activeFilter == "submitted" ? "active" : "")" href="?filter=submitted">
|
|
Submitted (@Model.Count(d => d.Status == KioskSessionStatus.Submitted))
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link @(activeFilter == "active" ? "active" : "")" href="?filter=active">
|
|
Pending (@Model.Count(d => d.Status == KioskSessionStatus.Active && !d.IsExpired))
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link @(activeFilter == "expired" ? "active" : "")" href="?filter=expired">
|
|
Expired (@Model.Count(d => d.IsExpired))
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
@if (!Model.Any())
|
|
{
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="bi bi-inbox fs-1 mb-3 d-block"></i>
|
|
<p>No intake sessions found.</p>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="card">
|
|
<div class="mobile-card-view">
|
|
<div class="mobile-card-list">
|
|
@foreach (var s in Model)
|
|
{
|
|
<div class="mobile-data-card">
|
|
<div class="mobile-card-header">
|
|
<div class="mobile-card-icon" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
|
|
<i class="bi bi-clipboard-check"></i>
|
|
</div>
|
|
<div class="mobile-card-title">
|
|
<h6>@s.CustomerFullName</h6>
|
|
<small>@(s.SubmittedAt?.ToLocalTime().ToString("MM/dd/yy h:mm tt") ?? s.ExpiresAt.AddHours(-2).ToLocalTime().ToString("MM/dd/yy h:mm tt"))</small>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-card-body">
|
|
<div class="mobile-card-row">
|
|
<span class="mobile-card-label">Status</span>
|
|
<span class="mobile-card-value">
|
|
@if (s.Status == KioskSessionStatus.Submitted && s.IsConverted)
|
|
{
|
|
<span class="badge bg-success">Converted</span>
|
|
}
|
|
else if (s.Status == KioskSessionStatus.Submitted)
|
|
{
|
|
<span class="badge bg-info text-dark">Submitted</span>
|
|
}
|
|
else if (s.Status == KioskSessionStatus.Active && !s.IsExpired)
|
|
{
|
|
<span class="badge bg-warning text-dark">In Progress</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge bg-secondary">Expired</span>
|
|
}
|
|
</span>
|
|
</div>
|
|
<div class="mobile-card-row">
|
|
<span class="mobile-card-label">Type</span>
|
|
<span class="mobile-card-value">
|
|
@if (s.SessionType == KioskSessionType.InPerson)
|
|
{
|
|
<span class="badge bg-primary-subtle text-primary"><i class="bi bi-tablet me-1"></i>In-Person</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-envelope me-1"></i>Remote</span>
|
|
}
|
|
</span>
|
|
</div>
|
|
@if (!string.IsNullOrEmpty(s.CustomerPhone))
|
|
{
|
|
<div class="mobile-card-row">
|
|
<span class="mobile-card-label">Phone</span>
|
|
<span class="mobile-card-value"><a href="tel:@s.CustomerPhone">@s.CustomerPhone</a></span>
|
|
</div>
|
|
}
|
|
@if (!string.IsNullOrEmpty(s.CustomerEmail))
|
|
{
|
|
<div class="mobile-card-row">
|
|
<span class="mobile-card-label">Email</span>
|
|
<span class="mobile-card-value" style="white-space:normal;"><a href="mailto:@s.CustomerEmail">@s.CustomerEmail</a></span>
|
|
</div>
|
|
}
|
|
@if (s.LinkedCustomerId.HasValue)
|
|
{
|
|
<div class="mobile-card-row">
|
|
<span class="mobile-card-label">Matched</span>
|
|
<span class="mobile-card-value">
|
|
<a href="/Customers/Details/@s.LinkedCustomerId" class="text-success">
|
|
<i class="bi bi-person-check me-1"></i>Customer record
|
|
</a>
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="mobile-card-footer">
|
|
@if (s.LinkedJobId.HasValue)
|
|
{
|
|
<a href="/Jobs/Details/@s.LinkedJobId" class="btn btn-sm btn-outline-success">
|
|
<i class="bi bi-briefcase me-1"></i>Job
|
|
</a>
|
|
}
|
|
@if (s.LinkedQuoteId.HasValue)
|
|
{
|
|
<a href="/Quotes/Details/@s.LinkedQuoteId" class="btn btn-sm btn-outline-info">
|
|
<i class="bi bi-file-earmark-text me-1"></i>Quote
|
|
</a>
|
|
}
|
|
@if (s.LinkedCustomerId.HasValue)
|
|
{
|
|
<a href="/Customers/Details/@s.LinkedCustomerId" class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-person me-1"></i>Customer
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0 align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="d-none d-md-table-cell">Date</th>
|
|
<th>Customer</th>
|
|
<th class="d-none d-lg-table-cell">Contact</th>
|
|
<th class="d-none d-lg-table-cell">Project</th>
|
|
<th class="d-none d-sm-table-cell">Type</th>
|
|
<th>Status</th>
|
|
<th class="d-none d-md-table-cell">SMS</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var s in Model)
|
|
{
|
|
<tr>
|
|
<td class="text-nowrap text-muted small d-none d-md-table-cell">
|
|
@(s.SubmittedAt?.ToLocalTime().ToString("MM/dd/yy h:mm tt") ?? s.ExpiresAt.AddHours(-2).ToLocalTime().ToString("MM/dd/yy h:mm tt"))
|
|
</td>
|
|
<td>
|
|
<div class="fw-semibold">@s.CustomerFullName</div>
|
|
@if (s.LinkedCustomerId.HasValue)
|
|
{
|
|
<a href="/Customers/Details/@s.LinkedCustomerId" class="small text-success">
|
|
<i class="bi bi-person-check me-1"></i>Customer matched
|
|
</a>
|
|
}
|
|
@* Show date inline on mobile since the Date column is hidden *@
|
|
<div class="text-muted small d-md-none">
|
|
@(s.SubmittedAt?.ToLocalTime().ToString("MM/dd/yy h:mm tt") ?? s.ExpiresAt.AddHours(-2).ToLocalTime().ToString("MM/dd/yy h:mm tt"))
|
|
</div>
|
|
</td>
|
|
<td class="small text-muted d-none d-lg-table-cell">
|
|
@if (!string.IsNullOrEmpty(s.CustomerPhone))
|
|
{
|
|
<div><i class="bi bi-telephone me-1"></i>@s.CustomerPhone</div>
|
|
}
|
|
@if (!string.IsNullOrEmpty(s.CustomerEmail))
|
|
{
|
|
<div><i class="bi bi-envelope me-1"></i>@s.CustomerEmail</div>
|
|
}
|
|
</td>
|
|
<td class="d-none d-lg-table-cell" style="max-width:280px;">
|
|
<span class="text-truncate d-block" style="max-width:260px;"
|
|
title="@s.JobDescription">@s.JobDescriptionSnippet</span>
|
|
</td>
|
|
<td class="d-none d-sm-table-cell">
|
|
@if (s.SessionType == KioskSessionType.InPerson)
|
|
{
|
|
<span class="badge bg-primary-subtle text-primary">
|
|
<i class="bi bi-tablet me-1"></i>In-Person
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge bg-purple-subtle text-purple" style="background:#ede9fe;color:#6d28d9;">
|
|
<i class="bi bi-envelope me-1"></i>Remote
|
|
</span>
|
|
}
|
|
</td>
|
|
<td>
|
|
@if (s.Status == KioskSessionStatus.Submitted && s.IsConverted)
|
|
{
|
|
<span class="badge bg-success">Converted</span>
|
|
}
|
|
else if (s.Status == KioskSessionStatus.Submitted)
|
|
{
|
|
<span class="badge bg-info text-dark">Submitted</span>
|
|
}
|
|
else if (s.Status == KioskSessionStatus.Active && !s.IsExpired)
|
|
{
|
|
<span class="badge bg-warning text-dark">In Progress</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge bg-secondary">Expired</span>
|
|
}
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
@if (s.SmsOptIn)
|
|
{
|
|
<i class="bi bi-check-circle-fill text-success" title="SMS opt-in"></i>
|
|
}
|
|
else
|
|
{
|
|
<i class="bi bi-dash text-muted"></i>
|
|
}
|
|
</td>
|
|
<td class="text-nowrap">
|
|
@if (s.LinkedJobId.HasValue)
|
|
{
|
|
<a href="/Jobs/Details/@s.LinkedJobId" class="btn btn-sm btn-outline-success me-1">
|
|
<i class="bi bi-briefcase me-1"></i><span class="d-none d-sm-inline">View Job</span><span class="d-sm-none">Job</span>
|
|
</a>
|
|
}
|
|
@if (s.LinkedQuoteId.HasValue)
|
|
{
|
|
<a href="/Quotes/Details/@s.LinkedQuoteId" class="btn btn-sm btn-outline-info me-1">
|
|
<i class="bi bi-file-earmark-text me-1"></i><span class="d-none d-sm-inline">View Quote</span><span class="d-sm-none">Quote</span>
|
|
</a>
|
|
}
|
|
@if (s.LinkedCustomerId.HasValue)
|
|
{
|
|
<a href="/Customers/Details/@s.LinkedCustomerId" class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-person me-1"></i><span class="d-none d-sm-inline">Customer</span>
|
|
</a>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|