refactor(inventory): redesign inventory home layout with compact cards
- Replace large operation cards with smaller, uniform inventory-card components - Update icon sizes and text styles for better visual hierarchy - Group operations into a cleaner 4x3 grid layout using Bootstrap columns - Simplify card hover effects with subtler shadows and background gradients - Remove unused purple utility classes and old card-body styles - Add focus outline support for accessibility on inventory cards fix(customers): show total debt only when applicable and add external links - Display total debt row only if debt is greater than zero in customer detail - Remove redundant conditional inside debt display cell - Add target="_blank" and rel attributes to order detail links to open in new tab
This commit is contained in:
@@ -138,17 +138,15 @@
|
|||||||
<span class="badge bg-info">{{ last_year_orders_sum|floatformat:2 }} руб.</span>
|
<span class="badge bg-info">{{ last_year_orders_sum|floatformat:2 }} руб.</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{% if total_debt > 0 %}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-muted"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Общий долг:</td>
|
<td class="text-muted"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Общий долг:</td>
|
||||||
<td colspan="2">
|
<td colspan="2">
|
||||||
{% if total_debt > 0 %}
|
<span class="badge bg-danger">{{ total_debt|floatformat:2 }} руб.</span>
|
||||||
<span class="badge bg-danger">{{ total_debt|floatformat:2 }} руб.</span>
|
<small class="text-muted ms-2">(Заказов: {{ active_orders_count }})</small>
|
||||||
<small class="text-muted ms-2">(Заказов: {{ active_orders_count }})</small>
|
|
||||||
{% else %}
|
|
||||||
<span class="badge bg-success">0.00 руб.</span>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!-- Разделитель -->
|
<!-- Разделитель -->
|
||||||
<tr>
|
<tr>
|
||||||
@@ -305,7 +303,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-end">
|
<td class="text-end">
|
||||||
<a href="{% url 'orders:order-detail' order.order_number %}" class="btn btn-sm btn-outline-primary">
|
<a href="{% url 'orders:order-detail' order.order_number %}" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener noreferrer" title="Открыть в новой вкладке">
|
||||||
<i class="bi bi-eye"></i>
|
<i class="bi bi-eye"></i>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -3,232 +3,160 @@
|
|||||||
{% block title %}Склад{% endblock %}
|
{% block title %}Склад{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container-fluid py-4">
|
<div class="container-fluid px-3 py-3">
|
||||||
<!-- Заголовок -->
|
<!-- Компактный заголовок -->
|
||||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
<div class="mb-3">
|
||||||
<div>
|
<h5 class="mb-2" style="font-weight: 500; font-size: 1.25rem;">Управление складом</h5>
|
||||||
<h4 class="mb-1">Управление складом</h4>
|
<small class="text-muted" style="font-size: 0.875rem;">Выберите операцию или справочник</small>
|
||||||
<p class="text-muted mb-0">Выберите операцию или справочник</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Единая сетка операций -->
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<!-- Главные операции -->
|
<!-- 1. Документы поступления -->
|
||||||
<div class="col-12">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<h5 class="text-muted mb-4 fw-normal" style="font-size: 1.1rem; letter-spacing: 0.5px;">
|
<a href="{% url 'inventory:incoming-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
Главные операции
|
<div class="p-3 text-center">
|
||||||
</h5>
|
<i class="bi bi-file-earmark-plus text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<div class="row g-4">
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Документы поступления</div>
|
||||||
<!-- Документы поступления -->
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Коллективное поступление</small>
|
||||||
<div class="col-12 col-md-6 col-lg-3">
|
|
||||||
<a href="{% url 'inventory:incoming-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-file-earmark-plus text-muted mb-3" style="font-size: 2.5rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Документы поступления</h6>
|
|
||||||
<small class="text-muted">Коллективное поступление</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
<!-- Документы списания -->
|
|
||||||
<div class="col-12 col-md-6 col-lg-3">
|
|
||||||
<a href="{% url 'inventory:writeoff-document-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-file-earmark-minus text-muted mb-3" style="font-size: 2.5rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Документы списания</h6>
|
|
||||||
<small class="text-muted">Коллективное списание</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Инвентаризация -->
|
|
||||||
<div class="col-12 col-md-6 col-lg-3">
|
|
||||||
<a href="{% url 'inventory:inventory-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-clipboard-check text-muted mb-3" style="font-size: 2.5rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Инвентаризация</h6>
|
|
||||||
<small class="text-muted">Переучет товаров</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Трансформации -->
|
|
||||||
<div class="col-12 col-md-6 col-lg-3">
|
|
||||||
<a href="{% url 'inventory:transformation-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-5">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-arrow-repeat text-muted mb-3" style="font-size: 2.5rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Трансформации</h6>
|
|
||||||
<small class="text-muted">Превращение товаров</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Основные операции -->
|
<!-- 2. Документы списания -->
|
||||||
<div class="col-12 mt-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<h5 class="text-muted mb-4 fw-normal" style="font-size: 1.1rem; letter-spacing: 0.5px;">
|
<a href="{% url 'inventory:writeoff-document-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
Операции
|
<div class="p-3 text-center">
|
||||||
</h5>
|
<i class="bi bi-file-earmark-minus text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<div class="row g-4">
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Документы списания</div>
|
||||||
<!-- Склады -->
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Коллективное списание</small>
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
|
||||||
<a href="{% url 'inventory:warehouse-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-building text-muted mb-3" style="font-size: 2rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Склады</h6>
|
|
||||||
<small class="text-muted">Управление складами</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
<!-- Продажи -->
|
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
|
||||||
<a href="{% url 'inventory:sale-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-arrow-up-square text-muted mb-3" style="font-size: 2rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Продажи</h6>
|
|
||||||
<small class="text-muted">Реализация товара</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Перемещения -->
|
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
|
||||||
<a href="{% url 'inventory:transfer-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-arrow-left-right text-muted mb-3" style="font-size: 2rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Перемещения</h6>
|
|
||||||
<small class="text-muted">Между складами</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Справочники -->
|
<!-- 3. Инвентаризация -->
|
||||||
<div class="col-12 mt-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<h5 class="text-muted mb-4 fw-normal" style="font-size: 1.1rem; letter-spacing: 0.5px;">
|
<a href="{% url 'inventory:inventory-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
Справочники
|
<div class="p-3 text-center">
|
||||||
</h5>
|
<i class="bi bi-clipboard-check text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<div class="row g-4">
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Инвентаризация</div>
|
||||||
<!-- Остатки -->
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Переучет товаров</small>
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
|
||||||
<a href="{% url 'inventory:stock-list' %}" class="card-main-operation h-100 text-decoration-none">
|
|
||||||
<div class="card-body p-4">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="bi bi-box-seam text-muted mb-3" style="font-size: 2rem;"></i>
|
|
||||||
<h6 class="mb-2 text-dark fw-medium">Остатки</h6>
|
|
||||||
<small class="text-muted">Текущие остатки товаров</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Партии -->
|
<!-- 4. Трансформации -->
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<a href="{% url 'inventory:batch-list' %}" class="card-main-operation h-100 text-decoration-none">
|
<a href="{% url 'inventory:transformation-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
<div class="card-body p-4">
|
<div class="p-3 text-center">
|
||||||
<div class="text-center">
|
<i class="bi bi-arrow-repeat text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<i class="bi bi-diagram-3 text-muted mb-3" style="font-size: 2rem;"></i>
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Трансформации</div>
|
||||||
<h6 class="mb-2 text-dark fw-medium">Партии</h6>
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Превращение товаров</small>
|
||||||
<small class="text-muted">Партии товаров</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Документы поступлений -->
|
<!-- 5. Склады -->
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<a href="{% url 'inventory:incoming-list' %}" class="card-main-operation h-100 text-decoration-none">
|
<a href="{% url 'inventory:warehouse-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
<div class="card-body p-4">
|
<div class="p-3 text-center">
|
||||||
<div class="text-center">
|
<i class="bi bi-building text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<i class="bi bi-box-arrow-in-down text-muted mb-3" style="font-size: 2rem;"></i>
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Склады</div>
|
||||||
<h6 class="mb-2 text-dark fw-medium">Документы поступлений</h6>
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Управление складами</small>
|
||||||
<small class="text-muted">История поступлений</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Резервирования -->
|
<!-- 6. Продажи -->
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<a href="{% url 'inventory:reservation-list' %}" class="card-main-operation h-100 text-decoration-none">
|
<a href="{% url 'inventory:sale-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
<div class="card-body p-4">
|
<div class="p-3 text-center">
|
||||||
<div class="text-center">
|
<i class="bi bi-arrow-up-square text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<i class="bi bi-bookmark-check text-muted mb-3" style="font-size: 2rem;"></i>
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Продажи</div>
|
||||||
<h6 class="mb-2 text-dark fw-medium">Резервирования</h6>
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Реализация товара</small>
|
||||||
<small class="text-muted">Активные резервы</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Распределение -->
|
<!-- 7. Перемещения -->
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
<a href="{% url 'inventory:allocation-list' %}" class="card-main-operation h-100 text-decoration-none">
|
<a href="{% url 'inventory:transfer-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
<div class="card-body p-4">
|
<div class="p-3 text-center">
|
||||||
<div class="text-center">
|
<i class="bi bi-arrow-left-right text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
<i class="bi bi-distribute-vertical text-muted mb-3" style="font-size: 2rem;"></i>
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Перемещения</div>
|
||||||
<h6 class="mb-2 text-dark fw-medium">Распределение</h6>
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Между складами</small>
|
||||||
<small class="text-muted">Распределение продаж</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 8. Остатки -->
|
||||||
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
|
<a href="{% url 'inventory:stock-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
|
<div class="p-3 text-center">
|
||||||
|
<i class="bi bi-box-seam text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Остатки</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Текущие остатки товаров</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 9. Партии -->
|
||||||
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
|
<a href="{% url 'inventory:batch-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
|
<div class="p-3 text-center">
|
||||||
|
<i class="bi bi-diagram-3 text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Партии</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Партии товаров</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 10. Резервирования -->
|
||||||
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
|
<a href="{% url 'inventory:reservation-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
|
<div class="p-3 text-center">
|
||||||
|
<i class="bi bi-bookmark-check text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Резервирования</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Активные резервы</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 11. Распределение -->
|
||||||
|
<div class="col-6 col-sm-6 col-md-4 col-lg-3">
|
||||||
|
<a href="{% url 'inventory:allocation-list' %}" class="inventory-card text-decoration-none d-block">
|
||||||
|
<div class="p-3 text-center">
|
||||||
|
<i class="bi bi-distribute-vertical text-muted mb-2" style="font-size: 1.75rem;"></i>
|
||||||
|
<div class="mb-1" style="font-size: 0.95rem; font-weight: 600; color: #212529;">Распределение</div>
|
||||||
|
<small class="text-muted" style="font-size: 0.8rem; line-height: 1.3;">Распределение продаж</small>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-body {
|
/* Стили для карточек операций */
|
||||||
cursor: pointer;
|
.inventory-card {
|
||||||
}
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 6px;
|
||||||
.bg-purple {
|
|
||||||
background-color: #6f42c1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-purple {
|
|
||||||
color: #6f42c1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-purple {
|
|
||||||
border-color: #6f42c1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для всех карточек операций */
|
|
||||||
.card-main-operation {
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.2s ease;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-main-operation:hover {
|
.inventory-card:hover {
|
||||||
border-color: #6f42c1;
|
border-color: #6f42c1;
|
||||||
background: linear-gradient(135deg, #f8f4ff 0%, #e8e4ff 100%);
|
background: linear-gradient(135deg, #fafafa 0%, #f5f3ff 100%);
|
||||||
box-shadow: 0 8px 25px rgba(111, 66, 193, 0.25);
|
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.15);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-main-operation .card-body {
|
.inventory-card:focus {
|
||||||
cursor: pointer;
|
outline: 2px solid #6f42c1;
|
||||||
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user