Upgrade code

app/templates/auth/profile.html

@@ -8,17 +8,30 @@
     <div class="card">
       <div class="card-header"><i class="bi bi-person-circle me-2"></i>Account Settings</div>
       <div class="card-body">
-        <form method="POST">
+        <form method="POST" enctype="multipart/form-data">
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
-          <!-- Avatar placeholder -->
+          <!-- Avatar -->
           <div class="text-center mb-4">
+            {% if current_user.avatar_url %}
+            <img src="{{ url_for('auth.serve_avatar', filename=current_user.avatar_url) }}"
+                 alt="Avatar"
+                 style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--border);margin:0 auto 10px;display:block;"/>
+            {% else %}
             <div style="width:80px;height:80px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;margin:0 auto 10px;">
               {{ current_user.full_name[0].upper() }}
             </div>
+            {% endif %}
             <div style="font-size:12px;color:var(--muted);">{{ current_user.email }}</div>
             <div style="font-size:11px;background:rgba(0,180,216,.1);color:var(--accent3);display:inline-block;padding:2px 10px;border-radius:12px;margin-top:4px;">
               {{ current_user.role.replace('_',' ').upper() }}
             </div>
+            <div class="mt-3">
+              <label class="form-label" style="font-size:12px;">Profile Picture
+                <span style="color:var(--muted);font-weight:400;">(PNG, JPG, GIF, WebP — max 5 MB)</span>
+              </label>
+              <input type="file" class="form-control form-control-sm" name="avatar"
+                     accept=".png,.jpg,.jpeg,.gif,.webp" style="max-width:300px;margin:0 auto;"/>
+            </div>
           </div>
 
           <div class="row g-3">