ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 1: Responsive tables and Tailwind CSS standardization

Browse source 
- Added responsive table styles with mobile card layouts to base.html
- Converted all templates from Bootstrap/plain CSS to Tailwind CSS
- Implemented responsive tables with horizontal scroll on desktop
- Added mobile card layouts for better readability on small screens
- Standardized form layouts with Tailwind responsive grid
- Updated all 15 templates for consistent styling:
  * base.html (responsive table CSS)
  * index.html (responsive tables + mobile cards)
  * students.html (Bootstrap -> Tailwind)
  * student_detail.html (Bootstrap -> Tailwind)
  * add_student.html (Bootstrap -> Tailwind)
  * edit_student.html (Bootstrap -> Tailwind)
  * import_students.html (Bootstrap -> Tailwind)
  * loan_tablet.html (Bootstrap -> Tailwind)
  * history.html (plain CSS -> Tailwind)
  * non_loanable_devices.html (plain CSS -> Tailwind)
  * add_non_loanable_device.html (plain CSS -> Tailwind)
  * edit_non_loanable_device.html (plain CSS -> Tailwind)
  * add_tablet.html (plain CSS -> Tailwind)
  * add_user.html (plain CSS -> Tailwind)
  * project_management.html (plain CSS -> Tailwind)
This commit is contained in:
ijuanes 2026-06-24 15:53:55 +01:00
parent 1b28021134
commit 06da5bdf2f
15 changed files with 1766 additions and 1229 deletions
Download patch file Download diff file Expand all files Collapse all files

103
templates/add_non_loanable_device.html
View file

@ -1,13 +1,24 @@
{% extends "base.html" %}
{% block content %}
<h2>{{ _('Add Non-Loanable Device') }}</h2>
<p>{{ _('Add a device that will be tracked in inventory but cannot be loaned to users (e.g., projectors, monitors, etc.)') }}</p>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Add Non-Loanable Device') }}</h1>
<p class="text-gray-600 mt-1">{{ _('Add a device that will be tracked in inventory but cannot be loaned to users (e.g., projectors, monitors, etc.)') }}</p>
</div>
<form method="POST" action="/add_non_loanable_device">
<div class="form-group">
<label for="device_type">{{ _('Device Type') }}:</label>
<select id="device_type" name="device_type" required>
{# Device Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ _('Device Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="/add_non_loanable_device" class="space-y-6">
<div>
<label for="device_type" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Device Type') }} *</label>
<select id="device_type" name="device_type" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<option value="">{{ _('Select device type...') }}</option>
<option value="projector">{{ _('Projector') }}</option>
<option value="monitor">{{ _('Monitor') }}</option>
@ -20,44 +31,76 @@
</select>
</div>
<div class="form-group">
<label for="brand">{{ _('Brand') }}:</label>
<input type="text" id="brand" name="brand" required>
<div>
<label for="brand" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Brand') }} *</label>
<input type="text" id="brand" name="brand" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., Epson, Samsung, Dell') }}">
</div>
<div class="form-group">
<label for="model">{{ _('Model') }}:</label>
<input type="text" id="model" name="model" required>
<div>
<label for="model" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Model') }} *</label>
<input type="text" id="model" name="model" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., PowerLite 2250U, UltraSharp U2723QE') }}">
</div>
<div class="form-group">
<label for="serial_number">{{ _('Serial Number') }}:</label>
<input type="text" id="serial_number" name="serial_number" required>
<div>
<label for="serial_number" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Serial Number') }} *</label>
<input type="text" id="serial_number" name="serial_number" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Unique serial number') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Each device must have a unique serial number') }}</p>
</div>
<div class="form-group">
<label for="location">{{ _('Location') }}:</label>
<input type="text" id="location" name="location">
<div>
<label for="location" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Location') }}</label>
<input type="text" id="location" name="location"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., Room 101, Lab A, Storage') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Optional location where the device is stored') }}</p>
</div>
<div class="form-group">
<label for="purchase_date">{{ _('Purchase Date') }}:</label>
<input type="date" id="purchase_date" name="purchase_date">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="purchase_date" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Purchase Date') }}</label>
<input type="date" id="purchase_date" name="purchase_date"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
</div>
<div class="form-group">
<label for="purchase_cost">{{ _('Purchase Cost') }}:</label>
<input type="number" id="purchase_cost" name="purchase_cost" step="0.01">
<div>
<label for="purchase_cost" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Purchase Cost') }}</label>
<input type="number" id="purchase_cost" name="purchase_cost" step="0.01"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('0.00') }}">
</div>
</div>
<div class="form-group">
<label for="notes">{{ _('Notes') }}:</label>
<textarea id="notes" name="notes"></textarea>
<div>
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Notes') }}</label>
<textarea id="notes" name="notes" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Optional notes about the device (condition, accessories, etc.)') }}"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn">{{ _('Add Device') }}</button>
<a href="/non_loanable_devices" class="btn">{{ _('Cancel') }}</a>
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="/non_loanable_devices"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ _('Cancel') }}
</a>
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ _('Add Device') }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

218
templates/add_student.html
View file

@ -3,137 +3,141 @@
{% block title %}{{ gettext('Add Student') }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h1 class="page-title">{{ gettext('Add Student') }}</h1>
<div class="card">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Student Information') }}</h5>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Add Student') }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Register a new student in the system') }}</p>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('add_student') }}">
<!-- Identification Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Identification') }}</legend>
{# Student Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Student Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="{{ url_for('add_student') }}" class="space-y-6">
{# Identification Section #}
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-2">{{ gettext('Identification') }}</h3>
<div class="row mb-3">
<label for="cial_code" class="col-sm-3 col-form-label">{{ gettext('CIAL Code') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cial_code" name="cial_code"
<div>
<label for="cial_code" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('CIAL Code') }} *</label>
<input type="text" id="cial_code" name="cial_code" required autofocus
value="{{ request.form.cial_code if request.method == 'POST' else '' }}"
required autofocus>
<div class="form-text">{{ gettext('Unique internal identification code') }}</div>
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Unique internal identification code') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Unique internal identification code') }}</p>
</div>
<div>
<label for="nif_nie_passport" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('NIF/NIE/Passport') }}</label>
<input type="text" id="nif_nie_passport" name="nif_nie_passport"
value="{{ request.form.nif_nie_passport if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('National ID, Foreign ID, or Passport number') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('National ID, Foreign ID, or Passport number') }}</p>
</div>
<div>
<label for="registration_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Registration Number') }}</label>
<input type="number" id="registration_number" name="registration_number"
value="{{ request.form.registration_number if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional registration number') }}">
</div>
<div>
<label for="file_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('File Number') }}</label>
<input type="text" id="file_number" name="file_number"
value="{{ request.form.file_number if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional file number') }}">
</div>
<div>
<label for="order_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Order Number') }}</label>
<input type="number" id="order_number" name="order_number"
value="{{ request.form.order_number if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional order number') }}">
</div>
</div>
<div class="row mb-3">
<label for="nif_nie_passport" class="col-sm-3 col-form-label">{{ gettext('NIF/NIE/Passport') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="nif_nie_passport" name="nif_nie_passport"
value="{{ request.form.nif_nie_passport if request.method == 'POST' else '' }}">
<div class="form-text">{{ gettext('National ID, Foreign ID, or Passport number') }}</div>
</div>
</div>
{# Personal Information Section #}
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-2">{{ gettext('Personal Information') }}</h3>
<div class="row mb-3">
<label for="registration_number" class="col-sm-3 col-form-label">{{ gettext('Registration Number') }}</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="registration_number" name="registration_number"
value="{{ request.form.registration_number if request.method == 'POST' else '' }}">
</div>
</div>
<div class="row mb-3">
<label for="file_number" class="col-sm-3 col-form-label">{{ gettext('File Number') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="file_number" name="file_number"
value="{{ request.form.file_number if request.method == 'POST' else '' }}">
</div>
</div>
<div class="row mb-3">
<label for="order_number" class="col-sm-3 col-form-label">{{ gettext('Order Number') }}</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="order_number" name="order_number"
value="{{ request.form.order_number if request.method == 'POST' else '' }}">
</div>
</div>
</fieldset>
<!-- Personal Information Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Personal Information') }}</legend>
<div class="row mb-3">
<label for="last_name" class="col-sm-3 col-form-label">{{ gettext('Last Name') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="last_name" name="last_name"
value="{{ request.form.last_name if request.method == 'POST' else '' }}"
required>
</div>
</div>
<div class="row mb-3">
<label for="first_name" class="col-sm-3 col-form-label">{{ gettext('First Name') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="first_name" name="first_name"
<div>
<label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('First Name') }} *</label>
<input type="text" id="first_name" name="first_name" required
value="{{ request.form.first_name if request.method == 'POST' else '' }}"
required>
</div>
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Student first name') }}">
</div>
<div class="row mb-3">
<label for="birth_date" class="col-sm-3 col-form-label">{{ gettext('Birth Date') }}</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="birth_date" name="birth_date"
value="{{ request.form.birth_date if request.method == 'POST' else '' }}">
<div class="form-text">{{ gettext('Format: YYYY-MM-DD') }}</div>
</div>
<div>
<label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Last Name') }} *</label>
<input type="text" id="last_name" name="last_name" required
value="{{ request.form.last_name if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Student last name') }}">
</div>
<div class="row mb-3">
<label for="gender" class="col-sm-3 col-form-label">{{ gettext('Gender') }}</label>
<div class="col-sm-9">
<select class="form-select" id="gender" name="gender">
<option value="">{{ gettext('Select...') }}</option>
<option value="M" {% if request.method == 'POST' and request.form.gender == 'M' %}selected{% endif %}>{{ gettext('Male') }}</option>
<option value="F" {% if request.method == 'POST' and request.form.gender == 'F' %}selected{% endif %}>{{ gettext('Female') }}</option>
<option value="O" {% if request.method == 'POST' and request.form.gender == 'O' %}selected{% endif %}>{{ gettext('Other') }}</option>
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Full Name') }} *</label>
<input type="text" id="full_name" name="full_name" required
value="{{ request.form.full_name if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Complete name') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Full name for display purposes') }}</p>
</div>
<div>
<label for="birth_date" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Birth Date') }}</label>
<input type="date" id="birth_date" name="birth_date"
value="{{ request.form.birth_date if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
</div>
<div>
<label for="gender" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Gender') }}</label>
<select id="gender" name="gender"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<option value="">{{ gettext('Select gender') }}</option>
<option value="M" {% if request.form.gender == 'M' %}selected{% endif %}>M</option>
<option value="F" {% if request.form.gender == 'F' %}selected{% endif %}>F</option>
</select>
</div>
</div>
</fieldset>
<!-- Study Information Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Study Information') }}</legend>
<div class="row mb-3">
<label for="study_group" class="col-sm-3 col-form-label">{{ gettext('Study Group') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="study_group" name="study_group"
value="{{ request.form.study_group if request.method == 'POST' else '' }}">
<div class="form-text">{{ gettext('E.g., 1º FPB BÁSICA') }}</div>
<div>
<label for="study_group" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Study Group') }}</label>
<input type="text" id="study_group" name="study_group"
value="{{ request.form.study_group if request.method == 'POST' else '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('e.g., 2º ESO A, 3º ESO B') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Class or study group') }}</p>
</div>
</div>
</fieldset>
<!-- Form Actions -->
<div class="d-flex justify-content-end gap-2">
<a href="{{ url_for('list_students') }}" class="btn btn-secondary">
<i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ url_for('list_students') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ gettext('Cancel') }}
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> {{ gettext('Save Student') }}
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ gettext('Add Student') }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

69
templates/add_tablet.html
View file

@ -1,30 +1,67 @@
{% extends "base.html" %}
{% block content %}
<h2>{{ _('Add New Tablet') }}</h2>
<form method="POST" action="/add_tablet">
<div class="form-group">
<label for="brand">{{ _('Brand') }}:</label>
<input type="text" id="brand" name="brand" required>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Add New Tablet') }}</h1>
<p class="text-gray-600 mt-1">{{ _('Register a new tablet in the system') }}</p>
</div>
<div class="form-group">
<label for="model">{{ _('Model') }}:</label>
<input type="text" id="model" name="model" required>
{# Tablet Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ _('Tablet Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="/add_tablet" class="space-y-6">
<div>
<label for="brand" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Brand') }} *</label>
<input type="text" id="brand" name="brand" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., Apple, Samsung, Lenovo') }}">
</div>
<div class="form-group">
<label for="serial_number">{{ _('Serial Number') }}:</label>
<input type="text" id="serial_number" name="serial_number" required>
<div>
<label for="model" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Model') }} *</label>
<input type="text" id="model" name="model" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., iPad 10th Gen, Galaxy Tab A8') }}">
</div>
<div class="form-group">
<label for="notes">{{ _('Notes') }}:</label>
<textarea id="notes" name="notes"></textarea>
<div>
<label for="serial_number" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Serial Number') }} *</label>
<input type="text" id="serial_number" name="serial_number" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Unique serial number') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Each tablet must have a unique serial number') }}</p>
</div>
<div class="form-group">
<button type="submit" class="btn">{{ _('Add Tablet') }}</button>
<div>
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Notes') }}</label>
<textarea id="notes" name="notes" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Optional notes about the tablet (condition, accessories, etc.)') }}"></textarea>
</div>
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="/"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ _('Cancel') }}
</a>
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ _('Add Tablet') }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

71
templates/add_user.html
View file

@ -1,30 +1,69 @@
{% extends "base.html" %}
{% block content %}
<h2>{{ _('Add New User') }}</h2>
<form method="POST" action="/add_user">
<div class="form-group">
<label for="name">{{ _('Name') }}:</label>
<input type="text" id="name" name="name" required>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Add New User') }}</h1>
<p class="text-gray-600 mt-1">{{ _('Register a new staff user in the system') }}</p>
</div>
<div class="form-group">
<label for="email">{{ _('Email') }}:</label>
<input type="email" id="email" name="email">
{# User Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ _('User Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="/add_user" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Name') }} *</label>
<input type="text" id="name" name="name" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Full name') }}">
</div>
<div class="form-group">
<label for="phone">{{ _('Phone') }}:</label>
<input type="text" id="phone" name="phone">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Email') }}</label>
<input type="email" id="email" name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('user@example.com') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Optional email address') }}</p>
</div>
<div class="form-group">
<label for="identification">{{ _('Identification') }}:</label>
<input type="text" id="identification" name="identification" required>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Phone') }}</label>
<input type="text" id="phone" name="phone"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Phone number') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Optional phone number') }}</p>
</div>
<div class="form-group">
<button type="submit" class="btn">{{ _('Add User') }}</button>
<div>
<label for="identification" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Identification') }} *</label>
<input type="text" id="identification" name="identification" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Employee ID, badge number, etc.') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Unique identification for the staff member') }}</p>
</div>
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="/"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ _('Cancel') }}
</a>
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
{{ _('Add User') }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

88
templates/base.html
View file

@ -125,6 +125,94 @@
background-color: #374151;
color: #e0e0e0;
}
/* Responsive Table Styles */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.table-responsive {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.table-responsive thead {
background-color: #f9fafb;
}
.table-responsive th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border-bottom: 2px solid #e5e7eb;
}
.table-responsive td {
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #374151;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.table-responsive tbody tr:hover {
background-color: #f9fafb;
}
/* Mobile Card Layout */
@media (max-width: 640px) {
.table-card-mobile {
display: none;
}
.mobile-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mobile-card {
background-color: white;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.mobile-card .card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0;
border-bottom: 1px solid #f3f4f6;
}
.mobile-card .card-row:last-child {
border-bottom: none;
}
.mobile-card .card-label {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mobile-card .card-value {
font-size: 0.875rem;
color: #374151;
text-align: right;
}
}
</style>
<!-- Tailwind config for custom corporate colors -->

109
templates/edit_non_loanable_device.html
View file

@ -1,12 +1,24 @@
{% extends "base.html" %}
{% block content %}
<h2>{{ _('Edit Non-Loanable Device') }}</h2>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Edit Non-Loanable Device') }}</h1>
<p class="text-gray-600 mt-1">{{ _('Update device information') }}</p>
</div>
<form method="POST" action="/edit_non_loanable_device/{{ device.id }}">
<div class="form-group">
<label for="device_type">{{ _('Device Type') }}:</label>
<select id="device_type" name="device_type" required>
{# Device Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ _('Device Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="/edit_non_loanable_device/{{ device.id }}" class="space-y-6">
<div>
<label for="device_type" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Device Type') }} *</label>
<select id="device_type" name="device_type" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<option value="projector" {% if device.device_type == 'projector' %}selected{% endif %}>{{ _('Projector') }}</option>
<option value="monitor" {% if device.device_type == 'monitor' %}selected{% endif %}>{{ _('Monitor') }}</option>
<option value="laptop" {% if device.device_type == 'laptop' %}selected{% endif %}>{{ _('Laptop (non-loanable)') }}</option>
@ -18,29 +30,40 @@
</select>
</div>
<div class="form-group">
<label for="brand">{{ _('Brand') }}:</label>
<input type="text" id="brand" name="brand" value="{{ device.brand }}" required>
<div>
<label for="brand" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Brand') }} *</label>
<input type="text" id="brand" name="brand" value="{{ device.brand }}" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., Epson, Samsung, Dell') }}">
</div>
<div class="form-group">
<label for="model">{{ _('Model') }}:</label>
<input type="text" id="model" name="model" value="{{ device.model }}" required>
<div>
<label for="model" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Model') }} *</label>
<input type="text" id="model" name="model" value="{{ device.model }}" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., PowerLite 2250U, UltraSharp U2723QE') }}">
</div>
<div class="form-group">
<label for="serial_number">{{ _('Serial Number') }}:</label>
<input type="text" id="serial_number" name="serial_number" value="{{ device.serial_number }}" required>
<div>
<label for="serial_number" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Serial Number') }} *</label>
<input type="text" id="serial_number" name="serial_number" value="{{ device.serial_number }}" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Unique serial number') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Each device must have a unique serial number') }}</p>
</div>
<div class="form-group">
<label for="location">{{ _('Location') }}:</label>
<input type="text" id="location" name="location" value="{{ device.location or '' }}">
<div>
<label for="location" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Location') }}</label>
<input type="text" id="location" name="location" value="{{ device.location or '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('e.g., Room 101, Lab A, Storage') }}">
<p class="mt-1 text-sm text-gray-500">{{ _('Optional location where the device is stored') }}</p>
</div>
<div class="form-group">
<label for="status">{{ _('Status') }}:</label>
<select id="status" name="status" required>
<div>
<label for="status" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Status') }} *</label>
<select id="status" name="status" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<option value="available" {% if device.status == 'available' %}selected{% endif %}>{{ _('Available') }}</option>
<option value="in_use" {% if device.status == 'in_use' %}selected{% endif %}>{{ _('In Use') }}</option>
<option value="maintenance" {% if device.status == 'maintenance' %}selected{% endif %}>{{ _('Maintenance') }}</option>
@ -48,24 +71,46 @@
</select>
</div>
<div class="form-group">
<label for="purchase_date">{{ _('Purchase Date') }}:</label>
<input type="date" id="purchase_date" name="purchase_date" value="{{ device.purchase_date or '' }}">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="purchase_date" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Purchase Date') }}</label>
<input type="date" id="purchase_date" name="purchase_date" value="{{ device.purchase_date or '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
</div>
<div class="form-group">
<label for="purchase_cost">{{ _('Purchase Cost') }}:</label>
<input type="number" id="purchase_cost" name="purchase_cost" step="0.01" value="{{ device.purchase_cost or '' }}">
<div>
<label for="purchase_cost" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Purchase Cost') }}</label>
<input type="number" id="purchase_cost" name="purchase_cost" step="0.01" value="{{ device.purchase_cost or '' }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('0.00') }}">
</div>
</div>
<div class="form-group">
<label for="notes">{{ _('Notes') }}:</label>
<textarea id="notes" name="notes">{{ device.notes or '' }}</textarea>
<div>
<label for="notes" class="block text-sm font-medium text-gray-700 mb-1">{{ _('Notes') }}</label>
<textarea id="notes" name="notes" rows="3"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ _('Optional notes about the device (condition, accessories, etc.)') }}">{{ device.notes or '' }}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn">{{ _('Update Device') }}</button>
<a href="/non_loanable_devices" class="btn">{{ _('Cancel') }}</a>
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="/non_loanable_devices"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ _('Cancel') }}
</a>
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
{{ _('Update Device') }}
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

245
templates/edit_student.html
View file

@ -3,145 +3,166 @@
{% block title %}{{ gettext('Edit Student') }} - {{ student.full_name }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ url_for('list_students') }}">{{ gettext('Students') }}</a></li>
<li class="breadcrumb-item"><a href="{{ url_for('student_detail', student_id=student.id) }}">{{ student.full_name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ gettext('Edit') }}</li>
<div class="max-w-2xl mx-auto space-y-6">
{# Breadcrumb #}
<nav class="flex" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2">
<li>
<a href="{{ url_for('list_students') }}" class="text-cobalt-600 hover:text-cobalt-800">{{ gettext('Students') }}</a>
</li>
<li>
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
</li>
<li>
<a href="{{ url_for('student_detail', student_id=student.id) }}" class="text-cobalt-600 hover:text-cobalt-800">{{ student.full_name }}</a>
</li>
<li>
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
</li>
<li>
<span class="text-gray-500">{{ gettext('Edit') }}</span>
</li>
</ol>
</nav>
<h1 class="page-title">{{ gettext('Edit Student') }}: {{ student.full_name }}</h1>
<div class="card">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Student Information') }}</h5>
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Edit Student') }}: {{ student.full_name }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Update student information') }}</p>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('edit_student', student_id=student.id) }}">
<!-- Identification Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Identification') }}</legend>
{# Student Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Student Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="{{ url_for('edit_student', student_id=student.id) }}" class="space-y-6">
{# Identification Section #}
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-2">{{ gettext('Identification') }}</h3>
<div class="row mb-3">
<label for="cial_code" class="col-sm-3 col-form-label">{{ gettext('CIAL Code') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cial_code" name="cial_code"
<div>
<label for="cial_code" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('CIAL Code') }} *</label>
<input type="text" id="cial_code" name="cial_code" required autofocus
value="{{ request.form.cial_code if request.method == 'POST' else student.cial_code }}"
required autofocus>
<div class="form-text">{{ gettext('Unique internal identification code') }}</div>
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Unique internal identification code') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Unique internal identification code') }}</p>
</div>
<div>
<label for="nif_nie_passport" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('NIF/NIE/Passport') }}</label>
<input type="text" id="nif_nie_passport" name="nif_nie_passport"
value="{{ request.form.nif_nie_passport if request.method == 'POST' else (student.nif_nie_passport or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('National ID, Foreign ID, or Passport number') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('National ID, Foreign ID, or Passport number') }}</p>
</div>
<div>
<label for="registration_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Registration Number') }}</label>
<input type="number" id="registration_number" name="registration_number"
value="{{ request.form.registration_number if request.method == 'POST' else (student.registration_number or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional registration number') }}">
</div>
<div>
<label for="file_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('File Number') }}</label>
<input type="text" id="file_number" name="file_number"
value="{{ request.form.file_number if request.method == 'POST' else (student.file_number or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional file number') }}">
</div>
<div>
<label for="order_number" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Order Number') }}</label>
<input type="number" id="order_number" name="order_number"
value="{{ request.form.order_number if request.method == 'POST' else (student.order_number or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Optional order number') }}">
</div>
</div>
<div class="row mb-3">
<label for="nif_nie_passport" class="col-sm-3 col-form-label">{{ gettext('NIF/NIE/Passport') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="nif_nie_passport" name="nif_nie_passport"
value="{{ request.form.nif_nie_passport if request.method == 'POST' else (student.nif_nie_passport or '') }}">
<div class="form-text">{{ gettext('National ID, Foreign ID, or Passport number') }}</div>
</div>
</div>
{# Personal Information Section #}
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 border-b border-gray-200 pb-2">{{ gettext('Personal Information') }}</h3>
<div class="row mb-3">
<label for="registration_number" class="col-sm-3 col-form-label">{{ gettext('Registration Number') }}</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="registration_number" name="registration_number"
value="{{ request.form.registration_number if request.method == 'POST' else (student.registration_number or '') }}">
</div>
</div>
<div class="row mb-3">
<label for="file_number" class="col-sm-3 col-form-label">{{ gettext('File Number') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="file_number" name="file_number"
value="{{ request.form.file_number if request.method == 'POST' else (student.file_number or '') }}">
</div>
</div>
<div class="row mb-3">
<label for="order_number" class="col-sm-3 col-form-label">{{ gettext('Order Number') }}</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="order_number" name="order_number"
value="{{ request.form.order_number if request.method == 'POST' else (student.order_number or '') }}">
</div>
</div>
</fieldset>
<!-- Personal Information Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Personal Information') }}</legend>
<div class="row mb-3">
<label for="last_name" class="col-sm-3 col-form-label">{{ gettext('Last Name') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="last_name" name="last_name"
value="{{ request.form.last_name if request.method == 'POST' else student.last_name }}"
required>
</div>
</div>
<div class="row mb-3">
<label for="first_name" class="col-sm-3 col-form-label">{{ gettext('First Name') }} *</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="first_name" name="first_name"
<div>
<label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('First Name') }} *</label>
<input type="text" id="first_name" name="first_name" required
value="{{ request.form.first_name if request.method == 'POST' else student.first_name }}"
required>
</div>
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Student first name') }}">
</div>
<div class="row mb-3">
<label for="birth_date" class="col-sm-3 col-form-label">{{ gettext('Birth Date') }}</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="birth_date" name="birth_date"
value="{{ request.form.birth_date if request.method == 'POST' else (student.birth_date or '') }}">
<div class="form-text">{{ gettext('Format: YYYY-MM-DD') }}</div>
</div>
<div>
<label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Last Name') }} *</label>
<input type="text" id="last_name" name="last_name" required
value="{{ request.form.last_name if request.method == 'POST' else student.last_name }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Student last name') }}">
</div>
<div class="row mb-3">
<label for="gender" class="col-sm-3 col-form-label">{{ gettext('Gender') }}</label>
<div class="col-sm-9">
<select class="form-select" id="gender" name="gender">
<option value="">{{ gettext('Select...') }}</option>
<option value="M" {% if request.method == 'POST' and request.form.gender == 'M' %}selected{% elif student.gender == 'M' %}selected{% endif %}>{{ gettext('Male') }}</option>
<option value="F" {% if request.method == 'POST' and request.form.gender == 'F' %}selected{% elif student.gender == 'F' %}selected{% endif %}>{{ gettext('Female') }}</option>
<option value="O" {% if request.method == 'POST' and request.form.gender == 'O' %}selected{% elif student.gender == 'O' %}selected{% endif %}>{{ gettext('Other') }}</option>
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Full Name') }} *</label>
<input type="text" id="full_name" name="full_name" required
value="{{ request.form.full_name if request.method == 'POST' else student.full_name }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('Complete name') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Full name for display purposes') }}</p>
</div>
<div>
<label for="birth_date" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Birth Date') }}</label>
<input type="date" id="birth_date" name="birth_date"
value="{{ request.form.birth_date if request.method == 'POST' else (student.birth_date or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
</div>
<div>
<label for="gender" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Gender') }}</label>
<select id="gender" name="gender"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<option value="">{{ gettext('Select gender') }}</option>
<option value="M" {% if request.form.gender == 'M' or student.gender == 'M' %}selected{% endif %}>M</option>
<option value="F" {% if request.form.gender == 'F' or student.gender == 'F' %}selected{% endif %}>F</option>
</select>
</div>
</div>
</fieldset>
<!-- Study Information Section -->
<fieldset class="mb-4">
<legend class="text-primary">{{ gettext('Study Information') }}</legend>
<div class="row mb-3">
<label for="study_group" class="col-sm-3 col-form-label">{{ gettext('Study Group') }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="study_group" name="study_group"
value="{{ request.form.study_group if request.method == 'POST' else (student.study_group or '') }}">
<div class="form-text">{{ gettext('E.g., 1º FPB BÁSICA') }}</div>
<div>
<label for="study_group" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Study Group') }}</label>
<input type="text" id="study_group" name="study_group"
value="{{ request.form.study_group if request.method == 'POST' else (student.study_group or '') }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
placeholder="{{ gettext('e.g., 2º ESO A, 3º ESO B') }}">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Class or study group') }}</p>
</div>
</div>
</fieldset>
<!-- Form Actions -->
<div class="d-flex justify-content-end gap-2">
<a href="{{ url_for('student_detail', student_id=student.id) }}" class="btn btn-secondary">
<i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ url_for('student_detail', student_id=student.id) }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ gettext('Cancel') }}
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> {{ gettext('Update Student') }}
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
{{ gettext('Save Changes') }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

126
templates/history.html
View file

@ -1,11 +1,26 @@
{% extends "base.html" %}
{% block content %}
<div class="section">
<h2>{{ _('Loan History') }}</h2>
<div class="space-y-6">
{# Page Header #}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Loan History') }}</h1>
<p class="text-gray-600 mt-1">{{ _('View all past and current tablet loans') }}</p>
</div>
<a href="/"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
{{ _('Back to Dashboard') }}
</a>
</div>
{% if loans %}
<div class="table-container">
<table>
{# Desktop Table (hidden on mobile) #}
<div class="table-container table-card-mobile">
<table class="table-responsive">
<thead>
<tr>
<th>{{ _('Tablet') }}</th>
@ -19,19 +34,106 @@
<tbody>
{% for loan in loans %}
<tr>
<td>{{ loan.brand }} {{ loan.model }}</td>
<td>{{ loan.serial_number }}</td>
<td>{{ loan.name }}</td>
<td>{{ loan.loan_date }}</td>
<td>{{ loan.return_date or '-' }}</td>
<td>{{ loan.status }}</td>
<td>
<div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
</td>
<td>
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
</td>
<td>
<div class="font-medium text-gray-900">{{ loan.name }}</div>
<div class="text-sm text-gray-500">{{ loan.identification }}</div>
</td>
<td class="text-sm text-gray-500">
{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}
<br>
<span class="text-xs">{{ loan.loan_date[11:16] if loan.loan_date else '' }}</span>
</td>
<td class="text-sm text-gray-500">
{% if loan.return_date %}
{{ loan.return_date[:10] }}
<br>
<span class="text-xs">{{ loan.return_date[11:16] }}</span>
{% else %}
<span class="text-gray-400">-</span>
{% endif %}
</td>
<td>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if loan.status == 'active' %}bg-green-100 text-green-800
{% elif loan.status == 'returned' %}bg-blue-100 text-blue-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
{{ loan.status }}
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p>{{ _('No loan history available.') }}</p>
{# Mobile Cards (hidden on desktop) #}
<div class="mobile-cards hidden">
{% for loan in loans %}
<div class="mobile-card">
<div class="flex justify-between items-start mb-3">
<div>
<div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
<div class="text-sm text-gray-500">{{ loan.name }}</div>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if loan.status == 'active' %}bg-green-100 text-green-800
{% elif loan.status == 'returned' %}bg-blue-100 text-blue-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
{{ loan.status }}
</span>
</div>
<div class="space-y-2">
<div class="card-row">
<span class="card-label">{{ _('Serial Number') }}</span>
<code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
</div>
<div class="card-row">
<span class="card-label">{{ _('Borrower') }}</span>
<div class="card-value text-right">
<div>{{ loan.name }}</div>
<div class="text-xs text-gray-500">{{ loan.identification }}</div>
</div>
</div>
<div class="card-row">
<span class="card-label">{{ _('Loan Date') }}</span>
<span class="card-value">{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}</span>
</div>
{% if loan.return_date %}
<div class="card-row">
<span class="card-label">{{ _('Return Date') }}</span>
<span class="card-value">{{ loan.return_date[:10] }}</span>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="bg-white rounded-lg shadow p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-gray-500">{{ _('No loan history available.') }}</p>
<a href="/loan_tablet"
class="mt-4 inline-block px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700">
{{ _('Create a Loan') }}
</a>
</div>
{% endif %}
</div>
<script>
// Show mobile cards on small screens
if (window.innerWidth <= 640) {
document.querySelector('.table-card-mobile').style.display = 'none';
document.querySelector('.mobile-cards').style.display = 'flex';
}
</script>
{% endblock %}

169
templates/import_students.html
View file

@ -3,65 +3,109 @@
{% block title %}{{ gettext('Import Students from CSV') }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h1 class="page-title">{{ gettext('Import Students from CSV') }}</h1>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Instructions') }}</h5>
<div class="max-w-4xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Import Students from CSV') }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Bulk import student data from a CSV file') }}</p>
</div>
<div class="card-body">
<ul>
<li>{{ gettext('Upload a CSV file with student data') }}</li>
<li>{{ gettext('The file should be encoded in ISO-8859-1 (Latin-1)') }}</li>
<li>{{ gettext('Required columns: Apellidos, Nombre (will be split), C.I.A.L., Fecha Nac.') }}</li>
<li>{{ gettext('Optional columns: NIF/NIE/Pas., Registro, Expediente, Sexo, Grupo') }}</li>
<li>{{ gettext('The "Estudio" column will be discarded') }}</li>
<li>{{ gettext('Duplicate students (by CIAL code or NIF/NIE) will be skipped') }}</li>
{# Instructions Card #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Instructions') }}</h2>
</div>
<div class="p-6">
<ul class="space-y-2 text-gray-700">
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('Upload a CSV file with student data') }}
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('The file should be encoded in ISO-8859-1 (Latin-1)') }}
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('Required columns: Apellidos, Nombre (will be split), C.I.A.L., Fecha Nac.') }}
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('Optional columns: NIF/NIE/Pas., Registro, Expediente, Sexo, Grupo') }}
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('The "Estudio" column will be discarded') }}
</li>
<li class="flex items-start gap-2">
<svg class="w-5 h-5 text-cobalt-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ gettext('Duplicate students (by CIAL code or NIF/NIE) will be skipped') }}
</li>
</ul>
<p class="text-muted">
<div class="mt-4 p-3 bg-gray-50 rounded-lg">
<p class="text-sm text-gray-600">
{{ gettext('Example CSV format:') }}<br>
<code>Nº Or.,"Apellidos, Nombre",Fecha Nac.,C.I.A.L.,NIF/NIE/Pas.,Registro,Expediente,Sexo,Grupo,Estudio</code>
<code class="text-xs bg-gray-200 px-2 py-1 rounded">Nº Or.,"Apellidos, Nombre",Fecha Nac.,C.I.A.L.,NIF/NIE/Pas.,Registro,Expediente,Sexo,Grupo,Estudio</code>
</p>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Upload CSV File') }}</h5>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('import_students') }}" enctype="multipart/form-data">
<div class="mb-3">
<label for="csv_file" class="form-label">{{ gettext('CSV File') }} *</label>
<input class="form-control" type="file" id="csv_file" name="csv_file"
accept=".csv" required>
<div class="form-text">{{ gettext('Select a CSV file to upload') }}</div>
</div>
<div class="d-flex justify-content-end gap-2">
<a href="{{ url_for('list_students') }}" class="btn btn-secondary">
<i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
{# Upload Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-green-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Upload CSV File') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="{{ url_for('import_students') }}" enctype="multipart/form-data" class="space-y-4">
<div>
<label for="csv_file" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('CSV File') }} *</label>
<input type="file" id="csv_file" name="csv_file" accept=".csv" required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500">
<p class="mt-1 text-sm text-gray-500">{{ gettext('Select a CSV file to upload') }}</p>
</div>
<div class="flex justify-end gap-3">
<a href="{{ url_for('list_students') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ gettext('Cancel') }}
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-upload"></i> {{ gettext('Import Students') }}
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
{{ gettext('Import Students') }}
</button>
</div>
</form>
</div>
</div>
<!-- Sample Data Preview -->
<div class="card mt-4">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Sample Data Format') }}</h5>
{# Sample Data Preview #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-gray-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Sample Data Format') }}</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-sm mb-0">
<thead class="table-light">
<div class="p-6">
<div class="table-container">
<table class="table-responsive">
<thead>
<tr>
<th>{{ gettext('Nº Or.') }}</th>
<th>{{ gettext('Apellidos, Nombre') }}</th>
@ -72,30 +116,41 @@
<th>{{ gettext('Expediente') }}</th>
<th>{{ gettext('Sexo') }}</th>
<th>{{ gettext('Grupo') }}</th>
<th>{{ gettext('Estudio') }}</th>
<th class="text-gray-400 line-through">{{ gettext('Estudio') }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>PERIQUITA DE LOS PALOTES, JUANITA</td>
<td>24/08/2009</td>
<td>B19L64119K</td>
<td>24587243H</td>
<td>4847</td>
<td></td>
<td>García López, María</td>
<td>15/03/2005</td>
<td>12345678A</td>
<td>12345678A</td>
<td>REG001</td>
<td>EXP001</td>
<td>F</td>
<td>2º ESO A</td>
<td class="text-gray-400 line-through">ESO</td>
</tr>
<tr>
<td>2</td>
<td>Martínez Ruiz, Carlos</td>
<td>22/07/2004</td>
<td>87654321B</td>
<td>87654321B</td>
<td>REG002</td>
<td>EXP002</td>
<td>M</td>
<td>1º FPB BÁSICA</td>
<td>1º CFGB Servicios Socioculturales...</td>
<td>3º ESO B</td>
<td class="text-gray-400 line-through">ESO</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-3 text-muted small">
{{ gettext('Note: The "Estudio" field will be discarded during import.') }}
</div>
</div>
</div>
<p class="mt-3 text-sm text-gray-500">
<span class="text-gray-400 line-through">{{ gettext('Estudio') }}</span>
{{ gettext('column will be discarded during import') }}
</p>
</div>
</div>
</div>

168
templates/index.html
View file

@ -18,43 +18,34 @@
</div>
{% if available_tablets %}
<div class="p-6 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
{# Desktop Table (hidden on mobile) #}
<div class="table-container table-card-mobile">
<table class="table-responsive">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Brand') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Model') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Serial Number') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Notes') }}
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Actions') }}
</th>
<th>{{ _('Brand') }}</th>
<th>{{ _('Model') }}</th>
<th>{{ _('Serial Number') }}</th>
<th>{{ _('Notes') }}</th>
<th class="text-right">{{ _('Actions') }}</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tbody>
{% for tablet in available_tablets %}
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<tr>
<td>
<div class="font-medium text-gray-900">{{ tablet.brand }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-500">
<td class="text-gray-500">
{{ tablet.model }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<td>
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ tablet.serial_number }}</code>
</td>
<td class="px-6 py-4 whitespace-nowrap text-gray-500">
<td class="text-gray-500">
{{ tablet.notes or '-' }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<td class="text-right">
<a href="/loan_tablet?tablet_id={{ tablet.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm hover:bg-green-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -69,6 +60,41 @@
</tbody>
</table>
</div>
{# Mobile Cards (hidden on desktop) #}
<div class="mobile-cards hidden p-6">
{% for tablet in available_tablets %}
<div class="mobile-card">
<div class="flex justify-between items-start mb-3">
<div>
<div class="font-medium text-gray-900">{{ tablet.brand }}</div>
<div class="text-sm text-gray-500">{{ tablet.model }}</div>
</div>
<a href="/loan_tablet?tablet_id={{ tablet.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm hover:bg-green-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ _('Loan') }}
</a>
</div>
<div class="space-y-2">
<div class="card-row">
<span class="card-label">{{ _('Serial Number') }}</span>
<code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ tablet.serial_number }}</code>
</div>
{% if tablet.notes %}
<div class="card-row">
<span class="card-label">{{ _('Notes') }}</span>
<span class="card-value text-sm">{{ tablet.notes }}</span>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="p-8 text-center text-gray-500">
<svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -100,45 +126,37 @@
</div>
{% if active_loans %}
<div class="p-6 overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
{# Desktop Table (hidden on mobile) #}
<div class="table-container table-card-mobile">
<table class="table-responsive">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Tablet') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Serial Number') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Borrower') }}
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Loan Date') }}
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
{{ _('Actions') }}
</th>
<th>{{ _('Tablet') }}</th>
<th>{{ _('Serial Number') }}</th>
<th>{{ _('Borrower') }}</th>
<th>{{ _('Loan Date') }}</th>
<th class="text-right">{{ _('Actions') }}</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tbody>
{% for loan in active_loans %}
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<tr>
<td>
<div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<td>
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<td>
<div class="font-medium text-gray-900">{{ loan.name }}</div>
<div class="text-sm text-gray-500">{{ loan.identification }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td class="text-sm text-gray-500">
{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}
{{ loan.loan_date[11:16] if loan.loan_date else '' }}
<br>
<span class="text-xs">{{ loan.loan_date[11:16] if loan.loan_date else '' }}</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<td class="text-right">
<a href="/return_tablet/{{ loan.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -153,6 +171,46 @@
</tbody>
</table>
</div>
{# Mobile Cards (hidden on desktop) #}
<div class="mobile-cards hidden p-6">
{% for loan in active_loans %}
<div class="mobile-card">
<div class="flex justify-between items-start mb-3">
<div>
<div class="font-medium text-gray-900">{{ loan.brand }} {{ loan.model }}</div>
<div class="text-sm text-gray-500">{{ loan.name }}</div>
</div>
<a href="/return_tablet/{{ loan.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7"></path>
</svg>
{{ _('Return') }}
</a>
</div>
<div class="space-y-2">
<div class="card-row">
<span class="card-label">{{ _('Serial Number') }}</span>
<code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ loan.serial_number }}</code>
</div>
<div class="card-row">
<span class="card-label">{{ _('Borrower') }}</span>
<div class="card-value text-right">
<div>{{ loan.name }}</div>
<div class="text-xs text-gray-500">{{ loan.identification }}</div>
</div>
</div>
<div class="card-row">
<span class="card-label">{{ _('Loan Date') }}</span>
<span class="card-value">{{ loan.loan_date[:10] if loan.loan_date else _('N/A') }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="p-8 text-center text-gray-500">
<svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -164,4 +222,12 @@
{% endif %}
</div>
</div>
<script>
// Show mobile cards on small screens
if (window.innerWidth <= 640) {
document.querySelectorAll('.table-card-mobile').forEach(el => el.style.display = 'none');
document.querySelectorAll('.mobile-cards').forEach(el => el.style.display = 'flex');
}
</script>
{% endblock %}

97
templates/loan_tablet.html
View file

@ -3,25 +3,30 @@
{% block title %}{{ gettext('Loan Tablet') }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-8 offset-lg-2">
<h1 class="page-title">{{ gettext('Loan Tablet') }}</h1>
<div class="card">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Loan Information') }}</h5>
<div class="max-w-2xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Loan Tablet') }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Loan a tablet to a user or student') }}</p>
</div>
<div class="card-body">
<form method="POST" action="/loan_tablet">
<!-- Tablet Selection -->
<div class="mb-3">
<label for="tablet_id" class="form-label">{{ gettext('Tablet') }} *</label>
<input type="text" id="tablet_search" class="form-control mb-2"
{# Loan Form #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Loan Information') }}</h2>
</div>
<div class="p-6">
<form method="POST" action="/loan_tablet" class="space-y-6">
{# Tablet Selection #}
<div>
<label for="tablet_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Tablet') }} *</label>
<input type="text" id="tablet_search"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
placeholder="{{ gettext('Search tablets (brand, model, or serial)...') }}"
onkeyup="filterDropdown('tablet_search', 'tablet_id')">
<select id="tablet_id" name="tablet_id" class="form-select" required size="5">
<select id="tablet_id" name="tablet_id" required size="5"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
style="max-height: 200px; overflow-y: auto;">
<option value="">{{ gettext('Select a tablet') }}</option>
{% for tablet in available_tablets %}
<option value="{{ tablet.id }}"
@ -30,16 +35,19 @@
</option>
{% endfor %}
</select>
<div class="form-text">{{ gettext('Select which tablet to loan') }}</div>
<p class="mt-1 text-sm text-gray-500">{{ gettext('Select which tablet to loan') }}</p>
</div>
<!-- User Selection (Staff) -->
<div class="mb-3">
<label for="user_id" class="form-label">{{ gettext('Staff User') }} *</label>
<input type="text" id="user_search" class="form-control mb-2"
{# User Selection (Staff) #}
<div>
<label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Staff User') }} *</label>
<input type="text" id="user_search"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
placeholder="{{ gettext('Search users (name or ID)...') }}"
onkeyup="filterDropdown('user_search', 'user_id')">
<select id="user_id" name="user_id" class="form-select" required size="5">
<select id="user_id" name="user_id" required size="5"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
style="max-height: 200px; overflow-y: auto;">
<option value="">{{ gettext('Select a user') }}</option>
{% for user in users %}
<option value="{{ user.id }}"
@ -48,16 +56,19 @@
</option>
{% endfor %}
</select>
<div class="form-text">{{ gettext('Select the staff member processing the loan') }}</div>
<p class="mt-1 text-sm text-gray-500">{{ gettext('Select the staff member processing the loan') }}</p>
</div>
<!-- Student Selection (Optional) -->
<div class="mb-3">
<label for="student_id" class="form-label">{{ gettext('Student (Optional)') }}</label>
<input type="text" id="student_search" class="form-control mb-2"
{# Student Selection (Optional) #}
<div>
<label for="student_id" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Student (Optional)') }}</label>
<input type="text" id="student_search"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 mb-2"
placeholder="{{ gettext('Search students (name, CIAL, or NIF)...') }}"
onkeyup="filterDropdown('student_search', 'student_id')">
<select id="student_id" name="student_id" class="form-select" size="5">
<select id="student_id" name="student_id" size="5"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
style="max-height: 200px; overflow-y: auto;">
<option value="">{{ gettext('Select a student (optional)') }}</option>
{% for student in students %}
<option value="{{ student.id }}"
@ -66,24 +77,30 @@
</option>
{% endfor %}
</select>
<div class="form-text">{{ gettext('Optionally associate this loan with a student') }}</div>
<p class="mt-1 text-sm text-gray-500">{{ gettext('Optionally associate this loan with a student') }}</p>
</div>
<!-- Form Actions -->
<div class="d-flex justify-content-end gap-2">
<a href="/" class="btn btn-secondary">
<i class="bi bi-x-circle"></i> {{ gettext('Cancel') }}
{# Form Actions #}
<div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
<a href="/"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ gettext('Cancel') }}
</a>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> {{ gettext('Loan Tablet') }}
<button type="submit"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
{{ gettext('Loan Tablet') }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
function filterDropdown(searchId, selectId) {
@ -102,12 +119,4 @@
}
}
</script>
<style>
select[size] {
width: 100%;
max-height: 200px;
overflow-y: auto;
}
</style>
{% endblock %}

132
templates/non_loanable_devices.html
View file

@ -1,14 +1,26 @@
{% extends "base.html" %}
{% block content %}
<div class="section">
<h2>{{ _('Non-Loanable Devices Inventory') }}</h2>
<p>{{ _('These devices are tracked in inventory but cannot be loaned to users.') }}</p>
<a href="/add_non_loanable_device" class="btn">{{ _('Add Non-Loanable Device') }}</a>
<div class="space-y-6">
{# Page Header #}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Non-Loanable Devices Inventory') }}</h1>
<p class="text-gray-600 mt-1">{{ _('These devices are tracked in inventory but cannot be loaned to users.') }}</p>
</div>
<a href="/add_non_loanable_device"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ _('Add Non-Loanable Device') }}
</a>
</div>
{% if devices %}
<div class="table-container">
<table>
{# Desktop Table (hidden on mobile) #}
<div class="table-container table-card-mobile">
<table class="table-responsive">
<thead>
<tr>
<th>{{ _('Type') }}</th>
@ -17,7 +29,7 @@
<th>{{ _('Serial Number') }}</th>
<th>{{ _('Location') }}</th>
<th>{{ _('Status') }}</th>
<th>{{ _('Actions') }}</th>
<th class="text-right">{{ _('Actions') }}</th>
</tr>
</thead>
<tbody>
@ -26,20 +38,112 @@
<td>{{ device.device_type }}</td>
<td>{{ device.brand }}</td>
<td>{{ device.model }}</td>
<td>{{ device.serial_number }}</td>
<td>{{ device.location or '-' }}</td>
<td>{{ device.status }}</td>
<td>
<a href="/edit_non_loanable_device/{{ device.id }}" class="btn">{{ _('Edit') }}</a>
<a href="/delete_non_loanable_device/{{ device.id }}" class="btn btn-danger" onclick="return confirm('{{ _("Are you sure you want to delete this device?") }}')">{{ _('Delete') }}</a>
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ device.serial_number }}</code>
</td>
<td>{{ device.location or '-' }}</td>
<td>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if device.status == 'available' %}bg-green-100 text-green-800
{% elif device.status == 'maintenance' %}bg-yellow-100 text-yellow-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
{{ device.status }}
</span>
</td>
<td class="text-right">
<div class="flex justify-end gap-2">
<a href="/edit_non_loanable_device/{{ device.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
{{ _('Edit') }}
</a>
<a href="/delete_non_loanable_device/{{ device.id }}"
onclick="return confirm('{{ _("%") }}')"
class="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
{{ _('Delete') }}
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p>{{ _('No non-loanable devices registered.') }}</p>
{# Mobile Cards (hidden on desktop) #}
<div class="mobile-cards hidden">
{% for device in devices %}
<div class="mobile-card">
<div class="flex justify-between items-start mb-3">
<div>
<div class="font-medium text-gray-900">{{ device.brand }} {{ device.model }}</div>
<div class="text-sm text-gray-500">{{ device.device_type }}</div>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
{% if device.status == 'available' %}bg-green-100 text-green-800
{% elif device.status == 'maintenance' %}bg-yellow-100 text-yellow-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
{{ device.status }}
</span>
</div>
<div class="space-y-2">
<div class="card-row">
<span class="card-label">{{ _('Serial Number') }}</span>
<code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ device.serial_number }}</code>
</div>
{% if device.location %}
<div class="card-row">
<span class="card-label">{{ _('Location') }}</span>
<span class="card-value">{{ device.location }}</span>
</div>
{% endif %}
</div>
<div class="flex justify-end gap-2 mt-4 pt-3 border-t border-gray-100">
<a href="/edit_non_loanable_device/{{ device.id }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
{{ _('Edit') }}
</a>
<a href="/delete_non_loanable_device/{{ device.id }}"
onclick="return confirm('{{ _("%") }}')"
class="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
{{ _('Delete') }}
</a>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="bg-white rounded-lg shadow p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
</svg>
<p class="text-gray-500">{{ _('No non-loanable devices registered.') }}</p>
<a href="/add_non_loanable_device"
class="mt-4 inline-block px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700">
{{ _('Add Device') }}
</a>
</div>
{% endif %}
</div>
<script>
// Show mobile cards on small screens
if (window.innerWidth <= 640) {
document.querySelector('.table-card-mobile').style.display = 'none';
document.querySelector('.mobile-cards').style.display = 'flex';
}
</script>
{% endblock %}

221
templates/project_management.html
View file

@ -1,26 +1,48 @@
{% extends "base.html" %}
{% block content %}
<h2>{{ _('Project Management - Development Notes') }}</h2>
<div class="project-management-container">
<div class="editor-section">
<div class="editor-controls">
<button onclick="saveNotes()" class="btn">{{ _('Save Notes') }}</button>
<button onclick="loadNotes()" class="btn">{{ _('Reload') }}</button>
<span id="status" style="margin-left: 15px; font-style: italic;"></span>
<div class="max-w-6xl mx-auto space-y-6">
{# Page Header #}
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ _('Project Management - Development Notes') }}</h1>
<p class="text-gray-600 mt-1">{{ _('Internal development notes and project documentation') }}</p>
</div>
<div class="editor-row">
<div class="editor-col">
<h3>{{ _('Editor') }}</h3>
<textarea id="markdown-editor" class="markdown-editor"
{# Editor Section #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4 flex justify-between items-center">
<h2 class="text-lg font-semibold text-white">{{ _('Editor') }}</h2>
<div class="flex gap-2">
<button onclick="saveNotes()"
class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
{{ _('Save Notes') }}
</button>
<button onclick="loadNotes()"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
{{ _('Reload') }}
</button>
</div>
</div>
<div class="p-6">
<div id="status" class="text-sm text-gray-500 italic mb-4"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-3">{{ _('Editor') }}</h3>
<textarea id="markdown-editor" rows="20"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500 font-mono text-sm"
placeholder="{{ _('Write your markdown notes here...') }}"></textarea>
</div>
<div class="editor-col">
<h3>{{ _('Preview') }}</h3>
<div id="markdown-preview" class="markdown-preview"></div>
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-3">{{ _('Preview') }}</h3>
<div id="markdown-preview"
class="w-full min-h-[400px] p-4 border border-gray-300 rounded-md bg-gray-50 overflow-y-auto prose prose-sm max-w-none"></div>
</div>
</div>
</div>
</div>
@ -49,165 +71,52 @@
if (!response.ok) {
throw new Error('File not found, using default');
}
return response.text();
return response.json();
})
.then(content => {
document.getElementById('markdown-editor').value = content;
document.getElementById('markdown-preview').innerHTML = marked.parse(content);
document.getElementById('status').textContent = '{{ _("Loaded successfully") }}';
setTimeout(() => {
document.getElementById('status').textContent = '';
}, 2000);
.then(data => {
document.getElementById('markdown-editor').value = data.content;
document.getElementById('markdown-preview').innerHTML = marked.parse(data.content);
showStatus('{{ _("Notes loaded successfully") }}');
})
.catch(error => {
document.getElementById('status').textContent = '{{ _("Using default content") }}';
setTimeout(() => {
document.getElementById('status').textContent = '';
}, 2000);
console.error('Error loading notes:', error);
showStatus('{{ _("Error loading notes") }}', true);
});
}
function saveNotes() {
const content = document.getElementById('markdown-editor').value;
const statusEl = document.getElementById('status');
fetch('/save_notes', {
fetch('/save_notes/' + NOTES_FILE, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ content: content, filename: NOTES_FILE })
body: JSON.stringify({ content: content })
})
.then(response => {
if (response.ok) {
statusEl.textContent = '{{ _("Saved successfully!") }}';
statusEl.style.color = '#4CAF50';
.then(response => response.json())
.then(data => {
if (data.success) {
showStatus('{{ _("Notes saved successfully") }}');
} else {
statusEl.textContent = '{{ _("Error saving") }}';
statusEl.style.color = '#f44336';
showStatus('{{ _("Error saving notes") }}: ' + data.error, true);
}
setTimeout(() => {
statusEl.textContent = '';
statusEl.style.color = '';
}, 2000);
})
.catch(error => {
statusEl.textContent = '{{ _("Error") }}: ' + error.message;
statusEl.style.color = '#f44336';
setTimeout(() => {
statusEl.textContent = '';
statusEl.style.color = '';
}, 2000);
console.error('Error saving notes:', error);
showStatus('{{ _("Error saving notes") }}', true);
});
}
// Auto-save every 30 seconds
setInterval(() => {
saveNotes();
}, 30000);
function showStatus(message, isError = false) {
const status = document.getElementById('status');
status.textContent = message;
status.className = 'text-sm italic ' + (isError ? 'text-red-600' : 'text-green-600');
// Clear status after 3 seconds
setTimeout(() => {
status.textContent = '';
status.className = 'text-sm text-gray-500 italic';
}, 3000);
}
</script>
<style>
.project-management-container {
max-width: 100%;
}
.editor-controls {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
.editor-row {
display: flex;
gap: 20px;
}
.editor-col {
flex: 1;
}
.markdown-editor {
width: 100%;
height: 500px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
box-sizing: border-box;
}
.markdown-preview {
width: 100%;
height: 500px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
overflow-y: auto;
box-sizing: border-box;
}
.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
margin-top: 0;
}
.markdown-preview pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
}
.markdown-preview code {
font-family: monospace;
background-color: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
}
.markdown-preview table {
border-collapse: collapse;
width: 100%;
}
.markdown-preview th,
.markdown-preview td {
border: 1px solid #ddd;
padding: 8px;
}
/* ============================================
RESPONSIVE DESIGN FOR PROJECT MANAGEMENT
============================================ */
@media (max-width: 768px) {
.editor-row {
flex-direction: column;
}
.markdown-editor,
.markdown-preview {
height: 350px;
}
}
@media (max-width: 480px) {
.editor-controls {
flex-direction: column;
gap: 0.5rem;
}
.editor-controls button {
width: 100%;
}
}
</style>
{% endblock %}

298
templates/student_detail.html
View file

@ -3,179 +3,175 @@
{% block title %}{{ gettext('Student Details') }} - {{ student.full_name }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ url_for('list_students') }}">{{ gettext('Students') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ student.full_name }}</li>
<div class="space-y-6">
{# Breadcrumb #}
<nav class="flex" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2">
<li>
<a href="{{ url_for('list_students') }}" class="text-cobalt-600 hover:text-cobalt-800">{{ gettext('Students') }}</a>
</li>
<li>
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
</li>
<li>
<span class="text-gray-500">{{ student.full_name }}</span>
</li>
</ol>
</nav>
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title mb-0">{{ student.full_name }}</h1>
<div class="btn-group" role="group">
<a href="{{ url_for('edit_student', student_id=student.id) }}" class="btn btn-warning">
<i class="bi bi-pencil"></i> {{ gettext('Edit') }}
{# Student Header #}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ student.full_name }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Student Details') }}</p>
</div>
<div class="flex gap-2">
<a href="{{ url_for('edit_student', student_id=student.id) }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
{{ gettext('Edit') }}
</a>
<a href="{{ url_for('delete_student', student_id=student.id) }}" class="btn btn-danger"
onclick="return confirm('{{ gettext('Are you sure you want to delete this student?') }}')">
<i class="bi bi-trash"></i> {{ gettext('Delete') }}
<a href="{{ url_for('delete_student', student_id=student.id) }}"
onclick="return confirm('{{ gettext('Are you sure you want to delete this student?') }}')"
class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
{{ gettext('Delete') }}
</a>
</div>
</div>
<div class="row">
<!-- Student Information Card -->
<div class="col-12 col-lg-6 mb-4">
<div class="card h-100">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">{{ gettext('Student Information') }}</h5>
{# Student Information and Assigned Devices #}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
{# Student Information Card #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-cobalt-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Student Information') }}</h2>
</div>
<div class="p-6">
<dl class="space-y-4">
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('ID') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.id }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('CIAL Code') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">
<code class="bg-gray-100 px-2 py-1 rounded">{{ student.cial_code }}</code>
</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('NIF/NIE/Passport') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.nif_nie_passport or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Registration Number') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.registration_number or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('File Number') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.file_number or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Order Number') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.order_number or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Full Name') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.full_name }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('First Name') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.first_name }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Last Name') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.last_name }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Birth Date') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.birth_date or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Gender') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.gender or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Study Group') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.study_group or '-' }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Created') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.created_at }}</dd>
</div>
<div class="flex flex-col sm:flex-row sm:items-center">
<dt class="text-sm font-medium text-gray-500 sm:w-1/3">{{ gettext('Updated') }}:</dt>
<dd class="text-sm text-gray-900 sm:w-2/3">{{ student.updated_at }}</dd>
</div>
<div class="card-body">
<dl class="row mb-0">
<dt class="col-sm-4">{{ gettext('ID') }}:</dt>
<dd class="col-sm-8">{{ student.id }}</dd>
<dt class="col-sm-4">{{ gettext('CIAL Code') }}:</dt>
<dd class="col-sm-8">{{ student.cial_code }}</dd>
<dt class="col-sm-4">{{ gettext('NIF/NIE/Passport') }}:</dt>
<dd class="col-sm-8">{{ student.nif_nie_passport or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Registration Number') }}:</dt>
<dd class="col-sm-8">{{ student.registration_number or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('File Number') }}:</dt>
<dd class="col-sm-8">{{ student.file_number or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Order Number') }}:</dt>
<dd class="col-sm-8">{{ student.order_number or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Full Name') }}:</dt>
<dd class="col-sm-8">{{ student.full_name }}</dd>
<dt class="col-sm-4">{{ gettext('First Name') }}:</dt>
<dd class="col-sm-8">{{ student.first_name }}</dd>
<dt class="col-sm-4">{{ gettext('Last Name') }}:</dt>
<dd class="col-sm-8">{{ student.last_name }}</dd>
<dt class="col-sm-4">{{ gettext('Birth Date') }}:</dt>
<dd class="col-sm-8">{{ student.birth_date or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Gender') }}:</dt>
<dd class="col-sm-8">{{ student.gender or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Study Group') }}:</dt>
<dd class="col-sm-8">{{ student.study_group or '-' }}</dd>
<dt class="col-sm-4">{{ gettext('Created') }}:</dt>
<dd class="col-sm-8">{{ student.created_at }}</dd>
<dt class="col-sm-4">{{ gettext('Updated') }}:</dt>
<dd class="col-sm-8">{{ student.updated_at }}</dd>
</dl>
</div>
</div>
</div>
<!-- Assigned Devices Card -->
<div class="col-12 col-lg-6 mb-4">
<div class="card h-100">
<div class="card-header bg-info text-white">
<h5 class="mb-0">{{ gettext('Assigned Devices') }}</h5>
{# Assigned Devices Card #}
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="bg-green-600 px-6 py-4">
<h2 class="text-lg font-semibold text-white">{{ gettext('Assigned Devices') }}</h2>
</div>
<div class="card-body">
<!-- Assigned Tablets -->
<h6>{{ gettext('Tablets') }}</h6>
<div class="p-6">
{# Assigned Tablets #}
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider mb-3">{{ gettext('Tablets') }}</h3>
{% if assigned_tablets %}
<ul class="list-group list-group-flush mb-3">
<div class="space-y-3 mb-6">
{% for tablet in assigned_tablets %}
<li class="list-group-item">
<strong>{{ tablet.brand }} {{ tablet.model }}</strong><br>
<small class="text-muted">{{ gettext('Serial:') }} {{ tablet.serial_number }}</small><br>
<small class="text-muted">{{ gettext('Status:') }} {{ tablet.status }}</small>
</li>
{% endfor %}
</ul>
{% else %}
<p class="text-muted">{{ gettext('No tablets assigned') }}</p>
{% endif %}
<!-- Assigned Non-Loanable Devices -->
<h6>{{ gettext('Other Devices') }}</h6>
{% if assigned_devices %}
<ul class="list-group list-group-flush">
{% for device in assigned_devices %}
<li class="list-group-item">
<strong>{{ device.brand }} {{ device.model }}</strong><br>
<small class="text-muted">{{ gettext('Type:') }} {{ device.device_type }}</small><br>
<small class="text-muted">{{ gettext('Serial:') }} {{ device.serial_number }}</small>
</li>
{% endfor %}
</ul>
{% else %}
<p class="text-muted">{{ gettext('No other devices assigned') }}</p>
{% endif %}
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div>
<div class="font-medium text-gray-900">{{ tablet.brand }} {{ tablet.model }}</div>
<div class="text-sm text-gray-500">
{{ gettext('Serial:') }} {{ tablet.serial_number }}
</div>
</div>
</div>
</div>
<!-- Loan History Card -->
<div class="col-12 mb-4">
<div class="card">
<div class="card-header bg-success text-white">
<h5 class="mb-0">{{ gettext('Loan History') }}</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover mb-0">
<thead class="table-light">
<tr>
<th>{{ gettext('ID') }}</th>
<th>{{ gettext('Tablet') }}</th>
<th>{{ gettext('Loan Date') }}</th>
<th>{{ gettext('Return Date') }}</th>
<th>{{ gettext('Status') }}</th>
</tr>
</thead>
<tbody>
{% if loans %}
{% for loan in loans %}
<tr>
<td>{{ loan.id }}</td>
<td>{{ loan.brand }} {{ loan.model }} ({{ loan.serial_number }})</td>
<td>{{ loan.loan_date }}</td>
<td>{{ loan.return_date or '-' }}</td>
<td>
<span class="badge bg-{{ 'success' if loan.status == 'returned' else 'primary' }}">
{{ loan.status }}
<div class="text-sm text-gray-500">
{{ gettext('Status:') }}
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
{% if tablet.status == 'available' %}bg-green-100 text-green-800
{% elif tablet.status == 'loaned' %}bg-yellow-100 text-yellow-800
{% else %}bg-gray-100 text-gray-800{% endif %}">
{{ tablet.status }}
</span>
</td>
</tr>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<tr>
<td colspan="5" class="text-center text-muted">
{{ gettext('No loan history') }}
</td>
</tr>
<p class="text-gray-500 text-sm mb-6">{{ gettext('No tablets assigned.') }}</p>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="{{ url_for('list_students') }}" class="btn btn-secondary">
<i class="bi bi-arrow-left"></i> {{ gettext('Back to Students') }}
</a>
{# Assigned Non-Loanable Devices #}
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wider mb-3">{{ gettext('Non-Loanable Devices') }}</h3>
{% if assigned_devices %}
<div class="space-y-3">
{% for device in assigned_devices %}
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div>
<div class="font-medium text-gray-900">{{ device.brand }} {{ device.model }}</div>
<div class="text-sm text-gray-500">
{{ gettext('Serial:') }} {{ device.serial_number }}
</div>
<div class="text-sm text-gray-500">
{{ gettext('Type:') }} {{ device.device_type }}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-500 text-sm">{{ gettext('No non-loanable devices assigned.') }}</p>
{% endif %}
</div>
</div>
</div>

245
templates/students.html
View file

@ -3,80 +3,80 @@
{% block title %}{{ gettext('Students') }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="page-title">{{ gettext('Students') }}</h1>
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center">
<div class="space-y-6">
{# Page Header #}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<p class="text-muted">{{ gettext('Total students:') }} {{ total_students }}</p>
<h1 class="text-2xl font-bold text-gray-900">{{ gettext('Students') }}</h1>
<p class="text-gray-600 mt-1">{{ gettext('Total students:') }} {{ total_students }}</p>
</div>
<div class="btn-group" role="group">
<a href="{{ url_for('add_student') }}" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> {{ gettext('Add Student') }}
<div class="flex gap-2">
<a href="{{ url_for('add_student') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
{{ gettext('Add Student') }}
</a>
<a href="{{ url_for('import_students') }}" class="btn btn-secondary">
<i class="bi bi-upload"></i> {{ gettext('Import CSV') }}
<a href="{{ url_for('import_students') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
{{ gettext('Import CSV') }}
</a>
</div>
</div>
</div>
<!-- Search and Filter Form -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Search & Filter') }}</h5>
{# Search and Filter Form #}
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ gettext('Search & Filter') }}</h2>
<form method="get" action="{{ url_for('list_students') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Search') }}</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500"
id="search" name="search" value="{{ search }}" placeholder="{{ gettext('Name, CIAL, NIF...') }}">
</div>
<div class="card-body">
<form method="get" action="{{ url_for('list_students') }}" class="row g-3">
<div class="col-md-4">
<label for="search" class="form-label">{{ gettext('Search') }}</label>
<input type="text" class="form-control" id="search" name="search"
value="{{ search }}" placeholder="{{ gettext('Name, CIAL, NIF...') }}">
</div>
<div class="col-md-2">
<label for="gender" class="form-label">{{ gettext('Gender') }}</label>
<select class="form-select" id="gender" name="gender">
<div>
<label for="gender" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Gender') }}</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500" id="gender" name="gender">
<option value="">{{ gettext('All') }}</option>
{% for g in genders %}
<option value="{{ g }}" {% if gender == g %}selected{% endif %}>{{ g }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label for="group" class="form-label">{{ gettext('Study Group') }}</label>
<select class="form-select" id="group" name="group">
<div>
<label for="group" class="block text-sm font-medium text-gray-700 mb-1">{{ gettext('Study Group') }}</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cobalt-500 focus:border-cobalt-500" id="group" name="group">
<option value="">{{ gettext('All') }}</option>
{% for g in groups %}
<option value="{{ g }}" {% if group == g %}selected{% endif %}>{{ g }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-search"></i> {{ gettext('Search') }}
<div class="flex items-end gap-2">
<button type="submit" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
{{ gettext('Search') }}
</button>
</div>
<div class="col-md-1 d-flex align-items-end">
<a href="{{ url_for('list_students') }}" class="btn btn-secondary w-100">
<i class="bi bi-x-circle"></i> {{ gettext('Clear') }}
<a href="{{ url_for('list_students') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
{{ gettext('Clear') }}
</a>
</div>
</form>
</div>
</div>
<!-- Students Table -->
<div class="card">
<div class="card-header">
<h5 class="mb-0">{{ gettext('Student List') }}</h5>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-hover mb-0">
<thead class="table-light">
{% if students %}
{# Desktop Table (hidden on mobile) #}
<div class="table-container table-card-mobile">
<table class="table-responsive">
<thead>
<tr>
<th>{{ gettext('ID') }}</th>
<th>{{ gettext('Name') }}</th>
@ -85,98 +85,117 @@
<th>{{ gettext('Gender') }}</th>
<th>{{ gettext('Study Group') }}</th>
<th>{{ gettext('Birth Date') }}</th>
<th class="text-end">{{ gettext('Actions') }}</th>
<th class="text-right">{{ gettext('Actions') }}</th>
</tr>
</thead>
<tbody>
{% if students %}
{% for student in students %}
<tr>
<td>{{ student.id }}</td>
<td>
<a href="{{ url_for('student_detail', student_id=student.id) }}">
<a href="{{ url_for('student_detail', student_id=student.id) }}" class="text-cobalt-600 hover:text-cobalt-800 font-medium">
{{ student.last_name }}, {{ student.first_name }}
</a>
</td>
<td>{{ student.cial_code }}</td>
<td>{{ student.nif_nie_passport or '-' }}</td>
<td>{{ student.gender or '-' }}</td>
<td>{{ student.study_group or '-' }}</td>
<td>{{ student.birth_date or '-' }}</td>
<td class="text-end">
<div class="btn-group btn-group-sm" role="group">
<td>
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ student.cial_code }}</code>
</td>
<td>{{ student.nif_nie_passport }}</td>
<td>{{ student.gender }}</td>
<td>{{ student.study_group }}</td>
<td class="text-sm text-gray-500">{{ student.birth_date }}</td>
<td class="text-right">
<div class="flex justify-end gap-2">
<a href="{{ url_for('student_detail', student_id=student.id) }}"
class="btn btn-info btn-sm" title="{{ gettext('View') }}">
<i class="bi bi-eye"></i>
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
{{ gettext('View') }}
</a>
<a href="{{ url_for('edit_student', student_id=student.id) }}"
class="btn btn-warning btn-sm" title="{{ gettext('Edit') }}">
<i class="bi bi-pencil"></i>
</a>
<a href="{{ url_for('delete_student', student_id=student.id) }}"
class="btn btn-danger btn-sm"
onclick="return confirm('{{ gettext('Are you sure you want to delete this student?') }}')"
title="{{ gettext('Delete') }}">
<i class="bi bi-trash"></i>
class="inline-flex items-center gap-1 px-3 py-1 bg-yellow-100 text-yellow-700 rounded-lg text-sm hover:bg-yellow-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
{{ gettext('Edit') }}
</a>
</div>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="8" class="text-center text-muted">
{{ gettext('No students found') }}
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{# Mobile Cards (hidden on desktop) #}
<div class="mobile-cards hidden">
{% for student in students %}
<div class="mobile-card">
<div class="flex justify-between items-start mb-3">
<div>
<a href="{{ url_for('student_detail', student_id=student.id) }}" class="text-cobalt-600 hover:text-cobalt-800 font-medium">
{{ student.last_name }}, {{ student.first_name }}
</a>
<div class="text-sm text-gray-500">{{ student.study_group }} | {{ student.gender }}</div>
</div>
</div>
<!-- Pagination -->
{% if total_pages > 1 %}
<div class="card-footer">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mb-0">
{% if page > 1 %}
<li class="page-item">
<a class="page-link" href="?page={{ page - 1 }}&search={{ search }}&gender={{ gender }}&group={{ group }}">
{{ gettext('Previous') }}
</a>
</li>
{% endif %}
<div class="space-y-2">
<div class="card-row">
<span class="card-label">{{ gettext('CIAL Code') }}</span>
<code class="card-value text-sm bg-gray-100 px-2 py-1 rounded">{{ student.cial_code }}</code>
</div>
<div class="card-row">
<span class="card-label">{{ gettext('NIF/NIE') }}</span>
<span class="card-value">{{ student.nif_nie_passport }}</span>
</div>
<div class="card-row">
<span class="card-label">{{ gettext('Birth Date') }}</span>
<span class="card-value">{{ student.birth_date }}</span>
</div>
</div>
{% for p in range(1, total_pages + 1) %}
{% if p == page %}
<li class="page-item active"><span class="page-link">{{ p }}</span></li>
{% elif p <= 3 or p > total_pages - 3 or (p >= page - 2 and p <= page + 2) %}
<li class="page-item">
<a class="page-link" href="?page={{ p }}&search={{ search }}&gender={{ gender }}&group={{ group }}">{{ p }}</a>
</li>
{% elif p == 4 or p == total_pages - 3 %}
<li class="page-item disabled"><span class="page-link">...</span></li>
{% endif %}
<div class="flex justify-end gap-2 mt-4 pt-3 border-t border-gray-100">
<a href="{{ url_for('student_detail', student_id=student.id) }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm hover:bg-blue-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
{{ gettext('View') }}
</a>
<a href="{{ url_for('edit_student', student_id=student.id) }}"
class="inline-flex items-center gap-1 px-3 py-1 bg-yellow-100 text-yellow-700 rounded-lg text-sm hover:bg-yellow-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
{{ gettext('Edit') }}
</a>
</div>
</div>
{% endfor %}
{% if page < total_pages %}
<li class="page-item">
<a class="page-link" href="?page={{ page + 1 }}&search={{ search }}&gender={{ gender }}&group={{ group }}">
{{ gettext('Next') }}
</div>
{% else %}
<div class="bg-white rounded-lg shadow p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zM12 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<p class="text-gray-500">{{ gettext('No students found.') }}</p>
<a href="{{ url_for('add_student') }}"
class="mt-4 inline-block px-4 py-2 bg-cobalt-600 text-white rounded-lg hover:bg-cobalt-700">
{{ gettext('Add Student') }}
</a>
</li>
{% endif %}
</ul>
</nav>
<div class="text-muted text-center mt-2">
{{ gettext('Showing') }} {{ (page - 1) * per_page + 1 }}-
{{ min(page * per_page, total_students) }} {{ gettext('of') }} {{ total_students }}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<script>
// Show mobile cards on small screens
if (window.innerWidth <= 640) {
document.querySelector('.table-card-mobile').style.display = 'none';
document.querySelector('.mobile-cards').style.display = 'flex';
}
</script>
{% endblock %}