Редизайн главной страницы склада: карточки вместо списка, все разделы на главной
This commit is contained in:
@@ -3,194 +3,259 @@
|
|||||||
{% block title %}Склад{% endblock %}
|
{% block title %}Склад{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container-fluid px-3 py-3">
|
<div class="container-fluid py-4">
|
||||||
<!-- Компактный заголовок -->
|
<!-- Заголовок -->
|
||||||
<div class="mb-3">
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||||
<h4 class="mb-1">Управление складом</h4>
|
|
||||||
<p class="text-muted small mb-0">Выберите операцию</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Основные операции -->
|
|
||||||
<div class="mb-3">
|
|
||||||
<h6 class="section-title">Операции</h6>
|
|
||||||
<div class="menu-list">
|
|
||||||
<a href="{% url 'inventory:warehouse-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-building"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Управление складами</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:incoming-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-arrow-down-square"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Приход товара</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:sale-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-arrow-up-square"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Реализация товара</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:inventory-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-clipboard-check"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Инвентаризация</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:writeoff-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-x-circle"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Списание товара</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:transfer-list' %}" class="menu-item">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-arrow-left-right"></i>
|
|
||||||
</div>
|
|
||||||
<span class="menu-text">Перемещение товара</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Справочная информация -->
|
|
||||||
<div>
|
<div>
|
||||||
<h6 class="section-title">Справочники</h6>
|
<h4 class="mb-1">Управление складом</h4>
|
||||||
<div class="menu-list">
|
<p class="text-muted mb-0">Выберите операцию или справочник</p>
|
||||||
<a href="{% url 'inventory:stock-list' %}" class="menu-item">
|
</div>
|
||||||
<div class="menu-icon">
|
|
||||||
<i class="bi bi-box-seam"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="menu-text">Остатки товаров</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{% url 'inventory:batch-list' %}" class="menu-item">
|
<div class="row g-3">
|
||||||
<div class="menu-icon">
|
<!-- Основные операции -->
|
||||||
<i class="bi bi-diagram-3"></i>
|
<div class="col-12">
|
||||||
|
<h6 class="text-uppercase text-muted mb-3" style="font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 600;">Операции</h6>
|
||||||
|
<div class="row g-3">
|
||||||
|
<!-- Склады -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:warehouse-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-primary bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-building text-primary" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Склады</h6>
|
||||||
|
<small class="text-muted">Управление складами</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="menu-text">Партии товаров</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="{% url 'inventory:movement-list' %}" class="menu-item">
|
<!-- Приходы -->
|
||||||
<div class="menu-icon">
|
<div class="col-md-6 col-lg-4">
|
||||||
<i class="bi bi-journal-check"></i>
|
<a href="{% url 'inventory:incoming-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-success bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-arrow-down-square text-success" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Приходы</h6>
|
||||||
|
<small class="text-muted">Поступление товара</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="menu-text">Журнал операций</span>
|
|
||||||
<i class="bi bi-chevron-right menu-arrow"></i>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Продажи -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:sale-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-danger bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-arrow-up-square text-danger" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Продажи</h6>
|
||||||
|
<small class="text-muted">Реализация товара</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Инвентаризация -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:inventory-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-info bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-clipboard-check text-info" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Инвентаризация</h6>
|
||||||
|
<small class="text-muted">Переучет товаров</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Списания -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:writeoff-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-warning bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-x-circle text-warning" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Списания</h6>
|
||||||
|
<small class="text-muted">Списание товара</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Перемещения -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:transfer-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-secondary bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-arrow-left-right text-secondary" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Перемещения</h6>
|
||||||
|
<small class="text-muted">Между складами</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Справочники -->
|
||||||
|
<div class="col-12 mt-4">
|
||||||
|
<h6 class="text-uppercase text-muted mb-3" style="font-size: 0.75rem; letter-spacing: 0.5px; font-weight: 600;">Справочники</h6>
|
||||||
|
<div class="row g-3">
|
||||||
|
<!-- Остатки -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:stock-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-primary bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-box-seam text-primary" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Остатки</h6>
|
||||||
|
<small class="text-muted">Текущие остатки товаров</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Партии -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:batch-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-success bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-diagram-3 text-success" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Партии</h6>
|
||||||
|
<small class="text-muted">Партии товаров</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Журнал -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:movement-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-info bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-journal-check text-info" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Журнал</h6>
|
||||||
|
<small class="text-muted">Журнал операций</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Партии поступлений -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:incoming-batch-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-secondary bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-box-arrow-in-down text-secondary" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Партии поступлений</h6>
|
||||||
|
<small class="text-muted">История поступлений</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Резервирования -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:reservation-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-warning bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-bookmark-check text-warning" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Резервирования</h6>
|
||||||
|
<small class="text-muted">Активные резервы</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Распределение -->
|
||||||
|
<div class="col-md-6 col-lg-4">
|
||||||
|
<a href="{% url 'inventory:allocation-list' %}" class="card shadow-sm h-100 text-decoration-none">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class="rounded-circle bg-danger bg-opacity-10 p-3 me-3">
|
||||||
|
<i class="bi bi-distribute-vertical text-danger" style="font-size: 1.5rem;"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
<h6 class="mb-0 text-dark">Распределение</h6>
|
||||||
|
<small class="text-muted">Распределение продаж</small>
|
||||||
|
</div>
|
||||||
|
<i class="bi bi-chevron-right text-muted"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Заголовки секций */
|
.card {
|
||||||
.section-title {
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
color: #6c757d;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Список меню */
|
|
||||||
.menu-list {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e9ecef;
|
border: 1px solid #e9ecef;
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Пункты меню */
|
.card:hover {
|
||||||
.menu-item {
|
transform: translateY(-2px);
|
||||||
display: flex;
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important;
|
||||||
align-items: center;
|
|
||||||
padding: 0.875rem 1rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #212529;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
transition: background-color 0.15s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item:last-child {
|
.card-body {
|
||||||
border-bottom: none;
|
cursor: pointer;
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item:hover {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #212529;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Иконка */
|
|
||||||
.menu-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-right: 0.875rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #495057;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item:hover .menu-icon {
|
|
||||||
background-color: #e9ecef;
|
|
||||||
color: #212529;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Текст */
|
|
||||||
.menu-text {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стрелка */
|
|
||||||
.menu-arrow {
|
|
||||||
color: #adb5bd;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
margin-left: auto;
|
|
||||||
transition: transform 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item:hover .menu-arrow {
|
|
||||||
transform: translateX(3px);
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность */
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
.menu-item {
|
|
||||||
padding: 0.75rem 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-text {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user