|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+{% extends "base.html" %}
|
|
|
2
|
+{% load tailwind_filters %}
|
|
|
3
|
+
|
|
|
4
|
+{% block title %}Report Dashboard{% endblock %}
|
|
|
5
|
+{% block content %}
|
|
|
6
|
+<div class="container mx-auto px-4 py-8">
|
|
|
7
|
+<h1 class="text-2xl font-bold text-gray-700 mb-6">Your Profile</h1>
|
|
|
8
|
+
|
|
|
9
|
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
10
|
+ <!-- Username -->
|
|
|
11
|
+ <div class="flex items-center bg-gray-50 p-4 rounded-lg shadow-sm border">
|
|
|
12
|
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full h-12 w-12 flex items-center justify-center">
|
|
|
13
|
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
|
|
|
14
|
+ <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
|
15
|
+</svg>
|
|
|
16
|
+
|
|
|
17
|
+ </div>
|
|
|
18
|
+ <div class="ml-4">
|
|
|
19
|
+ <h3 class="text-lg font-medium text-gray-900">Username</h3>
|
|
|
20
|
+ <p class="text-gray-600">{{ user.username }}</p>
|
|
|
21
|
+ </div>
|
|
|
22
|
+ </div>
|
|
|
23
|
+
|
|
|
24
|
+ <!-- Email -->
|
|
|
25
|
+ <div class="flex items-center bg-gray-50 p-4 rounded-lg shadow-sm border">
|
|
|
26
|
+ <div class="flex-shrink-0 bg-indigo-100 rounded-full h-12 w-12 flex items-center justify-center">
|
|
|
27
|
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
|
28
|
+ <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
|
29
|
+</svg>
|
|
|
30
|
+
|
|
|
31
|
+ </div>
|
|
|
32
|
+ <div class="ml-4">
|
|
|
33
|
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
|
|
|
34
|
+ <p class="text-gray-600">{{ user.email }}</p>
|
|
|
35
|
+ </div>
|
|
|
36
|
+ </div>
|
|
|
37
|
+ </div>
|
|
|
38
|
+<form method="POST" enctype="multipart/form-data" class='space-y-4'>
|
|
|
39
|
+ {% csrf_token %}
|
|
|
40
|
+ <!-- First Name -->
|
|
|
41
|
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
|
42
|
+
|
|
|
43
|
+ <div>
|
|
|
44
|
+ <label for="first_name" class="block text-sm font-medium text-gray-700">First Name</label>
|
|
|
45
|
+ <input
|
|
|
46
|
+ type="text"
|
|
|
47
|
+ name="first_name"
|
|
|
48
|
+ id="first_name"
|
|
|
49
|
+ value="{{ user.first_name }}"
|
|
|
50
|
+ class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
|
51
|
+ />
|
|
|
52
|
+ </div>
|
|
|
53
|
+
|
|
|
54
|
+ <!-- Last Name -->
|
|
|
55
|
+ <div>
|
|
|
56
|
+ <label for="last_name" class="block text-sm font-medium text-gray-700">Last Name</label>
|
|
|
57
|
+ <input
|
|
|
58
|
+ type="text"
|
|
|
59
|
+ name="last_name"
|
|
|
60
|
+ id="last_name"
|
|
|
61
|
+ value="{{ user.last_name }}"
|
|
|
62
|
+ class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
|
|
63
|
+ />
|
|
|
64
|
+ </div>
|
|
|
65
|
+ </div>
|
|
|
66
|
+ {% if form.instance.profile_picture %}
|
|
|
67
|
+ <!-- Show uploaded profile picture -->
|
|
|
68
|
+ <img src="{{ form.instance.profile_picture.url }}"
|
|
|
69
|
+ alt="Profile Picture"
|
|
|
70
|
+ class="w-32 h-32 rounded-full mb-4 shadow-md">
|
|
|
71
|
+ {% else %}
|
|
|
72
|
+ <!-- Placeholder image if no profile picture -->
|
|
|
73
|
+ <div class="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mb-4">
|
|
|
74
|
+ <span>No Image</span>
|
|
|
75
|
+ </div>
|
|
|
76
|
+ {% endif %}
|
|
|
77
|
+ {{ form.profile_picture }}
|
|
|
78
|
+ {% if form.instance.signed_picture %}
|
|
|
79
|
+ <!-- Show uploaded profile picture -->
|
|
|
80
|
+ <img src="{{ form.instance.signed_picture.url }}"
|
|
|
81
|
+ alt="Profile Picture"
|
|
|
82
|
+ class="w-32 mb-4 shadow-md">
|
|
|
83
|
+ {% else %}
|
|
|
84
|
+ <!-- Placeholder image if no profile picture -->
|
|
|
85
|
+ <div class="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mb-4">
|
|
|
86
|
+ <span>No Image</span>
|
|
|
87
|
+ </div>
|
|
|
88
|
+ {% endif %}
|
|
|
89
|
+ {{ form.signed_picture }}
|
|
|
90
|
+ {{ form.position | as_crispy_field }}
|
|
|
91
|
+ <button type="submit" class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save Changes</button>
|
|
|
92
|
+</form>
|
|
|
93
|
+</div>
|
|
|
94
|
+{% endblock %}
|