refactor(frontend): simplify booking forms and convert to modals

- Simplify BookingForm: remove recurring bookings, templates, and attachments
- Replace datetime-local with separate date/time inputs for better UX
- Convert inline forms to modals (Admin spaces, Users, SpaceDetail)
- Unify Create and Edit booking forms with identical styling and structure
- Add Space field to Edit modal (read-only)
- Fix calendar initial load and set week start to Monday
- Translate all form labels and messages to Romanian

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/components/SpaceCalendar.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import FullCalendar from '@fullcalendar/vue3'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from '@fullcalendar/timegrid'
@@ -251,6 +251,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
     right: 'dayGridMonth,timeGridWeek,timeGridDay'
   },
   timeZone: userTimezone.value,
+  firstDay: 1, // Start week on Monday (0=Sunday, 1=Monday)
   events: events.value,
   datesSet: handleDatesSet,
   editable: isEditable.value, // Enable drag/resize for admins
@@ -301,6 +302,12 @@ const refresh = () => {
   }
 }
 
+// Initialize calendar on mount
+onMounted(() => {
+  // Load initial bookings for current month
+  refresh()
+})
+
 defineExpose({ refresh })
 </script>
 

frontend/src/views/Admin.vue

@@ -1,69 +1,10 @@
 <template>
   <div class="admin">
+    <div class="page-header">
       <h2>Admin Dashboard - Space Management</h2>
-
+      <button class="btn btn-primary" @click="openCreateModal">
-    <!-- Create/Edit Form -->
+        Create New Space
-    <div class="card">
-      <h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
-      <form @submit.prevent="handleSubmit" class="space-form">
-        <div class="form-group">
-          <label for="name">Name *</label>
-          <input
-            id="name"
-            v-model="formData.name"
-            type="text"
-            required
-            placeholder="Conference Room A"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="type">Type *</label>
-          <select id="type" v-model="formData.type" required>
-            <option value="sala">Sala</option>
-            <option value="birou">Birou</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="capacity">Capacity *</label>
-          <input
-            id="capacity"
-            v-model.number="formData.capacity"
-            type="number"
-            required
-            min="1"
-            placeholder="10"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="description">Description</label>
-          <textarea
-            id="description"
-            v-model="formData.description"
-            rows="3"
-            placeholder="Optional description..."
-          ></textarea>
-        </div>
-
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary" :disabled="loading">
-            {{ editingSpace ? 'Update' : 'Create' }}
       </button>
-          <button
-            v-if="editingSpace"
-            type="button"
-            class="btn btn-secondary"
-            @click="cancelEdit"
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-
-      <div v-if="error" class="error">{{ error }}</div>
-      <div v-if="success" class="success">{{ success }}</div>
     </div>
 
     <!-- Spaces List -->
@@ -113,6 +54,125 @@
         </tbody>
       </table>
     </div>
+
+    <!-- Create/Edit Space Modal -->
+    <div v-if="showModal" class="modal" @click.self="closeModal">
+      <div class="modal-content">
+        <h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
+        <form @submit.prevent="handleSubmit" class="space-form">
+          <div class="form-group">
+            <label for="name">Name *</label>
+            <input
+              id="name"
+              v-model="formData.name"
+              type="text"
+              required
+              placeholder="Conference Room A"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="type">Type *</label>
+            <select id="type" v-model="formData.type" required>
+              <option value="sala">Sala</option>
+              <option value="birou">Birou</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="capacity">Capacity *</label>
+            <input
+              id="capacity"
+              v-model.number="formData.capacity"
+              type="number"
+              required
+              min="1"
+              placeholder="10"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="description">Description</label>
+            <textarea
+              id="description"
+              v-model="formData.description"
+              rows="3"
+              placeholder="Optional description..."
+            ></textarea>
+          </div>
+
+          <!-- Per-Space Scheduling Settings -->
+          <div class="form-section-header">
+            <h4>Per-Space Scheduling Settings</h4>
+            <p class="help-text">Leave blank to use global defaults</p>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="working_hours_start">Working Hours Start (hour)</label>
+              <input
+                id="working_hours_start"
+                v-model.number="formData.working_hours_start"
+                type="number"
+                min="0"
+                max="23"
+                placeholder="e.g., 8 (leave blank for global)"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="working_hours_end">Working Hours End (hour)</label>
+              <input
+                id="working_hours_end"
+                v-model.number="formData.working_hours_end"
+                type="number"
+                min="0"
+                max="23"
+                placeholder="e.g., 20 (leave blank for global)"
+              />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="min_duration_minutes">Min Duration (minutes)</label>
+              <input
+                id="min_duration_minutes"
+                v-model.number="formData.min_duration_minutes"
+                type="number"
+                min="15"
+                step="15"
+                placeholder="e.g., 30 (leave blank for global)"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="max_duration_minutes">Max Duration (minutes)</label>
+              <input
+                id="max_duration_minutes"
+                v-model.number="formData.max_duration_minutes"
+                type="number"
+                min="15"
+                step="15"
+                placeholder="e.g., 480 (leave blank for global)"
+              />
+            </div>
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+          <div v-if="success" class="success">{{ success }}</div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="loading">
+              {{ editingSpace ? 'Update' : 'Create' }}
+            </button>
+            <button type="button" class="btn btn-secondary" @click="closeModal">
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -127,12 +187,17 @@ const loading = ref(false)
 const error = ref('')
 const success = ref('')
 const editingSpace = ref<Space | null>(null)
+const showModal = ref(false)
 
 const formData = ref({
   name: '',
   type: 'sala',
   capacity: 1,
-  description: ''
+  description: '',
+  working_hours_start: null as number | null,
+  working_hours_end: null as number | null,
+  min_duration_minutes: null as number | null,
+  max_duration_minutes: null as number | null
 })
 
 const loadSpaces = async () => {
@@ -161,8 +226,8 @@ const handleSubmit = async () => {
       success.value = 'Space created successfully!'
     }
 
-    resetForm()
     await loadSpaces()
+    closeModal()
 
     // Clear success message after 3 seconds
     setTimeout(() => {
@@ -175,18 +240,28 @@ const handleSubmit = async () => {
   }
 }
 
+const openCreateModal = () => {
+  resetForm()
+  showModal.value = true
+}
+
 const startEdit = (space: Space) => {
   editingSpace.value = space
   formData.value = {
     name: space.name,
     type: space.type,
     capacity: space.capacity,
-    description: space.description || ''
+    description: space.description || '',
+    working_hours_start: space.working_hours_start ?? null,
+    working_hours_end: space.working_hours_end ?? null,
+    min_duration_minutes: space.min_duration_minutes ?? null,
+    max_duration_minutes: space.max_duration_minutes ?? null
   }
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  showModal.value = true
 }
 
-const cancelEdit = () => {
+const closeModal = () => {
+  showModal.value = false
   resetForm()
 }
 
@@ -196,7 +271,11 @@ const resetForm = () => {
     name: '',
     type: 'sala',
     capacity: 1,
-    description: ''
+    description: '',
+    working_hours_start: null,
+    working_hours_end: null,
+    min_duration_minutes: null,
+    max_duration_minutes: null
   }
 }
 
@@ -245,6 +324,38 @@ onMounted(() => {
   gap: 16px;
 }
 
+.form-section-header {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.form-section-header h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.help-text {
+  margin: 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
@@ -254,6 +365,7 @@ onMounted(() => {
 .form-group label {
   font-weight: 500;
   color: #374151;
+  font-size: 14px;
 }
 
 .form-group input,
@@ -408,4 +520,46 @@ onMounted(() => {
   display: flex;
   gap: 8px;
 }
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
 </style>

frontend/src/views/MyBookings.vue

@@ -124,56 +124,99 @@
     <!-- Edit Modal -->
     <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
       <div class="modal-content">
-        <h3>Edit Booking</h3>
+        <h3>Editare rezervare</h3>
         <form @submit.prevent="saveEdit">
+          <!-- Space (read-only) -->
           <div class="form-group">
-            <label for="edit-title">Title *</label>
+            <label for="edit-space" class="form-label">Spațiu</label>
+            <input
+              id="edit-space"
+              type="text"
+              :value="editingBooking?.space?.name || 'Unknown Space'"
+              class="form-input"
+              readonly
+              disabled
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="edit-title">Titlu *</label>
             <input
               id="edit-title"
               v-model="editForm.title"
               type="text"
               required
               maxlength="200"
-              placeholder="Meeting title"
+              placeholder="Titlu rezervare"
             />
           </div>
 
           <div class="form-group">
-            <label for="edit-description">Description</label>
+            <label for="edit-description">Descriere (opțional)</label>
             <textarea
               id="edit-description"
               v-model="editForm.description"
               rows="3"
-              placeholder="Optional description"
+              placeholder="Detalii suplimentare..."
             />
           </div>
 
+          <!-- Start Date & Time -->
           <div class="form-group">
-            <label for="edit-start">Start Date/Time *</label>
+            <label class="form-label">Început *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-start-date" class="form-sublabel">Data</label>
                 <input
-              id="edit-start"
+                  id="edit-start-date"
-              v-model="editForm.start_datetime"
+                  v-model="editForm.start_date"
-              type="datetime-local"
+                  type="date"
                   required
                 />
               </div>
-
+              <div class="datetime-field">
-          <div class="form-group">
+                <label for="edit-start-time" class="form-sublabel">Ora</label>
-            <label for="edit-end">End Date/Time *</label>
                 <input
-              id="edit-end"
+                  id="edit-start-time"
-              v-model="editForm.end_datetime"
+                  v-model="editForm.start_time"
-              type="datetime-local"
+                  type="time"
                   required
                 />
               </div>
+            </div>
+          </div>
+
+          <!-- End Date & Time -->
+          <div class="form-group">
+            <label class="form-label">Sfârșit *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-end-date" class="form-sublabel">Data</label>
+                <input
+                  id="edit-end-date"
+                  v-model="editForm.end_date"
+                  type="date"
+                  required
+                />
+              </div>
+              <div class="datetime-field">
+                <label for="edit-end-time" class="form-sublabel">Ora</label>
+                <input
+                  id="edit-end-time"
+                  v-model="editForm.end_time"
+                  type="time"
+                  required
+                />
+              </div>
+            </div>
+          </div>
 
           <div v-if="editError" class="error-message">{{ editError }}</div>
 
           <div class="form-actions">
-            <button type="button" class="btn btn-secondary" @click="closeEditModal">Cancel</button>
+            <button type="button" class="btn btn-secondary" @click="closeEditModal">Anulează</button>
             <button type="submit" class="btn btn-primary" :disabled="saving">
-              {{ saving ? 'Saving...' : 'Save Changes' }}
+              {{ saving ? 'Se salvează...' : 'Salvează modificările' }}
             </button>
           </div>
         </form>
@@ -209,8 +252,10 @@ const editingBooking = ref<Booking | null>(null)
 const editForm = ref({
   title: '',
   description: '',
-  start_datetime: '',
+  start_date: '',
-  end_datetime: ''
+  start_time: '',
+  end_date: '',
+  end_time: ''
 })
 const editError = ref('')
 const saving = ref(false)
@@ -251,12 +296,22 @@ const formatStatus = (status: string): string => {
 
 const openEditModal = (booking: Booking) => {
   editingBooking.value = booking
-  // Convert ISO datetime to datetime-local format in user's timezone
+
+  // Extract date and time from ISO datetime
+  const startLocal = isoToLocalDateTime(booking.start_datetime, userTimezone.value)
+  const endLocal = isoToLocalDateTime(booking.end_datetime, userTimezone.value)
+
+  // Split YYYY-MM-DDTHH:mm into date and time parts
+  const [startDate, startTime] = startLocal.split('T')
+  const [endDate, endTime] = endLocal.split('T')
+
   editForm.value = {
     title: booking.title,
     description: booking.description || '',
-    start_datetime: isoToLocalDateTime(booking.start_datetime, userTimezone.value),
+    start_date: startDate,
-    end_datetime: isoToLocalDateTime(booking.end_datetime, userTimezone.value)
+    start_time: startTime,
+    end_date: endDate,
+    end_time: endTime
   }
   editError.value = ''
   showEditModal.value = true
@@ -275,12 +330,15 @@ const saveEdit = async () => {
   editError.value = ''
 
   try {
-    // Convert datetime-local format to ISO without Z (backend will handle timezone conversion)
+    // Combine date and time, then convert to ISO
+    const startDateTime = `${editForm.value.start_date}T${editForm.value.start_time}`
+    const endDateTime = `${editForm.value.end_date}T${editForm.value.end_time}`
+
     const updateData = {
       title: editForm.value.title,
       description: editForm.value.description,
-      start_datetime: localDateTimeToISO(editForm.value.start_datetime),
+      start_datetime: localDateTimeToISO(startDateTime),
-      end_datetime: localDateTimeToISO(editForm.value.end_datetime)
+      end_datetime: localDateTimeToISO(endDateTime)
     }
 
     await bookingsApi.update(editingBooking.value.id, updateData)
@@ -558,6 +616,33 @@ onMounted(() => {
   color: #374151;
 }
 
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+}
+
+.form-sublabel {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.datetime-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.datetime-field {
+  display: flex;
+  flex-direction: column;
+}
+
 .form-group input,
 .form-group textarea {
   width: 100%;

frontend/src/views/SpaceDetail.vue

@@ -61,7 +61,7 @@
               d="M12 6v6m0 0v6m0-6h6m-6 0H6"
             />
           </svg>
-          Reserve Space
+          {{ showBookingForm ? 'Cancel Reservation' : 'Reserve Space' }}
         </button>
       </div>
 
@@ -75,7 +75,19 @@
       <div class="card calendar-card">
         <h3>Availability Calendar</h3>
         <p class="calendar-subtitle">View existing bookings and available time slots</p>
-        <SpaceCalendar :space-id="space.id" />
+        <SpaceCalendar ref="calendarRef" :space-id="space.id" />
+      </div>
+    </div>
+
+    <!-- Booking Modal -->
+    <div v-if="showBookingForm && space" class="modal" @click.self="closeBookingModal">
+      <div class="modal-content">
+        <h3>Create Booking</h3>
+        <BookingForm
+          :space-id="space.id"
+          @submit="handleBookingSubmit"
+          @cancel="closeBookingModal"
+        />
       </div>
     </div>
   </div>
@@ -83,17 +95,19 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { spacesApi, handleApiError } from '@/services/api'
 import SpaceCalendar from '@/components/SpaceCalendar.vue'
+import BookingForm from '@/components/BookingForm.vue'
 import type { Space } from '@/types'
 
 const route = useRoute()
-const router = useRouter()
 
 const space = ref<Space | null>(null)
 const loading = ref(true)
 const error = ref('')
+const showBookingForm = ref(false)
+const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)
 
 // Format space type for display
 const formatType = (type: string): string => {
@@ -136,12 +150,18 @@ const loadSpace = async () => {
 
 // Handle reserve button click
 const handleReserve = () => {
-  // Placeholder for US-004d: Redirect to booking creation page
+  showBookingForm.value = !showBookingForm.value
-  // For now, navigate to a placeholder route
+}
-  router.push({
+
-    path: '/booking/new',
+// Close booking modal
-    query: { space: space.value?.id }
+const closeBookingModal = () => {
-  })
+  showBookingForm.value = false
+}
+
+// Handle booking form submit
+const handleBookingSubmit = () => {
+  showBookingForm.value = false
+  calendarRef.value?.refresh()
 }
 
 onMounted(() => {
@@ -364,6 +384,11 @@ onMounted(() => {
   line-height: 1.6;
 }
 
+/* Booking Card */
+.booking-card h3 {
+  margin-bottom: 16px;
+}
+
 /* Calendar Card */
 .calendar-subtitle {
   color: #6b7280;
@@ -371,6 +396,36 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .space-header {

frontend/src/views/Users.vue

@@ -1,81 +1,10 @@
 <template>
   <div class="users">
+    <div class="page-header">
       <h2>Admin Dashboard - User Management</h2>
-
+      <button class="btn btn-primary" @click="openCreateModal">
-    <!-- Create/Edit Form -->
+        Create New User
-    <div class="card">
-      <h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
-      <form @submit.prevent="handleSubmit" class="user-form">
-        <div class="form-group">
-          <label for="email">Email *</label>
-          <input
-            id="email"
-            v-model="formData.email"
-            type="email"
-            required
-            placeholder="user@example.com"
-            :disabled="!!editingUser"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="full_name">Full Name *</label>
-          <input
-            id="full_name"
-            v-model="formData.full_name"
-            type="text"
-            required
-            placeholder="John Doe"
-          />
-        </div>
-
-        <div class="form-group" v-if="!editingUser">
-          <label for="password">Password *</label>
-          <input
-            id="password"
-            v-model="formData.password"
-            type="password"
-            :required="!editingUser"
-            placeholder="Minimum 8 characters"
-            minlength="8"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="role">Role *</label>
-          <select id="role" v-model="formData.role" required>
-            <option value="user">User</option>
-            <option value="admin">Admin</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="organization">Organization</label>
-          <input
-            id="organization"
-            v-model="formData.organization"
-            type="text"
-            placeholder="Optional organization"
-          />
-        </div>
-
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary" :disabled="loading">
-            {{ editingUser ? 'Update' : 'Create' }}
       </button>
-          <button
-            v-if="editingUser"
-            type="button"
-            class="btn btn-secondary"
-            @click="cancelEdit"
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-
-      <div v-if="error" class="error">{{ error }}</div>
-      <div v-if="success" class="success">{{ success }}</div>
     </div>
 
     <!-- Filters -->
@@ -165,6 +94,79 @@
       </table>
     </div>
 
+    <!-- Create/Edit User Modal -->
+    <div v-if="showFormModal" class="modal" @click.self="closeFormModal">
+      <div class="modal-content">
+        <h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
+        <form @submit.prevent="handleSubmit" class="user-form">
+          <div class="form-group">
+            <label for="email">Email *</label>
+            <input
+              id="email"
+              v-model="formData.email"
+              type="email"
+              required
+              placeholder="user@example.com"
+              :disabled="!!editingUser"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="full_name">Full Name *</label>
+            <input
+              id="full_name"
+              v-model="formData.full_name"
+              type="text"
+              required
+              placeholder="John Doe"
+            />
+          </div>
+
+          <div class="form-group" v-if="!editingUser">
+            <label for="password">Password *</label>
+            <input
+              id="password"
+              v-model="formData.password"
+              type="password"
+              :required="!editingUser"
+              placeholder="Minimum 8 characters"
+              minlength="8"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="role">Role *</label>
+            <select id="role" v-model="formData.role" required>
+              <option value="user">User</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="organization">Organization</label>
+            <input
+              id="organization"
+              v-model="formData.organization"
+              type="text"
+              placeholder="Optional organization"
+            />
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+          <div v-if="success" class="success">{{ success }}</div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="loading">
+              {{ editingUser ? 'Update' : 'Create' }}
+            </button>
+            <button type="button" class="btn btn-secondary" @click="closeFormModal">
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <!-- Reset Password Modal -->
     <div v-if="resetPasswordUser" class="modal" @click.self="closeResetPassword">
       <div class="modal-content">
@@ -206,6 +208,7 @@ const loading = ref(false)
 const error = ref('')
 const success = ref('')
 const editingUser = ref<User | null>(null)
+const showFormModal = ref(false)
 const resetPasswordUser = ref<User | null>(null)
 const newPassword = ref('')
 const filterRole = ref('')
@@ -259,8 +262,8 @@ const handleSubmit = async () => {
       success.value = 'User created successfully!'
     }
 
-    resetForm()
     await loadUsers()
+    closeFormModal()
 
     // Clear success message after 3 seconds
     setTimeout(() => {
@@ -273,6 +276,11 @@ const handleSubmit = async () => {
   }
 }
 
+const openCreateModal = () => {
+  resetForm()
+  showFormModal.value = true
+}
+
 const startEdit = (user: User) => {
   editingUser.value = user
   formData.value = {
@@ -282,10 +290,11 @@ const startEdit = (user: User) => {
     role: user.role,
     organization: user.organization || ''
   }
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  showFormModal.value = true
 }
 
-const cancelEdit = () => {
+const closeFormModal = () => {
+  showFormModal.value = false
   resetForm()
 }
 
@@ -363,6 +372,19 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+}
+
 .card {
   background: white;
   border-radius: 8px;