@tower_74/cms-app 0.4.0 → 0.6.0

package/package.json

@@ -1,51 +1,51 @@
 {
-  "name": "@tower_74/cms-app",
-  "version": "0.4.0",
-  "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
-  "type": "module",
-  "license": "UNLICENSED",
-  "private": false,
-  "files": [
-    "src"
-  ],
-  "exports": {
-    ".": "./src/index.ts",
-    "./pages": "./src/pages.ts"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JMancuso79/cms-app.git"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/",
-    "format:check": "prettier --check src/"
-  },
-  "peerDependencies": {
-    "@inertiajs/vue3": "^2.0.0-beta.3",
-    "@tower_74/cms-ui": "^0.13.0",
-    "@vueuse/core": "^12.0.0",
-    "laravel-vite-plugin": "^1.0",
-    "lucide-vue-next": "^0.468.0",
-    "pinia": "^3.0.4",
-    "radix-vue": "^1.9.11",
-    "vue": "^3.5.13",
-    "ziggy-js": "^2.4.2"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.19.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "typescript": "^5.2.2",
-    "typescript-eslint": "^8.23.0",
-    "vue": "^3.5.13",
-    "vue-tsc": "^3.3.5"
-  }
+    "name": "@tower_74/cms-app",
+    "version": "0.6.0",
+    "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
+    "type": "module",
+    "license": "UNLICENSED",
+    "private": false,
+    "files": [
+        "src"
+    ],
+    "exports": {
+        ".": "./src/index.ts",
+        "./pages": "./src/pages.ts"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/JMancuso79/cms-app.git"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "scripts": {
+        "lint": "eslint . --fix",
+        "format": "prettier --write src/",
+        "format:check": "prettier --check src/"
+    },
+    "peerDependencies": {
+        "@inertiajs/vue3": "^2.0.0-beta.3",
+        "@tower_74/cms-ui": "^0.13.0",
+        "@vueuse/core": "^12.0.0",
+        "laravel-vite-plugin": "^1.0",
+        "lucide-vue-next": "^0.468.0",
+        "pinia": "^3.0.4",
+        "radix-vue": "^1.9.11",
+        "vue": "^3.5.13",
+        "ziggy-js": "^2.4.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.19.0",
+        "@vue/eslint-config-typescript": "^14.3.0",
+        "eslint": "^9.17.0",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-vue": "^9.32.0",
+        "prettier": "^3.4.2",
+        "prettier-plugin-organize-imports": "^4.3.0",
+        "typescript": "^5.2.2",
+        "typescript-eslint": "^8.23.0",
+        "vue": "^3.5.13",
+        "vue-tsc": "^3.3.5"
+    }
 }

package/src/layouts/AdminLayout.vue

@@ -18,23 +18,7 @@ import {
 } from '@/components/ui/sidebar';
 import { pluginIcons } from '@/plugins';
 import { Link, usePage } from '@inertiajs/vue3';
-import {
-    Box,
-    FileStack,
-    FileText,
-    Folder,
-    Image,
-    Inbox,
-    LayoutGrid,
-    ListOrdered,
-    Menu,
-    Paintbrush,
-    Puzzle,
-    Settings,
-    ShoppingBag,
-    Tag,
-    Users,
-} from 'lucide-vue-next';
+import { Box, FileStack, FileText, Folder, Image, Inbox, LayoutGrid, Menu, Paintbrush, Puzzle, Settings, Tag, Users } from 'lucide-vue-next';
 import { type Component, computed, ref, watch } from 'vue';
 
 interface NavItem {
@@ -54,8 +38,6 @@ const nav: NavItem[] = [
     { label: 'Tags', href: '/admin/taxonomy/post_tag', icon: Tag, permission: 'taxonomy' },
     { label: 'Media', href: '/admin/media', icon: Image, permission: 'media' },
     { label: 'Forms', href: '/admin/forms', icon: Inbox, permission: 'forms' },
-    { label: 'Products', href: '/admin/commerce/products', icon: ShoppingBag, permission: 'products' },
-    { label: 'Orders', href: '/admin/commerce/orders', icon: ListOrdered, permission: 'orders' },
     { label: 'Menus', href: '/admin/menus', icon: Menu, permission: 'menus' },
     { label: 'Users', href: '/admin/users', icon: Users, permission: 'users' },
     { label: 'Theme', href: '/admin/appearance/theme', icon: Paintbrush, permission: 'theme' },

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

@@ -2,13 +2,22 @@
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { router } from '@inertiajs/vue3';
 
-defineProps<{
-    plugins: Array<{ key: string; name: string; version: string; enabled: boolean }>;
-}>();
+interface PluginItem {
+    key: string;
+    name: string;
+    description: string | null;
+    composer: string | null;
+    npm: string | null;
+    installed: boolean;
+    enabled: boolean;
+    version: string | null;
+}
 
-// Enabling/disabling persists via the PluginRegistry; the redirect back reflects the new
-// state (a plugin's capabilities are gated on enable at boot — ADR-0026).
-const toggle = (plugin: { key: string; enabled: boolean }) => {
+defineProps<{ plugins: PluginItem[] }>();
+
+// Enable/disable persists via the PluginRegistry; the redirect back reflects the new state
+// (a plugin's capabilities are gated on enable at boot — ADR-0026).
+const toggle = (plugin: PluginItem) => {
     router.post(`/admin/plugins/${plugin.key}/${plugin.enabled ? 'disable' : 'enable'}`, {}, { preserveScroll: true });
 };
 </script>
@@ -18,31 +27,58 @@ const toggle = (plugin: { key: string; enabled: boolean }) => {
         <div class="p-6">
             <h1 class="text-2xl font-semibold">Plugins</h1>
             <p class="mt-1 text-sm text-muted">
-                Enable or disable installed plugins. New plugins become available by installing their package; manage them here.
+                Plugins available for this site. Installed ones can be enabled or disabled; others show how to install them.
             </p>
 
-            <div v-if="plugins.length" class="mt-6 divide-y divide-border overflow-hidden rounded-lg border border-border">
-                <div v-for="plugin in plugins" :key="plugin.key" class="flex items-center justify-between gap-4 p-4">
-                    <div>
-                        <div class="font-medium">{{ plugin.name }}</div>
-                        <div class="text-xs text-muted">{{ plugin.key }} · v{{ plugin.version }}</div>
+            <div v-if="plugins.length" class="mt-6 space-y-3">
+                <div v-for="plugin in plugins" :key="plugin.key" class="rounded-lg border border-border p-4">
+                    <div class="flex items-start justify-between gap-4">
+                        <div class="min-w-0">
+                            <div class="flex items-center gap-2">
+                                <span class="font-medium">{{ plugin.name }}</span>
+                                <span
+                                    class="rounded-full border px-2 py-0.5 text-xs font-medium"
+                                    :class="
+                                        plugin.enabled
+                                            ? 'border-success text-success'
+                                            : plugin.installed
+                                              ? 'border-border text-muted'
+                                              : 'border-info text-info'
+                                    "
+                                >
+                                    {{ plugin.enabled ? 'Enabled' : plugin.installed ? 'Disabled' : 'Available' }}
+                                </span>
+                            </div>
+                            <p v-if="plugin.description" class="mt-1 text-sm text-muted">{{ plugin.description }}</p>
+                            <p class="mt-0.5 text-xs text-muted">
+                                {{ plugin.key }}<span v-if="plugin.version"> · v{{ plugin.version }}</span>
+                            </p>
+                        </div>
+
+                        <button
+                            v-if="plugin.installed"
+                            type="button"
+                            class="shrink-0 rounded-md px-3 py-1.5 text-sm font-medium transition"
+                            :class="
+                                plugin.enabled
+                                    ? 'bg-accent text-accent-foreground hover:bg-accent/80'
+                                    : 'bg-primary text-primary-foreground hover:opacity-90'
+                            "
+                            @click="toggle(plugin)"
+                        >
+                            {{ plugin.enabled ? 'Disable' : 'Enable' }}
+                        </button>
+                    </div>
+
+                    <div v-if="!plugin.installed && plugin.composer" class="mt-3 rounded-md border border-border bg-card p-3 text-xs">
+                        <p class="mb-1 font-medium text-muted">Install, then it'll appear here to enable:</p>
+                        <pre class="overflow-x-auto text-muted"><code>composer require {{ plugin.composer }}<template v-if="plugin.npm">
+npm install {{ plugin.npm }}</template></code></pre>
                     </div>
-                    <button
-                        type="button"
-                        class="rounded-md px-3 py-1.5 text-sm font-medium transition"
-                        :class="
-                            plugin.enabled
-                                ? 'bg-accent text-accent-foreground hover:bg-accent/80'
-                                : 'bg-primary text-primary-foreground hover:opacity-90'
-                        "
-                        @click="toggle(plugin)"
-                    >
-                        {{ plugin.enabled ? 'Disable' : 'Enable' }}
-                    </button>
                 </div>
             </div>
 
-            <p v-else class="mt-6 text-sm text-muted">No plugins installed. Install a plugin package to manage it here.</p>
+            <p v-else class="mt-6 text-sm text-muted">No plugins in the catalogue.</p>
         </div>
     </AdminLayout>
 </template>

package/src/components/commerce/OptionsEditor.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { Button, Input } from '@tower_74/cms-ui';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-
-const props = defineProps<{ modelValue: Option[] }>();
-const emit = defineEmits<{ 'update:modelValue': [value: Option[]] }>();
-
-const commit = (options: Option[]) => emit('update:modelValue', options);
-
-const add = () => commit([...props.modelValue, { name: '', values: [] }]);
-const remove = (i: number) => {
-    const options = [...props.modelValue];
-    options.splice(i, 1);
-    commit(options);
-};
-const setName = (i: number, name: string) => {
-    const options = [...props.modelValue];
-    options[i] = { ...options[i], name };
-    commit(options);
-};
-const setValues = (i: number, csv: string) => {
-    const options = [...props.modelValue];
-    options[i] = {
-        ...options[i],
-        values: csv
-            .split(',')
-            .map((s) => s.trim())
-            .filter(Boolean),
-    };
-    commit(options);
-};
-const valuesText = (option: Option) => option.values.join(', ');
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="(option, i) in modelValue" :key="i" class="flex items-end gap-2 rounded-lg border border-border bg-background p-3">
-            <div class="w-48">
-                <label class="mb-1 block text-xs font-medium text-muted">Option</label>
-                <Input :model-value="option.name" placeholder="Size" @update:model-value="setName(i, $event)" />
-            </div>
-            <div class="flex-1">
-                <label class="mb-1 block text-xs font-medium text-muted">Values (comma-separated)</label>
-                <Input :model-value="valuesText(option)" placeholder="S, M, L" @update:model-value="setValues(i, $event)" />
-            </div>
-            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
-        </div>
-
-        <Button type="button" variant="secondary" @click="add">Add option</Button>
-    </div>
-</template>

package/src/components/commerce/VariantsEditor.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { Button, Input, Select } from '@tower_74/cms-ui';
-
-interface Option {
-    name: string;
-    values: string[];
-}
-interface Variant {
-    sku: string;
-    price: string;
-    stock: number | string;
-    options: Record<string, string>;
-}
-
-const props = defineProps<{ modelValue: Variant[]; options: Option[]; currencySymbol: string }>();
-const emit = defineEmits<{ 'update:modelValue': [value: Variant[]] }>();
-
-const commit = (variants: Variant[]) => emit('update:modelValue', variants);
-
-const add = () => {
-    const options: Record<string, string> = {};
-    props.options.forEach((o) => (options[o.name] = o.values[0] ?? ''));
-    commit([...props.modelValue, { sku: '', price: '', stock: 0, options }]);
-};
-const remove = (i: number) => {
-    const variants = [...props.modelValue];
-    variants.splice(i, 1);
-    commit(variants);
-};
-const setField = (i: number, key: 'sku' | 'price' | 'stock', value: string) => {
-    const variants = [...props.modelValue];
-    variants[i] = { ...variants[i], [key]: value };
-    commit(variants);
-};
-const setOption = (i: number, name: string, value: string) => {
-    const variants = [...props.modelValue];
-    variants[i] = { ...variants[i], options: { ...variants[i].options, [name]: value } };
-    commit(variants);
-};
-const optionsFor = (option: Option) => option.values.map((v) => ({ label: v, value: v }));
-</script>
-
-<template>
-    <div class="space-y-3">
-        <div v-for="(variant, i) in modelValue" :key="i" class="flex flex-wrap items-end gap-2 rounded-lg border border-border bg-background p-3">
-            <div v-for="option in options" :key="option.name" class="w-32">
-                <label class="mb-1 block text-xs font-medium text-muted">{{ option.name }}</label>
-                <Select
-                    :model-value="variant.options[option.name] ?? ''"
-                    :options="optionsFor(option)"
-                    @update:model-value="setOption(i, option.name, $event)"
-                />
-            </div>
-            <div class="w-40">
-                <label class="mb-1 block text-xs font-medium text-muted">SKU</label>
-                <Input :model-value="variant.sku" placeholder="ABC-001" @update:model-value="setField(i, 'sku', $event)" />
-            </div>
-            <div class="w-28">
-                <label class="mb-1 block text-xs font-medium text-muted">Price ({{ currencySymbol }})</label>
-                <Input :model-value="String(variant.price)" type="number" @update:model-value="setField(i, 'price', $event)" />
-            </div>
-            <div class="w-24">
-                <label class="mb-1 block text-xs font-medium text-muted">Stock</label>
-                <Input :model-value="String(variant.stock)" type="number" @update:model-value="setField(i, 'stock', $event)" />
-            </div>
-            <Button type="button" variant="danger" size="sm" @click="remove(i)">✕</Button>
-        </div>
-
-        <Button type="button" variant="secondary" @click="add">Add variant</Button>
-    </div>
-</template>

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

@@ -1,80 +0,0 @@
-<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

@@ -1,200 +0,0 @@
-<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>