bp/app/Modules/CRM/Views/deals/show.twig

205 lines
9.1 KiB
Twig
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'layouts/base.twig' %}
{% block title %}{{ deal.title }}{% endblock %}
{% block content %}
<div class="mb-4">
<a href="{{ site_url('/crm/deals') }}" class="text-muted text-decoration-none">
<i class="fa-solid fa-arrow-left me-2"></i>К списку сделок
</a>
</div>
<div class="row">
{# Основная информация #}
<div class="col-lg-8">
{# Заголовок и статус #}
<div class="card shadow-sm mb-4">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-4">
<div>
<span class="badge mb-2"
style="background-color: {{ deal.stage_color }}20; color: {{ deal.stage_color }}; border: 1px solid {{ deal.stage_color }}40;">
{{ deal.stage_name|default('Без этапа') }}
</span>
<h1 class="h3 mb-0">{{ deal.title }}</h1>
</div>
<div class="text-end">
<div class="h4 mb-0">{{ deal.amount|number_format(0, ',', ' ') }} {{ deal.currency }}</div>
<small class="text-muted">Сумма сделки</small>
</div>
</div>
{% if deal.description %}
<div class="mb-4">
<h6 class="text-muted mb-2">Описание</h6>
<p class="mb-0" style="white-space: pre-wrap;">{{ deal.description }}</p>
</div>
{% endif %}
<div class="row text-sm">
<div class="col-md-6">
<span class="text-muted">Дата создания:</span>
<span class="ms-2">{{ deal.created_at|date('d.m.Y H:i') }}</span>
</div>
<div class="col-md-6">
<span class="text-muted">Ожидаемое закрытие:</span>
<span class="ms-2 {{ deal.is_overdue ? 'text-danger fw-bold' : '' }}">
{{ deal.expected_close_date ? deal.expected_close_date|date('d.m.Y') : '—' }}
</span>
</div>
</div>
</div>
</div>
{# История изменений #}
<div class="card shadow-sm">
<div class="card-header bg-white">
<h5 class="mb-0">История изменений</h5>
</div>
<div class="card-body">
{% if history is defined and history|length > 0 %}
<div class="timeline">
{% for item in history %}
<div class="timeline-item d-flex gap-3 pb-3 {{ not loop.last ? 'border-bottom' : '' }}">
<div class="timeline-icon bg-secondary rounded-circle d-flex align-items-center justify-content-center"
style="width: 32px; height: 32px; min-width: 32px;">
<span class="text-white small">{{ item.user_name|default('С')|slice(0, 2) }}</span>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<span class="fw-medium">{{ item.user_name|default('Система') }}</span>
<small class="text-muted ms-2">{{ item.created_at|date('d.m.Y H:i') }}</small>
</div>
</div>
<p class="mb-0 mt-1">
<span class="{{ item.action_class }}">{{ item.action_label }}</span>
{% if item.change_description %}
{{ item.change_description }}
{% endif %}
</p>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-muted text-center py-4 mb-0">Нет записей в истории</p>
{% endif %}
</div>
</div>
</div>
{# Боковая панель #}
<div class="col-lg-4">
{# Клиент #}
<div class="card shadow-sm mb-3">
<div class="card-header bg-white">
<h6 class="mb-0">Клиент</h6>
</div>
<div class="card-body">
{% if deal.contact_name %}
<div class="d-flex align-items-center gap-3">
<div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
style="width: 40px; height: 40px; min-width: 40px;">
<span class="text-white">{{ deal.contact_name|slice(0, 2) }}</span>
</div>
<div>
<a href="#" class="fw-medium text-decoration-none">{{ deal.contact_name }}</a>
{% if deal.contact_email %}
<small class="d-block text-muted">{{ deal.contact_email }}</small>
{% endif %}
</div>
</div>
{% elseif deal.client_name %}
<div class="d-flex align-items-center gap-3">
<div class="bg-success rounded-circle d-flex align-items-center justify-content-center"
style="width: 40px; height: 40px; min-width: 40px;">
<span class="text-white">{{ deal.client_name|slice(0, 2) }}</span>
</div>
<div>
<a href="#" class="fw-medium text-decoration-none">{{ deal.client_name }}</a>
</div>
</div>
{% else %}
<p class="text-muted mb-0">Клиент не указан</p>
{% endif %}
</div>
</div>
{# Ответственный #}
<div class="card shadow-sm mb-3">
<div class="card-header bg-white">
<h6 class="mb-0">Ответственный</h6>
</div>
<div class="card-body">
{% if deal.assigned_user_name %}
<div class="d-flex align-items-center gap-3">
<div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center"
style="width: 40px; height: 40px; min-width: 40px;">
<span class="text-white">{{ deal.assigned_user_name|slice(0, 2) }}</span>
</div>
<div>
<div class="fw-medium">{{ deal.assigned_user_name }}</div>
{% if deal.assigned_user_email %}
<small class="text-muted">{{ deal.assigned_user_email }}</small>
{% endif %}
</div>
</div>
{% else %}
<p class="text-muted mb-0">Не назначен</p>
{% endif %}
</div>
</div>
{# Вероятность #}
{% if deal.stage_probability is defined and deal.stage_probability > 0 %}
<div class="card shadow-sm mb-3">
<div class="card-header bg-white">
<h6 class="mb-0">Вероятность закрытия</h6>
</div>
<div class="card-body">
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height: 8px;">
<div class="progress-bar bg-primary"
role="progressbar"
style="width: {{ deal.stage_probability }}%"></div>
</div>
<span class="fw-medium">{{ deal.stage_probability }}%</span>
</div>
</div>
</div>
{% endif %}
{# Действия #}
<div class="card shadow-sm">
<div class="card-body d-flex gap-2">
<a href="{{ site_url('/crm/deals/' ~ deal.id ~ '/edit') }}" class="btn btn-outline-primary flex-grow-1">
<i class="fa-solid fa-pen me-1"></i>Редактировать
</a>
<form action="{{ site_url('/crm/deals/' ~ deal.id) }}" method="POST" class="flex-grow-1">
{{ csrf_field()|raw }}
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-outline-danger w-100"
onclick="return confirm('Удалить сделку?')">
<i class="fa-solid fa-trash me-1"></i>Удалить
</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.timeline {
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0 !important;
}
</style>
{% endblock %}