1b25978d9b
Implements full customer detail page with multiple feature-rich components including overview, economy, statistics, journal, appointments, giftcards, and activity sections Creates reusable ViewComponents for different customer detail aspects with robust data modeling and presentation logic
102 lines
4.6 KiB
Text
102 lines
4.6 KiB
Text
@using System.Text.Json
|
|
@model PlanTempus.Application.Features.Customers.Components.CustomerDetailEconomyViewModel
|
|
|
|
@if (!Model.HasData)
|
|
{
|
|
<swp-empty-state>
|
|
<i class="ph ph-currency-circle-dollar"></i>
|
|
<span>@Model.EmptyStateText</span>
|
|
</swp-empty-state>
|
|
}
|
|
else
|
|
{
|
|
<swp-detail-grid>
|
|
<!-- Stat Cards -->
|
|
<swp-stats-row class="cols-4 full-width">
|
|
<swp-stat-card class="highlight">
|
|
<swp-stat-value>@Model.CurrentYearValue</swp-stat-value>
|
|
<swp-stat-label>@Model.CurrentYearLabel</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card>
|
|
<swp-stat-value>@Model.LastYearValue</swp-stat-value>
|
|
<swp-stat-label>@Model.LastYearLabel</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card>
|
|
<swp-stat-value>@Model.AvgPerVisitValue</swp-stat-value>
|
|
<swp-stat-label>@Model.AvgPerVisitLabel</swp-stat-label>
|
|
</swp-stat-card>
|
|
<swp-stat-card>
|
|
<swp-stat-value>@Model.AvgPerMonthValue</swp-stat-value>
|
|
<swp-stat-label>@Model.AvgPerMonthLabel</swp-stat-label>
|
|
</swp-stat-card>
|
|
</swp-stats-row>
|
|
|
|
<!-- Revenue Chart Card -->
|
|
<swp-card class="full-width">
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.RevenueOverTimeTitle</swp-card-title>
|
|
<swp-chart-legend>
|
|
<swp-chart-legend-item>
|
|
<swp-chart-legend-dot class="services"></swp-chart-legend-dot>
|
|
<span>@Model.ServicesLabel</span>
|
|
</swp-chart-legend-item>
|
|
<swp-chart-legend-item>
|
|
<swp-chart-legend-dot class="products"></swp-chart-legend-dot>
|
|
<span>@Model.ProductsLabel</span>
|
|
</swp-chart-legend-item>
|
|
</swp-chart-legend>
|
|
</swp-card-header>
|
|
@if (Model.ChartData != null)
|
|
{
|
|
<swp-chart-container id="customerRevenueChart"></swp-chart-container>
|
|
<script id="customerRevenueChartData" type="application/json">@Html.Raw(JsonSerializer.Serialize(Model.ChartData, new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase }))</script>
|
|
}
|
|
else
|
|
{
|
|
<swp-chart-container>
|
|
<!-- No chart data available -->
|
|
</swp-chart-container>
|
|
}
|
|
</swp-card>
|
|
|
|
<!-- Purchase History Card -->
|
|
<swp-card class="customer-economy full-width">
|
|
<swp-card-header>
|
|
<swp-card-title>@Model.PurchaseHistoryTitle</swp-card-title>
|
|
</swp-card-header>
|
|
<swp-data-table>
|
|
<swp-data-table-header>
|
|
<swp-data-table-cell>Faktura</swp-data-table-cell>
|
|
<swp-data-table-cell>Dato/tid</swp-data-table-cell>
|
|
<swp-data-table-cell>Medarbejder</swp-data-table-cell>
|
|
<swp-data-table-cell>Ydelser</swp-data-table-cell>
|
|
<swp-data-table-cell>Type</swp-data-table-cell>
|
|
<swp-data-table-cell>Beløb</swp-data-table-cell>
|
|
</swp-data-table-header>
|
|
@foreach (var purchase in Model.Purchases)
|
|
{
|
|
<swp-data-table-row>
|
|
<swp-data-table-cell>
|
|
<swp-invoice-cell>@purchase.Invoice</swp-invoice-cell>
|
|
</swp-data-table-cell>
|
|
<swp-data-table-cell>
|
|
<swp-datetime-cell>
|
|
<span class="date">@purchase.Date</span>
|
|
<span class="time">@purchase.Time</span>
|
|
</swp-datetime-cell>
|
|
</swp-data-table-cell>
|
|
<swp-data-table-cell class="muted">@purchase.Employee</swp-data-table-cell>
|
|
<swp-data-table-cell>@purchase.Services</swp-data-table-cell>
|
|
<swp-data-table-cell>
|
|
<swp-tag class="@purchase.Type">@purchase.TypeLabel</swp-tag>
|
|
</swp-data-table-cell>
|
|
<swp-data-table-cell>
|
|
<swp-amount-cell>@purchase.Amount</swp-amount-cell>
|
|
</swp-data-table-cell>
|
|
</swp-data-table-row>
|
|
}
|
|
</swp-data-table>
|
|
<swp-see-all>@Model.SeeAllText</swp-see-all>
|
|
</swp-card>
|
|
</swp-detail-grid>
|
|
}
|