smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Редизайн главной страницы склада: карточки вместо списка, все разделы на главной

Browse Source
This commit is contained in:
Andrey Smakotin
2025-12-02 00:12:45 +03:00
parent 8e6e26ccba
commit 34624aa955
1 changed files with 235 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

405
myproject/inventory/templates/inventory/home.html
View File

@@ -3,194 +3,259 @@
{% block title %}Склад{% endblock %}
{% block content %}
<div class="container-fluid px-3 py-3">
<!-- Компактный заголовок -->
<div class="mb-3">
<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 class="container-fluid py-4">
<!-- Заголовок -->
<div class="d-flex align-items-center justify-content-between mb-4">
<div>
<h4 class="mb-1">Управление складом</h4>
<p class="text-muted mb-0">Выберите операцию или справочник</p>
</div>
</div>
<!-- Справочная информация -->
<div>
<h6 class="section-title">Справочники</h6>
<div class="menu-list">
<a href="{% url 'inventory:stock-list' %}" class="menu-item">
<div class="menu-icon">
<i class="bi bi-box-seam"></i>
<div class="row g-3">
<!-- Основные операции -->
<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>
</a>
</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="menu-icon">
<i class="bi bi-diagram-3"></i>
<!-- Приходы -->
<div class="col-md-6 col-lg-4">
<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>
</a>
</div>
<span class="menu-text">Партии товаров</span>
<i class="bi bi-chevron-right menu-arrow"></i>
</a>
<a href="{% url 'inventory:movement-list' %}" class="menu-item">
<div class="menu-icon">
<i class="bi bi-journal-check"></i>
<!-- Продажи -->
<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>
<span class="menu-text">Журнал операций</span>
<i class="bi bi-chevron-right menu-arrow"></i>
</a>
<!-- Инвентаризация -->
<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>
<style>
/* Заголовки секций */
.section-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6c757d;
font-weight: 600;
margin-bottom: 0.5rem;
}
/* Список меню */
.menu-list {
background: #fff;
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #e9ecef;
border-radius: 6px;
overflow: hidden;
}
/* Пункты меню */
.menu-item {
display: flex;
align-items: center;
padding: 0.875rem 1rem;
text-decoration: none;
color: #212529;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.15s ease;
.card:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important;
}
.menu-item:last-child {
border-bottom: none;
}
.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;
}
.card-body {
cursor: pointer;
}
</style>
{% endblock %}