Added request offs

app.py

@@ -1089,6 +1089,104 @@ TPL_CHANGE_PASSWORD_BODY = """
 </div>
 """
 
+# Member: Request Off page (simple, professional)
+TPL_REQUEST_OFF_BODY = """
+<section class="grid gap-6">
+  <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
+    <h1 class="text-xl font-bold mb-3">Request Time Off</h1>
+    <p class="text-sm text-slate-400 mb-4">
+      Use this page to request specific days off. Your leader will approve or deny
+      the request in the admin view.
+    </p>
+
+    <!-- New request form -->
+    <form method="post" action="{{ url_for('requests_new') }}" class="grid gap-3 max-w-md">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+      <label class="grid gap-1 text-sm">
+        <span class="text-slate-300">Date</span>
+        <input type="date"
+               name="date"
+               required
+               class="px-3 py-2 rounded-lg bg-slate-950 border border-slate-700" />
+      </label>
+      <label class="grid gap-1 text-sm">
+        <span class="text-slate-300">Note (optional)</span>
+        <textarea name="note"
+                  rows="3"
+                  maxlength="240"
+                  class="px-3 py-2 rounded-lg bg-slate-950 border border-slate-700"
+                  placeholder="Reason, details, or anything the scheduler should know."></textarea>
+      </label>
+      <button class="mt-1 px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 font-semibold"
+              type="submit">
+        Submit Request
+      </button>
+    </form>
+  </div>
+
+  <!-- Existing requests -->
+  <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-4 overflow-x-auto">
+    <h2 class="text-lg font-semibold mb-3">Your Requests</h2>
+    {% if my_reqs %}
+      <table class="min-w-full text-sm">
+        <thead class="text-slate-300">
+          <tr>
+            <th class="py-2 pr-3 text-left font-medium">Date</th>
+            <th class="py-2 pr-3 text-left font-medium">Status</th>
+            <th class="py-2 pr-3 text-left font-medium">Note</th>
+            <th class="py-2 pr-3 text-left font-medium">Requested</th>
+            <th class="py-2 pr-3 text-left font-medium">Action</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-800">
+          {% for r in my_reqs %}
+          <tr>
+            <td class="py-2 pr-3">{{ r.date }}</td>
+            <td class="py-2 pr-3">
+              <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs capitalize
+                           {% if r.status == 'pending' %}
+                             bg-amber-500/15 text-amber-200 border border-amber-600
+                           {% elif r.status == 'approved' %}
+                             bg-emerald-500/15 text-emerald-200 border border-emerald-600
+                           {% elif r.status == 'denied' %}
+                             bg-red-500/15 text-red-200 border border-red-600
+                           {% else %}
+                             bg-slate-700/40 text-slate-200 border border-slate-600
+                           {% endif %}">
+                {{ r.status }}
+              </span>
+            </td>
+            <td class="py-2 pr-3 whitespace-pre-wrap">{{ r.note or '' }}</td>
+            <td class="py-2 pr-3">
+              {{ r.created_at.strftime('%Y-%m-%d %H:%M') if r.created_at else '' }}
+            </td>
+            <td class="py-2 pr-3">
+              {% if r.status == 'pending' %}
+              <form method="post"
+                    action="{{ url_for('requests_cancel', req_id=r.id) }}"
+                    onsubmit="return confirm('Cancel this request?');">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit"
+                        class="px-3 py-1.5 rounded-lg border border-slate-700 hover:border-slate-500 text-xs">
+                  Cancel
+                </button>
+              </form>
+              {% else %}
+                <span class="text-xs text-slate-500">No action</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    {% else %}
+      <p class="text-sm text-slate-400">You don't have any requests yet.</p>
+    {% endif %}
+  </div>
+</section>
+"""
+
+
 # Admin: Users
 TPL_ADMIN_USERS_BODY = """
 <section class="grid gap-6">