@tower_74/cms-app 0.1.0

package/src/pages/Admin/Commerce/Products/Edit.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import BlockEditor from '@/components/BlockEditor.vue';
+import OptionsEditor from '@/components/commerce/OptionsEditor.vue';
+import VariantsEditor from '@/components/commerce/VariantsEditor.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, FormBuilder, FormField, MediaPicker, type MediaItem, type MediaSelection } from '@tower_74/cms-ui';
+import axios from 'axios';
+import { computed, ref } from 'vue';
+
+interface Option {
+    name: string;
+    values: string[];
+}
+interface Variant {
+    sku: string;
+    price: string;
+    stock: number | string;
+    options: Record<string, string>;
+}
+interface Block {
+    type: string;
+    data: Record<string, unknown>;
+}
+interface BlockDef {
+    type: string;
+    label: string;
+    fields: Array<Record<string, unknown>>;
+    defaults: Record<string, unknown>;
+}
+interface ProductData {
+    id: number;
+    name: string;
+    description: string | null;
+    status: string;
+    tax_class: string;
+    featured_media_id: number | null;
+    options: Option[];
+    variants: Variant[];
+}
+
+const props = defineProps<{
+    product: ProductData | null;
+    currencySymbol: string;
+    featuredMedia: MediaItem | null;
+    mediaItems: MediaItem[];
+    blocks: Block[];
+    blockRegistry: BlockDef[];
+}>();
+
+const isEdit = computed(() => props.product !== null);
+
+const fields = [
+    { name: 'name', label: 'Name', required: true },
+    {
+        name: 'status',
+        label: 'Status',
+        type: 'select' as const,
+        options: [
+            { label: 'Draft', value: 'draft' },
+            { label: 'Published', value: 'published' },
+        ],
+    },
+    {
+        name: 'tax_class',
+        label: 'Tax class',
+        type: 'select' as const,
+        options: [
+            { label: 'Standard', value: 'standard' },
+            { label: 'Reduced', value: 'reduced' },
+            { label: 'Zero-rated', value: 'zero' },
+        ],
+    },
+    { name: 'description', label: 'Description', type: 'textarea' as const },
+];
+
+const form = useForm({
+    name: props.product?.name ?? '',
+    status: props.product?.status ?? 'draft',
+    tax_class: props.product?.tax_class ?? 'standard',
+    description: props.product?.description ?? '',
+    featured_media_id: props.product?.featured_media_id ?? null,
+    options: (props.product?.options ?? []) as Option[],
+    variants: (props.product?.variants ?? []) as Variant[],
+    blocks: (props.blocks ?? []) as Block[],
+});
+
+const model = computed({
+    get: () => ({ name: form.name, status: form.status, tax_class: form.tax_class, description: form.description }),
+    set: (value: Record<string, unknown>) => {
+        form.name = (value.name as string) ?? '';
+        form.status = (value.status as string) ?? 'draft';
+        form.tax_class = (value.tax_class as string) ?? 'standard';
+        form.description = (value.description as string) ?? '';
+    },
+});
+
+const optionsModel = computed({ get: () => form.options, set: (value: Option[]) => (form.options = value) });
+const variantsModel = computed({ get: () => form.variants, set: (value: Variant[]) => (form.variants = value) });
+const blocksModel = computed({ get: () => form.blocks, set: (value: Block[]) => (form.blocks = value) });
+
+// Shared media library for the featured-image picker and any block galleries.
+const mediaItems = ref<MediaItem[]>([...props.mediaItems]);
+const onUpload = async (file: File) => {
+    const data = new FormData();
+    data.append('file', file);
+    const { data: res } = await axios.post('/admin/media/upload', data);
+    mediaItems.value = [res.item, ...mediaItems.value];
+};
+
+const featured = ref<MediaSelection | null>(
+    props.featuredMedia ? { id: props.featuredMedia.id, src: props.featuredMedia.url, alt: props.featuredMedia.name ?? '' } : null,
+);
+const onFeatured = (value: MediaSelection | MediaSelection[] | null) => {
+    featured.value = (value as MediaSelection | null) ?? null;
+    form.featured_media_id = featured.value?.id ?? null;
+};
+
+const submit = () => {
+    if (isEdit.value && props.product) {
+        form.put(`/admin/commerce/products/${props.product.id}`);
+    } else {
+        form.post('/admin/commerce/products');
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ isEdit ? 'Edit product' : 'New product' }}</template>
+
+        <form class="max-w-4xl" @submit.prevent="submit">
+            <div class="max-w-xl">
+                <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+
+                <div class="mt-4">
+                    <FormField label="Featured image" :error="form.errors.featured_media_id" help="Shown on the product card and page.">
+                        <MediaPicker :model-value="featured" :items="mediaItems" @update:model-value="onFeatured" @upload="onUpload" />
+                    </FormField>
+                </div>
+            </div>
+
+            <div class="mt-8">
+                <h3 class="mb-3 text-base font-semibold">Options</h3>
+                <OptionsEditor v-model="optionsModel" />
+            </div>
+
+            <div class="mt-8">
+                <h3 class="mb-3 text-base font-semibold">Variants</h3>
+                <p v-if="form.errors.variants" class="mb-2 text-sm text-danger">{{ form.errors.variants }}</p>
+                <VariantsEditor v-model="variantsModel" :options="form.options" :currency-symbol="currencySymbol" />
+            </div>
+
+            <div class="mt-8">
+                <h3 class="mb-3 text-base font-semibold">Product page blocks</h3>
+                <BlockEditor v-model="blocksModel" :registry="blockRegistry" :media-items="mediaItems" @upload="onUpload" />
+            </div>
+
+            <div class="mt-8 flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">
+                    {{ isEdit ? 'Save changes' : 'Create product' }}
+                </Button>
+                <Link href="/admin/commerce/products"><Button variant="ghost" type="button">Cancel</Button></Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Commerce/Products/Index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Badge, Button, DataTable } from '@tower_74/cms-ui';
+
+interface ProductRow {
+    id: number;
+    name: string;
+    status: string;
+    variants_count: number;
+    price_from: string | null;
+}
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+defineProps<{ products: { data: ProductRow[]; links: PageLink[] } }>();
+
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status' },
+    { key: 'variants_count', label: 'Variants', align: 'right' as const },
+    { key: 'price_from', label: 'From', align: 'right' as const },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+const destroy = (row: ProductRow) => {
+    if (confirm(`Delete “${row.name}”?`)) {
+        router.delete(`/admin/commerce/products/${row.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Products</template>
+
+        <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">Products</h2>
+            <Link href="/admin/commerce/products/create"><Button>New product</Button></Link>
+        </div>
+
+        <DataTable :columns="columns" :rows="products.data" empty="No products yet.">
+            <template #cell-status="{ value }">
+                <Badge :variant="value === 'published' ? 'success' : 'neutral'">{{ value }}</Badge>
+            </template>
+            <template #cell-price_from="{ value }">
+                <span class="text-muted">{{ value ?? '—' }}</span>
+            </template>
+            <template #cell-actions="{ row }">
+                <div class="flex justify-end gap-2">
+                    <Link :href="`/admin/commerce/products/${(row as ProductRow).id}/edit`">
+                        <Button variant="ghost" size="sm">Edit</Button>
+                    </Link>
+                    <Button variant="danger" size="sm" @click="destroy(row as ProductRow)">Delete</Button>
+                </div>
+            </template>
+        </DataTable>
+
+        <Pagination :links="products.links" />
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import BlockEditor from '@/components/BlockEditor.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, Checkbox, FormBuilder, FormField, MediaPicker, type MediaItem, type MediaSelection } from '@tower_74/cms-ui';
+import axios from 'axios';
+import { computed, ref } from 'vue';
+
+interface PostData {
+    id: number;
+    title: string;
+    slug: string;
+    status: string;
+    excerpt: string | null;
+    content: string | null;
+    showTitle?: boolean;
+    featured_media_id?: number | null;
+}
+interface Block {
+    type: string;
+    data: Record<string, unknown>;
+}
+interface BlockDef {
+    type: string;
+    label: string;
+    fields: Array<Record<string, unknown>>;
+    defaults: Record<string, unknown>;
+}
+
+const props = defineProps<{
+    type: { slug: string; label: string; singular: string };
+    post: PostData | null;
+    blocks: Block[];
+    blockRegistry: BlockDef[];
+    featuredMedia: MediaItem | null;
+    mediaItems: MediaItem[];
+}>();
+
+const isEdit = computed(() => props.post !== null);
+
+// Shared library state for every picker on this screen (featured image + block galleries).
+// Uploads go through one handler, which prepends the new item so it's instantly selectable.
+const mediaItems = ref<MediaItem[]>([...props.mediaItems]);
+
+const onUpload = async (file: File) => {
+    const data = new FormData();
+    data.append('file', file);
+    const { data: res } = await axios.post('/admin/media/upload', data);
+    mediaItems.value = [res.item, ...mediaItems.value];
+};
+
+// Featured image: the picker speaks MediaSelection ({id, src, alt}); the form persists the id.
+const featured = ref<MediaSelection | null>(
+    props.featuredMedia ? { id: props.featuredMedia.id, src: props.featuredMedia.url, alt: props.featuredMedia.name ?? '' } : null,
+);
+const onFeatured = (value: MediaSelection | MediaSelection[] | null) => {
+    featured.value = (value as MediaSelection | null) ?? null;
+    form.featured_media_id = featured.value?.id ?? null;
+};
+
+const fields = [
+    { name: 'title', label: 'Title', required: true, placeholder: 'Title' },
+    { name: 'slug', label: 'Slug', help: 'Leave blank to auto-generate from the title.' },
+    {
+        name: 'status',
+        label: 'Status',
+        type: 'select' as const,
+        options: [
+            { label: 'Draft', value: 'draft' },
+            { label: 'Published', value: 'published' },
+            { label: 'Scheduled', value: 'scheduled' },
+            { label: 'Private', value: 'private' },
+        ],
+    },
+    { name: 'excerpt', label: 'Excerpt', type: 'textarea' as const },
+    { name: 'content', label: 'Content', type: 'textarea' as const },
+];
+
+const isPage = computed(() => props.type.slug === 'page');
+
+const form = useForm({
+    title: props.post?.title ?? '',
+    slug: props.post?.slug ?? '',
+    status: props.post?.status ?? 'draft',
+    excerpt: props.post?.excerpt ?? '',
+    content: props.post?.content ?? '',
+    featured_media_id: props.post?.featured_media_id ?? null,
+    blocks: (props.blocks ?? []) as Block[],
+    meta: { show_title: props.post?.showTitle ?? false },
+});
+
+const model = computed({
+    get: () => ({
+        title: form.title,
+        slug: form.slug,
+        status: form.status,
+        excerpt: form.excerpt,
+        content: form.content,
+    }),
+    set: (value: Record<string, unknown>) => {
+        form.title = (value.title as string) ?? '';
+        form.slug = (value.slug as string) ?? '';
+        form.status = (value.status as string) ?? 'draft';
+        form.excerpt = (value.excerpt as string) ?? '';
+        form.content = (value.content as string) ?? '';
+    },
+});
+
+const blocksModel = computed({
+    get: () => form.blocks,
+    set: (value: Block[]) => {
+        form.blocks = value;
+    },
+});
+
+const submit = () => {
+    if (isEdit.value && props.post) {
+        form.put(`/admin/content/${props.type.slug}/${props.post.id}`);
+    } else {
+        form.post(`/admin/content/${props.type.slug}`);
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ isEdit ? 'Edit' : 'New' }} {{ type.singular.toLowerCase() }}</template>
+
+        <form class="max-w-3xl" @submit.prevent="submit">
+            <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+
+            <div class="mt-4">
+                <FormField
+                    label="Featured image"
+                    :error="form.errors.featured_media_id"
+                    help="Used for social/SEO previews and at the top of articles."
+                >
+                    <MediaPicker :model-value="featured" :items="mediaItems" @update:model-value="onFeatured" @upload="onUpload" />
+                </FormField>
+            </div>
+
+            <div v-if="isPage" class="mt-4">
+                <Checkbox v-model="form.meta.show_title" label="Show the page title on the public site" />
+                <p class="mt-1 text-xs text-muted">Ignored when the page starts with a hero or page-header block (that already shows a heading).</p>
+            </div>
+
+            <div class="mt-8">
+                <div class="mb-3 flex items-center justify-between">
+                    <h3 class="text-base font-semibold">Page blocks</h3>
+                    <div class="flex items-center gap-3 text-sm">
+                        <Link :href="route('admin.media.index')" class="text-muted underline hover:text-text">Manage media</Link>
+                        <Link v-if="isEdit && post" :href="`/admin/content/${type.slug}/${post.id}/preview`" class="text-primary underline">
+                            Preview
+                        </Link>
+                    </div>
+                </div>
+                <BlockEditor v-model="blocksModel" :registry="blockRegistry" :media-items="mediaItems" @upload="onUpload" />
+            </div>
+
+            <div class="mt-8 flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">
+                    {{ isEdit ? 'Save changes' : `Create ${type.singular.toLowerCase()}` }}
+                </Button>
+                <Link :href="`/admin/content/${type.slug}`">
+                    <Button variant="ghost" type="button">Cancel</Button>
+                </Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Badge, Button, DataTable } from '@tower_74/cms-ui';
+
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+interface PostRow {
+    id: number;
+    title: string;
+    slug: string;
+    status: string;
+    author: string | null;
+    updated_at: string | null;
+}
+
+const props = defineProps<{
+    type: { slug: string; label: string; singular: string };
+    posts: { data: PostRow[]; total: number; links: PageLink[] };
+}>();
+
+const columns = [
+    { key: 'title', label: 'Title' },
+    { key: 'status', label: 'Status' },
+    { key: 'author', label: 'Author' },
+    { key: 'updated_at', label: 'Updated' },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+
+const statusVariant = (status: string): BadgeVariant =>
+    (
+        ({
+            published: 'success',
+            draft: 'neutral',
+            scheduled: 'info',
+            private: 'warning',
+            trash: 'danger',
+        }) as Record<string, BadgeVariant>
+    )[status] ?? 'neutral';
+
+const destroy = (row: PostRow) => {
+    if (confirm(`Delete “${row.title}”?`)) {
+        router.delete(`/admin/content/${props.type.slug}/${row.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ type.label }}</template>
+
+        <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">{{ type.label }}</h2>
+            <Link :href="`/admin/content/${type.slug}/create`">
+                <Button>New {{ type.singular.toLowerCase() }}</Button>
+            </Link>
+        </div>
+
+        <DataTable :columns="columns" :rows="posts.data" :empty="`No ${type.label.toLowerCase()} yet.`">
+            <template #cell-status="{ value }">
+                <Badge :variant="statusVariant(value as string)">{{ value }}</Badge>
+            </template>
+            <template #cell-author="{ value }">
+                <span class="text-muted">{{ value ?? '—' }}</span>
+            </template>
+            <template #cell-updated_at="{ value }">
+                <span class="text-muted">{{ value ?? '—' }}</span>
+            </template>
+            <template #cell-actions="{ row }">
+                <div class="flex justify-end gap-2">
+                    <Link :href="`/admin/content/${type.slug}/${(row as PostRow).id}/edit`">
+                        <Button variant="ghost" size="sm">Edit</Button>
+                    </Link>
+                    <Button variant="danger" size="sm" @click="destroy(row as PostRow)">Delete</Button>
+                </div>
+            </template>
+        </DataTable>
+
+        <Pagination :links="posts.links" />
+    </AdminLayout>
+</template>

package/src/pages/Admin/Content/Preview.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { type Block, Button, LandingPageTemplate } from '@tower_74/cms-ui';
+
+defineProps<{
+    type: { slug: string; label: string; singular: string };
+    post: { id: number; title: string };
+    blocks: Block[];
+}>();
+</script>
+
+<template>
+    <div class="min-h-screen bg-background">
+        <!-- Lightweight preview chrome; the page itself renders via the cms-ui renderer. -->
+        <div class="flex items-center justify-between border-b border-border bg-surface px-4 py-2 text-sm">
+            <span class="text-muted">Preview — {{ post.title }}</span>
+            <Link :href="`/admin/content/${type.slug}/${post.id}/edit`">
+                <Button variant="secondary" size="sm">Back to editor</Button>
+            </Link>
+        </div>
+
+        <LandingPageTemplate v-if="blocks.length" :blocks="blocks" />
+        <p v-else class="px-4 py-20 text-center text-muted">This page has no blocks yet. Add some in the editor.</p>
+    </div>
+</template>

package/src/pages/Admin/Dashboard.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Badge, Button, Card } from '@tower_74/cms-ui';
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Dashboard</template>
+
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <Card title="Welcome">
+                Manage your site content from the sidebar.
+                <template #footer>
+                    <Badge variant="success">cms-ui connected</Badge>
+                </template>
+            </Card>
+
+            <Card title="Content">
+                Posts and Pages are available now. More screens land as later phases ship.
+                <template #footer>
+                    <Button variant="secondary">View posts</Button>
+                </template>
+            </Card>
+        </div>
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import FieldBuilder from '@/components/FieldBuilder.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, useForm } from '@inertiajs/vue3';
+import { Button, Input } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+interface Option {
+    label: string;
+    value: string;
+}
+interface Field {
+    name?: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    placeholder?: string;
+    options?: Option[];
+}
+interface FormData {
+    id: number;
+    slug: string;
+    name: string;
+    fields: Field[];
+    recipient_email: string | null;
+    submit_label: string;
+    success_message: string;
+}
+
+const props = defineProps<{
+    form: FormData | null;
+    fieldTypes: Array<{ value: string; label: string }>;
+}>();
+
+const isEdit = computed(() => props.form !== null);
+
+const form = useForm<{
+    name: string;
+    recipient_email: string;
+    submit_label: string;
+    success_message: string;
+    fields: Field[];
+}>({
+    name: props.form?.name ?? '',
+    recipient_email: props.form?.recipient_email ?? '',
+    submit_label: props.form?.submit_label ?? 'Send',
+    success_message: props.form?.success_message ?? 'Thanks — your message has been sent.',
+    fields: props.form?.fields ?? [{ label: 'Name', type: 'text', required: true }],
+});
+
+const submit = () => {
+    if (isEdit.value && props.form) {
+        form.put(`/admin/forms/${props.form.slug}`);
+    } else {
+        form.post('/admin/forms');
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ isEdit ? 'Edit form' : 'New form' }}</template>
+
+        <form class="max-w-2xl space-y-6" @submit.prevent="submit">
+            <div class="grid gap-4 sm:grid-cols-2">
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Form name</span>
+                    <Input v-model="form.name" placeholder="Contact" />
+                    <p v-if="form.errors.name" class="mt-1 text-xs text-danger">{{ form.errors.name }}</p>
+                </label>
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Notification email</span>
+                    <Input v-model="form.recipient_email" type="email" placeholder="Leave blank for the site default" />
+                    <p v-if="form.errors.recipient_email" class="mt-1 text-xs text-danger">{{ form.errors.recipient_email }}</p>
+                </label>
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Submit button label</span>
+                    <Input v-model="form.submit_label" />
+                </label>
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Success message</span>
+                    <Input v-model="form.success_message" />
+                </label>
+            </div>
+
+            <div>
+                <h3 class="mb-2 text-base font-semibold">Fields</h3>
+                <p v-if="form.errors.fields" class="mb-2 text-xs text-danger">{{ form.errors.fields }}</p>
+                <FieldBuilder v-model="form.fields" :field-types="fieldTypes" />
+            </div>
+
+            <div class="flex items-center gap-2">
+                <Button type="submit" :disabled="form.processing">{{ isEdit ? 'Save form' : 'Create form' }}</Button>
+                <Link href="/admin/forms"><Button variant="ghost" type="button">Cancel</Button></Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>