Добавлен блок категорий в POS-терминал: компактные карточки с фильтрацией товаров

myproject/pos/static/pos/css/terminal.css

@@ -4,9 +4,22 @@ body {
   background-color: #e9ecef;
 }
 
+/* Основной контейнер POS */
+.pos-main-container {
+  position: fixed;
+  top: 56px; /* высота navbar */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
 .pos-container {
   max-width: 100%;
-  padding: 0 1rem;
+  padding: 1rem;
+  height: 100%;
 }
 
 .product-card {
@@ -52,17 +65,54 @@ body {
   font-style: italic;
 }
 
+/* Карточки категорий */
+.category-card {
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s;
+  border-radius: 12px;
+  border: 2px solid #dee2e6;
+  background: white;
+  height: 100%;
+  min-height: 40px;
+}
+
+.category-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  border-color: #0d6efd;
+}
+
+.category-card.active {
+  background: #0d6efd;
+  border-color: #0d6efd;
+  color: white;
+}
+
+.category-card .card-body {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.category-name {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
 /* Фиксация правой панели (корзина + кнопки) */
 .right-panel-fixed {
-  position: fixed;
-  top: 56px; /* высота navbar */
+  position: absolute;
+  top: 0;
   right: 0;
   bottom: 0;
   width: 33.333%; /* 4/12 колонок */
   overflow-y: auto;
   padding: 1rem;
   padding-right: 1.5rem;
-  z-index: 100;
+  z-index: 10;
   display: flex;
   flex-direction: column;
 }

myproject/pos/static/pos/js/terminal.js

@@ -10,6 +10,57 @@ function formatMoney(v) {
   return (Number(v)).toFixed(2);
 }
 
+function renderCategories() {
+  const grid = document.getElementById('categoryGrid');
+  grid.innerHTML = '';
+  
+  // Кнопка "Все"
+  const allCol = document.createElement('div');
+  allCol.className = 'col-6 col-sm-4 col-md-3 col-lg-2';
+  const allCard = document.createElement('div');
+  allCard.className = 'card category-card' + (currentCategoryId === null ? ' active' : '');
+  allCard.onclick = () => {
+    currentCategoryId = null;
+    renderCategories();
+    renderProducts();
+  };
+  const allBody = document.createElement('div');
+  allBody.className = 'card-body';
+  const allName = document.createElement('div');
+  allName.className = 'category-name';
+  allName.textContent = 'Все товары';
+  allBody.appendChild(allName);
+  allCard.appendChild(allBody);
+  allCol.appendChild(allCard);
+  grid.appendChild(allCol);
+  
+  // Категории
+  CATEGORIES.forEach(cat => {
+    const col = document.createElement('div');
+    col.className = 'col-6 col-sm-4 col-md-3 col-lg-2';
+    
+    const card = document.createElement('div');
+    card.className = 'card category-card' + (currentCategoryId === cat.id ? ' active' : '');
+    card.onclick = () => {
+      currentCategoryId = cat.id;
+      renderCategories();
+      renderProducts();
+    };
+    
+    const body = document.createElement('div');
+    body.className = 'card-body';
+    
+    const name = document.createElement('div');
+    name.className = 'category-name';
+    name.textContent = cat.name;
+    
+    body.appendChild(name);
+    card.appendChild(body);
+    col.appendChild(card);
+    grid.appendChild(col);
+  });
+}
+
 function renderProducts() {
   const grid = document.getElementById('productGrid');
   grid.innerHTML = '';
@@ -153,8 +204,6 @@ document.getElementById('scheduleLater').onclick = async () => {
   alert('Функционал будет подключен позже: создание заказа на доставку/самовывоз.');
 };
 
-// Categories removed from this view - can be added as filter dropdown later if needed
-
 // Search functionality
 document.getElementById('searchInput').addEventListener('input', () => {
   renderProducts();
@@ -166,5 +215,6 @@ document.getElementById('customerSelectBtn').addEventListener('click', () => {
 });
 
 // Инициализация
+renderCategories();
 renderProducts();
 renderCart();