Completed:
✅ Admin: Process creation, field configuration, template upload ✅ Staff: Session list, new session (header form), scanning interface ✅ Duplicate detection (same session = blue, other session = orange) ✅ Weight entry popup, edit/delete scans
This commit is contained in:
Javier
@@ -45,6 +45,23 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Modules Section -->
|
||||
<div class="modules-section">
|
||||
<h2 class="section-title">Modules</h2>
|
||||
<div class="modules-grid">
|
||||
<div class="module-card module-card-active">
|
||||
<div class="module-icon">📋</div>
|
||||
<h3 class="module-name">Counts</h3>
|
||||
<p class="module-desc">Cycle counts & physical inventory</p>
|
||||
</div>
|
||||
<a href="{{ url_for('cons_sheets.admin_processes') }}" class="module-card module-card-link">
|
||||
<div class="module-icon">📝</div>
|
||||
<h3 class="module-name">Consumption Sheets</h3>
|
||||
<p class="module-desc">Production consumption tracking</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if sessions %}
|
||||
<div class="sessions-grid">
|
||||
{% for session in sessions %}
|
||||
@@ -104,4 +121,4 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
71
templates/cons_sheets/add_field.html
Normal file
71
templates/cons_sheets/add_field.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Add {{ 'Header' if table_type == 'header' else 'Detail' }} Field - {{ process.process_name }} - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to Fields
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-container" style="max-width: 600px; margin: 0 auto;">
|
||||
<h1 class="page-title" style="text-align: center;">Add {{ 'Header' if table_type == 'header' else 'Detail' }} Field</h1>
|
||||
<p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">{{ process.process_name }}</p>
|
||||
|
||||
<form method="POST" class="form-card">
|
||||
<div class="form-group">
|
||||
<label for="field_label" class="form-label">Field Label *</label>
|
||||
<input type="text" id="field_label" name="field_label" class="form-input"
|
||||
placeholder="e.g., Lot Number" required autofocus>
|
||||
<p class="form-hint">Display name (field_name is auto-generated)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="field_type" class="form-label">Data Type *</label>
|
||||
<select id="field_type" name="field_type" class="form-input" required>
|
||||
<option value="TEXT">TEXT (words, codes, etc.)</option>
|
||||
<option value="INTEGER">INTEGER (whole numbers)</option>
|
||||
<option value="REAL">REAL (decimals, weights)</option>
|
||||
<option value="DATE">DATE</option>
|
||||
<option value="DATETIME">DATETIME</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="max_length" class="form-label">Max Length</label>
|
||||
<input type="number" id="max_length" name="max_length" class="form-input"
|
||||
placeholder="Leave blank for no limit" min="1">
|
||||
<p class="form-hint">Only applies to TEXT fields</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="is_required" value="1">
|
||||
<span>Required field</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="excel_cell" class="form-label">Excel Cell{% if table_type == 'detail' %} (Column){% endif %}</label>
|
||||
<input type="text" id="excel_cell" name="excel_cell" class="form-input"
|
||||
placeholder="{% if table_type == 'header' %}e.g., A3{% else %}e.g., A{% endif %}"
|
||||
style="text-transform: uppercase;">
|
||||
<p class="form-hint">
|
||||
{% if table_type == 'header' %}
|
||||
Full cell reference (e.g., A3, B5)
|
||||
{% else %}
|
||||
Column letter only (e.g., A, B) — row is calculated
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Add Field</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
73
templates/cons_sheets/admin_processes.html
Normal file
73
templates/cons_sheets/admin_processes.html
Normal file
@@ -0,0 +1,73 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Consumption Sheets - Admin - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<!-- Back to Admin Dashboard -->
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to Admin
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">Consumption Sheets</h1>
|
||||
<p class="page-subtitle">Manage process types and templates</p>
|
||||
</div>
|
||||
<a href="{{ url_for('cons_sheets.create_process') }}" class="btn btn-primary">
|
||||
<span class="btn-icon">+</span> New Process
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if processes %}
|
||||
<div class="sessions-grid">
|
||||
{% for process in processes %}
|
||||
<div class="session-card">
|
||||
<div class="session-card-header">
|
||||
<h3 class="session-name">{{ process.process_name }}</h3>
|
||||
<span class="session-type-badge">
|
||||
{{ process.field_count or 0 }} fields
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="session-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Key:</span>
|
||||
<span class="meta-value" style="font-family: var(--font-mono);">{{ process.process_key }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Created:</span>
|
||||
<span class="meta-value">{{ process.created_at[:16] if process.created_at else 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">By:</span>
|
||||
<span class="meta-value">{{ process.created_by_name or 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Template:</span>
|
||||
<span class="meta-value">{{ '✅ Uploaded' if process.template_file else '❌ None' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session-actions">
|
||||
<a href="{{ url_for('cons_sheets.process_detail', process_id=process.id) }}" class="btn btn-secondary btn-block">
|
||||
Configure
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📝</div>
|
||||
<h2 class="empty-title">No Processes Defined</h2>
|
||||
<p class="empty-text">Create a process type to get started (e.g., "AD WIP")</p>
|
||||
<a href="{{ url_for('cons_sheets.create_process') }}" class="btn btn-primary">
|
||||
Create First Process
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
36
templates/cons_sheets/create_process.html
Normal file
36
templates/cons_sheets/create_process.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Create Process - Consumption Sheets - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.admin_processes') }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to Processes
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-container" style="max-width: 600px; margin: 0 auto;">
|
||||
<h1 class="page-title" style="text-align: center; margin-bottom: var(--space-xl);">Create New Process</h1>
|
||||
|
||||
<form method="POST" class="form-card">
|
||||
<div class="form-group">
|
||||
<label for="process_name" class="form-label">Process Name</label>
|
||||
<input type="text"
|
||||
id="process_name"
|
||||
name="process_name"
|
||||
class="form-input"
|
||||
placeholder="e.g., AD WIP"
|
||||
required
|
||||
autofocus>
|
||||
<p class="form-hint">This will be displayed in menus and reports</p>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('cons_sheets.admin_processes') }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Process</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
70
templates/cons_sheets/edit_field.html
Normal file
70
templates/cons_sheets/edit_field.html
Normal file
@@ -0,0 +1,70 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Edit Field - {{ process.process_name }} - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to Fields
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-container" style="max-width: 600px; margin: 0 auto;">
|
||||
<h1 class="page-title" style="text-align: center;">Edit Field</h1>
|
||||
<p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">
|
||||
{{ process.process_name }} — {{ 'Header' if field.table_type == 'header' else 'Detail' }}
|
||||
</p>
|
||||
|
||||
<form method="POST" class="form-card">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Field Name</label>
|
||||
<input type="text" class="form-input" value="{{ field.field_name }}" disabled
|
||||
style="opacity: 0.6; font-family: var(--font-mono);">
|
||||
<p class="form-hint">Cannot be changed (used in database)</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="field_label" class="form-label">Field Label *</label>
|
||||
<input type="text" id="field_label" name="field_label" class="form-input"
|
||||
value="{{ field.field_label }}" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="field_type" class="form-label">Data Type *</label>
|
||||
<select id="field_type" name="field_type" class="form-input" required>
|
||||
<option value="TEXT" {% if field.field_type == 'TEXT' %}selected{% endif %}>TEXT</option>
|
||||
<option value="INTEGER" {% if field.field_type == 'INTEGER' %}selected{% endif %}>INTEGER</option>
|
||||
<option value="REAL" {% if field.field_type == 'REAL' %}selected{% endif %}>REAL</option>
|
||||
<option value="DATE" {% if field.field_type == 'DATE' %}selected{% endif %}>DATE</option>
|
||||
<option value="DATETIME" {% if field.field_type == 'DATETIME' %}selected{% endif %}>DATETIME</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="max_length" class="form-label">Max Length</label>
|
||||
<input type="number" id="max_length" name="max_length" class="form-input"
|
||||
value="{{ field.max_length or '' }}" min="1">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" name="is_required" value="1" {% if field.is_required %}checked{% endif %}>
|
||||
<span>Required field</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="excel_cell" class="form-label">Excel Cell{% if field.table_type == 'detail' %} (Column){% endif %}</label>
|
||||
<input type="text" id="excel_cell" name="excel_cell" class="form-input"
|
||||
value="{{ field.excel_cell or '' }}" style="text-transform: uppercase;">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
99
templates/cons_sheets/new_session.html
Normal file
99
templates/cons_sheets/new_session.html
Normal file
@@ -0,0 +1,99 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}New {{ process.process_name }} Session - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.index') }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-container" style="max-width: 600px; margin: 0 auto;">
|
||||
<h1 class="page-title" style="text-align: center;">New {{ process.process_name }} Session</h1>
|
||||
<p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">Enter header information to begin scanning</p>
|
||||
|
||||
<form method="POST" class="form-card">
|
||||
{% for field in header_fields %}
|
||||
<div class="form-group">
|
||||
<label for="{{ field.field_name }}" class="form-label">
|
||||
{{ field.field_label }}
|
||||
{% if field.is_required %}<span class="required">*</span>{% endif %}
|
||||
</label>
|
||||
|
||||
{% if field.field_type == 'DATE' %}
|
||||
<input type="date"
|
||||
id="{{ field.field_name }}"
|
||||
name="{{ field.field_name }}"
|
||||
class="form-input"
|
||||
value="{{ form_data.get(field.field_name, '') }}"
|
||||
{% if field.is_required %}required{% endif %}>
|
||||
|
||||
{% elif field.field_type == 'DATETIME' %}
|
||||
<input type="datetime-local"
|
||||
id="{{ field.field_name }}"
|
||||
name="{{ field.field_name }}"
|
||||
class="form-input"
|
||||
value="{{ form_data.get(field.field_name, '') }}"
|
||||
{% if field.is_required %}required{% endif %}>
|
||||
|
||||
{% elif field.field_type == 'INTEGER' %}
|
||||
<input type="number"
|
||||
id="{{ field.field_name }}"
|
||||
name="{{ field.field_name }}"
|
||||
class="form-input"
|
||||
value="{{ form_data.get(field.field_name, '') }}"
|
||||
step="1"
|
||||
{% if field.is_required %}required{% endif %}>
|
||||
|
||||
{% elif field.field_type == 'REAL' %}
|
||||
<input type="number"
|
||||
id="{{ field.field_name }}"
|
||||
name="{{ field.field_name }}"
|
||||
class="form-input"
|
||||
value="{{ form_data.get(field.field_name, '') }}"
|
||||
step="0.01"
|
||||
{% if field.is_required %}required{% endif %}>
|
||||
|
||||
{% else %}
|
||||
<input type="text"
|
||||
id="{{ field.field_name }}"
|
||||
name="{{ field.field_name }}"
|
||||
class="form-input"
|
||||
value="{{ form_data.get(field.field_name, '') }}"
|
||||
{% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
|
||||
{% if field.is_required %}required{% endif %}>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if not header_fields %}
|
||||
<div class="empty-state-small">
|
||||
<p>No header fields configured for this process.</p>
|
||||
<p>Contact your administrator to set up fields.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('cons_sheets.index') }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary" {% if not header_fields %}disabled{% endif %}>
|
||||
Start Scanning
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.required {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.empty-state-small {
|
||||
text-align: center;
|
||||
padding: var(--space-xl);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
245
templates/cons_sheets/process_detail.html
Normal file
245
templates/cons_sheets/process_detail.html
Normal file
@@ -0,0 +1,245 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ process.process_name }} - Consumption Sheets - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.admin_processes') }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to Processes
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">{{ process.process_name }}</h1>
|
||||
<p class="page-subtitle">Key: <code style="font-family: var(--font-mono); color: var(--color-primary);">{{ process.process_key }}</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Options -->
|
||||
<div class="config-grid">
|
||||
<!-- Database Configuration Card -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<div class="config-icon">🗄️</div>
|
||||
<h2 class="config-title">Database</h2>
|
||||
</div>
|
||||
<p class="config-desc">Define fields for header and detail tables</p>
|
||||
|
||||
<div class="config-stats">
|
||||
<div class="config-stat">
|
||||
<span class="stat-number">{{ header_fields|length }}</span>
|
||||
<span class="stat-label">Header Fields</span>
|
||||
</div>
|
||||
<div class="config-stat">
|
||||
<span class="stat-number">{{ detail_fields|length }}</span>
|
||||
<span class="stat-label">Detail Fields</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-primary btn-block">
|
||||
Configure Fields
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Excel Template Card -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<div class="config-icon">📊</div>
|
||||
<h2 class="config-title">Excel Template</h2>
|
||||
</div>
|
||||
<p class="config-desc">Upload template and map fields to cells</p>
|
||||
|
||||
<div class="config-stats">
|
||||
<div class="config-stat">
|
||||
{% if process.template_file %}
|
||||
<span class="stat-number" style="color: var(--color-success);">✓</span>
|
||||
<span class="stat-label">{{ process.template_filename or 'Uploaded' }}</span>
|
||||
{% else %}
|
||||
<span class="stat-number" style="color: var(--color-warning);">—</span>
|
||||
<span class="stat-label">No template</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="config-stat">
|
||||
<span class="stat-number">{{ process.rows_per_page or 30 }}</span>
|
||||
<span class="stat-label">Rows/Page</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('cons_sheets.process_template', process_id=process.id) }}" class="btn btn-primary btn-block">
|
||||
Configure Template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Field Preview -->
|
||||
{% if header_fields or detail_fields %}
|
||||
<div class="fields-preview">
|
||||
<h3 class="section-title">Field Preview</h3>
|
||||
|
||||
{% if header_fields %}
|
||||
<div class="field-section">
|
||||
<h4 class="field-section-title">Header Fields</h4>
|
||||
<div class="field-list">
|
||||
{% for field in header_fields %}
|
||||
<div class="field-chip">
|
||||
<span class="field-name">{{ field.field_label }}</span>
|
||||
<span class="field-type">{{ field.field_type }}</span>
|
||||
{% if field.excel_cell %}
|
||||
<span class="field-cell">→ {{ field.excel_cell }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if detail_fields %}
|
||||
<div class="field-section">
|
||||
<h4 class="field-section-title">Detail Fields</h4>
|
||||
<div class="field-list">
|
||||
{% for field in detail_fields %}
|
||||
<div class="field-chip">
|
||||
<span class="field-name">{{ field.field_label }}</span>
|
||||
<span class="field-type">{{ field.field_type }}</span>
|
||||
{% if field.excel_cell %}
|
||||
<span class="field-cell">→ Col {{ field.excel_cell }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.config-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.config-card {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.config-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.config-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.config-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.config-desc {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.config-stats {
|
||||
display: flex;
|
||||
gap: var(--space-xl);
|
||||
margin-bottom: var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
background: var(--color-surface-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.config-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.config-stat .stat-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.config-stat .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.fields-preview {
|
||||
margin-top: var(--space-2xl);
|
||||
padding-top: var(--space-xl);
|
||||
border-top: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.field-section {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.field-section-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.field-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.field-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: var(--color-surface-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field-type {
|
||||
color: var(--color-text-dim);
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.field-cell {
|
||||
color: var(--color-primary);
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
157
templates/cons_sheets/process_fields.html
Normal file
157
templates/cons_sheets/process_fields.html
Normal file
@@ -0,0 +1,157 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Fields - {{ process.process_name }} - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.process_detail', process_id=process.id) }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to {{ process.process_name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">Database Fields</h1>
|
||||
<p class="page-subtitle">{{ process.process_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header Fields Section -->
|
||||
<div class="fields-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Header Fields</h2>
|
||||
<a href="{{ url_for('cons_sheets.add_field', process_id=process.id, table_type='header') }}" class="btn btn-primary btn-sm">
|
||||
<span class="btn-icon">+</span> Add Field
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if header_fields %}
|
||||
<div class="fields-table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field Name</th>
|
||||
<th>Label</th>
|
||||
<th>Type</th>
|
||||
<th>Required</th>
|
||||
<th>Excel Cell</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for field in header_fields %}
|
||||
<tr>
|
||||
<td><code>{{ field.field_name }}</code></td>
|
||||
<td>{{ field.field_label }}</td>
|
||||
<td>{{ field.field_type }}</td>
|
||||
<td>{{ '✓' if field.is_required else '—' }}</td>
|
||||
<td>{{ field.excel_cell or '—' }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('cons_sheets.edit_field', process_id=process.id, field_id=field.id) }}" class="btn btn-secondary btn-sm">Edit</a>
|
||||
<button onclick="confirmDelete({{ field.id }}, '{{ field.field_label }}')" class="btn btn-sm" style="background: var(--color-danger); color: white;">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state-small">
|
||||
<p>No header fields defined yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Detail Fields Section -->
|
||||
<div class="fields-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Detail Fields</h2>
|
||||
<a href="{{ url_for('cons_sheets.add_field', process_id=process.id, table_type='detail') }}" class="btn btn-primary btn-sm">
|
||||
<span class="btn-icon">+</span> Add Field
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if detail_fields %}
|
||||
<div class="fields-table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field Name</th>
|
||||
<th>Label</th>
|
||||
<th>Type</th>
|
||||
<th>Required</th>
|
||||
<th>Excel Column</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for field in detail_fields %}
|
||||
<tr>
|
||||
<td><code>{{ field.field_name }}</code></td>
|
||||
<td>{{ field.field_label }}</td>
|
||||
<td>{{ field.field_type }}</td>
|
||||
<td>{{ '✓' if field.is_required else '—' }}</td>
|
||||
<td>{{ field.excel_cell or '—' }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('cons_sheets.edit_field', process_id=process.id, field_id=field.id) }}" class="btn btn-secondary btn-sm">Edit</a>
|
||||
<button onclick="confirmDelete({{ field.id }}, '{{ field.field_label }}')" class="btn btn-sm" style="background: var(--color-danger); color: white;">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state-small">
|
||||
<p>No detail fields defined yet.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fields-section {
|
||||
margin-top: var(--space-xl);
|
||||
padding: var(--space-lg);
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.fields-table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.empty-state-small {
|
||||
text-align: center;
|
||||
padding: var(--space-xl);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function confirmDelete(fieldId, fieldLabel) {
|
||||
if (confirm('Delete field "' + fieldLabel + '"?\n\nThis will soft-delete the field (data preserved but hidden).')) {
|
||||
fetch('{{ url_for("cons_sheets.delete_field", process_id=process.id, field_id=0) }}'.replace('0', fieldId), {
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error: ' + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
269
templates/cons_sheets/process_template.html
Normal file
269
templates/cons_sheets/process_template.html
Normal file
@@ -0,0 +1,269 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Excel Template - {{ process.process_name }} - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="mode-selector">
|
||||
<a href="{{ url_for('cons_sheets.process_detail', process_id=process.id) }}" class="btn btn-secondary btn-sm">
|
||||
<i class="fa-solid fa-arrow-left"></i> Back to {{ process.process_name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">Excel Template</h1>
|
||||
<p class="page-subtitle">{{ process.process_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-grid">
|
||||
<!-- Upload Section -->
|
||||
<div class="config-section">
|
||||
<h2 class="section-title">Template File</h2>
|
||||
|
||||
<div class="current-template">
|
||||
{% if process.template_filename %}
|
||||
<div class="template-info">
|
||||
<span class="template-icon">📄</span>
|
||||
<span class="template-name">{{ process.template_filename }}</span>
|
||||
<a href="{{ url_for('cons_sheets.download_template', process_id=process.id) }}" class="btn btn-secondary btn-sm">Download</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="no-template">No template uploaded yet</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('cons_sheets.upload_template', process_id=process.id) }}" enctype="multipart/form-data" class="upload-form">
|
||||
<div class="form-group">
|
||||
<label for="template_file" class="form-label">Upload New Template</label>
|
||||
<input type="file" id="template_file" name="template_file" accept=".xlsx" class="form-input" required>
|
||||
<p class="form-hint">Excel files (.xlsx) only</p>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Upload</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Settings Section -->
|
||||
<div class="config-section">
|
||||
<h2 class="section-title">Page Settings</h2>
|
||||
|
||||
<form method="POST" action="{{ url_for('cons_sheets.update_template_settings', process_id=process.id) }}">
|
||||
<div class="form-group">
|
||||
<label for="rows_per_page" class="form-label">Rows Per Page</label>
|
||||
<input type="number" id="rows_per_page" name="rows_per_page"
|
||||
value="{{ process.rows_per_page or 30 }}" min="1" max="500" class="form-input">
|
||||
<p class="form-hint">Max detail rows before starting a new page</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="detail_start_row" class="form-label">Detail Start Row</label>
|
||||
<input type="number" id="detail_start_row" name="detail_start_row"
|
||||
value="{{ process.detail_start_row or 10 }}" min="1" max="500" class="form-input">
|
||||
<p class="form-hint">Excel row number where detail data begins</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Save Settings</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Field Mapping Summary -->
|
||||
<div class="mapping-section">
|
||||
<h2 class="section-title">Field Mappings</h2>
|
||||
<p class="section-desc">Excel cell mappings are configured per-field in the Database section. Here's a summary:</p>
|
||||
|
||||
{% if header_fields or detail_fields %}
|
||||
<div class="mapping-grid">
|
||||
{% if header_fields %}
|
||||
<div class="mapping-group">
|
||||
<h3 class="mapping-group-title">Header Fields</h3>
|
||||
<table class="mapping-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field</th>
|
||||
<th>Excel Cell</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for field in header_fields %}
|
||||
<tr>
|
||||
<td>{{ field.field_label }}</td>
|
||||
<td>
|
||||
{% if field.excel_cell %}
|
||||
<code>{{ field.excel_cell }}</code>
|
||||
{% else %}
|
||||
<span class="not-mapped">Not mapped</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if detail_fields %}
|
||||
<div class="mapping-group">
|
||||
<h3 class="mapping-group-title">Detail Fields</h3>
|
||||
<p class="mapping-note">Columns only — rows start at {{ process.detail_start_row or 10 }}</p>
|
||||
<table class="mapping-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field</th>
|
||||
<th>Excel Column</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for field in detail_fields %}
|
||||
<tr>
|
||||
<td>{{ field.field_label }}</td>
|
||||
<td>
|
||||
{% if field.excel_cell %}
|
||||
<code>{{ field.excel_cell }}</code>
|
||||
{% else %}
|
||||
<span class="not-mapped">Not mapped</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary" style="margin-top: var(--space-lg);">
|
||||
Edit Field Mappings
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="empty-state-small">
|
||||
<p>No fields defined yet. <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}">Add fields first</a>.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.config-section {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.current-template {
|
||||
margin-bottom: var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
background: var(--color-surface-elevated);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.template-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.template-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
flex: 1;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.no-template {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.upload-form {
|
||||
margin-top: var(--space-lg);
|
||||
padding-top: var(--space-lg);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.mapping-section {
|
||||
margin-top: var(--space-xl);
|
||||
padding: var(--space-xl);
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.mapping-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.mapping-group-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.mapping-note {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.mapping-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.mapping-table th,
|
||||
.mapping-table td {
|
||||
padding: var(--space-sm);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.mapping-table th {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mapping-table code {
|
||||
background: var(--color-primary-glow);
|
||||
color: var(--color-primary);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.not-mapped {
|
||||
color: var(--color-warning);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.empty-state-small {
|
||||
text-align: center;
|
||||
padding: var(--space-xl);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.empty-state-small a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
535
templates/cons_sheets/scan_session.html
Normal file
535
templates/cons_sheets/scan_session.html
Normal file
@@ -0,0 +1,535 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Scanning - {{ session.process_name }} - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="count-location-container">
|
||||
<div class="location-header">
|
||||
<div class="location-info">
|
||||
<a href="{{ url_for('cons_sheets.index') }}" class="breadcrumb">← Back to Sessions</a>
|
||||
<div class="location-label">{{ session.process_name }}</div>
|
||||
<div class="header-values">
|
||||
{% for hv in header_values %}
|
||||
<span class="header-pill"><strong>{{ hv.field_label }}:</strong> {{ hv.field_value }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="location-stats">
|
||||
<span class="stat-pill">Scanned: <span id="scanCount">{{ scans|length }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scan Input Card -->
|
||||
<div class="scan-card scan-card-active">
|
||||
<div class="scan-header">
|
||||
<h2 class="scan-title">Scan Lot Number</h2>
|
||||
</div>
|
||||
|
||||
<form id="lotScanForm" class="scan-form">
|
||||
<div class="scan-input-group">
|
||||
<input type="text"
|
||||
name="lot_number"
|
||||
id="lotInput"
|
||||
inputmode="none"
|
||||
class="scan-input"
|
||||
placeholder="Scan Lot Number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
autofocus>
|
||||
<button type="submit" style="display: none;"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Duplicate Confirmation Modal (Same Session - Blue) -->
|
||||
<div id="duplicateSameModal" class="modal">
|
||||
<div class="modal-content modal-duplicate">
|
||||
<div class="duplicate-lot-number" id="dupSameLotNumber"></div>
|
||||
<h3 class="duplicate-title" style="color: var(--color-duplicate);">Already Scanned</h3>
|
||||
<p class="duplicate-message">This lot was already scanned in this session.<br>Add it again?</p>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary btn-lg" onclick="cancelDuplicate()">No</button>
|
||||
<button type="button" class="btn btn-lg" style="background: var(--color-duplicate); color: white;" onclick="confirmDuplicate()">Yes, Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duplicate Confirmation Modal (Other Session - Orange) -->
|
||||
<div id="duplicateOtherModal" class="modal">
|
||||
<div class="modal-content modal-duplicate">
|
||||
<div class="duplicate-lot-number" id="dupOtherLotNumber"></div>
|
||||
<h3 class="duplicate-title" style="color: var(--color-warning);">⚠️ Previously Consumed</h3>
|
||||
<p class="duplicate-message" id="dupOtherInfo"></p>
|
||||
<p class="duplicate-message">Are you sure you want to add it?</p>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary btn-lg" onclick="cancelDuplicate()">No</button>
|
||||
<button type="button" class="btn btn-lg" style="background: var(--color-warning); color: var(--color-bg);" onclick="confirmDuplicate()">Yes, Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weight Entry Modal -->
|
||||
<div id="weightModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h3 class="modal-title">Enter Weight</h3>
|
||||
<div class="modal-lot-info">
|
||||
<div id="modalLotNumber" class="modal-lot-number"></div>
|
||||
</div>
|
||||
<form id="weightForm" class="weight-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Item Number (optional)</label>
|
||||
<input type="text" id="itemInput" class="form-input" placeholder="Item/SKU">
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
id="weightInput"
|
||||
class="weight-input"
|
||||
placeholder="Weight (lbs)"
|
||||
step="0.01"
|
||||
min="0"
|
||||
inputmode="decimal"
|
||||
autocomplete="off"
|
||||
required
|
||||
>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="cancelWeight()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanned Lots Grid -->
|
||||
<div class="scans-section">
|
||||
<div class="scans-header">
|
||||
<h3 class="scans-title">Scanned Lots (<span id="scanListCount">{{ scans|length }}</span>)</h3>
|
||||
</div>
|
||||
|
||||
<div id="scansList" class="scans-grid">
|
||||
{% for scan in scans %}
|
||||
<div class="scan-row scan-row-{{ scan.duplicate_status }}"
|
||||
data-detail-id="{{ scan.id }}"
|
||||
onclick="openScanDetail({{ scan.id }})">
|
||||
<div class="scan-row-lot">{{ scan.lot_number }}</div>
|
||||
<div class="scan-row-item">{{ scan.item_number or 'N/A' }}</div>
|
||||
<div class="scan-row-weight">{{ '%.1f'|format(scan.weight) if scan.weight else '-' }} lbs</div>
|
||||
<div class="scan-row-status">
|
||||
{% if scan.duplicate_status == 'dup_same_session' %}
|
||||
<span class="status-dot status-dot-blue"></span> Duplicate
|
||||
{% elif scan.duplicate_status == 'dup_other_session' %}
|
||||
<span class="status-dot status-dot-orange"></span> Warning
|
||||
{% else %}
|
||||
<span class="status-dot status-dot-green"></span> OK
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scan Detail/Edit Modal -->
|
||||
<div id="scanDetailModal" class="modal">
|
||||
<div class="modal-content modal-large">
|
||||
<div class="modal-header-bar">
|
||||
<h3 class="modal-title">Scan Details</h3>
|
||||
<button type="button" class="btn-close-modal" onclick="closeScanDetail()">✕</button>
|
||||
</div>
|
||||
<div id="scanDetailContent" class="scan-detail-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="finish-section">
|
||||
<div class="action-buttons-row">
|
||||
<a href="{{ url_for('cons_sheets.index') }}" class="btn btn-secondary btn-block btn-lg">
|
||||
← Back to Sessions
|
||||
</a>
|
||||
<button class="btn btn-success btn-block btn-lg" onclick="exportToExcel()">
|
||||
📊 Export to Excel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-values {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
.header-pill {
|
||||
background: var(--color-surface-elevated);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-pill strong {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.scan-row-dup_same_session {
|
||||
border-left: 4px solid var(--color-duplicate) !important;
|
||||
background: rgba(0, 163, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.scan-row-dup_other_session {
|
||||
border-left: 4px solid var(--color-warning) !important;
|
||||
background: rgba(255, 170, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.scan-row-normal {
|
||||
border-left: 4px solid var(--color-success);
|
||||
}
|
||||
|
||||
.modal-duplicate {
|
||||
text-align: center;
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.duplicate-lot-number {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.duplicate-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.duplicate-message {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let currentLotNumber = '';
|
||||
let currentDuplicateStatus = '';
|
||||
let currentDuplicateInfo = '';
|
||||
let isDuplicateConfirmed = false;
|
||||
let isProcessing = false;
|
||||
|
||||
// Lot scan handler
|
||||
document.getElementById('lotScanForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
if (isProcessing) return;
|
||||
|
||||
const scannedValue = document.getElementById('lotInput').value.trim();
|
||||
if (!scannedValue) return;
|
||||
|
||||
isProcessing = true;
|
||||
currentLotNumber = scannedValue;
|
||||
document.getElementById('lotInput').value = '';
|
||||
|
||||
checkDuplicate();
|
||||
});
|
||||
|
||||
function checkDuplicate() {
|
||||
fetch('{{ url_for("cons_sheets.scan_lot", session_id=session.id) }}', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
lot_number: currentLotNumber,
|
||||
check_only: true
|
||||
})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.needs_confirmation) {
|
||||
currentDuplicateStatus = data.duplicate_status;
|
||||
currentDuplicateInfo = data.duplicate_info;
|
||||
|
||||
if (data.duplicate_status === 'dup_same_session') {
|
||||
document.getElementById('dupSameLotNumber').textContent = currentLotNumber;
|
||||
document.getElementById('duplicateSameModal').style.display = 'flex';
|
||||
} else if (data.duplicate_status === 'dup_other_session') {
|
||||
document.getElementById('dupOtherLotNumber').textContent = currentLotNumber;
|
||||
document.getElementById('dupOtherInfo').textContent = data.duplicate_info;
|
||||
document.getElementById('duplicateOtherModal').style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
showWeightModal();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showWeightModal();
|
||||
});
|
||||
}
|
||||
|
||||
function confirmDuplicate() {
|
||||
isDuplicateConfirmed = true;
|
||||
document.getElementById('duplicateSameModal').style.display = 'none';
|
||||
document.getElementById('duplicateOtherModal').style.display = 'none';
|
||||
showWeightModal();
|
||||
}
|
||||
|
||||
function cancelDuplicate() {
|
||||
document.getElementById('duplicateSameModal').style.display = 'none';
|
||||
document.getElementById('duplicateOtherModal').style.display = 'none';
|
||||
document.getElementById('lotInput').focus();
|
||||
isDuplicateConfirmed = false;
|
||||
isProcessing = false;
|
||||
currentDuplicateStatus = '';
|
||||
}
|
||||
|
||||
function showWeightModal() {
|
||||
document.getElementById('modalLotNumber').textContent = currentLotNumber;
|
||||
document.getElementById('weightModal').style.display = 'flex';
|
||||
document.getElementById('itemInput').value = '';
|
||||
document.getElementById('weightInput').value = '';
|
||||
document.getElementById('weightInput').focus();
|
||||
}
|
||||
|
||||
function cancelWeight() {
|
||||
document.getElementById('weightModal').style.display = 'none';
|
||||
document.getElementById('lotInput').focus();
|
||||
isDuplicateConfirmed = false;
|
||||
isProcessing = false;
|
||||
currentDuplicateStatus = '';
|
||||
}
|
||||
|
||||
// Weight form handler
|
||||
document.getElementById('weightForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const weight = document.getElementById('weightInput').value;
|
||||
const itemNumber = document.getElementById('itemInput').value.trim();
|
||||
|
||||
if (!weight || weight <= 0) {
|
||||
alert('Please enter a valid weight');
|
||||
return;
|
||||
}
|
||||
|
||||
submitScan(itemNumber, weight);
|
||||
});
|
||||
|
||||
function submitScan(itemNumber, weight) {
|
||||
fetch('{{ url_for("cons_sheets.scan_lot", session_id=session.id) }}', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
lot_number: currentLotNumber,
|
||||
item_number: itemNumber,
|
||||
weight: parseFloat(weight),
|
||||
confirm_duplicate: isDuplicateConfirmed
|
||||
})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
document.getElementById('weightModal').style.display = 'none';
|
||||
|
||||
// Update existing rows if needed
|
||||
if (data.updated_entry_ids && data.updated_entry_ids.length > 0) {
|
||||
data.updated_entry_ids.forEach(id => {
|
||||
const row = document.querySelector(`[data-detail-id="${id}"]`);
|
||||
if (row) {
|
||||
row.className = 'scan-row scan-row-dup_same_session';
|
||||
row.querySelector('.scan-row-status').innerHTML = '<span class="status-dot status-dot-blue"></span> Duplicate';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add new row
|
||||
addScanToList(data.detail_id, currentLotNumber, itemNumber, weight, data.duplicate_status);
|
||||
|
||||
// Reset state
|
||||
currentLotNumber = '';
|
||||
isDuplicateConfirmed = false;
|
||||
isProcessing = false;
|
||||
currentDuplicateStatus = '';
|
||||
document.getElementById('lotInput').focus();
|
||||
} else {
|
||||
alert(data.message || 'Error saving scan');
|
||||
isProcessing = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Error saving scan');
|
||||
isProcessing = false;
|
||||
});
|
||||
}
|
||||
|
||||
function addScanToList(detailId, lotNumber, itemNumber, weight, duplicateStatus) {
|
||||
const scansList = document.getElementById('scansList');
|
||||
|
||||
let statusClass = duplicateStatus || 'normal';
|
||||
let statusDot = 'green';
|
||||
let statusText = 'OK';
|
||||
|
||||
if (duplicateStatus === 'dup_same_session') {
|
||||
statusDot = 'blue';
|
||||
statusText = 'Duplicate';
|
||||
} else if (duplicateStatus === 'dup_other_session') {
|
||||
statusDot = 'orange';
|
||||
statusText = 'Warning';
|
||||
}
|
||||
|
||||
const scanRow = document.createElement('div');
|
||||
scanRow.className = 'scan-row scan-row-' + statusClass;
|
||||
scanRow.setAttribute('data-detail-id', detailId);
|
||||
scanRow.onclick = function() { openScanDetail(detailId); };
|
||||
scanRow.innerHTML = `
|
||||
<div class="scan-row-lot">${lotNumber}</div>
|
||||
<div class="scan-row-item">${itemNumber || 'N/A'}</div>
|
||||
<div class="scan-row-weight">${parseFloat(weight).toFixed(1)} lbs</div>
|
||||
<div class="scan-row-status">
|
||||
<span class="status-dot status-dot-${statusDot}"></span> ${statusText}
|
||||
</div>
|
||||
`;
|
||||
|
||||
scansList.insertBefore(scanRow, scansList.firstChild);
|
||||
|
||||
// Update count
|
||||
const countSpan = document.getElementById('scanListCount');
|
||||
const scanCountSpan = document.getElementById('scanCount');
|
||||
const newCount = scansList.children.length;
|
||||
if (countSpan) countSpan.textContent = newCount;
|
||||
if (scanCountSpan) scanCountSpan.textContent = newCount;
|
||||
}
|
||||
|
||||
function openScanDetail(detailId) {
|
||||
fetch('/cons-sheets/detail/' + detailId)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
displayScanDetail(data.detail);
|
||||
} else {
|
||||
alert('Error loading details');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function displayScanDetail(detail) {
|
||||
const content = document.getElementById('scanDetailContent');
|
||||
|
||||
let statusBadge = '<span class="badge badge-success">✓ OK</span>';
|
||||
if (detail.duplicate_status === 'dup_same_session') {
|
||||
statusBadge = '<span class="badge badge-duplicate">🔵 Duplicate (Same Session)</span>';
|
||||
} else if (detail.duplicate_status === 'dup_other_session') {
|
||||
statusBadge = '<span class="badge badge-warning">🟠 Previously Consumed</span>';
|
||||
}
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="detail-section">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Lot Number:</span>
|
||||
<span class="detail-value detail-lot">${detail.lot_number}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value">${statusBadge}</span>
|
||||
</div>
|
||||
${detail.duplicate_info ? `<div class="detail-row"><span class="detail-label">Info:</span><span class="detail-value">${detail.duplicate_info}</span></div>` : ''}
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Scanned:</span>
|
||||
<span class="detail-value">${detail.scanned_at} by ${detail.scanned_by_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h4 class="detail-section-title">Edit Scan</h4>
|
||||
<div class="detail-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Item Number</label>
|
||||
<input type="text" id="editItem" class="form-input" value="${detail.item_number || ''}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Lot Number</label>
|
||||
<input type="text" id="editLot" class="form-input" value="${detail.lot_number || ''}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Weight (lbs)</label>
|
||||
<input type="number" id="editWeight" class="form-input" value="${detail.weight || ''}" step="0.01" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Comment</label>
|
||||
<textarea id="editComment" class="form-textarea" rows="3">${detail.comment || ''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-actions">
|
||||
<button class="btn btn-secondary" onclick="closeScanDetail()">Cancel</button>
|
||||
<button class="btn btn-danger" onclick="deleteDetail(${detail.id})">Delete</button>
|
||||
<button class="btn btn-primary" onclick="saveDetail(${detail.id})">Save Changes</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('scanDetailModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeScanDetail() {
|
||||
document.getElementById('scanDetailModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function saveDetail(detailId) {
|
||||
const item = document.getElementById('editItem').value.trim();
|
||||
const lot = document.getElementById('editLot').value.trim();
|
||||
const weight = document.getElementById('editWeight').value;
|
||||
const comment = document.getElementById('editComment').value;
|
||||
|
||||
if (!lot) {
|
||||
alert('Lot number is required');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/cons-sheets/detail/' + detailId + '/update', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ item_number: item, lot_number: lot, weight: parseFloat(weight), comment: comment })
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
closeScanDetail();
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.message || 'Error updating');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteDetail(detailId) {
|
||||
if (!confirm('Delete this scan?')) return;
|
||||
|
||||
fetch('/cons-sheets/detail/' + detailId + '/delete', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
closeScanDetail();
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.message || 'Error deleting');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
alert('Excel export coming soon! For now, you can view and print the data from the admin panel.');
|
||||
// TODO: Implement Excel export
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
document.getElementById('weightModal').style.display = 'none';
|
||||
document.getElementById('duplicateSameModal').style.display = 'none';
|
||||
document.getElementById('duplicateOtherModal').style.display = 'none';
|
||||
document.getElementById('scanDetailModal').style.display = 'none';
|
||||
document.getElementById('lotInput').focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
166
templates/cons_sheets/staff_index.html
Normal file
166
templates/cons_sheets/staff_index.html
Normal file
@@ -0,0 +1,166 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Consumption Sheets - ScanLook{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dashboard-container">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<a href="{{ url_for('home') }}" class="breadcrumb">← Back to Home</a>
|
||||
<h1 class="page-title">Consumption Sheets</h1>
|
||||
<p class="page-subtitle">Scan and record lot consumption</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Session Button -->
|
||||
<div class="new-session-section">
|
||||
<h2 class="section-title">Start New Session</h2>
|
||||
<div class="process-buttons">
|
||||
{% for p in processes %}
|
||||
<a href="{{ url_for('cons_sheets.new_session', process_id=p.id) }}" class="btn btn-primary">
|
||||
<span class="btn-icon">+</span> {{ p.process_name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% if not processes %}
|
||||
<p class="empty-text">No process types configured yet. Contact your administrator.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Sessions -->
|
||||
{% if sessions %}
|
||||
<div class="section-card">
|
||||
<h2 class="section-title">📋 My Active Sessions</h2>
|
||||
<div class="sessions-list">
|
||||
{% for s in sessions %}
|
||||
<div class="session-list-item-container">
|
||||
<a href="{{ url_for('cons_sheets.scan_session', session_id=s.id) }}" class="session-list-item">
|
||||
<div class="session-list-info">
|
||||
<h3 class="session-list-name">{{ s.process_name }}</h3>
|
||||
<div class="session-list-meta">
|
||||
<span>Started: {{ s.created_at[:16] }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ s.scan_count or 0 }} lots scanned</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-list-action">
|
||||
<span class="arrow-icon">→</span>
|
||||
</div>
|
||||
</a>
|
||||
<button class="btn-archive" onclick="archiveSession({{ s.id }}, '{{ s.process_name }}')" title="Archive this session">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📝</div>
|
||||
<h2 class="empty-title">No Active Sessions</h2>
|
||||
<p class="empty-text">Start a new session by selecting a process type above</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.new-session-section {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.process-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.section-card {
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.session-list-item-container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.session-list-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.session-list-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.session-list-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.session-list-meta {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-archive {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
cursor: pointer;
|
||||
font-size: 1.25rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-archive:hover {
|
||||
border-color: var(--color-danger);
|
||||
background: rgba(255, 51, 102, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function archiveSession(sessionId, processName) {
|
||||
if (!confirm(`Archive this ${processName} session?\n\nYou can still view it later from the admin panel.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/cons-sheets/session/${sessionId}/archive`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert(data.message || 'Error archiving session');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user