@tower_74/cms-app 0.1.0

package/src/pages/Admin/Forms/Index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Button } from '@tower_74/cms-ui';
+
+interface FormRow {
+    id: number;
+    slug: string;
+    name: string;
+    fields: number;
+    submissions: number;
+}
+
+defineProps<{ forms: FormRow[]; canManage: boolean }>();
+
+const destroy = (form: FormRow) => {
+    if (confirm(`Delete the “${form.name}” form and its submissions?`)) {
+        router.delete(`/admin/forms/${form.slug}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Forms</template>
+
+        <div class="mb-4 flex justify-end">
+            <Link v-if="canManage" href="/admin/forms/create"><Button>New form</Button></Link>
+        </div>
+
+        <div v-if="forms.length" class="overflow-hidden rounded-lg border border-border">
+            <table class="w-full text-sm">
+                <thead class="bg-surface text-left text-muted-foreground">
+                    <tr>
+                        <th class="px-4 py-2 font-medium">Form</th>
+                        <th class="px-4 py-2 font-medium">Fields</th>
+                        <th class="px-4 py-2 font-medium">Submissions</th>
+                        <th class="px-4 py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="form in forms" :key="form.id" class="border-t border-border">
+                        <td class="px-4 py-2">
+                            <span class="font-medium">{{ form.name }}</span>
+                            <span class="ml-2 text-xs text-muted-foreground">/{{ form.slug }}</span>
+                        </td>
+                        <td class="px-4 py-2 text-muted-foreground">{{ form.fields }}</td>
+                        <td class="px-4 py-2">
+                            <Link :href="`/admin/forms/${form.slug}/submissions`" class="text-primary hover:underline">{{ form.submissions }}</Link>
+                        </td>
+                        <td class="px-4 py-2 text-right">
+                            <div class="flex justify-end gap-2">
+                                <Link :href="`/admin/forms/${form.slug}/submissions`"><Button variant="ghost" size="sm">Submissions</Button></Link>
+                                <template v-if="canManage">
+                                    <Link :href="`/admin/forms/${form.slug}/edit`"><Button variant="ghost" size="sm">Edit</Button></Link>
+                                    <Button variant="danger" size="sm" @click="destroy(form)">Delete</Button>
+                                </template>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <p v-else class="rounded border border-border bg-background px-4 py-10 text-center text-muted-foreground">
+            No forms yet.<template v-if="canManage"> Create one to get started.</template>
+        </p>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Forms/Submissions/Index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Button } from '@tower_74/cms-ui';
+
+interface Row {
+    id: number;
+    summary: string;
+    received_at: string | null;
+}
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+const props = defineProps<{
+    form: { slug: string; name: string };
+    submissions: { data: Row[]; links: PageLink[] };
+    canDelete: boolean;
+}>();
+
+const destroy = (id: number) => {
+    if (confirm('Delete this submission?')) {
+        router.delete(`/admin/forms/${props.form.slug}/submissions/${id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ form.name }} — submissions</template>
+
+        <Link href="/admin/forms" class="mb-4 inline-block text-sm text-primary hover:underline">← All forms</Link>
+
+        <div v-if="submissions.data.length" class="overflow-hidden rounded-lg border border-border">
+            <table class="w-full text-sm">
+                <thead class="bg-surface text-left text-muted-foreground">
+                    <tr>
+                        <th class="px-4 py-2 font-medium">From</th>
+                        <th class="px-4 py-2 font-medium">Received</th>
+                        <th class="px-4 py-2"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="row in submissions.data" :key="row.id" class="border-t border-border">
+                        <td class="px-4 py-2">
+                            <Link :href="`/admin/forms/${form.slug}/submissions/${row.id}`" class="font-medium text-primary hover:underline">{{
+                                row.summary
+                            }}</Link>
+                        </td>
+                        <td class="px-4 py-2 text-muted-foreground">{{ row.received_at }}</td>
+                        <td class="px-4 py-2 text-right">
+                            <div class="flex justify-end gap-2">
+                                <Link :href="`/admin/forms/${form.slug}/submissions/${row.id}`"><Button variant="ghost" size="sm">View</Button></Link>
+                                <Button v-if="canDelete" variant="danger" size="sm" @click="destroy(row.id)">Delete</Button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <p v-else class="rounded border border-border bg-background px-4 py-10 text-center text-muted-foreground">No submissions yet.</p>
+
+        <Pagination :links="submissions.links" />
+    </AdminLayout>
+</template>

package/src/pages/Admin/Forms/Submissions/Show.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Button } from '@tower_74/cms-ui';
+
+const props = defineProps<{
+    form: { slug: string; name: string };
+    submission: {
+        id: number;
+        fields: Array<{ label: string; value: string }>;
+        ip: string | null;
+        received_at: string | null;
+    };
+    canDelete: boolean;
+}>();
+
+const destroy = () => {
+    if (confirm('Delete this submission?')) {
+        router.delete(`/admin/forms/${props.form.slug}/submissions/${props.submission.id}`);
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ form.name }} — submission</template>
+
+        <div class="max-w-2xl">
+            <Link :href="`/admin/forms/${form.slug}/submissions`" class="text-sm text-primary hover:underline">← Back to submissions</Link>
+
+            <dl class="mt-4 divide-y divide-border rounded-lg border border-border">
+                <div v-for="(field, i) in submission.fields" :key="i" class="px-4 py-3">
+                    <dt class="text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ field.label }}</dt>
+                    <dd class="mt-1 whitespace-pre-wrap text-sm text-foreground">{{ field.value || '—' }}</dd>
+                </div>
+            </dl>
+
+            <p class="mt-3 text-xs text-muted-foreground">
+                Received {{ submission.received_at }}<span v-if="submission.ip"> · {{ submission.ip }}</span>
+            </p>
+
+            <div v-if="canDelete" class="mt-6">
+                <Button variant="danger" @click="destroy">Delete submission</Button>
+            </div>
+        </div>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Media/Index.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { router, useForm } from '@inertiajs/vue3';
+import { Button } from '@tower_74/cms-ui';
+
+interface MediaItem {
+    id: number;
+    name: string;
+    file_name: string;
+    mime: string;
+    size: string;
+    url: string;
+    is_image: boolean;
+    uploaded_by: string | null;
+}
+
+defineProps<{ items: MediaItem[] }>();
+
+const form = useForm<{ file: File | null }>({ file: null });
+
+const onFile = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    form.file = target.files?.[0] ?? null;
+};
+
+const upload = () => {
+    form.post('/admin/media', {
+        forceFormData: true,
+        preserveScroll: true,
+        onSuccess: () => form.reset('file'),
+    });
+};
+
+const destroy = (item: MediaItem) => {
+    if (confirm(`Delete “${item.name}”?`)) {
+        router.delete(`/admin/media/${item.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Media</template>
+
+        <form class="mb-6 flex items-end gap-3" @submit.prevent="upload">
+            <div class="space-y-1">
+                <label class="block text-sm font-medium text-text">Upload a file</label>
+                <input
+                    type="file"
+                    class="block text-sm text-muted file:mr-3 file:rounded file:border file:border-border file:bg-surface file:px-3 file:py-1.5 file:text-sm"
+                    @change="onFile"
+                />
+                <p v-if="form.errors.file" class="text-xs text-danger">{{ form.errors.file }}</p>
+            </div>
+            <Button type="submit" :disabled="!form.file || form.processing">Upload</Button>
+        </form>
+
+        <div v-if="items.length" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            <div v-for="item in items" :key="item.id" class="overflow-hidden rounded border border-border bg-background">
+                <div class="flex h-32 items-center justify-center bg-surface">
+                    <img v-if="item.is_image" :src="item.url" :alt="item.name" class="h-full w-full object-cover" />
+                    <span v-else class="px-2 text-center text-xs text-muted">{{ item.mime }}</span>
+                </div>
+                <div class="space-y-1 p-3">
+                    <p class="truncate text-sm font-medium" :title="item.name">{{ item.name }}</p>
+                    <p class="text-xs text-muted">{{ item.size }} · {{ item.uploaded_by ?? '—' }}</p>
+                    <div class="flex justify-end">
+                        <Button variant="danger" size="sm" @click="destroy(item)">Delete</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <p v-else class="rounded border border-border bg-background px-4 py-10 text-center text-muted">No media yet. Upload your first file above.</p>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Menus/Create.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, FormBuilder } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+const fields = [
+    { name: 'name', label: 'Name', required: true, placeholder: 'Primary' },
+    { name: 'location', label: 'Location', help: 'Leave blank to derive from the name (e.g. "footer").' },
+];
+
+const form = useForm({ name: '', location: '' });
+
+const model = computed({
+    get: () => ({ name: form.name, location: form.location }),
+    set: (value: Record<string, unknown>) => {
+        form.name = (value.name as string) ?? '';
+        form.location = (value.location as string) ?? '';
+    },
+});
+
+const submit = () => form.post('/admin/menus');
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>New menu</template>
+
+        <form class="max-w-xl" @submit.prevent="submit">
+            <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+            <div class="mt-6 flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">Create menu</Button>
+                <Link href="/admin/menus"><Button variant="ghost" type="button">Cancel</Button></Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Menus/Edit.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import MenuItemsEditor from '@/components/MenuItemsEditor.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, FormField, Input } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+interface Item {
+    label: string;
+    url: string;
+}
+
+const props = defineProps<{
+    menu: { id: number; name: string; location: string; items: Item[] };
+}>();
+
+const form = useForm({
+    name: props.menu.name,
+    items: props.menu.items as Item[],
+});
+
+const itemsModel = computed({
+    get: () => form.items,
+    set: (value: Item[]) => {
+        form.items = value;
+    },
+});
+
+const submit = () => form.put(`/admin/menus/${props.menu.id}`);
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Edit menu — {{ menu.name }}</template>
+
+        <form class="max-w-2xl" @submit.prevent="submit">
+            <div class="max-w-sm">
+                <FormField label="Menu name" :error="form.errors.name" required>
+                    <Input v-model="form.name" />
+                </FormField>
+            </div>
+
+            <div class="mt-8">
+                <h3 class="mb-3 text-base font-semibold">Items</h3>
+                <MenuItemsEditor v-model="itemsModel" />
+            </div>
+
+            <div class="mt-8 flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">Save menu</Button>
+                <Link href="/admin/menus"><Button variant="ghost" type="button">Cancel</Button></Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Menus/Index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Button, DataTable } from '@tower_74/cms-ui';
+
+interface MenuRow {
+    id: number;
+    name: string;
+    location: string;
+    items_count: number;
+}
+
+defineProps<{ menus: MenuRow[] }>();
+
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'location', label: 'Location' },
+    { key: 'items_count', label: 'Items', align: 'right' as const },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+const destroy = (row: MenuRow) => {
+    if (confirm(`Delete the “${row.name}” menu?`)) {
+        router.delete(`/admin/menus/${row.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Menus</template>
+
+        <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">Menus</h2>
+            <Link href="/admin/menus/create"><Button>New menu</Button></Link>
+        </div>
+
+        <DataTable :columns="columns" :rows="menus" empty="No menus yet.">
+            <template #cell-location="{ value }">
+                <span class="text-muted">{{ value }}</span>
+            </template>
+            <template #cell-actions="{ row }">
+                <div class="flex justify-end gap-2">
+                    <Link :href="`/admin/menus/${(row as MenuRow).id}/edit`">
+                        <Button variant="ghost" size="sm">Edit</Button>
+                    </Link>
+                    <Button variant="danger" size="sm" @click="destroy(row as MenuRow)">Delete</Button>
+                </div>
+            </template>
+        </DataTable>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Settings/Index.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+import { Button, FormBuilder } from '@tower_74/cms-ui';
+import { computed, ref } from 'vue';
+
+interface CommerceFeature {
+    available: boolean;
+    enabled: boolean;
+    stripeConfigured: boolean;
+}
+
+const props = defineProps<{
+    siteName: string;
+    homePageId: number | null;
+    ogImage: string | null;
+    siteLogo: string | null;
+    siteLogoShowName: boolean;
+    pages: Array<{ label: string; value: number }>;
+    canManageFeatures: boolean;
+    features: { commerce?: CommerceFeature; contactForm: { enabled: boolean } };
+}>();
+
+const fields = computed(() => [
+    { name: 'site_name', label: 'Site name', required: true },
+    {
+        name: 'home_page_id',
+        label: 'Home page',
+        type: 'select' as const,
+        help: 'The page shown at the site root (/).',
+        options: [{ label: '— Welcome screen —', value: '' }, ...props.pages],
+    },
+    {
+        name: 'og_image',
+        label: 'Default social image (URL)',
+        help: 'Used for Open Graph previews when a page has no image.',
+    },
+]);
+
+const form = useForm<{
+    site_name: string;
+    home_page_id: string;
+    og_image: string;
+    logo: File | null;
+    remove_logo: boolean;
+    site_logo_show_name: boolean;
+}>({
+    site_name: props.siteName,
+    home_page_id: props.homePageId != null ? String(props.homePageId) : '',
+    og_image: props.ogImage ?? '',
+    logo: null,
+    remove_logo: false,
+    site_logo_show_name: props.siteLogoShowName,
+});
+
+const model = computed({
+    get: () => ({ site_name: form.site_name, home_page_id: form.home_page_id, og_image: form.og_image }),
+    set: (value: Record<string, unknown>) => {
+        form.site_name = (value.site_name as string) ?? '';
+        form.home_page_id = (value.home_page_id as string) ?? '';
+        form.og_image = (value.og_image as string) ?? '';
+    },
+});
+
+const newLogoPreview = ref<string | null>(null);
+const logoPreview = computed(() => {
+    if (form.remove_logo) return null;
+    return newLogoPreview.value ?? props.siteLogo;
+});
+
+const onLogoChange = (event: Event) => {
+    const file = (event.target as HTMLInputElement).files?.[0] ?? null;
+    form.logo = file;
+    form.remove_logo = false;
+    newLogoPreview.value = file ? URL.createObjectURL(file) : null;
+};
+
+const submit = () =>
+    form.put('/admin/settings/general', {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.logo = null;
+            newLogoPreview.value = null;
+        },
+    });
+
+// --- Features -----------------------------------------------------------
+const featureForm = useForm({
+    commerce_enabled: props.features.commerce?.enabled ?? false,
+    contact_form_enabled: props.features.contactForm.enabled,
+});
+const saveFeatures = () => featureForm.put('/admin/settings/features', { preserveScroll: true });
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Settings</template>
+
+        <div class="max-w-xl space-y-10">
+            <!-- General -->
+            <section>
+                <h2 class="mb-4 text-lg font-semibold">General</h2>
+                <form @submit.prevent="submit">
+                    <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+
+                    <div class="mt-6">
+                        <label class="mb-2 block text-sm font-medium text-foreground">Logo</label>
+                        <div class="flex items-center gap-4">
+                            <div
+                                class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-accent/40"
+                            >
+                                <img v-if="logoPreview" :src="logoPreview" alt="Site logo" class="max-h-full max-w-full object-contain" />
+                                <span v-else class="px-1 text-center text-[10px] leading-tight text-muted-foreground">No logo</span>
+                            </div>
+                            <div class="space-y-2">
+                                <input
+                                    type="file"
+                                    accept="image/png,image/jpeg,image/svg+xml,image/webp"
+                                    class="block text-sm text-foreground file:mr-3 file:rounded-md file:border-0 file:bg-foreground file:px-3 file:py-1.5 file:text-sm file:text-background hover:file:opacity-90"
+                                    @change="onLogoChange"
+                                />
+                                <label v-if="siteLogo" class="flex items-center gap-2 text-sm text-muted-foreground">
+                                    <input v-model="form.remove_logo" type="checkbox" />
+                                    Remove current logo
+                                </label>
+                            </div>
+                        </div>
+                        <p v-if="form.errors.logo" class="mt-2 text-sm text-danger">{{ form.errors.logo }}</p>
+                        <p class="mt-2 text-xs text-muted-foreground">
+                            PNG, JPG, SVG or WebP, up to 2&nbsp;MB. If unset, the site name is shown instead.
+                        </p>
+                        <label v-if="logoPreview" class="mt-3 flex items-center gap-2 text-sm text-foreground">
+                            <input v-model="form.site_logo_show_name" type="checkbox" />
+                            Show the site name next to the logo
+                        </label>
+                    </div>
+
+                    <div class="mt-6">
+                        <Button type="submit" :disabled="form.processing">Save settings</Button>
+                    </div>
+                </form>
+            </section>
+
+            <!-- Features (agency-only) -->
+            <section v-if="canManageFeatures" class="border-t border-border pt-8">
+                <h2 class="mb-1 text-lg font-semibold">Features</h2>
+                <p class="mb-4 text-sm text-muted-foreground">Turn optional features on or off for this site.</p>
+
+                <form class="space-y-5" @submit.prevent="saveFeatures">
+                    <div v-if="features.commerce?.available">
+                        <label class="flex items-start gap-3">
+                            <input v-model="featureForm.commerce_enabled" type="checkbox" class="mt-1" />
+                            <span>
+                                <span class="block text-sm font-medium text-foreground">Store (commerce)</span>
+                                <span class="block text-xs text-muted-foreground">Enables the storefront, cart, and checkout.</span>
+                            </span>
+                        </label>
+                        <p
+                            v-if="featureForm.commerce_enabled && !features.commerce?.stripeConfigured"
+                            class="border-warning/40 bg-warning/10 ml-7 mt-2 rounded-md border px-3 py-2 text-xs text-foreground"
+                        >
+                            No Stripe secret key is configured — the store will be visible but checkout won't complete until
+                            <code>commerce.payments.stripe.secret</code> is set.
+                        </p>
+                    </div>
+
+                    <label class="flex items-start gap-3">
+                        <input v-model="featureForm.contact_form_enabled" type="checkbox" class="mt-1" />
+                        <span>
+                            <span class="block text-sm font-medium text-foreground">Contact form</span>
+                            <span class="block text-xs text-muted-foreground"
+                                >Creates a published <code>/contact</code> page with a contact-form block.</span
+                            >
+                        </span>
+                    </label>
+
+                    <div>
+                        <Button type="submit" :disabled="featureForm.processing">Save features</Button>
+                    </div>
+                </form>
+            </section>
+        </div>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Taxonomy/Edit.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, FormBuilder } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+interface TermData {
+    id: number;
+    name: string;
+    slug: string;
+    description: string | null;
+    parent_id: number | null;
+}
+
+const props = defineProps<{
+    taxonomy: { slug: string; label: string; name: string };
+    term: TermData | null;
+    parents: Array<{ label: string; value: number }>;
+}>();
+
+const isEdit = computed(() => props.term !== null);
+
+const fields = computed(() => [
+    { name: 'name', label: 'Name', required: true, placeholder: `${props.taxonomy.name} name` },
+    { name: 'slug', label: 'Slug', help: 'Leave blank to auto-generate from the name.' },
+    {
+        name: 'parent_id',
+        label: 'Parent',
+        type: 'select' as const,
+        options: [{ label: '— None —', value: '' }, ...props.parents],
+    },
+    { name: 'description', label: 'Description', type: 'textarea' as const },
+]);
+
+const form = useForm({
+    name: props.term?.name ?? '',
+    slug: props.term?.slug ?? '',
+    parent_id: props.term?.parent_id != null ? String(props.term.parent_id) : '',
+    description: props.term?.description ?? '',
+});
+
+const model = computed({
+    get: () => ({
+        name: form.name,
+        slug: form.slug,
+        parent_id: form.parent_id,
+        description: form.description,
+    }),
+    set: (value: Record<string, unknown>) => {
+        form.name = (value.name as string) ?? '';
+        form.slug = (value.slug as string) ?? '';
+        form.parent_id = (value.parent_id as string) ?? '';
+        form.description = (value.description as string) ?? '';
+    },
+});
+
+const submit = () => {
+    if (isEdit.value && props.term) {
+        form.put(`/admin/taxonomy/${props.taxonomy.slug}/${props.term.id}`);
+    } else {
+        form.post(`/admin/taxonomy/${props.taxonomy.slug}`);
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title> {{ isEdit ? 'Edit' : 'New' }} {{ taxonomy.name.toLowerCase() }} </template>
+
+        <form class="max-w-2xl" @submit.prevent="submit">
+            <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+
+            <div class="mt-6 flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">
+                    {{ isEdit ? 'Save changes' : `Create ${taxonomy.name.toLowerCase()}` }}
+                </Button>
+                <Link :href="`/admin/taxonomy/${taxonomy.slug}`">
+                    <Button variant="ghost" type="button">Cancel</Button>
+                </Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>