sankalp
9da2e2ee03
Refactor template layout to group related pages, improving project structure and clarity.
90 lines
4.8 KiB
HTML
90 lines
4.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ u.get_full_name|default:u.username }}{% endblock %}
|
|
{% block breadcrumb %}
|
|
<nav class="mb-4" aria-label="Breadcrumb">
|
|
<ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
<li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
|
|
<li class="text-gray-300 dark:text-gray-600">/</li>
|
|
<li><a href="{% url 'users-list' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Users</a></li>
|
|
<li class="text-gray-300 dark:text-gray-600">/</li>
|
|
<li class="text-gray-900 dark:text-white font-medium" aria-current="page">{{ u.get_full_name|default:u.username }}</li>
|
|
</ol>
|
|
</nav>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
{% if u.profile_image %}
|
|
<img src="{{ u.profile_image.url }}" alt="{{ u.get_full_name|default:u.username }}" class="w-12 h-12 rounded-full object-cover shrink-0">
|
|
{% else %}
|
|
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0"
|
|
style="background-color:#3B82F6">
|
|
{{ u.get_full_name|default:u.username|make_list|first|upper }}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<h1 class="text-2xl font-bold">{{ u.get_full_name|default:u.username }}</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">@{{ u.username }} · {{ u.email }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<a href="{% url 'user-edit' u.id %}" class="dk-btn dk-btn-primary text-sm"><i class="fas fa-pen mr-1"></i> Edit</a>
|
|
<a href="{% url 'users-list' %}" class="dk-btn dk-btn-ghost text-sm"><i class="fas fa-arrow-left mr-1"></i> Back</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 p-5">
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</p>
|
|
<p class="mt-1">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
|
{% if role.slug in admin_roles %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400
|
|
{% else %}bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400{% endif %}">
|
|
{{ role.name|default:"Unassigned" }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 p-5">
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Joined</p>
|
|
<p class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">{{ u.date_joined|date:"M d, Y" }}</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 p-5">
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</p>
|
|
<p class="mt-1">
|
|
{% if u.is_active %}
|
|
<span class="inline-flex items-center gap-1 text-sm font-semibold text-green-600 dark:text-green-400">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span> Active
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1 text-sm font-semibold text-red-600 dark:text-red-400">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-red-500 inline-block"></span> Inactive
|
|
</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
|
|
<div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-600">
|
|
<div>
|
|
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Activity Overview</h3>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x divide-gray-100 dark:divide-gray-600">
|
|
<div class="p-6 text-center">
|
|
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ projects_count }}</p>
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 uppercase tracking-wider">Projects</p>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ assigned_count }}</p>
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 uppercase tracking-wider">Tickets Assigned</p>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ created_count }}</p>
|
|
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mt-1 uppercase tracking-wider">Tickets Created</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |