refactor: migrate templates and static files to self-contained modules
Templates Migration: - Migrate admin templates to modules (tenancy, billing, monitoring, marketplace, etc.) - Migrate vendor templates to modules (tenancy, billing, orders, messaging, etc.) - Migrate storefront templates to modules (catalog, customers, orders, cart, checkout, cms) - Migrate public templates to modules (billing, marketplace, cms) - Keep shared templates in app/templates/ (base.html, errors/, partials/, macros/) - Migrate letzshop partials to marketplace module Static Files Migration: - Migrate admin JS to modules: tenancy (23 files), core (5 files), monitoring (1 file) - Migrate vendor JS to modules: tenancy (4 files), core (2 files) - Migrate shared JS: vendor-selector.js to core, media-picker.js to cms - Migrate storefront JS: storefront-layout.js to core - Keep framework JS in static/ (api-client, utils, money, icons, log-config, lib/) - Update all template references to use module_static paths Naming Consistency: - Rename static/platform/ to static/public/ - Rename app/templates/platform/ to app/templates/public/ - Update all extends and static references Documentation: - Update module-system.md with shared templates documentation - Update frontend-structure.md with new module JS organization Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2,17 +2,18 @@
|
||||
"""
|
||||
Inventory module exceptions.
|
||||
|
||||
Re-exports inventory-related exceptions from their source locations.
|
||||
This module provides exception classes for inventory operations including:
|
||||
- Inventory record management
|
||||
- Quantity validation
|
||||
- Location management
|
||||
"""
|
||||
|
||||
from app.exceptions.inventory import (
|
||||
InventoryNotFoundException,
|
||||
InsufficientInventoryException,
|
||||
InvalidInventoryOperationException,
|
||||
InventoryValidationException,
|
||||
NegativeInventoryException,
|
||||
InvalidQuantityException,
|
||||
LocationNotFoundException,
|
||||
from typing import Any
|
||||
|
||||
from app.exceptions.base import (
|
||||
BusinessLogicException,
|
||||
ResourceNotFoundException,
|
||||
ValidationException,
|
||||
)
|
||||
|
||||
__all__ = [
|
||||
@@ -24,3 +25,130 @@ __all__ = [
|
||||
"InvalidQuantityException",
|
||||
"LocationNotFoundException",
|
||||
]
|
||||
|
||||
|
||||
class InventoryNotFoundException(ResourceNotFoundException):
|
||||
"""Raised when inventory record is not found."""
|
||||
|
||||
def __init__(self, identifier: str, identifier_type: str = "ID"):
|
||||
if identifier_type.lower() == "gtin":
|
||||
message = f"No inventory found for GTIN '{identifier}'"
|
||||
else:
|
||||
message = (
|
||||
f"Inventory record with {identifier_type} '{identifier}' not found"
|
||||
)
|
||||
|
||||
super().__init__(
|
||||
resource_type="Inventory",
|
||||
identifier=identifier,
|
||||
message=message,
|
||||
error_code="INVENTORY_NOT_FOUND",
|
||||
)
|
||||
|
||||
|
||||
class InsufficientInventoryException(BusinessLogicException):
|
||||
"""Raised when trying to remove more inventory than available."""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
gtin: str,
|
||||
location: str,
|
||||
requested: int,
|
||||
available: int,
|
||||
):
|
||||
message = f"Insufficient inventory for GTIN '{gtin}' at '{location}'. Requested: {requested}, Available: {available}"
|
||||
|
||||
super().__init__(
|
||||
message=message,
|
||||
error_code="INSUFFICIENT_INVENTORY",
|
||||
details={
|
||||
"gtin": gtin,
|
||||
"location": location,
|
||||
"requested_quantity": requested,
|
||||
"available_quantity": available,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
class InvalidInventoryOperationException(ValidationException):
|
||||
"""Raised when inventory operation is invalid."""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
message: str,
|
||||
operation: str | None = None,
|
||||
details: dict[str, Any] | None = None,
|
||||
):
|
||||
if not details:
|
||||
details = {}
|
||||
|
||||
if operation:
|
||||
details["operation"] = operation
|
||||
|
||||
super().__init__(
|
||||
message=message,
|
||||
details=details,
|
||||
)
|
||||
self.error_code = "INVALID_INVENTORY_OPERATION"
|
||||
|
||||
|
||||
class InventoryValidationException(ValidationException):
|
||||
"""Raised when inventory data validation fails."""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
message: str = "Inventory validation failed",
|
||||
field: str | None = None,
|
||||
validation_errors: dict[str, str] | None = None,
|
||||
):
|
||||
details = {}
|
||||
if validation_errors:
|
||||
details["validation_errors"] = validation_errors
|
||||
|
||||
super().__init__(
|
||||
message=message,
|
||||
field=field,
|
||||
details=details,
|
||||
)
|
||||
self.error_code = "INVENTORY_VALIDATION_FAILED"
|
||||
|
||||
|
||||
class NegativeInventoryException(BusinessLogicException):
|
||||
"""Raised when inventory quantity would become negative."""
|
||||
|
||||
def __init__(self, gtin: str, location: str, resulting_quantity: int):
|
||||
message = f"Inventory operation would result in negative quantity ({resulting_quantity}) for GTIN '{gtin}' at '{location}'"
|
||||
|
||||
super().__init__(
|
||||
message=message,
|
||||
error_code="NEGATIVE_INVENTORY_NOT_ALLOWED",
|
||||
details={
|
||||
"gtin": gtin,
|
||||
"location": location,
|
||||
"resulting_quantity": resulting_quantity,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
class InvalidQuantityException(ValidationException):
|
||||
"""Raised when quantity value is invalid."""
|
||||
|
||||
def __init__(self, quantity: Any, message: str = "Invalid quantity"):
|
||||
super().__init__(
|
||||
message=f"{message}: {quantity}",
|
||||
field="quantity",
|
||||
details={"quantity": quantity},
|
||||
)
|
||||
self.error_code = "INVALID_QUANTITY"
|
||||
|
||||
|
||||
class LocationNotFoundException(ResourceNotFoundException):
|
||||
"""Raised when inventory location is not found."""
|
||||
|
||||
def __init__(self, location: str):
|
||||
super().__init__(
|
||||
resource_type="Location",
|
||||
identifier=location,
|
||||
message=f"Inventory location '{location}' not found",
|
||||
error_code="LOCATION_NOT_FOUND",
|
||||
)
|
||||
|
||||
@@ -20,9 +20,9 @@ from sqlalchemy.orm import Session
|
||||
|
||||
from app.api.deps import get_current_admin_api, require_module_access
|
||||
from app.core.database import get_db
|
||||
from app.services.inventory_import_service import inventory_import_service
|
||||
from app.services.inventory_service import inventory_service
|
||||
from app.services.inventory_transaction_service import inventory_transaction_service
|
||||
from app.modules.inventory.services.inventory_import_service import inventory_import_service
|
||||
from app.modules.inventory.services.inventory_service import inventory_service
|
||||
from app.modules.inventory.services.inventory_transaction_service import inventory_transaction_service
|
||||
from models.schema.auth import UserContext
|
||||
from app.modules.inventory.schemas import (
|
||||
AdminInventoryAdjust,
|
||||
|
||||
@@ -13,8 +13,8 @@ from sqlalchemy.orm import Session
|
||||
|
||||
from app.api.deps import get_current_vendor_api, require_module_access
|
||||
from app.core.database import get_db
|
||||
from app.services.inventory_service import inventory_service
|
||||
from app.services.inventory_transaction_service import inventory_transaction_service
|
||||
from app.modules.inventory.services.inventory_service import inventory_service
|
||||
from app.modules.inventory.services.inventory_transaction_service import inventory_transaction_service
|
||||
from models.schema.auth import UserContext
|
||||
from app.modules.inventory.schemas import (
|
||||
InventoryAdjust,
|
||||
|
||||
@@ -1,4 +1,2 @@
|
||||
# Page routes will be added here
|
||||
# TODO: Add HTML page routes for admin/vendor dashboards
|
||||
|
||||
__all__ = []
|
||||
# app/modules/inventory/routes/pages/__init__.py
|
||||
"""Inventory module page routes."""
|
||||
|
||||
40
app/modules/inventory/routes/pages/admin.py
Normal file
40
app/modules/inventory/routes/pages/admin.py
Normal file
@@ -0,0 +1,40 @@
|
||||
# app/modules/inventory/routes/pages/admin.py
|
||||
"""
|
||||
Inventory Admin Page Routes (HTML rendering).
|
||||
|
||||
Admin pages for inventory management:
|
||||
- Inventory list
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter, Depends, Request
|
||||
from fastapi.responses import HTMLResponse
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.api.deps import get_db, require_menu_access
|
||||
from app.modules.core.utils.page_context import get_admin_context
|
||||
from app.templates_config import templates
|
||||
from models.database.admin_menu_config import FrontendType
|
||||
from models.database.user import User
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# INVENTORY MANAGEMENT ROUTES
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get("/inventory", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def admin_inventory_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(require_menu_access("inventory", FrontendType.ADMIN)),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render inventory management page.
|
||||
Shows stock levels across all vendors with filtering and adjustment capabilities.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"inventory/admin/inventory.html",
|
||||
get_admin_context(request, current_user),
|
||||
)
|
||||
42
app/modules/inventory/routes/pages/vendor.py
Normal file
42
app/modules/inventory/routes/pages/vendor.py
Normal file
@@ -0,0 +1,42 @@
|
||||
# app/modules/inventory/routes/pages/vendor.py
|
||||
"""
|
||||
Inventory Vendor Page Routes (HTML rendering).
|
||||
|
||||
Vendor pages for inventory management:
|
||||
- Inventory list
|
||||
"""
|
||||
|
||||
from fastapi import APIRouter, Depends, Path, Request
|
||||
from fastapi.responses import HTMLResponse
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.api.deps import get_current_vendor_from_cookie_or_header, get_db
|
||||
from app.modules.core.utils.page_context import get_vendor_context
|
||||
from app.templates_config import templates
|
||||
from models.database.user import User
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# INVENTORY MANAGEMENT
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get(
|
||||
"/{vendor_code}/inventory", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
async def vendor_inventory_page(
|
||||
request: Request,
|
||||
vendor_code: str = Path(..., description="Vendor code"),
|
||||
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render inventory management page.
|
||||
JavaScript loads inventory data via API.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"inventory/vendor/inventory.html",
|
||||
get_vendor_context(request, db, current_user, vendor_code),
|
||||
)
|
||||
@@ -5,15 +5,15 @@ from datetime import UTC, datetime
|
||||
from sqlalchemy import func
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.exceptions import (
|
||||
from app.exceptions import ValidationException
|
||||
from app.modules.inventory.exceptions import (
|
||||
InsufficientInventoryException,
|
||||
InvalidQuantityException,
|
||||
InventoryNotFoundException,
|
||||
InventoryValidationException,
|
||||
ProductNotFoundException,
|
||||
ValidationException,
|
||||
VendorNotFoundException,
|
||||
)
|
||||
from app.modules.catalog.exceptions import ProductNotFoundException
|
||||
from app.modules.tenancy.exceptions import VendorNotFoundException
|
||||
from app.modules.inventory.models.inventory import Inventory
|
||||
from app.modules.inventory.schemas.inventory import (
|
||||
AdminInventoryItem,
|
||||
|
||||
@@ -11,7 +11,8 @@ import logging
|
||||
from sqlalchemy import func
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
from app.exceptions import OrderNotFoundException, ProductNotFoundException
|
||||
from app.modules.catalog.exceptions import ProductNotFoundException
|
||||
from app.modules.orders.exceptions import OrderNotFoundException
|
||||
from app.modules.inventory.models.inventory import Inventory
|
||||
from app.modules.inventory.models.inventory_transaction import InventoryTransaction
|
||||
from app.modules.orders.models import Order
|
||||
|
||||
603
app/modules/inventory/templates/inventory/admin/inventory.html
Normal file
603
app/modules/inventory/templates/inventory/admin/inventory.html
Normal file
@@ -0,0 +1,603 @@
|
||||
{# app/templates/admin/inventory.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/pagination.html' import pagination %}
|
||||
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper %}
|
||||
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||
{% from 'shared/macros/inputs.html' import vendor_selector %}
|
||||
|
||||
{% block title %}Inventory{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminInventory(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Page Header with Vendor Selector -->
|
||||
{% call page_header_flex(title='Inventory', subtitle='Manage stock levels across all vendors') %}
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Vendor Autocomplete (Tom Select) -->
|
||||
{{ vendor_selector(
|
||||
ref_name='vendorSelect',
|
||||
id='inventory-vendor-select',
|
||||
placeholder='Filter by vendor...',
|
||||
width='w-80'
|
||||
) }}
|
||||
{{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
|
||||
<button
|
||||
@click="showImportModal = true"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
|
||||
>
|
||||
<span x-html="$icon('upload', 'w-4 h-4 mr-2')"></span>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Selected Vendor Info -->
|
||||
<div x-show="selectedVendor" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedVendor?.name?.charAt(0).toUpperCase()"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedVendor?.name"></span>
|
||||
<span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedVendor?.vendor_code"></span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="clearVendorFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
Clear filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ loading_state('Loading inventory...') }}
|
||||
|
||||
{{ error_state('Error loading inventory') }}
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||
<!-- Card: Total Entries -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('archive', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Total Entries
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_entries || 0">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Total Quantity -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
|
||||
<span x-html="$icon('cube', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Total Stock
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_quantity || 0)">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Available Stock -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Available
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_available || 0)">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Low Stock Items -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Low Stock
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.low_stock_count || 0">
|
||||
0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filters Bar -->
|
||||
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||
<!-- Search Input -->
|
||||
<div class="flex-1 max-w-xl">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="filters.search"
|
||||
@input="debouncedSearch()"
|
||||
placeholder="Search by product title or SKU..."
|
||||
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<!-- Location Filter -->
|
||||
<select
|
||||
x-model="filters.location"
|
||||
@change="pagination.page = 1; loadInventory()"
|
||||
class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">All Locations</option>
|
||||
<template x-for="loc in locations" :key="loc">
|
||||
<option :value="loc" x-text="loc"></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<!-- Low Stock Filter -->
|
||||
<select
|
||||
x-model="filters.low_stock"
|
||||
@change="pagination.page = 1; loadInventory()"
|
||||
class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">All Stock Levels</option>
|
||||
<option value="5">Low Stock (< 5)</option>
|
||||
<option value="10">Low Stock (< 10)</option>
|
||||
<option value="25">Low Stock (< 25)</option>
|
||||
<option value="50">Low Stock (< 50)</option>
|
||||
</select>
|
||||
|
||||
<!-- Refresh Button -->
|
||||
<button
|
||||
@click="refresh()"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none transition-colors"
|
||||
title="Refresh inventory"
|
||||
>
|
||||
<span x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory Table with Pagination -->
|
||||
<div x-show="!loading">
|
||||
{% call table_wrapper() %}
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
||||
<th class="px-4 py-3">Product</th>
|
||||
<th class="px-4 py-3">Vendor</th>
|
||||
<th class="px-4 py-3">Location</th>
|
||||
<th class="px-4 py-3 text-right">Quantity</th>
|
||||
<th class="px-4 py-3 text-right">Reserved</th>
|
||||
<th class="px-4 py-3 text-right">Available</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<!-- Empty State -->
|
||||
<template x-if="inventory.length === 0">
|
||||
<tr>
|
||||
<td colspan="8" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
|
||||
<div class="flex flex-col items-center">
|
||||
<span x-html="$icon('archive', 'w-12 h-12 mb-2 text-gray-300')"></span>
|
||||
<p class="font-medium">No inventory entries found</p>
|
||||
<p class="text-xs mt-1" x-text="filters.search || filters.vendor_id || filters.location || filters.low_stock ? 'Try adjusting your filters' : 'Inventory will appear here when products have stock entries'"></p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- Inventory Rows -->
|
||||
<template x-for="item in inventory" :key="item.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400">
|
||||
<!-- Product Info -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center">
|
||||
<!-- Product Image -->
|
||||
<div class="w-10 h-10 mr-3 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
|
||||
<template x-if="item.product_image">
|
||||
<img :src="item.product_image" :alt="item.product_title" class="w-full h-full object-cover" loading="lazy" />
|
||||
</template>
|
||||
<template x-if="!item.product_image">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<span x-html="$icon('photograph', 'w-5 h-5 text-gray-400')"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Product Details -->
|
||||
<div class="min-w-0">
|
||||
<p class="font-semibold text-sm truncate max-w-[200px]" x-text="item.product_title || 'Untitled'"></p>
|
||||
<template x-if="item.product_sku">
|
||||
<p class="text-xs text-gray-400 font-mono">SKU: <span x-text="item.product_sku"></span></p>
|
||||
</template>
|
||||
<template x-if="item.gtin">
|
||||
<p class="text-xs text-gray-400 font-mono">GTIN: <span x-text="item.gtin"></span></p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Vendor Info -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<p class="font-medium" x-text="item.vendor_name || 'Unknown'"></p>
|
||||
</td>
|
||||
|
||||
<!-- Location -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300" x-text="item.location"></span>
|
||||
</td>
|
||||
|
||||
<!-- Quantity -->
|
||||
<td class="px-4 py-3 text-sm text-right font-mono">
|
||||
<span x-text="formatNumber(item.quantity)"></span>
|
||||
</td>
|
||||
|
||||
<!-- Reserved -->
|
||||
<td class="px-4 py-3 text-sm text-right font-mono">
|
||||
<span :class="item.reserved_quantity > 0 ? 'text-orange-600 dark:text-orange-400' : ''" x-text="formatNumber(item.reserved_quantity)"></span>
|
||||
</td>
|
||||
|
||||
<!-- Available -->
|
||||
<td class="px-4 py-3 text-sm text-right font-mono font-semibold">
|
||||
<span :class="item.available_quantity <= 0 ? 'text-red-600 dark:text-red-400' : item.available_quantity < 10 ? 'text-orange-600 dark:text-orange-400' : 'text-green-600 dark:text-green-400'" x-text="formatNumber(item.available_quantity)"></span>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<template x-if="item.available_quantity <= 0">
|
||||
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100">
|
||||
Out of Stock
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="item.available_quantity > 0 && item.available_quantity < 10">
|
||||
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100">
|
||||
Low Stock
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="item.available_quantity >= 10">
|
||||
<span class="px-2 py-1 font-semibold leading-tight rounded-full text-xs text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100">
|
||||
In Stock
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
@click="openAdjustModal(item)"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-purple-600 rounded-lg dark:text-purple-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Adjust Stock"
|
||||
>
|
||||
<span x-html="$icon('adjustments', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="openSetModal(item)"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-blue-600 rounded-lg dark:text-blue-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Set Quantity"
|
||||
>
|
||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="confirmDelete(item)"
|
||||
class="flex items-center justify-center px-2 py-1 text-xs font-medium leading-5 text-red-600 rounded-lg dark:text-red-400 focus:outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="Delete Entry"
|
||||
>
|
||||
<span x-html="$icon('delete', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
{% endcall %}
|
||||
|
||||
{{ pagination(show_condition="!loading && pagination.total > 0") }}
|
||||
</div>
|
||||
|
||||
<!-- Adjust Stock Modal -->
|
||||
{% call modal_simple('adjustStockModal', 'Adjust Stock', show_var='showAdjustModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<p class="font-medium text-gray-700 dark:text-gray-300" x-text="selectedItem?.product_title || 'Product'"></p>
|
||||
<p class="text-xs">Location: <span x-text="selectedItem?.location || '-'"></span></p>
|
||||
<p class="text-xs">Current Stock: <span x-text="formatNumber(selectedItem?.quantity || 0)"></span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Adjustment Quantity
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="adjustForm.quantity = Math.max(-999999, adjustForm.quantity - 1)"
|
||||
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded"
|
||||
>
|
||||
<span x-html="$icon('minus', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
{# noqa: FE-008 - Custom stepper with negative values for stock adjustments #}
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="adjustForm.quantity"
|
||||
class="flex-1 px-3 py-2 text-sm text-center border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="0"
|
||||
>
|
||||
<button
|
||||
@click="adjustForm.quantity = Math.min(999999, adjustForm.quantity + 1)"
|
||||
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border border-gray-300 dark:border-gray-600 rounded"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Positive = add stock, Negative = remove stock
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Reason (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="adjustForm.reason"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="e.g., Restocking from supplier"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
New quantity will be:
|
||||
<span class="font-semibold" :class="(selectedItem?.quantity || 0) + adjustForm.quantity < 0 ? 'text-red-600' : 'text-green-600'" x-text="formatNumber(Math.max(0, (selectedItem?.quantity || 0) + adjustForm.quantity))"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showAdjustModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="executeAdjust()"
|
||||
:disabled="saving || adjustForm.quantity === 0"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-text="saving ? 'Saving...' : 'Adjust Stock'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Set Quantity Modal -->
|
||||
{% call modal_simple('setQuantityModal', 'Set Quantity', show_var='showSetModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<p class="font-medium text-gray-700 dark:text-gray-300" x-text="selectedItem?.product_title || 'Product'"></p>
|
||||
<p class="text-xs">Location: <span x-text="selectedItem?.location || '-'"></span></p>
|
||||
<p class="text-xs">Current Stock: <span x-text="formatNumber(selectedItem?.quantity || 0)"></span></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
New Quantity
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="setForm.quantity"
|
||||
min="0"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="Enter new quantity"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showSetModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="executeSet()"
|
||||
:disabled="saving || setForm.quantity < 0"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-text="saving ? 'Saving...' : 'Set Quantity'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
{% call modal_simple('deleteModal', 'Delete Inventory Entry', show_var='showDeleteModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Are you sure you want to delete this inventory entry?
|
||||
</p>
|
||||
<div class="text-sm">
|
||||
<p class="font-medium text-gray-700 dark:text-gray-300" x-text="selectedItem?.product_title || 'Product'"></p>
|
||||
<p class="text-xs text-gray-500">Location: <span x-text="selectedItem?.location || '-'"></span></p>
|
||||
<p class="text-xs text-gray-500">Current Stock: <span x-text="formatNumber(selectedItem?.quantity || 0)"></span></p>
|
||||
</div>
|
||||
<p class="text-xs text-red-600 dark:text-red-400">
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showDeleteModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="executeDelete()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-text="saving ? 'Deleting...' : 'Delete'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Import Inventory Modal -->
|
||||
{% call modal_simple('importModal', 'Import Inventory', show_var='showImportModal', size='md') %}
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Upload a TSV or CSV file to import inventory. Products are matched by EAN/GTIN.
|
||||
</p>
|
||||
|
||||
<!-- File Format Info -->
|
||||
<div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm">
|
||||
<p class="font-medium text-blue-800 dark:text-blue-200 mb-2">File Format:</p>
|
||||
<p class="text-blue-700 dark:text-blue-300 text-xs font-mono mb-1">BIN EAN PRODUCT QUANTITY</p>
|
||||
<p class="text-blue-600 dark:text-blue-400 text-xs">
|
||||
<strong>Required:</strong> BIN, EAN<br>
|
||||
<strong>Optional:</strong> PRODUCT (display only), QUANTITY (defaults to 1 per row)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="executeImport()">
|
||||
<!-- Vendor Selection -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Vendor <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
x-model="importForm.vendor_id"
|
||||
required
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<option value="">Select vendor...</option>
|
||||
<template x-for="vendor in vendorsList" :key="vendor.id">
|
||||
<option :value="vendor.id" x-text="vendor.name + ' (' + vendor.vendor_code + ')'"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Warehouse -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Warehouse
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="importForm.warehouse"
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
|
||||
placeholder="strassen"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- File Upload -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
File <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
@change="importForm.file = $event.target.files[0]"
|
||||
accept=".tsv,.csv,.txt"
|
||||
required
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300 file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:bg-purple-100 file:text-purple-700 dark:file:bg-purple-900 dark:file:text-purple-300 hover:file:bg-purple-200"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Clear Existing Option -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="importForm.clear_existing"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
>
|
||||
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
|
||||
Clear existing inventory for this warehouse before import
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Import Result -->
|
||||
<template x-if="importResult">
|
||||
<div class="p-3 rounded-lg" :class="importResult.success ? 'bg-green-50 dark:bg-green-900/20' : 'bg-red-50 dark:bg-red-900/20'">
|
||||
<p class="font-medium" :class="importResult.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'">
|
||||
<span x-text="importResult.success ? 'Import Successful!' : 'Import Failed'"></span>
|
||||
</p>
|
||||
<template x-if="importResult.success">
|
||||
<div class="text-sm text-green-700 dark:text-green-300 mt-1">
|
||||
<p>Rows processed: <span x-text="importResult.total_rows"></span></p>
|
||||
<p>Entries created: <span x-text="importResult.entries_created"></span></p>
|
||||
<p>Entries updated: <span x-text="importResult.entries_updated"></span></p>
|
||||
<p>Total quantity: <span x-text="importResult.quantity_imported"></span></p>
|
||||
<template x-if="importResult.unmatched_gtins?.length > 0">
|
||||
<div class="mt-2">
|
||||
<p class="font-medium text-orange-600 dark:text-orange-400">
|
||||
Unmatched GTINs (<span x-text="importResult.unmatched_gtins.length"></span>):
|
||||
</p>
|
||||
<ul class="text-xs mt-1 max-h-32 overflow-y-auto">
|
||||
<template x-for="item in importResult.unmatched_gtins" :key="item.gtin">
|
||||
<li class="font-mono" x-text="item.gtin + ' (' + item.quantity + ' units) - ' + item.product_name"></li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!importResult.success && importResult.errors?.length > 0">
|
||||
<ul class="text-sm text-red-700 dark:text-red-300 mt-1">
|
||||
<template x-for="error in importResult.errors" :key="error">
|
||||
<li x-text="error"></li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
@click="closeImportModal()"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span x-text="importResult?.success ? 'Close' : 'Cancel'"></span>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="importing || !importForm.vendor_id || !importForm.file"
|
||||
x-show="!importResult?.success"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<span x-text="importing ? 'Importing...' : 'Import'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('inventory_static', path='admin/js/inventory.js') }}"></script>
|
||||
{% endblock %}
|
||||
374
app/modules/inventory/templates/inventory/vendor/inventory.html
vendored
Normal file
374
app/modules/inventory/templates/inventory/vendor/inventory.html
vendored
Normal file
@@ -0,0 +1,374 @@
|
||||
{# app/templates/vendor/inventory.html #}
|
||||
{% extends "vendor/base.html" %}
|
||||
{% from 'shared/macros/pagination.html' import pagination %}
|
||||
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
|
||||
|
||||
{% block title %}Inventory{% endblock %}
|
||||
|
||||
{% block alpine_data %}vendorInventory(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Page Header -->
|
||||
{% call page_header_flex(title='Inventory', subtitle='Manage your stock levels') %}
|
||||
<div class="flex items-center gap-4">
|
||||
{{ refresh_button(loading_var='loading', onclick='loadInventory()', variant='secondary') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
{{ loading_state('Loading inventory...') }}
|
||||
|
||||
{{ error_state('Error loading inventory') }}
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
|
||||
<!-- Total Entries -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('archive', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Entries</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.total_entries">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Stock -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
|
||||
<span x-html="$icon('cube', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Stock</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(stats.total_quantity)">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Low Stock -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
|
||||
<span x-html="$icon('exclamation-triangle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Low Stock</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.low_stock_count">0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Out of Stock -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
|
||||
<span x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Out of Stock</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="stats.out_of_stock_count">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div x-show="!loading" class="mb-6 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<!-- Search -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="filters.search"
|
||||
@input="debouncedSearch()"
|
||||
placeholder="Search by product name or SKU..."
|
||||
class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 placeholder-gray-400 bg-gray-50 border border-gray-200 rounded-lg dark:placeholder-gray-500 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Filter -->
|
||||
<select
|
||||
x-model="filters.location"
|
||||
@change="applyFilter()"
|
||||
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
>
|
||||
<option value="">All Locations</option>
|
||||
<template x-for="loc in locations" :key="loc">
|
||||
<option :value="loc" x-text="loc"></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<!-- Low Stock Filter -->
|
||||
<select
|
||||
x-model="filters.low_stock"
|
||||
@change="applyFilter()"
|
||||
class="px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
>
|
||||
<option value="">All Stock Levels</option>
|
||||
<option value="true">Low Stock Only</option>
|
||||
</select>
|
||||
|
||||
<!-- Clear Filters -->
|
||||
<button
|
||||
x-show="filters.search || filters.location || filters.low_stock"
|
||||
@click="clearFilters()"
|
||||
class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Actions Bar -->
|
||||
<div x-show="!loading && selectedItems.length > 0"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
class="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-purple-700 dark:text-purple-300">
|
||||
<span x-text="selectedItems.length"></span> item(s) selected
|
||||
</span>
|
||||
<button @click="clearSelection()" class="text-sm text-purple-600 hover:text-purple-800 dark:text-purple-400">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="openBulkAdjustModal()"
|
||||
:disabled="saving"
|
||||
class="px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-100 rounded-lg hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 disabled:opacity-50"
|
||||
>
|
||||
<span x-html="$icon('plus-minus', 'w-4 h-4 inline mr-1')"></span>
|
||||
Bulk Adjust
|
||||
</button>
|
||||
<button
|
||||
@click="exportSelectedItems()"
|
||||
class="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
>
|
||||
<span x-html="$icon('arrow-down-tray', 'w-4 h-4 inline mr-1')"></span>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory Table -->
|
||||
<div x-show="!loading && !error" class="mb-8">
|
||||
{% call table_wrapper() %}
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
||||
<th class="px-4 py-3 w-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="allSelected"
|
||||
:indeterminate="someSelected"
|
||||
@click="toggleSelectAll()"
|
||||
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</th>
|
||||
<th class="px-4 py-3">Product</th>
|
||||
<th class="px-4 py-3">SKU</th>
|
||||
<th class="px-4 py-3">Location</th>
|
||||
<th class="px-4 py-3">Quantity</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-for="item in inventory" :key="item.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400" :class="{'bg-purple-50 dark:bg-purple-900/10': isSelected(item.id)}">
|
||||
<!-- Checkbox -->
|
||||
<td class="px-4 py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="isSelected(item.id)"
|
||||
@click="toggleSelect(item.id)"
|
||||
class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
</td>
|
||||
<!-- Product -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="text-sm">
|
||||
<p class="font-semibold" x-text="item.product_name || 'Unknown Product'"></p>
|
||||
</div>
|
||||
</td>
|
||||
<!-- SKU -->
|
||||
<td class="px-4 py-3 text-sm font-mono" x-text="item.product_sku || '-'"></td>
|
||||
<!-- Location -->
|
||||
<td class="px-4 py-3 text-sm" x-text="item.location || 'Default'"></td>
|
||||
<!-- Quantity -->
|
||||
<td class="px-4 py-3 text-sm font-semibold" x-text="formatNumber(item.quantity)"></td>
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
:class="{
|
||||
'px-2 py-1 font-semibold leading-tight rounded-full': true,
|
||||
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': getStockStatus(item) === 'ok',
|
||||
'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': getStockStatus(item) === 'low',
|
||||
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': getStockStatus(item) === 'out'
|
||||
}"
|
||||
>
|
||||
<span x-text="getStockStatus(item) === 'out' ? 'Out of Stock' : (getStockStatus(item) === 'low' ? 'Low Stock' : 'In Stock')"></span>
|
||||
</span>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
@click="openAdjustModal(item)"
|
||||
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||
title="Adjust Stock"
|
||||
>
|
||||
<span x-html="$icon('plus-minus', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="openSetModal(item)"
|
||||
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400"
|
||||
title="Set Quantity"
|
||||
>
|
||||
<span x-html="$icon('pencil', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<!-- Empty State -->
|
||||
<tr x-show="inventory.length === 0">
|
||||
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<div class="flex flex-col items-center">
|
||||
<span x-html="$icon('archive', 'w-12 h-12 text-gray-300 dark:text-gray-600 mb-4')"></span>
|
||||
<p class="text-lg font-medium">No inventory found</p>
|
||||
<p class="text-sm">Add products and set their stock levels</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{{ pagination(show_condition="!loading && pagination.total > 0") }}
|
||||
|
||||
<!-- Adjust Stock Modal -->
|
||||
{% call modal_simple('adjustStockModal', 'Adjust Stock', show_var='showAdjustModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<template x-if="selectedItem">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
|
||||
<span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
|
||||
{# noqa: FE-008 - Adjustment input accepts +/- values, not a quantity stepper #}
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="adjustForm.quantity"
|
||||
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
placeholder="e.g., 10 or -5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="adjustForm.reason"
|
||||
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
placeholder="e.g., Restock, Damaged goods"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showAdjustModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>Cancel</button>
|
||||
<button
|
||||
@click="executeAdjust()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>Adjust</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Set Quantity Modal -->
|
||||
{% call modal_simple('setQuantityModal', 'Set Quantity', show_var='showSetModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<template x-if="selectedItem">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
|
||||
</p>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="setForm.quantity"
|
||||
min="0"
|
||||
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showSetModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>Cancel</button>
|
||||
<button
|
||||
@click="executeSet()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>Set</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Bulk Adjust Modal -->
|
||||
{% call modal_simple('bulkAdjustModal', 'Bulk Adjust Stock', show_var='showBulkAdjustModal', size='sm') %}
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Adjust stock for <span class="font-semibold" x-text="selectedItems.length"></span> selected item(s)
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
|
||||
<input
|
||||
type="number"
|
||||
x-model.number="bulkAdjustForm.quantity"
|
||||
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
placeholder="e.g., 10 or -5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="bulkAdjustForm.reason"
|
||||
class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
|
||||
placeholder="e.g., Restock, Damaged goods"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
@click="showBulkAdjustModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>Cancel</button>
|
||||
<button
|
||||
@click="bulkAdjust()"
|
||||
:disabled="saving"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>Adjust All</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('inventory_static', path='vendor/js/inventory.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user