556 lines
14 KiB
HTML
556 lines
14 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="header-section">
|
|
<h1>🏢 {{ company.name }}</h1>
|
|
<p class="subtitle">Company Details - System Administrator View</p>
|
|
<div class="header-actions">
|
|
<a href="{{ url_for('system_admin_companies') }}" class="btn btn-secondary">← Back to Companies</a>
|
|
<a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">Dashboard</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company Information -->
|
|
<div class="info-section">
|
|
<h3>📋 Company Information</h3>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<label>Company Name:</label>
|
|
<span>{{ company.name }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Slug:</label>
|
|
<span>{{ company.slug }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Type:</label>
|
|
{% if company.is_personal %}
|
|
<span class="badge badge-freelancer">Personal/Freelancer</span>
|
|
{% else %}
|
|
<span class="badge badge-company">Business Company</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Status:</label>
|
|
{% if company.is_active %}
|
|
<span class="status-badge status-active">Active</span>
|
|
{% else %}
|
|
<span class="status-badge status-inactive">Inactive</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Created:</label>
|
|
<span>{{ company.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Max Users:</label>
|
|
<span>{{ company.max_users or 'Unlimited' }}</span>
|
|
</div>
|
|
{% if company.description %}
|
|
<div class="info-item full-width">
|
|
<label>Description:</label>
|
|
<span>{{ company.description }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Overview -->
|
|
<div class="stats-section">
|
|
<h3>📊 Company Statistics</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<h4>{{ users|length }}</h4>
|
|
<p>Total Users</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>{{ teams|length }}</h4>
|
|
<p>Teams</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>{{ projects|length }}</h4>
|
|
<p>Projects</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>{{ recent_time_entries }}</h4>
|
|
<p>Recent Time Entries</p>
|
|
<small>(Last 7 days)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Role Distribution -->
|
|
{% if role_counts %}
|
|
<div class="role-section">
|
|
<h3>👥 Role Distribution</h3>
|
|
<div class="role-grid">
|
|
{% for role, count in role_counts.items() %}
|
|
<div class="role-card">
|
|
<span class="role-count">{{ count }}</span>
|
|
<span class="role-name">{{ role }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="content-grid">
|
|
<!-- Users List -->
|
|
<div class="content-card">
|
|
<h3>👤 Users ({{ users|length }})</h3>
|
|
{% if users %}
|
|
<div class="list-container">
|
|
{% for user in users[:10] %}
|
|
<div class="list-item">
|
|
<div class="item-info">
|
|
<strong>{{ user.username }}</strong>
|
|
<small>{{ user.email }}</small>
|
|
</div>
|
|
<div class="item-meta">
|
|
<span class="role-badge role-{{ user.role.name.lower() }}">
|
|
{{ user.role.value }}
|
|
</span>
|
|
{% if user.is_blocked %}
|
|
<span class="status-badge status-blocked">Blocked</span>
|
|
{% elif not user.is_verified %}
|
|
<span class="status-badge status-unverified">Unverified</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% if users|length > 10 %}
|
|
<div class="list-more">
|
|
<a href="{{ url_for('system_admin_users', company=company.id) }}" class="btn btn-sm btn-outline">
|
|
View All {{ users|length }} Users →
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<p class="empty-message">No users in this company.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Teams List -->
|
|
<div class="content-card">
|
|
<h3>🏭 Teams ({{ teams|length }})</h3>
|
|
{% if teams %}
|
|
<div class="list-container">
|
|
{% for team in teams %}
|
|
<div class="list-item">
|
|
<div class="item-info">
|
|
<strong>{{ team.name }}</strong>
|
|
{% if team.description %}
|
|
<small>{{ team.description }}</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="item-meta">
|
|
<small>{{ team.created_at.strftime('%Y-%m-%d') }}</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p class="empty-message">No teams in this company.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Projects List -->
|
|
<div class="content-card">
|
|
<h3>📝 Projects ({{ projects|length }})</h3>
|
|
{% if projects %}
|
|
<div class="list-container">
|
|
{% for project in projects[:10] %}
|
|
<div class="list-item">
|
|
<div class="item-info">
|
|
<strong>{{ project.name }}</strong>
|
|
<small>{{ project.code }}</small>
|
|
{% if project.description %}
|
|
<small>{{ project.description[:50] }}{% if project.description|length > 50 %}...{% endif %}</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="item-meta">
|
|
{% if project.is_active %}
|
|
<span class="status-badge status-active">Active</span>
|
|
{% else %}
|
|
<span class="status-badge status-inactive">Inactive</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% if projects|length > 10 %}
|
|
<div class="list-more">
|
|
<p class="text-muted">And {{ projects|length - 10 }} more projects...</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<p class="empty-message">No projects in this company.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Management Actions -->
|
|
<div class="actions-section">
|
|
<h3>🛠️ Management Actions</h3>
|
|
<div class="actions-grid">
|
|
<a href="{{ url_for('system_admin_users', company=company.id) }}" class="action-card">
|
|
<div class="action-icon">👥</div>
|
|
<div class="action-content">
|
|
<h4>Manage Users</h4>
|
|
<p>View and edit all users in this company</p>
|
|
</div>
|
|
</a>
|
|
<a href="{{ url_for('system_admin_time_entries', company=company.id) }}" class="action-card">
|
|
<div class="action-icon">⏱️</div>
|
|
<div class="action-content">
|
|
<h4>View Time Entries</h4>
|
|
<p>Browse time tracking data for this company</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.header-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #6c757d;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.info-section {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-section h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.info-item.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.info-item label {
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.stats-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stats-section h3 {
|
|
margin-bottom: 1rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h4 {
|
|
font-size: 2rem;
|
|
margin: 0 0 0.5rem 0;
|
|
color: #007bff;
|
|
}
|
|
|
|
.stat-card p {
|
|
margin: 0;
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-card small {
|
|
display: block;
|
|
color: #6c757d;
|
|
font-size: 0.75rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.role-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.role-section h3 {
|
|
margin-bottom: 1rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.role-grid {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.role-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.role-count {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #007bff;
|
|
}
|
|
|
|
.role-name {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
text-align: center;
|
|
}
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.content-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.content-card h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.list-container {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.item-info strong {
|
|
color: #495057;
|
|
}
|
|
|
|
.item-info small {
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.item-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.list-more {
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.empty-message {
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.actions-section {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.actions-section h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.actions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.action-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-card:hover {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
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;
|
|
}
|
|
|
|
.action-content h4 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.action-content p {
|
|
margin: 0;
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.badge, .status-badge, .role-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge-company {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.badge-freelancer {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-active {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-inactive {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status-blocked {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status-unverified {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.role-team_member {
|
|
background: #e2e3e5;
|
|
color: #495057;
|
|
}
|
|
|
|
.role-team_leader {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.role-supervisor {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.role-admin {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.role-system_admin {
|
|
background: #f1c0e8;
|
|
color: #6a1b99;
|
|
}
|
|
|
|
/* Button styles now centralized in main style.css */
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: #007bff;
|
|
border: 1px solid #007bff;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
{% endblock %} |