Streamline System Admin styles.
This commit is contained in:
@@ -1,17 +1,37 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>{{ "Edit" if announcement else "Create" }} Announcement</h1>
|
||||
<p class="subtitle">{{ "Update" if announcement else "Create new" }} system announcement for users</p>
|
||||
<div class="announcement-form-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-speakerphone"></i></span>
|
||||
{{ "Edit" if announcement else "Create" }} Announcement
|
||||
</h1>
|
||||
<p class="page-subtitle">{{ "Update" if announcement else "Create new" }} system announcement for users</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('announcements.index') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i> Back to Announcements
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Announcements
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<!-- Main Form -->
|
||||
<form method="POST" class="announcement-form">
|
||||
<!-- Basic Information -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-forms"></i></span>
|
||||
Basic Information
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="title">Title</label>
|
||||
<input type="text"
|
||||
@@ -20,7 +40,8 @@
|
||||
value="{{ announcement.title if announcement else '' }}"
|
||||
required
|
||||
maxlength="200"
|
||||
class="form-control">
|
||||
class="form-control"
|
||||
placeholder="Enter announcement title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -29,7 +50,8 @@
|
||||
name="content"
|
||||
required
|
||||
rows="6"
|
||||
class="form-control">{{ announcement.content if announcement else '' }}</textarea>
|
||||
class="form-control"
|
||||
placeholder="Enter announcement content">{{ announcement.content if announcement else '' }}</textarea>
|
||||
<small class="form-text">You can use HTML formatting in the content.</small>
|
||||
</div>
|
||||
|
||||
@@ -37,39 +59,57 @@
|
||||
<div class="form-group">
|
||||
<label for="announcement_type">Type</label>
|
||||
<select id="announcement_type" name="announcement_type" class="form-control">
|
||||
<option value="info" {{ 'selected' if announcement and announcement.announcement_type == 'info' else '' }}>Info</option>
|
||||
<option value="warning" {{ 'selected' if announcement and announcement.announcement_type == 'warning' else '' }}>Warning</option>
|
||||
<option value="success" {{ 'selected' if announcement and announcement.announcement_type == 'success' else '' }}>Success</option>
|
||||
<option value="danger" {{ 'selected' if announcement and announcement.announcement_type == 'danger' else '' }}>Danger</option>
|
||||
<option value="info" {{ 'selected' if announcement and announcement.announcement_type == 'info' else '' }}>
|
||||
<i class="ti ti-info-circle"></i> Info
|
||||
</option>
|
||||
<option value="warning" {{ 'selected' if announcement and announcement.announcement_type == 'warning' else '' }}>
|
||||
<i class="ti ti-alert-triangle"></i> Warning
|
||||
</option>
|
||||
<option value="success" {{ 'selected' if announcement and announcement.announcement_type == 'success' else '' }}>
|
||||
<i class="ti ti-circle-check"></i> Success
|
||||
</option>
|
||||
<option value="danger" {{ 'selected' if announcement and announcement.announcement_type == 'danger' else '' }}>
|
||||
<i class="ti ti-alert-circle"></i> Danger
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<label>Options</label>
|
||||
<div class="checkbox-group">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox"
|
||||
name="is_urgent"
|
||||
{{ 'checked' if announcement and announcement.is_urgent else '' }}>
|
||||
<span class="checkmark"></span>
|
||||
Mark as Urgent
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Mark as Urgent</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox"
|
||||
name="is_active"
|
||||
{{ 'checked' if not announcement or announcement.is_active else '' }}>
|
||||
<span class="checkmark"></span>
|
||||
Active
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Active</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h3>Scheduling</h3>
|
||||
<!-- Scheduling -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-calendar-event"></i></span>
|
||||
Scheduling
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="start_date">Start Date/Time (Optional)</label>
|
||||
<label for="start_date">Start Date/Time</label>
|
||||
<input type="datetime-local"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
@@ -79,7 +119,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="end_date">End Date/Time (Optional)</label>
|
||||
<label for="end_date">End Date/Time</label>
|
||||
<input type="datetime-local"
|
||||
id="end_date"
|
||||
name="end_date"
|
||||
@@ -89,60 +129,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<h3>Targeting</h3>
|
||||
<div class="form-row">
|
||||
<!-- Targeting -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-target"></i></span>
|
||||
Targeting
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<label class="toggle-label main-toggle">
|
||||
<input type="checkbox"
|
||||
name="target_all_users"
|
||||
id="target_all_users"
|
||||
{{ 'checked' if not announcement or announcement.target_all_users else '' }}
|
||||
onchange="toggleTargeting()">
|
||||
<span class="checkmark"></span>
|
||||
Target All Users
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Target All Users</span>
|
||||
</label>
|
||||
</div>
|
||||
<small class="form-text">When enabled, announcement will be shown to all users regardless of role or company</small>
|
||||
</div>
|
||||
|
||||
<div id="targeting_options" style="display: {{ 'none' if not announcement or announcement.target_all_users else 'block' }};">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Target Roles</label>
|
||||
<label><i class="ti ti-user-check"></i> Target Roles</label>
|
||||
<div class="checkbox-list">
|
||||
{% set selected_roles = [] %}
|
||||
{% if announcement and announcement.target_roles %}
|
||||
{% set selected_roles = announcement.target_roles|from_json %}
|
||||
{% endif %}
|
||||
{% for role in roles %}
|
||||
<label class="checkbox-container">
|
||||
<label class="checkbox-item">
|
||||
<input type="checkbox"
|
||||
name="target_roles"
|
||||
value="{{ role }}"
|
||||
{{ 'checked' if role in selected_roles else '' }}>
|
||||
<span class="checkmark"></span>
|
||||
{{ role }}
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-label">{{ role }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Target Companies</label>
|
||||
<label><i class="ti ti-building"></i> Target Companies</label>
|
||||
<div class="checkbox-list">
|
||||
{% set selected_companies = [] %}
|
||||
{% if announcement and announcement.target_companies %}
|
||||
{% set selected_companies = announcement.target_companies|from_json %}
|
||||
{% endif %}
|
||||
{% for company in companies %}
|
||||
<label class="checkbox-container">
|
||||
<label class="checkbox-item">
|
||||
<input type="checkbox"
|
||||
name="target_companies"
|
||||
value="{{ company.id }}"
|
||||
{{ 'checked' if company.id in selected_companies else '' }}>
|
||||
<span class="checkmark"></span>
|
||||
{{ company.name }}
|
||||
<span class="checkbox-custom"></span>
|
||||
<span class="checkbox-label">{{ company.name }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -150,16 +197,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
{{ "Update" if announcement else "Create" }} Announcement
|
||||
</button>
|
||||
<a href="{{ url_for('announcements.index') }}" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleTargeting() {
|
||||
@@ -180,155 +229,334 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
margin-bottom: 2rem;
|
||||
/* Container */
|
||||
.announcement-form-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.announcement-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: #495057;
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
padding-bottom: 0.5rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Toggle Switches */
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 12px;
|
||||
.toggle-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
.toggle-label input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
.toggle-slider {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
.toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.main-toggle {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Checkbox Lists */
|
||||
.checkbox-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 0.5rem;
|
||||
max-height: 200px;
|
||||
gap: 0.75rem;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-item:hover .checkbox-custom {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"]:checked + .checkbox-custom {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"]:checked + .checkbox-custom::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
color: #374151;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Form Actions */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.announcement-form-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -336,6 +564,36 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
.checkbox-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,19 +1,35 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content-header">
|
||||
<div class="header-row">
|
||||
<h1>System Announcements</h1>
|
||||
<a href="{{ url_for('announcements.create') }}" class="btn btn-md btn-primary">
|
||||
<i class="icon">➕</i> New Announcement
|
||||
<div class="announcements-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-speakerphone"></i></span>
|
||||
System Announcements
|
||||
</h1>
|
||||
<p class="page-subtitle">Manage system-wide announcements and notifications</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
<a href="{{ url_for('announcements.create') }}" class="btn btn-primary">
|
||||
<i class="ti ti-plus"></i>
|
||||
New Announcement
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-body">
|
||||
<!-- Announcements Table -->
|
||||
{% if announcements.items %}
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<div class="card">
|
||||
<div class="card-body no-padding">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
@@ -28,62 +44,72 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for announcement in announcements.items %}
|
||||
<tr class="{% if not announcement.is_active %}inactive{% endif %}">
|
||||
<tr class="{% if not announcement.is_active %}inactive-row{% endif %}">
|
||||
<td>
|
||||
<div class="announcement-title">
|
||||
<strong>{{ announcement.title }}</strong>
|
||||
{% if announcement.is_urgent %}
|
||||
<span class="badge badge-danger">URGENT</span>
|
||||
<span class="badge badge-urgent">URGENT</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-{{ announcement.announcement_type }}">
|
||||
<span class="type-badge type-{{ announcement.announcement_type }}">
|
||||
{{ announcement.announcement_type.title() }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if announcement.is_active %}
|
||||
{% if announcement.is_visible_now() %}
|
||||
<span class="badge badge-success">Active</span>
|
||||
<span class="status-badge status-active">Active</span>
|
||||
{% else %}
|
||||
<span class="badge badge-warning">Scheduled</span>
|
||||
<span class="status-badge status-scheduled">Scheduled</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
<span class="status-badge status-inactive">Inactive</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if announcement.start_date %}
|
||||
{{ announcement.start_date.strftime('%Y-%m-%d %H:%M') }}
|
||||
<span class="date-text">{{ announcement.start_date.strftime('%Y-%m-%d %H:%M') }}</span>
|
||||
{% else %}
|
||||
<em>Immediate</em>
|
||||
<em class="text-muted">Immediate</em>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if announcement.end_date %}
|
||||
{{ announcement.end_date.strftime('%Y-%m-%d %H:%M') }}
|
||||
<span class="date-text">{{ announcement.end_date.strftime('%Y-%m-%d %H:%M') }}</span>
|
||||
{% else %}
|
||||
<em>No expiry</em>
|
||||
<em class="text-muted">No expiry</em>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if announcement.target_all_users %}
|
||||
<span class="target-badge target-all">
|
||||
<i class="ti ti-users"></i>
|
||||
All Users
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-muted">Targeted</span>
|
||||
<span class="target-badge target-specific">
|
||||
<i class="ti ti-target"></i>
|
||||
Targeted
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ announcement.created_at.strftime('%Y-%m-%d') }}</td>
|
||||
<td>
|
||||
<span class="date-text">{{ announcement.created_at.strftime('%Y-%m-%d') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<a href="{{ url_for('announcements.edit', id=announcement.id) }}"
|
||||
class="btn btn-sm btn-outline-primary" title="Edit">
|
||||
✏️
|
||||
class="btn-icon" title="Edit">
|
||||
<i class="ti ti-pencil"></i>
|
||||
</a>
|
||||
<form method="POST" action="{{ url_for('announcements.delete', id=announcement.id) }}"
|
||||
style="display: inline-block;"
|
||||
onsubmit="return confirm('Are you sure you want to delete this announcement?')">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
|
||||
🗑️
|
||||
<button type="submit" class="btn-icon danger" title="Delete">
|
||||
<i class="ti ti-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -93,15 +119,20 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if announcements.pages > 1 %}
|
||||
<div class="pagination-container">
|
||||
<div class="pagination">
|
||||
{% if announcements.has_prev %}
|
||||
<a href="{{ url_for('announcements.index', page=announcements.prev_num) }}" class="page-link">« Previous</a>
|
||||
<a href="{{ url_for('announcements.index', page=announcements.prev_num) }}" class="page-link">
|
||||
<i class="ti ti-chevron-left"></i>
|
||||
Previous
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="page-numbers">
|
||||
{% for page_num in announcements.iter_pages() %}
|
||||
{% if page_num %}
|
||||
{% if page_num != announcements.page %}
|
||||
@@ -110,22 +141,34 @@
|
||||
<span class="page-link current">{{ page_num }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="page-link">…</span>
|
||||
<span class="page-dots">...</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if announcements.has_next %}
|
||||
<a href="{{ url_for('announcements.index', page=announcements.next_num) }}" class="page-link">Next »</a>
|
||||
<a href="{{ url_for('announcements.index', page=announcements.next_num) }}" class="page-link">
|
||||
Next
|
||||
<i class="ti ti-chevron-right"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="pagination-info">
|
||||
Showing {{ announcements.per_page * (announcements.page - 1) + 1 }} -
|
||||
{{ announcements.per_page * (announcements.page - 1) + announcements.items|length }} of {{ announcements.total }} announcements
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state">
|
||||
<h3>No announcements found</h3>
|
||||
<p>Create your first announcement to communicate with users.</p>
|
||||
<div class="empty-icon"><i class="ti ti-speakerphone"></i></div>
|
||||
<h3 class="empty-title">No announcements found</h3>
|
||||
<p class="empty-message">Create your first announcement to communicate with users.</p>
|
||||
<a href="{{ url_for('announcements.create') }}" class="btn btn-primary">
|
||||
<i class="ti ti-plus"></i>
|
||||
Create Announcement
|
||||
</a>
|
||||
</div>
|
||||
@@ -133,33 +176,417 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.inactive {
|
||||
/* Container */
|
||||
.announcements-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.inactive-row {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
/* Announcement Title */
|
||||
.announcement-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.badge-info { background: #17a2b8; color: white; }
|
||||
.badge-warning { background: #ffc107; color: #212529; }
|
||||
.badge-success { background: #28a745; color: white; }
|
||||
.badge-danger { background: #dc3545; color: white; }
|
||||
.badge-secondary { background: #6c757d; color: white; }
|
||||
/* Badges */
|
||||
.badge,
|
||||
.status-badge,
|
||||
.type-badge,
|
||||
.target-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.badge-urgent {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Type Badges */
|
||||
.type-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.type-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.type-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.type-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-active {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-scheduled {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* Target Badges */
|
||||
.target-badge {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.target-all {
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
|
||||
.target-specific {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* Date Text */
|
||||
.date-text {
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
color: #6b7280;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-icon.danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-container {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.page-link.current {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.page-dots {
|
||||
padding: 0.5rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6c757d;
|
||||
padding: 4rem 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
font-size: 1.1rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.announcements-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,22 +1,33 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="management-container">
|
||||
<div class="management-header">
|
||||
<h1>🎨 Branding Settings</h1>
|
||||
<div class="management-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<div class="branding-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-palette"></i></span>
|
||||
Branding Settings
|
||||
</h1>
|
||||
<p class="page-subtitle">Customize the appearance and branding of {{ branding.app_name }}</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">Customize the appearance and branding of {{ branding.app_name }}</p>
|
||||
|
||||
<!-- Current Branding Preview -->
|
||||
<div class="management-section">
|
||||
<h2>👁️ Current Branding Preview</h2>
|
||||
<div class="management-card branding-preview-card">
|
||||
<div class="card preview-card">
|
||||
<div class="card-header">
|
||||
<h3>Live Preview</h3>
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-eye"></i></span>
|
||||
Current Branding Preview
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="preview-demo">
|
||||
@@ -39,16 +50,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Branding Settings Form -->
|
||||
<div class="management-section">
|
||||
<h2><i class="ti ti-tool"></i> Branding Configuration</h2>
|
||||
<div class="management-card">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-settings"></i></span>
|
||||
Branding Configuration
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" enctype="multipart/form-data" class="settings-form">
|
||||
<!-- Application Name -->
|
||||
<div class="form-section">
|
||||
<h3>📝 Basic Information</h3>
|
||||
<h3><i class="ti ti-forms"></i> Basic Information</h3>
|
||||
<div class="form-group">
|
||||
<label for="app_name">Application Name</label>
|
||||
<input type="text" id="app_name" name="app_name"
|
||||
@@ -56,7 +71,7 @@
|
||||
class="form-control"
|
||||
placeholder="TimeTrack"
|
||||
required>
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
This name will appear in the title, navigation, and throughout the interface.
|
||||
</small>
|
||||
</div>
|
||||
@@ -67,7 +82,7 @@
|
||||
value="{{ branding.logo_alt_text }}"
|
||||
class="form-control"
|
||||
placeholder="Company Logo">
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
Text displayed when the logo cannot be loaded (accessibility).
|
||||
</small>
|
||||
</div>
|
||||
@@ -75,7 +90,7 @@
|
||||
|
||||
<!-- Visual Assets -->
|
||||
<div class="form-section">
|
||||
<h3>🖼️ Visual Assets</h3>
|
||||
<h3><i class="ti ti-photo"></i> Visual Assets</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="logo_file">Logo Image</label>
|
||||
@@ -90,7 +105,7 @@
|
||||
<span class="asset-label">Current logo</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
PNG, JPG, GIF, SVG. Recommended: 200x50px
|
||||
</small>
|
||||
</div>
|
||||
@@ -108,7 +123,7 @@
|
||||
<span class="asset-label">Current favicon</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
ICO, PNG. Recommended: 16x16px or 32x32px
|
||||
</small>
|
||||
</div>
|
||||
@@ -117,7 +132,7 @@
|
||||
|
||||
<!-- Theme Settings -->
|
||||
<div class="form-section">
|
||||
<h3>🎨 Theme Settings</h3>
|
||||
<h3><i class="ti ti-color-swatch"></i> Theme Settings</h3>
|
||||
<div class="form-group">
|
||||
<label for="primary_color">Primary Color</label>
|
||||
<div class="color-picker-wrapper">
|
||||
@@ -130,7 +145,7 @@
|
||||
pattern="^#[0-9A-Fa-f]{6}$"
|
||||
placeholder="#007bff">
|
||||
</div>
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
This color will be used for buttons, links, and other UI elements.
|
||||
</small>
|
||||
</div>
|
||||
@@ -138,7 +153,7 @@
|
||||
|
||||
<!-- Imprint/Legal Page -->
|
||||
<div class="form-section">
|
||||
<h3>⚖️ Imprint / Legal Page</h3>
|
||||
<h3><i class="ti ti-scale"></i> Imprint / Legal Page</h3>
|
||||
<div class="form-group">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox" name="imprint_enabled" id="imprint_enabled"
|
||||
@@ -146,7 +161,7 @@
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Enable Imprint Page</span>
|
||||
</label>
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
When enabled, an "Imprint" link will appear in the footer linking to your custom legal page.
|
||||
</small>
|
||||
</div>
|
||||
@@ -158,7 +173,7 @@
|
||||
value="{{ branding.imprint_title or 'Imprint' }}"
|
||||
class="form-control"
|
||||
placeholder="Imprint">
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
The title that will be displayed on the imprint page.
|
||||
</small>
|
||||
</div>
|
||||
@@ -169,7 +184,7 @@
|
||||
class="form-control content-editor"
|
||||
rows="15"
|
||||
placeholder="Enter your imprint/legal information here...">{{ branding.imprint_content or '' }}</textarea>
|
||||
<small class="form-text text-muted">
|
||||
<small class="form-text">
|
||||
You can use HTML to format your content. Common tags: <h2>, <h3>, <p>, <strong>, <br>, <a href="">
|
||||
</small>
|
||||
</div>
|
||||
@@ -178,7 +193,10 @@
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
Save Branding Settings
|
||||
</button>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
@@ -187,8 +205,99 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Branding-specific styles */
|
||||
.branding-preview-card {
|
||||
/* Container */
|
||||
.branding-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Preview Card */
|
||||
.preview-card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@@ -202,7 +311,7 @@
|
||||
.demo-header {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.demo-logo {
|
||||
@@ -213,8 +322,8 @@
|
||||
|
||||
.demo-text-logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
@@ -222,7 +331,7 @@
|
||||
}
|
||||
|
||||
.demo-content p {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -230,12 +339,80 @@
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* Current assets display */
|
||||
/* Form Sections */
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.form-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: #1f2937;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-section h3 i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* File Input */
|
||||
.form-control-file {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Current Assets */
|
||||
.current-asset {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
@@ -255,10 +432,10 @@
|
||||
|
||||
.asset-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Color picker styling */
|
||||
/* Color Picker */
|
||||
.color-picker-wrapper {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@@ -270,8 +447,8 @@
|
||||
width: 60px;
|
||||
height: 38px;
|
||||
padding: 0.25rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -280,58 +457,8 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Form sections */
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.form-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: #495057;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* File input styling */
|
||||
.form-control-file {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.375rem 0;
|
||||
}
|
||||
|
||||
/* Form row for two-column layout */
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.form-row > .col-md-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row > .col-md-6 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sync color inputs */
|
||||
|
||||
/* Toggle label styling - ensuring proper alignment */
|
||||
.form-group .toggle-label {
|
||||
/* Toggle Switch */
|
||||
.toggle-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
@@ -349,7 +476,7 @@
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
background: #ccc;
|
||||
background: #e5e7eb;
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s;
|
||||
flex-shrink: 0;
|
||||
@@ -365,10 +492,11 @@
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
|
||||
background: var(--primary-color);
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
|
||||
@@ -377,18 +505,18 @@
|
||||
|
||||
.toggle-text {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
color: #1f2937;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Content editor styling */
|
||||
/* Content Editor */
|
||||
.content-editor {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -400,6 +528,108 @@
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Form Row */
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.form-row > .col-md-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Form Actions */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.branding-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-row > .col-md-6 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,23 +1,59 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1><i class="ti ti-building"></i> System Admin - All Companies</h1>
|
||||
<p class="subtitle">Manage companies across the entire system</p>
|
||||
<div class="companies-admin-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-building"></i></span>
|
||||
All Companies
|
||||
</h1>
|
||||
<p class="page-subtitle">Manage companies across the entire system</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="/setup" class="btn btn-md btn-success">+ Add New Company</a>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-md btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
<a href="/setup" class="btn btn-primary">
|
||||
<i class="ti ti-plus"></i>
|
||||
Add New Company
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Companies Table -->
|
||||
<!-- Summary Statistics -->
|
||||
<div class="stats-section">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ companies.total }}</div>
|
||||
<div class="stat-label">Total Companies</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ companies.items | selectattr('is_personal') | list | length }}</div>
|
||||
<div class="stat-label">Personal Companies</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ companies.items | rejectattr('is_personal') | list | length }}</div>
|
||||
<div class="stat-label">Business Companies</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ companies.items | selectattr('is_active') | list | length }}</div>
|
||||
<div class="stat-label">Active Companies</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="content-section">
|
||||
{% if companies.items %}
|
||||
<div class="table-section">
|
||||
<table class="table">
|
||||
<!-- Companies Table -->
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Company Name</th>
|
||||
<th>Company</th>
|
||||
<th>Type</th>
|
||||
<th>Users</th>
|
||||
<th>Admins</th>
|
||||
@@ -28,12 +64,14 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for company in companies.items %}
|
||||
<tr class="{% if not company.is_active %}inactive-company{% endif %}">
|
||||
<tr class="{% if not company.is_active %}inactive-row{% endif %}">
|
||||
<td>
|
||||
<strong>{{ company.name }}</strong>
|
||||
<div class="company-cell">
|
||||
<div class="company-name">{{ company.name }}</div>
|
||||
{% if company.slug %}
|
||||
<br><small class="text-muted">{{ company.slug }}</small>
|
||||
<div class="company-slug">{{ company.slug }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if company.is_personal %}
|
||||
@@ -43,12 +81,16 @@
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="stat-cell">
|
||||
<span class="stat-number">{{ company_stats[company.id]['user_count'] }}</span>
|
||||
<small>users</small>
|
||||
<span class="stat-label">users</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="stat-cell">
|
||||
<span class="stat-number">{{ company_stats[company.id]['admin_count'] }}</span>
|
||||
<small>admins</small>
|
||||
<span class="stat-label">admins</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if company.is_active %}
|
||||
@@ -57,11 +99,15 @@
|
||||
<span class="status-badge status-inactive">Inactive</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ company.created_at.strftime('%Y-%m-%d') }}</td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<span class="date-text">{{ company.created_at.strftime('%Y-%m-%d') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_company_detail', company_id=company.id) }}"
|
||||
class="btn btn-sm btn-primary">View Details</a>
|
||||
class="btn-icon" title="View Details">
|
||||
<i class="ti ti-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -72,242 +118,474 @@
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if companies.pages > 1 %}
|
||||
<div class="pagination-section">
|
||||
<div class="pagination-container">
|
||||
<div class="pagination">
|
||||
{% if companies.has_prev %}
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=companies.prev_num) }}" class="page-link"><i class="ti ti-arrow-left"></i> Previous</a>
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=companies.prev_num) }}"
|
||||
class="page-link">
|
||||
<i class="ti ti-chevron-left"></i>
|
||||
Previous
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="page-numbers">
|
||||
{% for page_num in companies.iter_pages() %}
|
||||
{% if page_num %}
|
||||
{% if page_num != companies.page %}
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=page_num) }}" class="page-link">{{ page_num }}</a>
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=page_num) }}"
|
||||
class="page-link">{{ page_num }}</a>
|
||||
{% else %}
|
||||
<span class="page-link current">{{ page_num }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="page-link">…</span>
|
||||
<span class="page-dots">...</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if companies.has_next %}
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=companies.next_num) }}" class="page-link">Next <i class="ti ti-arrow-right"></i></a>
|
||||
<a href="{{ url_for('system_admin.system_admin_companies', page=companies.next_num) }}"
|
||||
class="page-link">
|
||||
Next
|
||||
<i class="ti ti-chevron-right"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="pagination-info">
|
||||
<div class="pagination-info">
|
||||
Showing {{ companies.per_page * (companies.page - 1) + 1 }} -
|
||||
{{ companies.per_page * (companies.page - 1) + companies.items|length }} of {{ companies.total }} companies
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<!-- Empty State -->
|
||||
<div class="empty-state">
|
||||
<h3>No companies found</h3>
|
||||
<p>No companies exist in the system yet.</p>
|
||||
<div class="empty-icon"><i class="ti ti-building-community"></i></div>
|
||||
<h3 class="empty-title">No Companies Yet</h3>
|
||||
<p class="empty-message">No companies exist in the system.</p>
|
||||
<a href="/setup" class="btn btn-primary">
|
||||
<i class="ti ti-plus"></i>
|
||||
Create First Company
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Company Statistics Summary -->
|
||||
<div class="summary-section">
|
||||
<h3><i class="ti ti-chart-bar"></i> Company Summary</h3>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<h4>Total Companies</h4>
|
||||
<p class="summary-number">{{ companies.total }}</p>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Personal Companies</h4>
|
||||
<p class="summary-number">{{ companies.items | selectattr('is_personal') | list | length }}</p>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Business Companies</h4>
|
||||
<p class="summary-number">{{ companies.items | rejectattr('is_personal') | list | length }}</p>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Active Companies</h4>
|
||||
<p class="summary-number">{{ companies.items | selectattr('is_active') | list | length }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
/* Container */
|
||||
.companies-admin-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table {
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Table Container */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.table th {
|
||||
.data-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.inactive-company {
|
||||
background-color: #f8f9fa !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d;
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.inactive-row {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Company Cell */
|
||||
.company-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.company-slug {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Stat Cell */
|
||||
.stat-cell {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-cell .stat-number {
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stat-cell .stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Date Text */
|
||||
.date-text {
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-company {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-freelancer {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-weight: 600;
|
||||
color: #007bff;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
/* Table Actions */
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
.btn-icon {
|
||||
color: #6b7280;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
margin: 2rem 0;
|
||||
.btn-icon:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-container {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #dee2e6;
|
||||
color: #007bff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background: #e9ecef;
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.page-link.current {
|
||||
background: #007bff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.page-dots {
|
||||
padding: 0.5rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #6c757d;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6c757d;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.summary-section h3 {
|
||||
margin-top: 0;
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
.empty-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: white;
|
||||
.empty-message {
|
||||
font-size: 1.1rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.summary-card h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.summary-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #007bff;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.companies-admin-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,38 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>✏️ Edit User: {{ user.username }}</h1>
|
||||
<p class="subtitle">System Administrator - Edit user across companies</p>
|
||||
<a href="{{ url_for('users.system_admin_users') }}" class="btn btn-secondary"><i class="ti ti-arrow-left"></i> Back to Users</a>
|
||||
<div class="edit-user-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-user-edit"></i></span>
|
||||
Edit User: {{ user.username }}
|
||||
</h1>
|
||||
<p class="page-subtitle">System Administrator - Edit user across companies</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('users.system_admin_users') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Users
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
<form method="POST">
|
||||
<!-- Main Form -->
|
||||
<form method="POST" class="user-edit-form">
|
||||
<div class="form-grid">
|
||||
<!-- Basic Information -->
|
||||
<div class="form-section">
|
||||
<h3>Basic Information</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-user"></i></span>
|
||||
Basic Information
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
@@ -29,10 +48,17 @@
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company & Team Assignment -->
|
||||
<div class="form-section">
|
||||
<h3>Company & Team</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-building"></i></span>
|
||||
Company & Team
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="company_id">Company</label>
|
||||
@@ -60,10 +86,17 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role & Permissions -->
|
||||
<div class="form-section">
|
||||
<h3>Role & Permissions</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-shield-check"></i></span>
|
||||
Role & Permissions
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">Role</label>
|
||||
@@ -76,40 +109,54 @@
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% if user.role == Role.SYSTEM_ADMIN %}
|
||||
<small class="form-text">⚠️ Warning: This user is a System Administrator</small>
|
||||
<small class="form-text warning-text"><i class="ti ti-alert-triangle"></i> Warning: This user is a System Administrator</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Status -->
|
||||
<div class="form-section">
|
||||
<h3>Account Status</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-settings"></i></span>
|
||||
Account Status
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox" name="is_verified"
|
||||
{% if user.is_verified %}checked{% endif %}>
|
||||
<span class="checkmark"></span>
|
||||
Email Verified
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Email Verified</span>
|
||||
</label>
|
||||
<small class="form-text">Whether the user's email address has been verified</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-label">
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox" name="is_blocked"
|
||||
{% if user.is_blocked %}checked{% endif %}>
|
||||
<span class="checkmark"></span>
|
||||
Account Blocked
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-text">Account Blocked</span>
|
||||
</label>
|
||||
<small class="form-text">Blocked users cannot log in to the system</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Information Display -->
|
||||
<div class="info-section">
|
||||
<h3>User Information</h3>
|
||||
<div class="card full-width">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-info-circle"></i></span>
|
||||
User Information
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<label>Account Type:</label>
|
||||
@@ -138,27 +185,47 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
<a href="{{ url_for('users.system_admin_users') }}" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
{% if user.id != g.user.id and not (user.role == Role.SYSTEM_ADMIN and user.id == g.user.id) %}
|
||||
<div class="danger-zone">
|
||||
<h4>Danger Zone</h4>
|
||||
<p>Permanently delete this user account. This action cannot be undone.</p>
|
||||
<div class="danger-header">
|
||||
<h2 class="danger-title">
|
||||
<i class="ti ti-alert-triangle"></i>
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
<div class="danger-content">
|
||||
<div class="danger-item">
|
||||
<div class="danger-info">
|
||||
<h4>Delete User Account</h4>
|
||||
<p>Permanently delete this user account. This will also delete all their time entries and cannot be undone.</p>
|
||||
</div>
|
||||
<div class="danger-actions">
|
||||
<form method="POST" action="{{ url_for('users.system_admin_delete_user', user_id=user.id) }}"
|
||||
style="display: inline;"
|
||||
onsubmit="return confirm('Are you sure you want to delete user \'{{ user.username }}\'? This will also delete all their time entries and cannot be undone.')">
|
||||
<button type="submit" class="btn btn-danger">Delete User</button>
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<i class="ti ti-trash"></i>
|
||||
Delete User
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Dynamic team loading when company changes
|
||||
@@ -191,175 +258,402 @@ document.getElementById('company_id').addEventListener('change', function() {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 800px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
/* Container */
|
||||
.edit-user-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Form Grid */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #007bff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
.warning-text {
|
||||
color: #dc2626 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Toggle Switches */
|
||||
.toggle-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
.toggle-label input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
.toggle-slider {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: #495057;
|
||||
.toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Info Grid */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-item label {
|
||||
font-weight: 600;
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.badge-company {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-freelancer {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #28a745;
|
||||
color: #10b981;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Form Actions */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
|
||||
/* Danger Zone */
|
||||
.danger-zone {
|
||||
margin-left: auto;
|
||||
padding: 1rem;
|
||||
border: 2px solid #dc3545;
|
||||
background: #fef2f2;
|
||||
border: 2px solid #fecaca;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.danger-header {
|
||||
background: #fee2e2;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.danger-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #991b1b;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.danger-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.danger-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.danger-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #991b1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.danger-info p {
|
||||
margin: 0;
|
||||
color: #7f1d1d;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #f8d7da;
|
||||
max-width: 300px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.danger-zone h4 {
|
||||
color: #721c24;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.danger-zone p {
|
||||
color: #721c24;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.edit-user-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.danger-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.card:nth-child(4) { animation-delay: 0.4s; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,98 +1,117 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1><i class="ti ti-heart-rate-monitor"></i> System Health Check</h1>
|
||||
<p class="subtitle">System diagnostics and event monitoring</p>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<div class="health-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-heart-rate-monitor"></i></span>
|
||||
System Health
|
||||
</h1>
|
||||
<p class="page-subtitle">System diagnostics and event monitoring</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Health Status -->
|
||||
<div class="health-status-section">
|
||||
<h2><i class="ti ti-search"></i> System Status</h2>
|
||||
<!-- Health Status Cards -->
|
||||
<div class="health-cards">
|
||||
<div class="health-card {% if health_summary.health_status == 'healthy' %}healthy{% elif health_summary.health_status == 'issues' %}warning{% else %}critical{% endif %}">
|
||||
<div class="health-card {% if health_status == 'healthy' %}healthy{% elif health_status == 'warning' %}warning{% else %}critical{% endif %}">
|
||||
<div class="health-icon">
|
||||
{% if health_summary.health_status == 'healthy' %}
|
||||
<i class="ti ti-circle-check" style="font-size: 2rem; color: #10b981;"></i>
|
||||
{% elif health_summary.health_status == 'issues' %}
|
||||
<i class="ti ti-alert-triangle" style="font-size: 2rem; color: #f59e0b;"></i>
|
||||
{% if health_status == 'healthy' %}
|
||||
<i class="ti ti-circle-check"></i>
|
||||
{% elif health_status == 'warning' %}
|
||||
<i class="ti ti-alert-triangle"></i>
|
||||
{% else %}
|
||||
<i class="ti ti-circle-x" style="font-size: 2rem; color: #ef4444;"></i>
|
||||
<i class="ti ti-circle-x"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="health-info">
|
||||
<h3>Overall Health</h3>
|
||||
<p class="health-status">{{ health_summary.health_status|title }}</p>
|
||||
<small>
|
||||
{% if health_summary.health_status == 'healthy' %}
|
||||
<div class="health-content">
|
||||
<div class="health-label">Overall Health</div>
|
||||
<div class="health-value">{{ health_status|title }}</div>
|
||||
<div class="health-detail">
|
||||
{% if health_status == 'healthy' %}
|
||||
All systems running normally
|
||||
{% elif health_summary.health_status == 'issues' %}
|
||||
{% elif health_status == 'warning' %}
|
||||
Minor issues detected
|
||||
{% else %}
|
||||
Critical issues require attention
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="health-card {% if db_healthy %}healthy{% else %}critical{% endif %}">
|
||||
<div class="health-icon">
|
||||
{% if db_healthy %}<i class="ti ti-circle-check" style="font-size: 2rem; color: #10b981;"></i>{% else %}<i class="ti ti-circle-x" style="font-size: 2rem; color: #ef4444;"></i>{% endif %}
|
||||
</div>
|
||||
<div class="health-info">
|
||||
<h3>Database</h3>
|
||||
<p class="health-status">{% if db_healthy %}Connected{% else %}Error{% endif %}</p>
|
||||
<small>
|
||||
{% if db_healthy %}
|
||||
PostgreSQL connection active
|
||||
<i class="ti ti-database"></i>
|
||||
{% else %}
|
||||
<i class="ti ti-database-off"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="health-content">
|
||||
<div class="health-label">Database</div>
|
||||
<div class="health-value">{% if db_healthy %}Connected{% else %}Error{% endif %}</div>
|
||||
<div class="health-detail">
|
||||
{% if db_healthy %}
|
||||
Database connection active
|
||||
{% else %}
|
||||
{{ db_error }}
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="health-card info">
|
||||
<div class="health-icon"><i class="ti ti-clock" style="font-size: 2rem;"></i></div>
|
||||
<div class="health-info">
|
||||
<h3>Uptime</h3>
|
||||
<p class="health-status">{{ uptime_duration.days }}d {{ uptime_duration.seconds//3600 }}h {{ (uptime_duration.seconds//60)%60 }}m</p>
|
||||
<small>Since first recorded event</small>
|
||||
<div class="health-icon">
|
||||
<i class="ti ti-clock"></i>
|
||||
</div>
|
||||
<div class="health-content">
|
||||
<div class="health-label">Uptime</div>
|
||||
<div class="health-value">{{ uptime_duration.days }}d {{ uptime_duration.seconds//3600 }}h</div>
|
||||
<div class="health-detail">Since first recorded event</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<!-- Event Statistics -->
|
||||
<div class="stats-section">
|
||||
<h2><i class="ti ti-chart-bar"></i> Event Statistics</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card {% if health_summary.errors_24h > 0 %}error{% endif %}">
|
||||
<h3>{{ health_summary.errors_24h }}</h3>
|
||||
<p>Errors (24h)</p>
|
||||
<div class="stat-card {% if error_count_24h > 0 %}error{% endif %}">
|
||||
<div class="stat-value">{{ error_count_24h }}</div>
|
||||
<div class="stat-label">Errors (24h)</div>
|
||||
</div>
|
||||
<div class="stat-card {% if health_summary.warnings_24h > 0 %}warning{% endif %}">
|
||||
<h3>{{ health_summary.warnings_24h }}</h3>
|
||||
<p>Warnings (24h)</p>
|
||||
<div class="stat-card {% if warning_count_24h > 0 %}warning{% endif %}">
|
||||
<div class="stat-value">{{ warning_count_24h }}</div>
|
||||
<div class="stat-label">Warnings (24h)</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>{{ today_events }}</h3>
|
||||
<p>Events Today</p>
|
||||
<div class="stat-value">{{ today_events }}</div>
|
||||
<div class="stat-label">Events Today</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>{{ health_summary.total_events_week }}</h3>
|
||||
<p>Events This Week</p>
|
||||
</div>
|
||||
<div class="stat-value">{{ total_events_week }}</div>
|
||||
<div class="stat-label">Events This Week</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Errors -->
|
||||
{% if errors %}
|
||||
<div class="events-section error-section">
|
||||
<h2><i class="ti ti-alert-circle"></i> Recent Errors</h2>
|
||||
<div class="events-list">
|
||||
<div class="card error-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-alert-circle"></i></span>
|
||||
Recent Errors
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="event-list">
|
||||
{% for error in errors %}
|
||||
<div class="event-item error">
|
||||
<div class="event-header">
|
||||
@@ -100,23 +119,35 @@
|
||||
<span class="event-time">{{ error.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<div class="event-description">{{ error.description }}</div>
|
||||
<div class="event-meta">
|
||||
{% if error.user %}
|
||||
<div class="event-meta">User: {{ error.user.username }}</div>
|
||||
<span><i class="ti ti-user"></i> {{ error.user.username }}</span>
|
||||
{% endif %}
|
||||
{% if error.company %}
|
||||
<div class="event-meta">Company: {{ error.company.name }}</div>
|
||||
<span><i class="ti ti-building"></i> {{ error.company.name }}</span>
|
||||
{% endif %}
|
||||
{% if error.ip_address %}
|
||||
<span><i class="ti ti-world"></i> {{ error.ip_address }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Recent Warnings -->
|
||||
{% if warnings %}
|
||||
<div class="events-section warning-section">
|
||||
<h2><i class="ti ti-alert-triangle"></i> Recent Warnings</h2>
|
||||
<div class="events-list">
|
||||
<div class="card warning-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-alert-triangle"></i></span>
|
||||
Recent Warnings
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="event-list">
|
||||
{% for warning in warnings %}
|
||||
<div class="event-item warning">
|
||||
<div class="event-header">
|
||||
@@ -124,236 +155,346 @@
|
||||
<span class="event-time">{{ warning.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<div class="event-description">{{ warning.description }}</div>
|
||||
<div class="event-meta">
|
||||
{% if warning.user %}
|
||||
<div class="event-meta">User: {{ warning.user.username }}</div>
|
||||
<span><i class="ti ti-user"></i> {{ warning.user.username }}</span>
|
||||
{% endif %}
|
||||
{% if warning.company %}
|
||||
<div class="event-meta">Company: {{ warning.company.name }}</div>
|
||||
<span><i class="ti ti-building"></i> {{ warning.company.name }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- System Event Log -->
|
||||
<div class="events-section">
|
||||
<h2><i class="ti ti-clipboard-list"></i> System Event Log (Last 7 Days)</h2>
|
||||
<div class="events-controls">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-clipboard-list"></i></span>
|
||||
System Event Log
|
||||
<span class="card-subtitle">Last 7 days</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="event-controls">
|
||||
<button class="filter-btn active" data-filter="all">All Events</button>
|
||||
<button class="filter-btn" data-filter="auth">Authentication</button>
|
||||
<button class="filter-btn" data-filter="user_management">User Management</button>
|
||||
<button class="filter-btn" data-filter="system">System</button>
|
||||
<button class="filter-btn" data-filter="error">Errors</button>
|
||||
</div>
|
||||
<div class="events-list" id="eventsList">
|
||||
<div class="event-list" id="eventsList">
|
||||
{% for event in recent_events %}
|
||||
<div class="event-item {{ event.severity }} {{ event.event_category }}" data-category="{{ event.event_category }}" data-severity="{{ event.severity }}">
|
||||
<div class="event-item {{ event.severity }}" data-category="{{ event.event_category }}" data-severity="{{ event.severity }}">
|
||||
<div class="event-header">
|
||||
<div class="event-info">
|
||||
<span class="event-type">{{ event.event_type }}</span>
|
||||
<span class="event-category-badge">{{ event.event_category }}</span>
|
||||
<span class="event-category">{{ event.event_category }}</span>
|
||||
{% if event.severity != 'info' %}
|
||||
<span class="severity-badge severity-{{ event.severity }}">{{ event.severity|upper }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="event-time">{{ event.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<div class="event-description">{{ event.description }}</div>
|
||||
{% if event.user or event.company or event.ip_address %}
|
||||
<div class="event-meta">
|
||||
{% if event.user %}
|
||||
<div class="event-meta">User: {{ event.user.username }}</div>
|
||||
<span><i class="ti ti-user"></i> {{ event.user.username }}</span>
|
||||
{% endif %}
|
||||
{% if event.company %}
|
||||
<div class="event-meta">Company: {{ event.company.name }}</div>
|
||||
<span><i class="ti ti-building"></i> {{ event.company.name }}</span>
|
||||
{% endif %}
|
||||
{% if event.ip_address %}
|
||||
<div class="event-meta">IP: {{ event.ip_address }}</div>
|
||||
<span><i class="ti ti-world"></i> {{ event.ip_address }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last Error Details -->
|
||||
{% if health_summary.last_error %}
|
||||
<div class="events-section error-section">
|
||||
<h2>🔍 Last Critical Error</h2>
|
||||
<div class="last-error-details">
|
||||
<div class="error-card">
|
||||
<div class="error-header">
|
||||
<h3>{{ health_summary.last_error.event_type }}</h3>
|
||||
<span class="error-time">{{ health_summary.last_error.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<div class="error-description">{{ health_summary.last_error.description }}</div>
|
||||
{% if health_summary.last_error.event_metadata %}
|
||||
<div class="error-metadata">
|
||||
<strong>Additional Details:</strong>
|
||||
<pre>{{ health_summary.last_error.event_metadata }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
/* Container */
|
||||
.health-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.health-status-section {
|
||||
margin-bottom: 2rem;
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Health Cards */
|
||||
.health-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.health-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border-left: 4px solid #dee2e6;
|
||||
gap: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-left: 4px solid #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.health-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.health-card.healthy {
|
||||
border-left-color: #28a745;
|
||||
background: #f8fff9;
|
||||
border-left-color: #10b981;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.health-card.warning {
|
||||
border-left-color: #ffc107;
|
||||
background: #fffdf7;
|
||||
border-left-color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.health-card.critical {
|
||||
border-left-color: #dc3545;
|
||||
background: #fff8f8;
|
||||
border-left-color: #ef4444;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.health-card.info {
|
||||
border-left-color: #17a2b8;
|
||||
background: #f8fcfd;
|
||||
border-left-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.health-icon {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
font-size: 3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.health-info h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: #495057;
|
||||
.health-card.healthy .health-icon {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.health-status {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25rem 0;
|
||||
.health-card.warning .health-icon {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.health-card.healthy .health-status {
|
||||
color: #28a745;
|
||||
.health-card.critical .health-icon {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.health-card.warning .health-status {
|
||||
color: #ffc107;
|
||||
.health-card.info .health-icon {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.health-card.critical .health-status {
|
||||
color: #dc3545;
|
||||
.health-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.health-card.info .health-status {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.health-info small {
|
||||
color: #6c757d;
|
||||
.health-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.health-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.health-card.healthy .health-value {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.health-card.warning .health-value {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.health-card.critical .health-value {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.health-card.info .health-value {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.health-detail {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stats-section h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border-left: 4px solid #dee2e6;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.error {
|
||||
border-left-color: #dc3545;
|
||||
background: #fff8f8;
|
||||
border-left-color: #ef4444;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.stat-card.warning {
|
||||
border-left-color: #ffc107;
|
||||
background: #fffdf7;
|
||||
border-left-color: #f59e0b;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #007bff;
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-card.error h3 {
|
||||
color: #dc3545;
|
||||
.stat-card.error .stat-value {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.stat-card.warning h3 {
|
||||
color: #ffc107;
|
||||
.stat-card.warning .stat-value {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.stat-card p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.events-section {
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.events-section h2 {
|
||||
margin-top: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.events-controls {
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card.error-card {
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
.card.warning-card {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-weight: 400;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Event Controls */
|
||||
.event-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -362,53 +503,62 @@
|
||||
|
||||
.filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
color: #495057;
|
||||
border-radius: 4px;
|
||||
color: #6b7280;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: #adb5bd;
|
||||
color: #212529;
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #007bff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
/* Event List */
|
||||
.event-list {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.event-item:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.event-item.error {
|
||||
border-left: 4px solid #dc3545;
|
||||
background: #fff8f8;
|
||||
border-left: 4px solid #ef4444;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.event-item.warning {
|
||||
border-left: 4px solid #ffc107;
|
||||
background: #fffdf7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.event-item.critical {
|
||||
border-left: 4px solid #dc3545;
|
||||
background: #fff5f5;
|
||||
border-left: 4px solid #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
@@ -420,112 +570,155 @@
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.event-type {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
.event-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.event-category-badge {
|
||||
background: #e9ecef;
|
||||
color: #495057;
|
||||
.event-type {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.event-category {
|
||||
background: #e5e7eb;
|
||||
color: #6b7280;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.severity-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.severity-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.severity-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.severity-critical {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.event-description {
|
||||
color: #4b5563;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.event-meta {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.error-section {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
.warning-section {
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
|
||||
.last-error-details {
|
||||
background: #fff8f8;
|
||||
border: 1px solid #f5c6cb;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.event-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.error-header h3 {
|
||||
margin: 0;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.error-time {
|
||||
color: #6c757d;
|
||||
.event-meta i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-description {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.error-metadata {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.error-metadata pre {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.875rem;
|
||||
white-space: pre-wrap;
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.health-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.health-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.event-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.events-controls {
|
||||
.event-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -547,7 +740,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if (filter === 'all') {
|
||||
item.style.display = 'block';
|
||||
} else if (filter === 'error') {
|
||||
item.style.display = item.classList.contains('error') || item.classList.contains('critical') ? 'block' : 'none';
|
||||
item.style.display = (item.classList.contains('error') || item.classList.contains('critical')) ? 'block' : 'none';
|
||||
} else {
|
||||
item.style.display = item.dataset.category === filter ? 'block' : 'none';
|
||||
}
|
||||
|
||||
@@ -1,35 +1,51 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>⚙️ System Administrator Settings</h1>
|
||||
<p class="subtitle">Global system configuration and management</p>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<div class="settings-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-settings"></i></span>
|
||||
System Administrator Settings
|
||||
</h1>
|
||||
<p class="page-subtitle">Global system configuration and management</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Statistics -->
|
||||
<div class="stats-section">
|
||||
<h3>📊 System Overview</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h4>{{ total_companies }}</h4>
|
||||
<p>Total Companies</p>
|
||||
<div class="stat-value">{{ total_companies }}</div>
|
||||
<div class="stat-label">Total Companies</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h4>{{ total_users }}</h4>
|
||||
<p>Total Users</p>
|
||||
<div class="stat-value">{{ total_users }}</div>
|
||||
<div class="stat-label">Total Users</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h4>{{ total_system_admins }}</h4>
|
||||
<p>System Administrators</p>
|
||||
</div>
|
||||
<div class="stat-value">{{ total_system_admins }}</div>
|
||||
<div class="stat-label">System Administrators</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Settings Form -->
|
||||
<div class="settings-section">
|
||||
<h3>🔧 System Configuration</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-adjustments"></i></span>
|
||||
System Configuration
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" class="settings-form">
|
||||
<div class="setting-group">
|
||||
<div class="setting-header">
|
||||
@@ -112,10 +128,17 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Information -->
|
||||
<div class="info-section">
|
||||
<h3>ℹ️ System Information</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-info-circle"></i></span>
|
||||
System Information
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<h4>Application Version</h4>
|
||||
@@ -131,10 +154,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="danger-section">
|
||||
<h3>⚠️ Danger Zone</h3>
|
||||
<div class="danger-zone">
|
||||
<div class="danger-header">
|
||||
<h2 class="danger-title">
|
||||
<i class="ti ti-alert-triangle"></i>
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
<div class="danger-content">
|
||||
<div class="danger-item">
|
||||
<div class="danger-info">
|
||||
@@ -164,8 +193,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="actions-section">
|
||||
<h3>🚀 Quick Actions</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-rocket"></i></span>
|
||||
Quick Actions
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="actions-grid">
|
||||
<a href="{{ url_for('users.system_admin_users') }}" class="action-card">
|
||||
<div class="action-icon"><i class="ti ti-users"></i></div>
|
||||
@@ -176,7 +211,7 @@
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('system_admin.system_admin_companies') }}" class="action-card">
|
||||
<div class="action-icon">🏢</div>
|
||||
<div class="action-icon"><i class="ti ti-building"></i></div>
|
||||
<div class="action-content">
|
||||
<h4>Manage Companies</h4>
|
||||
<p>View and manage all companies in the system</p>
|
||||
@@ -184,7 +219,7 @@
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('system_admin.system_admin_time_entries') }}" class="action-card">
|
||||
<div class="action-icon">⏱️</div>
|
||||
<div class="action-icon"><i class="ti ti-clock"></i></div>
|
||||
<div class="action-content">
|
||||
<h4>View Time Entries</h4>
|
||||
<p>Browse time tracking data across all companies</p>
|
||||
@@ -193,68 +228,136 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
margin-bottom: 2rem;
|
||||
/* Container */
|
||||
.settings-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stats-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card h4 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #007bff;
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-card p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
@@ -268,8 +371,9 @@
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.setting-group.full-width {
|
||||
@@ -295,7 +399,8 @@
|
||||
|
||||
.setting-header h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #495057;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.setting-header p {
|
||||
@@ -320,7 +425,7 @@
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
background: #ccc;
|
||||
background: #e5e7eb;
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
@@ -335,10 +440,11 @@
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
|
||||
background: #007bff;
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
|
||||
@@ -347,7 +453,7 @@
|
||||
|
||||
.toggle-text {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
@@ -359,21 +465,9 @@
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
@@ -383,41 +477,62 @@
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.info-card h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #495057;
|
||||
font-size: 1rem;
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
color: #1f2937;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.danger-section {
|
||||
background: #f8d7da;
|
||||
border: 2px solid #dc3545;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
/* Danger Zone */
|
||||
.danger-zone {
|
||||
margin-top: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 2px solid #fecaca;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.danger-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #721c24;
|
||||
.danger-header {
|
||||
background: #fee2e2;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.danger-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #991b1b;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.danger-title i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.danger-content {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.danger-item {
|
||||
@@ -427,82 +542,145 @@
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dc3545;
|
||||
border: 1px solid #fecaca;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.danger-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #721c24;
|
||||
color: #991b1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.danger-info p {
|
||||
margin: 0;
|
||||
color: #721c24;
|
||||
color: #7f1d1d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.actions-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.actions-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
border: 2px solid transparent;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
background: white;
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 2rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
font-size: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-icon i {
|
||||
font-size: 2.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.action-content h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #495057;
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.action-content p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.settings-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -513,5 +691,26 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,16 +1,35 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1>⏱️ System Admin - Time Entries</h1>
|
||||
<p class="subtitle">View time entries across all companies</p>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<div class="time-entries-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-clock"></i></span>
|
||||
System Admin - Time Entries
|
||||
</h1>
|
||||
<p class="page-subtitle">View time entries across all companies</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="filter-section">
|
||||
<h3>Filter Time Entries</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-filter"></i></span>
|
||||
Filter Time Entries
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="GET" class="filter-form">
|
||||
<div class="filter-group">
|
||||
<label for="company">Company:</label>
|
||||
@@ -29,10 +48,12 @@
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Entries Table -->
|
||||
{% if entries.items %}
|
||||
<div class="table-section">
|
||||
<div class="card">
|
||||
<div class="card-body no-padding">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -106,6 +127,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if entries.pages > 1 %}
|
||||
@@ -152,55 +174,127 @@
|
||||
|
||||
<!-- Summary Statistics -->
|
||||
{% if entries.items %}
|
||||
<div class="summary-section">
|
||||
<h3>📊 Summary Statistics</h3>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<h4>Total Entries</h4>
|
||||
<p class="summary-number">{{ entries.total }}</p>
|
||||
<div class="stats-section">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ entries.total }}</div>
|
||||
<div class="stat-label">Total Entries</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Active Sessions</h4>
|
||||
<p class="summary-number">{{ entries.items | selectattr('0.departure_time', 'equalto', None) | list | length }}</p>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ entries.items | selectattr('0.departure_time', 'equalto', None) | list | length }}</div>
|
||||
<div class="stat-label">Active Sessions</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Paused Sessions</h4>
|
||||
<p class="summary-number">{{ entries.items | selectattr('0.is_paused', 'equalto', True) | list | length }}</p>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ entries.items | selectattr('0.is_paused', 'equalto', True) | list | length }}</div>
|
||||
<div class="stat-label">Paused Sessions</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<h4>Completed Today</h4>
|
||||
<p class="summary-number">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">
|
||||
{{ entries.items | selectattr('0.arrival_time') | selectattr('0.departure_time', 'defined') |
|
||||
list | length }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat-label">Completed Today</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
/* Container */
|
||||
.time-entries-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.filter-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Filter Form */
|
||||
.filter-form {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
@@ -215,24 +309,24 @@
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
min-width: 200px;
|
||||
min-width: 250px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
margin-bottom: 2rem;
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.table {
|
||||
@@ -252,7 +346,10 @@
|
||||
.table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: #374151;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.paused-entry {
|
||||
@@ -260,18 +357,18 @@
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
color: #007bff;
|
||||
font-weight: 500;
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-weight: 600;
|
||||
color: #28a745;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.notes {
|
||||
@@ -284,25 +381,26 @@
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-paused {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
@@ -320,21 +418,27 @@
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #dee2e6;
|
||||
color: #007bff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background: #e9ecef;
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.page-link.current {
|
||||
background: #007bff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
@@ -349,57 +453,130 @@
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.summary-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.summary-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.summary-card h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.summary-number {
|
||||
font-size: 2rem;
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
color: #007bff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #007bff;
|
||||
border: 1px solid #007bff;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #007bff;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.time-entries-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,16 +1,35 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
<h1><i class="ti ti-users"></i> System Admin - All Users</h1>
|
||||
<p class="subtitle">Manage users across all companies</p>
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-md btn-secondary"><i class="ti ti-arrow-left"></i> Back to Dashboard</a>
|
||||
<div class="users-admin-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">
|
||||
<span class="page-icon"><i class="ti ti-users"></i></span>
|
||||
System Admin - All Users
|
||||
</h1>
|
||||
<p class="page-subtitle">Manage users across all companies</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Options -->
|
||||
<div class="filter-section">
|
||||
<h3>Filter Users</h3>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="icon"><i class="ti ti-filter"></i></span>
|
||||
Filter Users
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="filter-buttons">
|
||||
<a href="{{ url_for('users.system_admin_users') }}"
|
||||
class="btn btn-filter {% if not current_filter %}active{% endif %}">
|
||||
@@ -38,10 +57,12 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
{% if users.items %}
|
||||
<div class="table-section">
|
||||
<div class="card">
|
||||
<div class="card-body no-padding">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -118,6 +139,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if users.pages > 1 %}
|
||||
@@ -160,60 +182,132 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-section {
|
||||
/* Container */
|
||||
.users-admin-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
font-size: 2.5rem;
|
||||
display: inline-block;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.filter-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Filter Buttons */
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-filter {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: white;
|
||||
color: #495057;
|
||||
color: #6b7280;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-filter:hover {
|
||||
background: #e9ecef;
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.btn-filter.active {
|
||||
background: #007bff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -224,120 +318,127 @@
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: #374151;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.blocked-user {
|
||||
background-color: #f8d7da !important;
|
||||
background-color: #fef2f2 !important;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-self {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-personal {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.badge-company {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-freelancer {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* Role Badges */
|
||||
.role-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.role-team_member {
|
||||
background: #e2e3e5;
|
||||
color: #495057;
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.role-team_leader {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.role-supervisor {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.role-admin {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.role-system_admin {
|
||||
background: #f1c0e8;
|
||||
color: #6a1b99;
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-blocked {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.status-unverified {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
/* Button styles now centralized in main style.css */
|
||||
|
||||
/* Pagination */
|
||||
.pagination-section {
|
||||
margin-top: 2rem;
|
||||
margin: 2rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -351,37 +452,156 @@
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #dee2e6;
|
||||
color: #007bff;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
background: #e9ecef;
|
||||
background: #f3f4f6;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.page-link.current {
|
||||
background: #007bff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6c757d;
|
||||
padding: 4rem 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-weight: 500;
|
||||
.empty-state h3 {
|
||||
font-size: 1.5rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #6b7280;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.users-admin-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user