c9f3382c7c
- Add Tailwind CSS via CDN for modern styling - Add HTMX for AJAX functionality without full page reloads - Revamp user_loans interface with: - Real-time search (debounced 500ms) - Status filtering (all users, with loans, no loans) - Pagination (20 users per page) - Responsive table design - Clean, modern UI with Tailwind classes - Create user_loans_detail.html for individual user loan history - Update index.html with Tailwind styling - Update base.html with Tailwind + HTMX setup - Add components/user_loans_results.html for HTMX partial updates - Update app.py user_loans route to support search, filter, pagination - Add user_loans_detail route for detailed user view This addresses the issues: - Navigation overflow (fixed with responsive Tailwind classes) - Basic look (modern, professional UI) - User loans UX (fast search, filtering, pagination for 500+ users)
140 lines
5.6 KiB
HTML
140 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tablet Management System</title>
|
|
|
|
<!-- Tailwind CSS via CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<!-- Custom styles -->
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
}
|
|
|
|
/* HTMX loading spinner */
|
|
.htmx-indicator {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid rgba(0,0,0,.3);
|
|
border-radius: 50%;
|
|
border-top-color: #10b981;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Hide HTMX indicator by default */
|
|
.htmx-indicator {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
.htmx-request .htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<!-- Tailwind config for custom colors -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
<!-- Header -->
|
|
<header class="mb-8">
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 text-center mb-6">
|
|
Tablet Management System
|
|
</h1>
|
|
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="mb-6 space-y-3">
|
|
{% for category, message in messages %}
|
|
<div class="p-4 rounded-md
|
|
{% if category == 'success' %}bg-green-100 text-green-800 border border-green-200
|
|
{% elif category == 'error' %}bg-red-100 text-red-800 border border-red-200
|
|
{% else %}bg-blue-100 text-blue-800 border border-blue-200
|
|
{% endif %}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-green-600 rounded-lg shadow-md mb-6">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-wrap justify-center sm:justify-start gap-1 sm:gap-2 py-3">
|
|
<a href="/"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Home
|
|
</a>
|
|
<a href="/add_tablet"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Add Tablet
|
|
</a>
|
|
<a href="/add_user"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Add User
|
|
</a>
|
|
<a href="/loan_tablet"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Loan Tablet
|
|
</a>
|
|
<a href="/history"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Loan History
|
|
</a>
|
|
<a href="/user_loans"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
User Loans
|
|
</a>
|
|
<a href="/non_loanable_devices"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Non-Loanable Devices
|
|
</a>
|
|
<a href="/project_management"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-green-700 transition-colors whitespace-nowrap">
|
|
Project Management
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|