@tower_74/cms-app 0.1.0

package/src/pages/Admin/Taxonomy/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, DataTable } from '@tower_74/cms-ui';
+
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+interface TermRow {
+    id: number;
+    name: string;
+    slug: string;
+    parent: string | null;
+    posts_count: number;
+}
+
+const props = defineProps<{
+    taxonomy: { slug: string; label: string; name: string };
+    terms: { data: TermRow[]; total: number; links: PageLink[] };
+}>();
+
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'slug', label: 'Slug' },
+    { key: 'parent', label: 'Parent' },
+    { key: 'posts_count', label: 'Used', align: 'right' as const },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+const destroy = (row: TermRow) => {
+    if (confirm(`Delete “${row.name}”?`)) {
+        router.delete(`/admin/taxonomy/${props.taxonomy.slug}/${row.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ taxonomy.label }}</template>
+
+        <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">{{ taxonomy.label }}</h2>
+            <Link :href="`/admin/taxonomy/${taxonomy.slug}/create`">
+                <Button>New {{ taxonomy.name.toLowerCase() }}</Button>
+            </Link>
+        </div>
+
+        <DataTable :columns="columns" :rows="terms.data" :empty="`No ${taxonomy.label.toLowerCase()} yet.`">
+            <template #cell-parent="{ value }">
+                <span class="text-muted">{{ value ?? '—' }}</span>
+            </template>
+            <template #cell-actions="{ row }">
+                <div class="flex justify-end gap-2">
+                    <Link :href="`/admin/taxonomy/${taxonomy.slug}/${(row as TermRow).id}/edit`">
+                        <Button variant="ghost" size="sm">Edit</Button>
+                    </Link>
+                    <Button variant="danger" size="sm" @click="destroy(row as TermRow)">Delete</Button>
+                </div>
+            </template>
+        </DataTable>
+
+        <Pagination :links="terms.links" />
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,82 @@
+<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 UserData {
+    id: number;
+    name: string;
+    email: string;
+    role: string | null;
+}
+
+const props = defineProps<{
+    user: UserData | null;
+    roles: Array<{ label: string; value: string }>;
+}>();
+
+const isEdit = computed(() => props.user !== null);
+
+const fields = computed(() => [
+    { name: 'name', label: 'Name', required: true },
+    { name: 'email', label: 'Email', type: 'email' as const, required: true },
+    {
+        name: 'password',
+        label: 'Password',
+        type: 'password' as const,
+        required: !isEdit.value,
+        help: isEdit.value ? 'Leave blank to keep the current password.' : undefined,
+    },
+    { name: 'role', label: 'Role', type: 'select' as const, required: true, options: props.roles },
+]);
+
+const form = useForm({
+    name: props.user?.name ?? '',
+    email: props.user?.email ?? '',
+    password: '',
+    role: props.user?.role ?? props.roles[0]?.value ?? '',
+});
+
+const model = computed({
+    get: () => ({
+        name: form.name,
+        email: form.email,
+        password: form.password,
+        role: form.role,
+    }),
+    set: (value: Record<string, unknown>) => {
+        form.name = (value.name as string) ?? '';
+        form.email = (value.email as string) ?? '';
+        form.password = (value.password as string) ?? '';
+        form.role = (value.role as string) ?? '';
+    },
+});
+
+const submit = () => {
+    if (isEdit.value && props.user) {
+        form.put(`/admin/users/${props.user.id}`);
+    } else {
+        form.post('/admin/users');
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>{{ isEdit ? 'Edit user' : 'New user' }}</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">
+                    {{ isEdit ? 'Save changes' : 'Create user' }}
+                </Button>
+                <Link href="/admin/users">
+                    <Button variant="ghost" type="button">Cancel</Button>
+                </Link>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router, usePage } from '@inertiajs/vue3';
+import { Badge, Button, DataTable } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+interface UserRow {
+    id: number;
+    name: string;
+    email: string;
+    role: string | null;
+    verified: boolean;
+}
+
+defineProps<{
+    users: { data: UserRow[]; total: number; links: PageLink[] };
+}>();
+
+const page = usePage();
+const currentUserId = computed(() => (page.props.auth?.user as { id: number } | undefined)?.id);
+
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'email', label: 'Email' },
+    { key: 'role', label: 'Role' },
+    { key: 'verified', label: 'Verified' },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+const destroy = (row: UserRow) => {
+    if (confirm(`Delete ${row.name}?`)) {
+        router.delete(`/admin/users/${row.id}`, { preserveScroll: true });
+    }
+};
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Users</template>
+
+        <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">Users</h2>
+            <Link href="/admin/users/create">
+                <Button>New user</Button>
+            </Link>
+        </div>
+
+        <DataTable :columns="columns" :rows="users.data" empty="No users yet.">
+            <template #cell-role="{ value }">
+                <Badge>{{ value ?? '—' }}</Badge>
+            </template>
+            <template #cell-verified="{ value }">
+                <Badge :variant="value ? 'success' : 'neutral'">{{ value ? 'Yes' : 'No' }}</Badge>
+            </template>
+            <template #cell-actions="{ row }">
+                <div class="flex justify-end gap-2">
+                    <Link :href="`/admin/users/${(row as UserRow).id}/edit`">
+                        <Button variant="ghost" size="sm">Edit</Button>
+                    </Link>
+                    <Button v-if="(row as UserRow).id !== currentUserId" variant="danger" size="sm" @click="destroy(row as UserRow)"> Delete </Button>
+                </div>
+            </template>
+        </DataTable>
+
+        <Pagination :links="users.links" />
+    </AdminLayout>
+</template>

package/src/pages/Public/Cart/Index.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import Seo from '@/components/Seo.vue';
+import PublicLayout from '@/layouts/PublicLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { type Block, Button, CartLineItem, CartSummary } from '@tower_74/cms-ui';
+
+interface CartItem {
+    variant_id: number;
+    name: string;
+    variant: string | null;
+    price: string;
+    quantity: number;
+    line_total: string;
+    max: number;
+    image: { src: string; alt?: string } | null;
+}
+interface ShippingOption {
+    id: string;
+    label: string;
+    cost: string;
+}
+
+defineProps<{
+    site: { name: string };
+    menu: Array<{ label: string; url: string }>;
+    footerWidgets: Block[];
+    cartCount?: number | null;
+    items: CartItem[];
+    shippingOptions: ShippingOption[];
+    selectedShipping: string | null;
+    summary: { subtotal: string; shipping?: string | null; tax?: string | null; total: string };
+    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
+}>();
+
+const updateQty = (variantId: number, quantity: number) => router.patch(`/cart/${variantId}`, { quantity }, { preserveScroll: true });
+
+const removeItem = (variantId: number) => router.delete(`/cart/${variantId}`, { preserveScroll: true });
+
+const chooseShipping = (method: string) => router.post('/cart/shipping', { method }, { preserveScroll: true });
+</script>
+
+<template>
+    <Seo :seo="seo" />
+
+    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
+        <div class="mx-auto max-w-5xl px-4 py-12 sm:px-6">
+            <h1 class="mb-8 text-3xl font-bold tracking-tight">Cart</h1>
+
+            <div v-if="items.length" class="grid gap-10 lg:grid-cols-[1fr_320px]">
+                <div>
+                    <CartLineItem
+                        v-for="item in items"
+                        :key="item.variant_id"
+                        :name="item.name"
+                        :variant="item.variant ?? undefined"
+                        :image="item.image ?? undefined"
+                        :price="item.price"
+                        :quantity="item.quantity"
+                        :line-total="item.line_total"
+                        :max="item.max"
+                        @update:quantity="updateQty(item.variant_id, $event)"
+                        @remove="removeItem(item.variant_id)"
+                    />
+
+                    <div v-if="shippingOptions.length" class="mt-6">
+                        <h2 class="mb-2 text-sm font-medium">Shipping</h2>
+                        <label
+                            v-for="option in shippingOptions"
+                            :key="option.id"
+                            class="flex cursor-pointer items-center justify-between rounded border border-border px-3 py-2 text-sm"
+                            :class="option.id === selectedShipping ? 'border-primary' : ''"
+                        >
+                            <span class="flex items-center gap-2">
+                                <input
+                                    type="radio"
+                                    name="shipping"
+                                    :value="option.id"
+                                    :checked="option.id === selectedShipping"
+                                    @change="chooseShipping(option.id)"
+                                />
+                                {{ option.label }}
+                            </span>
+                            <span class="text-muted">{{ option.cost }}</span>
+                        </label>
+                    </div>
+                </div>
+
+                <CartSummary
+                    :subtotal="summary.subtotal"
+                    :shipping="summary.shipping ?? undefined"
+                    :tax="summary.tax ?? undefined"
+                    :total="summary.total"
+                >
+                    <template #actions>
+                        <Link href="/checkout"><Button class="w-full">Checkout</Button></Link>
+                    </template>
+                </CartSummary>
+            </div>
+
+            <div v-else class="rounded-lg border border-border bg-background px-4 py-16 text-center">
+                <p class="text-muted">Your cart is empty.</p>
+                <Link href="/shop" class="mt-4 inline-block">
+                    <Button variant="secondary">Continue shopping</Button>
+                </Link>
+            </div>
+        </div>
+    </PublicLayout>
+</template>

package/src/pages/Public/Checkout/Confirmation.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import Seo from '@/components/Seo.vue';
+import PublicLayout from '@/layouts/PublicLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { type Block, Button, OrderSummary } from '@tower_74/cms-ui';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+interface OrderItem {
+    name: string;
+    variant: string | null;
+    quantity: number;
+    lineTotal: string;
+}
+
+const props = defineProps<{
+    site: { name: string };
+    menu: Array<{ label: string; url: string }>;
+    footerWidgets: Block[];
+    cartCount?: number | null;
+    order: {
+        number: string;
+        status: string;
+        paymentStatus: string;
+        email: string;
+        items: OrderItem[];
+        subtotal: string;
+        discount?: string | null;
+        shipping?: string | null;
+        tax?: string | null;
+        total: string;
+    };
+    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
+}>();
+
+// The webhook — not this redirect — sets the true payment status, so poll until paid
+// (or failed) instead of assuming success (PLANNING §13.4 step 10).
+const paymentStatus = ref(props.order.paymentStatus);
+const isPaid = computed(() => paymentStatus.value === 'paid');
+const isFailed = computed(() => paymentStatus.value === 'failed');
+const pending = computed(() => !isPaid.value && !isFailed.value);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+
+const poll = async () => {
+    try {
+        const response = await fetch(`/checkout/status/${props.order.number}`, {
+            headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+            credentials: 'same-origin',
+        });
+        if (!response.ok) return;
+        const data = await response.json();
+        paymentStatus.value = data.paymentStatus;
+        if (!pending.value && timer) clearInterval(timer);
+    } catch {
+        // transient; the next tick retries
+    }
+};
+
+onMounted(() => {
+    if (pending.value) {
+        timer = setInterval(poll, 3000);
+    }
+});
+
+onBeforeUnmount(() => {
+    if (timer) clearInterval(timer);
+});
+
+const refresh = () => router.reload();
+</script>
+
+<template>
+    <Seo :seo="seo" />
+
+    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
+        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6">
+            <div class="mb-8 text-center">
+                <h1 class="text-3xl font-bold tracking-tight">
+                    <span v-if="isPaid">Thank you for your order!</span>
+                    <span v-else-if="isFailed">Payment failed</span>
+                    <span v-else>We're confirming your payment…</span>
+                </h1>
+                <p class="mt-2 text-muted">
+                    Order <span class="font-medium text-text">{{ order.number }}</span> — a receipt is on its way to {{ order.email }}.
+                </p>
+
+                <p v-if="pending" class="mt-4 inline-flex items-center gap-2 rounded-full bg-surface px-4 py-1.5 text-sm text-muted">
+                    <span class="h-2 w-2 animate-pulse rounded-full bg-primary" />
+                    Awaiting payment confirmation…
+                </p>
+                <p v-else-if="isFailed" class="mt-4 text-sm text-danger">Your payment didn't go through. Please try again from your cart.</p>
+            </div>
+
+            <OrderSummary
+                :items="order.items"
+                :subtotal="order.subtotal"
+                :discount="order.discount ?? undefined"
+                :shipping="order.shipping ?? undefined"
+                :tax="order.tax ?? undefined"
+                :total="order.total"
+                title="Order details"
+            />
+
+            <div class="mt-8 flex justify-center gap-3">
+                <Link href="/shop"><Button variant="secondary">Continue shopping</Button></Link>
+                <Button v-if="pending" variant="ghost" @click="refresh">Refresh status</Button>
+            </div>
+        </div>
+    </PublicLayout>
+</template>

package/src/pages/Public/Checkout/Index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import Seo from '@/components/Seo.vue';
+import PublicLayout from '@/layouts/PublicLayout.vue';
+import { router } from '@inertiajs/vue3';
+import { type Block, Button, CheckoutForm, OrderSummary } from '@tower_74/cms-ui';
+import { nextTick, ref } from 'vue';
+
+interface SummaryItem {
+    name: string;
+    variant: string | null;
+    image: { src: string; alt?: string } | null;
+    quantity: number;
+    lineTotal: string;
+}
+interface ShippingOption {
+    id: string;
+    label: string;
+    cost: string;
+}
+
+const props = defineProps<{
+    site: { name: string };
+    menu: Array<{ label: string; url: string }>;
+    footerWidgets: Block[];
+    cartCount?: number | null;
+    summary: {
+        items: SummaryItem[];
+        subtotal: string;
+        discount?: string | null;
+        shipping?: string | null;
+        tax?: string | null;
+        total: string;
+    };
+    shippingOptions: ShippingOption[];
+    selectedShipping: string | null;
+    gateway: string;
+    stripeKey: string | null;
+    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
+}>();
+
+const errors = ref<Record<string, string>>({});
+const generalError = ref<string | null>(null);
+const processing = ref(false);
+
+// Stripe (browser-only; loaded lazily so SSR stays clean).
+const showPayment = ref(false);
+const paymentEl = ref<HTMLDivElement | null>(null);
+
+let stripe: any = null;
+
+let elements: any = null;
+let returnUrl = '';
+
+const onShippingChange = (id: string) => router.post('/cart/shipping', { method: id }, { preserveScroll: true, preserveState: true });
+
+const placeOrder = async (payload: any) => {
+    processing.value = true;
+    errors.value = {};
+    generalError.value = null;
+
+    try {
+        const response = await fetch('/checkout', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? '',
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify(payload),
+        });
+
+        const data = await response.json();
+
+        if (response.status === 422) {
+            errors.value = data.errors ? flattenErrors(data.errors) : {};
+            generalError.value = data.errors ? null : (data.message ?? 'Please check your details.');
+            return;
+        }
+        if (!response.ok) {
+            generalError.value = data.message ?? 'Something went wrong. Please try again.';
+            return;
+        }
+
+        returnUrl = data.returnUrl;
+
+        if (data.gateway === 'stripe' && props.stripeKey) {
+            await mountStripe(data.clientSecret);
+        } else {
+            router.visit(returnUrl);
+        }
+    } catch {
+        generalError.value = 'We could not reach the payment service. Please try again.';
+    } finally {
+        processing.value = false;
+    }
+};
+
+const flattenErrors = (raw: Record<string, string[]>): Record<string, string> =>
+    Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, value[0]]));
+
+const mountStripe = async (clientSecret: string) => {
+    const { loadStripe } = await import('@stripe/stripe-js');
+    stripe = await loadStripe(props.stripeKey as string);
+    if (!stripe) {
+        generalError.value = 'Stripe failed to load.';
+        return;
+    }
+    elements = stripe.elements({ clientSecret });
+    showPayment.value = true;
+    await nextTick();
+    elements.create('payment').mount(paymentEl.value);
+};
+
+const confirmPayment = async () => {
+    if (!stripe || !elements) return;
+    processing.value = true;
+    const { error } = await stripe.confirmPayment({
+        elements,
+        confirmParams: { return_url: returnUrl },
+    });
+    if (error) {
+        generalError.value = error.message ?? 'Payment could not be completed.';
+        processing.value = false;
+    }
+};
+</script>
+
+<template>
+    <Seo :seo="seo" />
+
+    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
+        <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+            <h1 class="mb-8 text-3xl font-bold tracking-tight">Checkout</h1>
+
+            <div class="grid gap-12 lg:grid-cols-[1fr_360px]">
+                <div>
+                    <p v-if="generalError" class="border-danger/40 bg-danger/10 mb-6 rounded border px-4 py-3 text-sm text-danger">
+                        {{ generalError }}
+                    </p>
+
+                    <CheckoutForm
+                        v-if="!showPayment"
+                        :shipping-options="shippingOptions"
+                        :selected-shipping="selectedShipping"
+                        :errors="errors"
+                        :processing="processing"
+                        submit-label="Continue to payment"
+                        @update:shipping-method="onShippingChange"
+                        @submit="placeOrder"
+                    />
+
+                    <div v-else>
+                        <h2 class="mb-4 text-lg font-semibold">Payment</h2>
+                        <div ref="paymentEl" class="mb-6" />
+                        <Button size="lg" class="w-full" :disabled="processing" @click="confirmPayment">
+                            {{ processing ? 'Processing…' : 'Pay now' }}
+                        </Button>
+                    </div>
+                </div>
+
+                <OrderSummary
+                    :items="summary.items"
+                    :subtotal="summary.subtotal"
+                    :discount="summary.discount ?? undefined"
+                    :shipping="summary.shipping ?? undefined"
+                    :tax="summary.tax ?? undefined"
+                    :total="summary.total"
+                />
+            </div>
+        </div>
+    </PublicLayout>
+</template>

package/src/pages/Public/Index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import Seo from '@/components/Seo.vue';
+import PublicLayout from '@/layouts/PublicLayout.vue';
+import { type Block } from '@tower_74/cms-ui';
+
+interface PostRow {
+    title: string;
+    slug: string;
+    excerpt: string | null;
+    url: string;
+    date: string | null;
+}
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+defineProps<{
+    site: { name: string };
+    menu: Array<{ label: string; url: string }>;
+    footerWidgets: Block[];
+    cartCount?: number | null;
+    type: { slug: string; label: string };
+    posts: { data: PostRow[]; links: PageLink[] };
+    seo: { title: string; description?: string | null; url?: string | null; image?: string | null; type?: string | null };
+}>();
+</script>
+
+<template>
+    <Seo :seo="seo" />
+
+    <PublicLayout :site="site" :menu="menu" :footer-widgets="footerWidgets" :cart-count="cartCount">
+        <div class="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+            <h1 class="text-3xl font-bold tracking-tight">{{ type.label }}</h1>
+
+            <div class="mt-8 space-y-8">
+                <article v-for="post in posts.data" :key="post.slug" class="border-b border-border pb-8 last:border-0">
+                    <h2 class="text-xl font-semibold">
+                        <a :href="post.url" class="transition-colors hover:text-primary">{{ post.title }}</a>
+                    </h2>
+                    <p v-if="post.date" class="mt-1 text-sm text-muted">{{ post.date }}</p>
+                    <p v-if="post.excerpt" class="mt-3 text-muted">{{ post.excerpt }}</p>
+                    <a :href="post.url" class="mt-3 inline-block text-sm text-primary">Read more →</a>
+                </article>
+
+                <p v-if="!posts.data.length" class="text-muted">Nothing published yet.</p>
+            </div>
+
+            <Pagination :links="posts.links" />
+        </div>
+    </PublicLayout>
+</template>