@tower_74/cms-app 0.1.0

package/src/layouts/PublicLayout.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import AuthBar from '@/components/AuthBar.vue';
+import { type Block, BlockRenderer } from '@tower_74/cms-ui';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    site: { name: string; logo?: string | null; showName?: boolean };
+    menu: Array<{ label: string; url: string }>;
+    footerWidgets: Block[];
+    cartCount?: number | null;
+    edit?: { url: string; label: string } | null;
+}>();
+
+const year = computed(() => new Date().getFullYear());
+const showName = computed(() => !props.site.logo || props.site.showName);
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col bg-background text-text">
+        <!-- Authenticated admin bar (WordPress-style): quick link into the dashboard. -->
+        <AuthBar primary-label="Dashboard" :primary-href="route('dashboard')" primary-kind="dashboard" :edit="edit" />
+
+        <header class="border-b border-border">
+            <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-4 sm:px-6">
+                <a href="/" class="flex items-center gap-2 text-lg font-semibold">
+                    <img v-if="site.logo" :src="site.logo" :alt="site.name" class="h-9 w-auto max-w-[12rem] object-contain" />
+                    <span v-if="showName">{{ site.name }}</span>
+                </a>
+                <nav class="flex flex-wrap items-center gap-4 text-sm">
+                    <a v-for="(item, i) in menu" :key="i" :href="item.url" class="text-muted transition-colors hover:text-text">
+                        {{ item.label }}
+                    </a>
+                    <a
+                        v-if="cartCount !== null && cartCount !== undefined"
+                        href="/cart"
+                        class="font-medium text-text transition-colors hover:text-primary"
+                    >
+                        Cart ({{ cartCount }})
+                    </a>
+                </nav>
+            </div>
+        </header>
+
+        <main class="flex-1">
+            <slot />
+        </main>
+
+        <footer class="border-t border-border bg-surface">
+            <BlockRenderer v-if="footerWidgets.length" :blocks="footerWidgets" />
+            <div class="mx-auto max-w-6xl px-4 py-6 text-sm text-muted sm:px-6">© {{ year }} {{ site.name }}</div>
+        </footer>
+    </div>
+</template>

package/src/layouts/auth/AuthCardLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Link } from '@inertiajs/vue3';
+
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<template>
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-accent p-6 md:p-10">
+        <div class="flex w-full max-w-md flex-col gap-6">
+            <Link :href="route('home')" class="flex items-center gap-2 self-center font-medium">
+                <div class="flex h-9 w-9 items-center justify-center">
+                    <AppLogoIcon class="size-9 fill-current text-black dark:text-white" />
+                </div>
+            </Link>
+
+            <div class="flex flex-col gap-6">
+                <Card class="rounded-xl">
+                    <CardHeader class="px-10 pb-0 pt-8 text-center">
+                        <CardTitle class="text-xl">{{ title }}</CardTitle>
+                        <CardDescription>
+                            {{ description }}
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent class="px-10 py-8">
+                        <slot />
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>

package/src/layouts/auth/AuthSimpleLayout.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { Link } from '@inertiajs/vue3';
+
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<template>
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+        <div class="w-full max-w-sm">
+            <div class="flex flex-col gap-8">
+                <div class="flex flex-col items-center gap-4">
+                    <Link :href="route('home')" class="flex flex-col items-center gap-2 font-medium">
+                        <div class="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                            <AppLogoIcon class="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                        </div>
+                        <span class="sr-only">{{ title }}</span>
+                    </Link>
+                    <div class="space-y-2 text-center">
+                        <h1 class="text-xl font-medium">{{ title }}</h1>
+                        <p class="text-center text-sm text-muted-foreground">{{ description }}</p>
+                    </div>
+                </div>
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>

package/src/layouts/auth/AuthSplitLayout.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { Link, usePage } from '@inertiajs/vue3';
+
+const page = usePage();
+const name = page.props.name;
+const quote = page.props.quote;
+
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<template>
+    <div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <div class="relative hidden h-full flex-col bg-accent p-10 text-white dark:border-r lg:flex">
+            <div class="absolute inset-0 bg-zinc-900" />
+            <Link :href="route('home')" class="relative z-20 flex items-center text-lg font-medium">
+                <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
+                {{ name }}
+            </Link>
+            <div v-if="quote" class="relative z-20 mt-auto">
+                <blockquote class="space-y-2">
+                    <p class="text-lg">&ldquo;{{ quote.message }}&rdquo;</p>
+                    <footer class="text-sm text-neutral-300">{{ quote.author }}</footer>
+                </blockquote>
+            </div>
+        </div>
+        <div class="lg:p-8">
+            <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+                <div class="flex flex-col space-y-2 text-center">
+                    <h1 class="text-xl font-medium tracking-tight" v-if="title">{{ title }}</h1>
+                    <p class="text-sm text-muted-foreground" v-if="description">{{ description }}</p>
+                </div>
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>

package/src/layouts/settings/Layout.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Heading from '@/components/Heading.vue';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { type NavItem } from '@/types';
+import { Link } from '@inertiajs/vue3';
+
+const sidebarNavItems: NavItem[] = [
+    {
+        title: 'Profile',
+        href: '/settings/profile',
+    },
+    {
+        title: 'Password',
+        href: '/settings/password',
+    },
+    {
+        title: 'Appearance',
+        href: '/settings/appearance',
+    },
+];
+
+const currentPath = window.location.pathname;
+</script>
+
+<template>
+    <div class="px-4 py-6">
+        <Heading title="Settings" description="Manage your profile and account settings" />
+
+        <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-x-12 lg:space-y-0">
+            <aside class="w-full max-w-xl lg:w-48">
+                <nav class="flex flex-col space-x-0 space-y-1">
+                    <Button
+                        v-for="item in sidebarNavItems"
+                        :key="item.href"
+                        variant="ghost"
+                        :class="['w-full justify-start', { 'bg-accent': currentPath === item.href }]"
+                        as-child
+                    >
+                        <Link :href="item.href">
+                            {{ item.title }}
+                        </Link>
+                    </Button>
+                </nav>
+            </aside>
+
+            <Separator class="my-6 md:hidden" />
+
+            <div class="flex-1 md:max-w-2xl">
+                <section class="max-w-xl space-y-12">
+                    <slot />
+                </section>
+            </div>
+        </div>
+    </div>
+</template>

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/src/pages/Admin/Appearance/Theme.vue

@@ -0,0 +1,58 @@
+<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 } from 'vue';
+
+interface ThemeValues {
+    primary: string;
+    primaryForeground: string;
+    surface: string;
+    text: string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    radius: string;
+}
+
+const props = defineProps<{ theme: ThemeValues }>();
+
+const fields = [
+    { name: 'primary', label: 'Primary', type: 'color' as const },
+    { name: 'primaryForeground', label: 'Primary text', type: 'color' as const },
+    { name: 'surface', label: 'Surface', type: 'color' as const },
+    { name: 'text', label: 'Text', type: 'color' as const },
+    { name: 'success', label: 'Success', type: 'color' as const },
+    { name: 'warning', label: 'Warning', type: 'color' as const },
+    { name: 'danger', label: 'Danger', type: 'color' as const },
+    { name: 'info', label: 'Info', type: 'color' as const },
+    { name: 'radius', label: 'Corner radius', help: 'e.g. 0.5rem or 8px' },
+];
+
+const form = useForm<ThemeValues>({ ...props.theme });
+
+const model = computed({
+    get: () => ({ ...form.data() }),
+    set: (value: Record<string, unknown>) => {
+        Object.assign(form, value);
+    },
+});
+
+const submit = () => form.put('/admin/appearance/theme');
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Theme</template>
+
+        <p class="mb-6 max-w-xl text-sm text-muted">These design tokens re-skin the whole site and component library instantly — no rebuild.</p>
+
+        <form class="max-w-md" @submit.prevent="submit">
+            <FormBuilder v-model="model" :fields="fields" :errors="form.errors" />
+            <div class="mt-6">
+                <Button type="submit" :disabled="form.processing">Save theme</Button>
+            </div>
+        </form>
+    </AdminLayout>
+</template>

package/src/pages/Admin/Appearance/Widgets.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import BlockEditor from '@/components/BlockEditor.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { useForm } from '@inertiajs/vue3';
+import { Button } from '@tower_74/cms-ui';
+
+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<{
+    areas: Array<{ key: string; label: string }>;
+    widgets: Record<string, Block[]>;
+    blockRegistry: BlockDef[];
+}>();
+
+const form = useForm<{ widgets: Record<string, Block[]> }>({ widgets: { ...props.widgets } });
+
+const setArea = (key: string, blocks: Block[]) => {
+    form.widgets = { ...form.widgets, [key]: blocks };
+};
+
+const submit = () => form.put('/admin/appearance/widgets');
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Widgets</template>
+
+        <p class="mb-6 max-w-2xl text-sm text-muted">Widget areas hold blocks rendered in fixed regions of the site (e.g. sidebar, footer).</p>
+
+        <form class="max-w-3xl space-y-10" @submit.prevent="submit">
+            <section v-for="area in areas" :key="area.key">
+                <h3 class="mb-3 text-base font-semibold">{{ area.label }}</h3>
+                <BlockEditor :model-value="form.widgets[area.key] ?? []" :registry="blockRegistry" @update:model-value="setArea(area.key, $event)" />
+            </section>
+
+            <Button type="submit" :disabled="form.processing">Save widgets</Button>
+        </form>
+    </AdminLayout>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import Pagination from '@/components/Pagination.vue';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link } from '@inertiajs/vue3';
+import { Badge, Button, DataTable } from '@tower_74/cms-ui';
+
+interface OrderRow {
+    id: number;
+    number: string;
+    date: string | null;
+    email: string;
+    status: string;
+    payment_status: string;
+    total: string;
+}
+interface PageLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+defineProps<{ orders: { data: OrderRow[]; links: PageLink[] } }>();
+
+const columns = [
+    { key: 'number', label: 'Order' },
+    { key: 'date', label: 'Date' },
+    { key: 'email', label: 'Customer' },
+    { key: 'status', label: 'Status' },
+    { key: 'payment_status', label: 'Payment' },
+    { key: 'total', label: 'Total', align: 'right' as const },
+    { key: 'actions', label: '', align: 'right' as const },
+];
+
+const statusVariant = (status: string) =>
+    ({
+        completed: 'success',
+        processing: 'info',
+        on_hold: 'warning',
+        cancelled: 'neutral',
+        failed: 'danger',
+        refunded: 'neutral',
+        pending: 'neutral',
+    })[status] ?? 'neutral';
+
+const paymentVariant = (status: string) =>
+    ({
+        paid: 'success',
+        unpaid: 'neutral',
+        authorized: 'info',
+        partially_refunded: 'warning',
+        refunded: 'neutral',
+        failed: 'danger',
+    })[status] ?? 'neutral';
+
+const label = (value: string) => value.replace(/_/g, ' ');
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Orders</template>
+
+        <h2 class="mb-4 text-lg font-semibold">Orders</h2>
+
+        <DataTable :columns="columns" :rows="orders.data" empty="No orders yet.">
+            <template #cell-status="{ value }">
+                <Badge :variant="statusVariant(value as string)">{{ label(value as string) }}</Badge>
+            </template>
+            <template #cell-payment_status="{ value }">
+                <Badge :variant="paymentVariant(value as string)">{{ label(value as string) }}</Badge>
+            </template>
+            <template #cell-actions="{ row }">
+                <Link :href="`/admin/commerce/orders/${(row as OrderRow).number}`">
+                    <Button variant="ghost" size="sm">View</Button>
+                </Link>
+            </template>
+        </DataTable>
+
+        <Pagination :links="orders.links" />
+    </AdminLayout>
+</template>

package/src/pages/Admin/Commerce/Orders/Show.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+import { Badge, Button, Card, Select } from '@tower_74/cms-ui';
+import { ref } from 'vue';
+
+interface OrderItem {
+    name: string;
+    variant: string | null;
+    sku: string | null;
+    quantity: number;
+    unit: string;
+    total: string;
+}
+interface Address {
+    first_name?: string;
+    last_name?: string;
+    line1?: string;
+    line2?: string;
+    city?: string;
+    region?: string;
+    postal_code?: string;
+    country?: string;
+    phone?: string;
+}
+interface Order {
+    id: number;
+    number: string;
+    date: string | null;
+    email: string;
+    status: string;
+    paymentStatus: string;
+    billing: Address | null;
+    shipping: Address | null;
+    shippingMethod: string | null;
+    note: string | null;
+    isPaid: boolean;
+    items: OrderItem[];
+    totals: { subtotal: string; discount?: string | null; shipping?: string | null; tax?: string | null; total: string };
+    payments: Array<{ gateway: string; transactionId: string | null; amount: string; status: string }>;
+}
+
+const props = defineProps<{
+    order: Order;
+    fulfillmentStatuses: string[];
+    canEdit: boolean;
+    canRefund: boolean;
+    canDelete: boolean;
+}>();
+
+const label = (value: string) => value.replace(/_/g, ' ');
+
+const statusVariant = (status: string) =>
+    ({ completed: 'success', processing: 'info', on_hold: 'warning', failed: 'danger', refunded: 'neutral' })[status] ?? 'neutral';
+
+const newStatus = ref(props.order.status);
+
+const statusOptions = props.fulfillmentStatuses.map((value) => ({ label: label(value), value }));
+
+const updateStatus = () => router.patch(`/admin/commerce/orders/${props.order.number}/status`, { status: newStatus.value }, { preserveScroll: true });
+
+const refund = () => {
+    if (confirm('Issue a refund for this order? The gateway will confirm it shortly.')) {
+        router.post(`/admin/commerce/orders/${props.order.number}/refund`, {}, { preserveScroll: true });
+    }
+};
+
+const destroy = () => {
+    if (confirm(`Delete order ${props.order.number}? This cannot be undone.`)) {
+        router.delete(`/admin/commerce/orders/${props.order.number}`);
+    }
+};
+
+const formatAddress = (a: Address | null) =>
+    a
+        ? [
+              `${a.first_name ?? ''} ${a.last_name ?? ''}`.trim(),
+              a.line1,
+              a.line2,
+              [a.city, a.region, a.postal_code].filter(Boolean).join(' '),
+              a.country,
+              a.phone,
+          ].filter(Boolean)
+        : [];
+</script>
+
+<template>
+    <AdminLayout>
+        <template #title>Order {{ order.number }}</template>
+
+        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+                <Link href="/admin/commerce/orders" class="text-sm text-muted hover:underline">← Orders</Link>
+                <h2 class="text-lg font-semibold">{{ order.number }}</h2>
+                <Badge :variant="statusVariant(order.status)">{{ label(order.status) }}</Badge>
+                <Badge :variant="order.paymentStatus === 'paid' ? 'success' : 'neutral'">{{ label(order.paymentStatus) }}</Badge>
+            </div>
+            <a :href="`/admin/commerce/orders/${order.number}/invoice`">
+                <Button variant="secondary" size="sm">Download invoice</Button>
+            </a>
+        </div>
+
+        <div class="grid gap-6 lg:grid-cols-[1fr_320px]">
+            <div class="space-y-6">
+                <Card title="Items">
+                    <table class="w-full text-sm">
+                        <thead>
+                            <tr class="border-b border-border text-left text-muted">
+                                <th class="py-2">Item</th>
+                                <th class="py-2 text-right">Qty</th>
+                                <th class="py-2 text-right">Unit</th>
+                                <th class="py-2 text-right">Total</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(item, i) in order.items" :key="i" class="border-b border-border last:border-0">
+                                <td class="py-2">
+                                    {{ item.name }}
+                                    <span v-if="item.variant" class="block text-xs text-muted">{{ item.variant }}</span>
+                                </td>
+                                <td class="py-2 text-right">{{ item.quantity }}</td>
+                                <td class="py-2 text-right">{{ item.unit }}</td>
+                                <td class="py-2 text-right">{{ item.total }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <dl class="mt-4 space-y-1 border-t border-border pt-4 text-sm">
+                        <div class="flex justify-between">
+                            <dt class="text-muted">Subtotal</dt>
+                            <dd>{{ order.totals.subtotal }}</dd>
+                        </div>
+                        <div v-if="order.totals.discount" class="flex justify-between">
+                            <dt class="text-muted">Discount</dt>
+                            <dd>-{{ order.totals.discount }}</dd>
+                        </div>
+                        <div v-if="order.totals.shipping" class="flex justify-between">
+                            <dt class="text-muted">Shipping</dt>
+                            <dd>{{ order.totals.shipping }}</dd>
+                        </div>
+                        <div v-if="order.totals.tax" class="flex justify-between">
+                            <dt class="text-muted">Tax</dt>
+                            <dd>{{ order.totals.tax }}</dd>
+                        </div>
+                        <div class="flex justify-between border-t border-border pt-2 font-semibold">
+                            <dt>Total</dt>
+                            <dd>{{ order.totals.total }}</dd>
+                        </div>
+                    </dl>
+                </Card>
+
+                <Card title="Payments">
+                    <p v-if="!order.payments.length" class="text-sm text-muted">No payments recorded.</p>
+                    <ul v-else class="space-y-2 text-sm">
+                        <li v-for="(p, i) in order.payments" :key="i" class="flex items-center justify-between">
+                            <span>
+                                <span class="font-medium">{{ p.amount }}</span>
+                                <span class="text-muted"> · {{ p.gateway }} · {{ label(p.status) }}</span>
+                            </span>
+                            <span class="font-mono text-xs text-muted">{{ p.transactionId }}</span>
+                        </li>
+                    </ul>
+                </Card>
+            </div>
+
+            <div class="space-y-6">
+                <Card title="Customer">
+                    <p class="text-sm">{{ order.email }}</p>
+                    <p class="mt-1 text-xs text-muted">Placed {{ order.date }}</p>
+                </Card>
+
+                <Card title="Shipping address">
+                    <p v-for="(line, i) in formatAddress(order.shipping)" :key="i" class="text-sm">{{ line }}</p>
+                    <p v-if="order.shippingMethod" class="mt-2 text-xs text-muted">Method: {{ order.shippingMethod }}</p>
+                </Card>
+
+                <Card title="Billing address">
+                    <p v-for="(line, i) in formatAddress(order.billing)" :key="i" class="text-sm">{{ line }}</p>
+                </Card>
+
+                <Card v-if="order.note" title="Customer note">
+                    <p class="text-sm">{{ order.note }}</p>
+                </Card>
+
+                <Card title="Manage">
+                    <div v-if="canEdit" class="space-y-2">
+                        <label class="text-xs font-medium text-muted">Fulfillment status</label>
+                        <Select v-model="newStatus" :options="statusOptions" />
+                        <Button size="sm" class="w-full" @click="updateStatus">Update status</Button>
+                    </div>
+
+                    <div class="mt-4 space-y-2 border-t border-border pt-4">
+                        <Button v-if="canRefund && order.isPaid" variant="secondary" size="sm" class="w-full" @click="refund"> Refund order </Button>
+                        <Button v-if="canDelete" variant="danger" size="sm" class="w-full" @click="destroy"> Delete order </Button>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    </AdminLayout>
+</template>