05/24 Enhance functionalities

templates/admin/shifts.html

@@ -3,9 +3,17 @@
 {% block content %}
 <div class="page-header">
   <h1 class="page-title">Shift Management</h1>
-  <button class="btn btn-primary" onclick="openModal('modal-create-shift')">＋ New Shift</button>
+  <div style="display:flex;gap:.5rem">
+    <button class="btn btn-ghost btn-sm tab-btn active" data-tab="tab-list" data-group="shifts-tabs">☰ List</button>
+    <button class="btn btn-ghost btn-sm tab-btn" data-tab="tab-calendar" data-group="shifts-tabs">📅 Calendar</button>
+    <button class="btn btn-primary" onclick="openModal('modal-create-shift')">＋ New Shift</button>
+  </div>
 </div>
 
+<div id="shifts-tabs">
+
+<!-- List tab -->
+<div class="tab-panel active" id="tab-list">
 <div class="card">
   <table class="table table-hover">
     <thead>
@@ -34,6 +42,49 @@
     </tbody>
   </table>
 </div>
+</div>
+
+<!-- Calendar tab -->
+<div class="tab-panel" id="tab-calendar">
+<div class="card">
+  <div class="card-header"><span class="card-title">Weekly Schedule</span></div>
+  <div style="overflow-x:auto">
+  <table class="table">
+    <thead>
+      <tr>
+        <th style="min-width:160px">Shift</th>
+        {% for label, _ in day_map %}
+        <th style="text-align:center;min-width:64px">{{ label }}</th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for s in shifts if s.is_active %}
+      <tr>
+        <td>
+          <strong>{{ s.name }}</strong>
+          <div class="text-muted text-sm">{{ s.start_time|hhmm }}–{{ s.end_time|hhmm }}</div>
+        </td>
+        {% for _, day_val in day_map %}
+        <td style="text-align:center">
+          {% if day_val in s.days_of_week %}
+          <span class="badge badge-success" title="{{ s.name }} runs on this day">✓</span>
+          {% else %}
+          <span class="text-muted" style="font-size:.9rem">—</span>
+          {% endif %}
+        </td>
+        {% endfor %}
+      </tr>
+      {% else %}
+      <tr><td colspan="8" class="text-center text-muted">No active shifts.</td></tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  </div>
+</div>
+</div>
+
+</div><!-- /shifts-tabs -->
 
 <!-- Create Shift Modal -->
 <div class="modal-overlay" id="modal-create-shift">