create-mantiq 0.7.0 → 0.7.2

package/stubs/tailwind-only/vue/src/pages/Users.vue.stub

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { api, post, del } from '@/lib/api'
+import { AuthenticatedLayout, Header, Main } from '@/components/layout'
+import { Plus, Search, MoreHorizontal, ArrowUpDown, ChevronLeft, ChevronRight, X } from 'lucide-vue-next'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { id: number; name: string; email: string } | null
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+interface UserRecord {
+  id: number
+  name: string
+  email: string
+  created_at?: string
+}
+
+const users = ref<UserRecord[]>([])
+const loading = ref(false)
+const search = ref('')
+const page = ref(1)
+const perPage = ref(10)
+const sortBy = ref('created_at')
+const sortDir = ref<'asc' | 'desc'>('desc')
+const meta = ref({ total: 0, filtered_total: 0, page: 1, per_page: 10, last_page: 1 })
+
+// Dialogs
+const addOpen = ref(false)
+const editOpen = ref(false)
+const deleteOpen = ref(false)
+const selectedUser = ref<UserRecord | null>(null)
+
+// Action dropdown
+const actionMenuId = ref<number | null>(null)
+
+// Form state
+const formName = ref('')
+const formEmail = ref('')
+const formPassword = ref('')
+const formError = ref('')
+const formLoading = ref(false)
+
+async function fetchUsers() {
+  loading.value = true
+  const params = new URLSearchParams({
+    search: search.value,
+    page: String(page.value),
+    per_page: String(perPage.value),
+    sort: sortBy.value,
+    dir: sortDir.value,
+  })
+  const { ok, data } = await api(`/api/users?${params}`)
+  if (ok) {
+    users.value = data.data ?? []
+    meta.value = data.meta ?? meta.value
+  }
+  loading.value = false
+}
+
+function toggleSort(col: string) {
+  if (sortBy.value === col) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = col
+    sortDir.value = 'asc'
+  }
+  page.value = 1
+  fetchUsers()
+}
+
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
+function onSearchInput() {
+  if (searchTimeout) clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    fetchUsers()
+  }, 300)
+}
+
+function openAdd() {
+  formName.value = ''
+  formEmail.value = ''
+  formPassword.value = ''
+  formError.value = ''
+  addOpen.value = true
+}
+
+function openEdit(user: UserRecord) {
+  selectedUser.value = user
+  formName.value = user.name
+  formEmail.value = user.email
+  formPassword.value = ''
+  formError.value = ''
+  editOpen.value = true
+}
+
+function openDelete(user: UserRecord) {
+  selectedUser.value = user
+  formError.value = ''
+  deleteOpen.value = true
+}
+
+async function handleAdd() {
+  formError.value = ''
+  formLoading.value = true
+  const { ok, data } = await post('/api/users', {
+    name: formName.value,
+    email: formEmail.value,
+    password: formPassword.value,
+  })
+  formLoading.value = false
+  if (ok) {
+    addOpen.value = false
+    fetchUsers()
+  } else {
+    formError.value = data?.error ?? 'Failed to create user.'
+  }
+}
+
+async function handleEdit() {
+  if (!selectedUser.value) return
+  formError.value = ''
+  formLoading.value = true
+  const body: Record<string, string> = { name: formName.value, email: formEmail.value }
+  if (formPassword.value) body.password = formPassword.value
+  const { ok, data } = await api(`/api/users/${selectedUser.value.id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  formLoading.value = false
+  if (ok) {
+    editOpen.value = false
+    fetchUsers()
+  } else {
+    formError.value = data?.error ?? 'Failed to update user.'
+  }
+}
+
+async function handleDelete() {
+  if (!selectedUser.value) return
+  formError.value = ''
+  formLoading.value = true
+  const { ok, data } = await del(`/api/users/${selectedUser.value.id}`)
+  formLoading.value = false
+  if (ok) {
+    deleteOpen.value = false
+    fetchUsers()
+  } else {
+    formError.value = data?.error ?? 'Failed to delete user.'
+  }
+}
+
+onMounted(fetchUsers)
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    active-path="/users"
+  >
+    <Header :navigate="navigate" />
+    <Main>
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <h2 class="text-3xl font-bold tracking-tight">Users</h2>
+          <button
+            class="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
+            @click="openAdd"
+          >
+            <Plus class="h-4 w-4" />
+            Add User
+          </button>
+        </div>
+
+        <!-- Search -->
+        <div class="flex items-center gap-2">
+          <div class="relative max-w-sm flex-1">
+            <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <input
+              v-model="search"
+              placeholder="Search users..."
+              class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pl-9 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              @input="onSearchInput"
+            />
+          </div>
+          <span class="text-sm text-muted-foreground">
+            {{ loading ? 'Loading...' : `${meta.filtered_total} of ${meta.total} users` }}
+          </span>
+        </div>
+
+        <!-- Table -->
+        <div class="w-full overflow-auto rounded-md border">
+          <table class="w-full caption-bottom text-sm">
+            <thead class="border-b bg-muted/50">
+              <tr>
+                <th
+                  class="h-10 px-4 text-left align-middle font-medium text-muted-foreground cursor-pointer select-none"
+                  @click="toggleSort('name')"
+                >
+                  <span class="flex items-center gap-1">
+                    Name
+                    <ArrowUpDown class="h-3 w-3" />
+                  </span>
+                </th>
+                <th
+                  class="h-10 px-4 text-left align-middle font-medium text-muted-foreground cursor-pointer select-none"
+                  @click="toggleSort('email')"
+                >
+                  <span class="flex items-center gap-1">
+                    Email
+                    <ArrowUpDown class="h-3 w-3" />
+                  </span>
+                </th>
+                <th class="h-10 w-10 px-4 text-left align-middle font-medium text-muted-foreground" />
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="user in users"
+                :key="user.id"
+                class="border-b transition-colors hover:bg-muted/50"
+              >
+                <td class="p-4 align-middle font-medium">{{ user.name }}</td>
+                <td class="p-4 align-middle">{{ user.email }}</td>
+                <td class="p-4 align-middle">
+                  <div class="relative">
+                    <button
+                      class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                      @click.stop="actionMenuId = actionMenuId === user.id ? null : user.id"
+                    >
+                      <MoreHorizontal class="h-4 w-4" />
+                    </button>
+                    <div
+                      v-if="actionMenuId === user.id"
+                      class="absolute right-0 top-full z-50 mt-1 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+                    >
+                      <button
+                        class="flex w-full items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                        @click="actionMenuId = null; openEdit(user)"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        class="flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-destructive hover:bg-destructive/10"
+                        @click="actionMenuId = null; openDelete(user)"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="users.length === 0 && !loading">
+                <td colspan="3" class="h-24 text-center text-muted-foreground">
+                  No users found.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="flex items-center justify-between">
+          <p class="text-sm text-muted-foreground">
+            Page {{ meta.page }} of {{ meta.last_page }}
+          </p>
+          <div class="flex items-center gap-2">
+            <button
+              class="inline-flex items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+              :disabled="meta.page <= 1"
+              @click="page--; fetchUsers()"
+            >
+              <ChevronLeft class="h-4 w-4" />
+              Previous
+            </button>
+            <button
+              class="inline-flex items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+              :disabled="meta.page >= meta.last_page"
+              @click="page++; fetchUsers()"
+            >
+              Next
+              <ChevronRight class="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Main>
+
+    <!-- Add User Dialog -->
+    <Teleport to="body">
+      <div v-if="addOpen" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="addOpen = false" />
+        <div class="relative z-50 w-full max-w-[425px] rounded-lg border bg-background p-6 shadow-lg" @click.stop>
+          <button class="absolute right-4 top-4 text-muted-foreground hover:text-foreground" @click="addOpen = false">
+            <X class="h-4 w-4" />
+          </button>
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold leading-none tracking-tight">Add User</h2>
+            <p class="mt-1.5 text-sm text-muted-foreground">Create a new user account.</p>
+          </div>
+          <form class="space-y-4" @submit.prevent="handleAdd">
+            <div v-if="formError" class="rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {{ formError }}
+            </div>
+            <div class="space-y-2">
+              <label for="add-name" class="text-sm font-medium leading-none">Name</label>
+              <input id="add-name" v-model="formName" required placeholder="Full name" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="space-y-2">
+              <label for="add-email" class="text-sm font-medium leading-none">Email</label>
+              <input id="add-email" v-model="formEmail" type="email" required placeholder="user@example.com" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="space-y-2">
+              <label for="add-password" class="text-sm font-medium leading-none">Password</label>
+              <input id="add-password" v-model="formPassword" type="password" required placeholder="Min 6 characters" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="flex justify-end gap-2">
+              <button type="button" class="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground" @click="addOpen = false">Cancel</button>
+              <button type="submit" :disabled="formLoading" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50">
+                {{ formLoading ? 'Creating...' : 'Create User' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Edit User Dialog -->
+    <Teleport to="body">
+      <div v-if="editOpen" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="editOpen = false" />
+        <div class="relative z-50 w-full max-w-[425px] rounded-lg border bg-background p-6 shadow-lg" @click.stop>
+          <button class="absolute right-4 top-4 text-muted-foreground hover:text-foreground" @click="editOpen = false">
+            <X class="h-4 w-4" />
+          </button>
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold leading-none tracking-tight">Edit User</h2>
+            <p class="mt-1.5 text-sm text-muted-foreground">Update user information.</p>
+          </div>
+          <form class="space-y-4" @submit.prevent="handleEdit">
+            <div v-if="formError" class="rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+              {{ formError }}
+            </div>
+            <div class="space-y-2">
+              <label for="edit-name" class="text-sm font-medium leading-none">Name</label>
+              <input id="edit-name" v-model="formName" required placeholder="Full name" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="space-y-2">
+              <label for="edit-email" class="text-sm font-medium leading-none">Email</label>
+              <input id="edit-email" v-model="formEmail" type="email" required placeholder="user@example.com" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="space-y-2">
+              <label for="edit-password" class="text-sm font-medium leading-none">Password</label>
+              <input id="edit-password" v-model="formPassword" type="password" placeholder="Leave blank to keep current" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            </div>
+            <div class="flex justify-end gap-2">
+              <button type="button" class="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground" @click="editOpen = false">Cancel</button>
+              <button type="submit" :disabled="formLoading" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50">
+                {{ formLoading ? 'Saving...' : 'Save Changes' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Delete User Dialog -->
+    <Teleport to="body">
+      <div v-if="deleteOpen" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="deleteOpen = false" />
+        <div class="relative z-50 w-full max-w-[425px] rounded-lg border bg-background p-6 shadow-lg" @click.stop>
+          <button class="absolute right-4 top-4 text-muted-foreground hover:text-foreground" @click="deleteOpen = false">
+            <X class="h-4 w-4" />
+          </button>
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold leading-none tracking-tight">Delete User</h2>
+            <p class="mt-1.5 text-sm text-muted-foreground">
+              Are you sure you want to delete <strong>{{ selectedUser?.name }}</strong>? This action cannot be undone.
+            </p>
+          </div>
+          <div v-if="formError" class="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive">
+            {{ formError }}
+          </div>
+          <div class="flex justify-end gap-2">
+            <button type="button" class="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground" @click="deleteOpen = false">Cancel</button>
+            <button :disabled="formLoading" class="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-destructive/90 disabled:pointer-events-none disabled:opacity-50" @click="handleDelete">
+              {{ formLoading ? 'Deleting...' : 'Delete User' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </AuthenticatedLayout>
+</template>

package/stubs/tailwind-only/vue/src/pages/account/Layout.vue.stub

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { AuthenticatedLayout, Header, Main } from '@/components/layout'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { name: string; email: string; role?: string } | null
+  navigate: (href: string) => void
+  activePath: string
+  title: string
+  description: string
+}>(), {
+  appName: 'Mantiq',
+})
+
+const tabs = [
+  { title: 'Profile', href: '/account/profile' },
+  { title: 'Security', href: '/account/security' },
+  { title: 'Preferences', href: '/account/preferences' },
+]
+</script>
+
+<template>
+  <AuthenticatedLayout
+    :current-user="currentUser"
+    :app-name="appName"
+    :navigate="navigate"
+    :active-path="activePath"
+  >
+    <Header :navigate="navigate" />
+    <Main>
+      <div class="space-y-6">
+        <div>
+          <h2 class="text-3xl font-bold tracking-tight">{{ title }}</h2>
+          <p class="text-muted-foreground">{{ description }}</p>
+        </div>
+
+        <!-- Tab nav -->
+        <nav class="flex gap-2 border-b">
+          <button
+            v-for="tab in tabs"
+            :key="tab.href"
+            class="relative px-4 py-2 text-sm font-medium transition-colors"
+            :class="activePath === tab.href
+              ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-foreground'
+              : 'text-muted-foreground hover:text-foreground'"
+            @click="navigate(tab.href)"
+          >
+            {{ tab.title }}
+          </button>
+        </nav>
+
+        <slot />
+      </div>
+    </Main>
+  </AuthenticatedLayout>
+</template>

package/stubs/tailwind-only/vue/src/pages/account/Preferences.vue.stub

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import AccountLayout from './layout.vue'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { name: string; email: string; role?: string } | null
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const theme = ref<'light' | 'dark' | 'system'>('system')
+const success = ref('')
+
+onMounted(() => {
+  const stored = localStorage.getItem('theme')
+  if (stored === 'light' || stored === 'dark') {
+    theme.value = stored
+  } else {
+    theme.value = 'system'
+  }
+})
+
+function setTheme(value: 'light' | 'dark' | 'system') {
+  theme.value = value
+  if (value === 'system') {
+    localStorage.removeItem('theme')
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    document.documentElement.classList.toggle('dark', prefersDark)
+  } else {
+    localStorage.setItem('theme', value)
+    document.documentElement.classList.toggle('dark', value === 'dark')
+  }
+  success.value = 'Preferences saved.'
+}
+</script>
+
+<template>
+  <AccountLayout
+    :app-name="appName"
+    :current-user="currentUser"
+    :navigate="navigate"
+    active-path="/account/preferences"
+    title="Settings"
+    description="Manage your account settings."
+  >
+    <div class="rounded-xl border bg-card text-card-foreground shadow-sm">
+      <div class="p-6 pb-2">
+        <h3 class="text-lg font-semibold leading-none tracking-tight">Preferences</h3>
+        <p class="mt-1.5 text-sm text-muted-foreground">Customize your experience.</p>
+      </div>
+      <div class="p-6 pt-4">
+        <div
+          v-if="success"
+          class="mb-4 rounded-md border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"
+        >
+          {{ success }}
+        </div>
+        <div class="space-y-4 max-w-md">
+          <div class="space-y-2">
+            <label class="text-sm font-medium leading-none">Theme</label>
+            <div class="flex gap-2">
+              <button
+                v-for="opt in (['light', 'dark', 'system'] as const)"
+                :key="opt"
+                class="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors"
+                :class="theme === opt
+                  ? 'bg-primary text-primary-foreground shadow'
+                  : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'"
+                @click="setTheme(opt)"
+              >
+                {{ opt.charAt(0).toUpperCase() + opt.slice(1) }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AccountLayout>
+</template>

package/stubs/tailwind-only/vue/src/pages/account/Profile.vue.stub

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AccountLayout from './layout.vue'
+
+const props = withDefaults(defineProps<{
+  appName?: string
+  currentUser?: { name: string; email: string; role?: string } | null
+  navigate: (href: string) => void
+}>(), {
+  appName: 'Mantiq',
+})
+
+const name = ref(props.currentUser?.name ?? '')
+const email = ref(props.currentUser?.email ?? '')
+const success = ref('')
+const error = ref('')
+
+async function handleSubmit() {
+  success.value = ''
+  error.value = ''
+  // Profile update would call an API endpoint
+  success.value = 'Profile updated successfully.'
+}
+</script>
+
+<template>
+  <AccountLayout
+    :app-name="appName"
+    :current-user="currentUser"
+    :navigate="navigate"
+    active-path="/account/profile"
+    title="Settings"
+    description="Manage your account settings."
+  >
+    <div class="rounded-xl border bg-card text-card-foreground shadow-sm">
+      <div class="p-6 pb-2">
+        <h3 class="text-lg font-semibold leading-none tracking-tight">Profile</h3>
+        <p class="mt-1.5 text-sm text-muted-foreground">Update your personal information.</p>
+      </div>
+      <div class="p-6 pt-4">
+        <div
+          v-if="success"
+          class="mb-4 rounded-md border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm text-green-600 dark:text-green-400"
+        >
+          {{ success }}
+        </div>
+        <div
+          v-if="error"
+          class="mb-4 rounded-md border border-destructive px-4 py-3 text-sm text-destructive"
+        >
+          {{ error }}
+        </div>
+        <form class="space-y-4 max-w-md" @submit.prevent="handleSubmit">
+          <div class="space-y-2">
+            <label for="profile-name" class="text-sm font-medium leading-none">Name</label>
+            <input id="profile-name" v-model="name" required class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          </div>
+          <div class="space-y-2">
+            <label for="profile-email" class="text-sm font-medium leading-none">Email</label>
+            <input id="profile-email" v-model="email" type="email" required class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          </div>
+          <button type="submit" class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">
+            Save Changes
+          </button>
+        </form>
+      </div>
+    </div>
+  </AccountLayout>
+</template>