@magnet-cms/plugin-stripe 0.1.0

package/src/admin/index.ts

@@ -0,0 +1,120 @@
+/**
+ * Stripe Plugin - Frontend Entry
+ *
+ * Self-registers the plugin when loaded via script injection.
+ * The admin app loads plugin bundles at runtime and plugins self-register
+ * on window.__MAGNET_PLUGINS__.
+ */
+
+import type { ComponentType } from 'react'
+
+interface FrontendPluginManifest {
+	pluginName: string
+	routes?: {
+		path: string
+		componentId: string
+		children?: { path: string; componentId: string }[]
+	}[]
+	sidebar?: {
+		id: string
+		title: string
+		url: string
+		icon: string
+		order?: number
+		items?: { id: string; title: string; url: string; icon: string }[]
+	}[]
+}
+
+interface PluginRegistration {
+	manifest: FrontendPluginManifest
+	components: Record<string, () => Promise<{ default: ComponentType<unknown> }>>
+}
+
+const manifest: FrontendPluginManifest = {
+	pluginName: 'stripe',
+	routes: [
+		{
+			path: 'stripe',
+			componentId: 'StripeDashboard',
+			children: [
+				{ path: '', componentId: 'StripeDashboard' },
+				{ path: 'customers', componentId: 'StripeCustomers' },
+				{ path: 'products', componentId: 'StripeProducts' },
+				{ path: 'subscriptions', componentId: 'StripeSubscriptions' },
+				{ path: 'payments', componentId: 'StripePayments' },
+			],
+		},
+	],
+	sidebar: [
+		{
+			id: 'stripe',
+			title: 'Stripe Payments',
+			url: '/stripe',
+			icon: 'CreditCard',
+			order: 30,
+			items: [
+				{
+					id: 'stripe-dashboard',
+					title: 'Dashboard',
+					url: '/stripe',
+					icon: 'BarChart3',
+				},
+				{
+					id: 'stripe-customers',
+					title: 'Customers',
+					url: '/stripe/customers',
+					icon: 'Users',
+				},
+				{
+					id: 'stripe-products',
+					title: 'Products',
+					url: '/stripe/products',
+					icon: 'Package',
+				},
+				{
+					id: 'stripe-subscriptions',
+					title: 'Subscriptions',
+					url: '/stripe/subscriptions',
+					icon: 'RefreshCw',
+				},
+				{
+					id: 'stripe-payments',
+					title: 'Payments',
+					url: '/stripe/payments',
+					icon: 'Receipt',
+				},
+			],
+		},
+	],
+}
+
+const components: Record<
+	string,
+	() => Promise<{ default: ComponentType<unknown> }>
+> = {
+	StripeDashboard: () => import('./pages/stripe-dashboard'),
+	StripeCustomers: () => import('./pages/customers'),
+	StripeProducts: () => import('./pages/products'),
+	StripeSubscriptions: () => import('./pages/subscriptions'),
+	StripePayments: () => import('./pages/payments'),
+}
+
+function registerPlugin() {
+	if (!window.__MAGNET_PLUGINS__) {
+		window.__MAGNET_PLUGINS__ = []
+	}
+
+	const alreadyRegistered = window.__MAGNET_PLUGINS__.some(
+		(p) => p.manifest.pluginName === manifest.pluginName,
+	)
+
+	if (!alreadyRegistered) {
+		window.__MAGNET_PLUGINS__.push({ manifest, components })
+		console.log(`[Magnet] Plugin registered: ${manifest.pluginName}`)
+	}
+}
+
+registerPlugin()
+
+export const stripePlugin = () => ({ manifest, components })
+export default stripePlugin

package/src/admin/pages/customers.tsx

@@ -0,0 +1,209 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Input,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { ExternalLink, Search } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+const contentManagerStyles = `
+  .table-row-hover:hover td {
+    background-color: #F9FAFB;
+  }
+  .table-row-hover.group:hover td {
+    background-color: #F9FAFB;
+  }
+`
+
+interface Customer {
+	id: string
+	stripeCustomerId: string
+	email: string
+	name?: string
+	userId?: string
+	createdAt: string
+}
+
+const CustomersPage = () => {
+	const adapter = useAdapter()
+	const [customers, setCustomers] = useState<Customer[]>([])
+	const [search, setSearch] = useState('')
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function fetch() {
+			try {
+				const data = await adapter.request<Customer[]>(
+					'/stripe/admin/customers',
+				)
+				setCustomers(data)
+			} catch (error) {
+				console.error('[Stripe] Failed to fetch customers:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetch()
+	}, [adapter])
+
+	const filtered = customers.filter(
+		(c) =>
+			c.email.toLowerCase().includes(search.toLowerCase()) ||
+			(c.name ?? '').toLowerCase().includes(search.toLowerCase()),
+	)
+
+	const columns: DataTableColumn<Customer>[] = [
+		{
+			type: 'text',
+			header: 'Name',
+			accessorKey: 'name',
+			format: (value, row) => (
+				<div className="text-sm font-medium text-gray-900">
+					{(value as string) ?? row.original.name ?? '—'}
+				</div>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Email',
+			accessorKey: 'email',
+			format: (value) => (
+				<div className="text-sm text-gray-600">{value as string}</div>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'User ID',
+			cell: (row) =>
+				row.original.userId ? (
+					<span className="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20">
+						{row.original.userId}
+					</span>
+				) : (
+					<span className="text-muted-foreground">—</span>
+				),
+		},
+		{
+			type: 'text',
+			header: 'Created',
+			accessorKey: 'createdAt',
+			format: (value) => (
+				<span className="text-sm text-gray-500">
+					{new Date(value as string).toLocaleDateString()}
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Stripe',
+			cell: (row) => (
+				<a
+					href={`https://dashboard.stripe.com/customers/${row.original.stripeCustomerId}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+				>
+					<ExternalLink className="h-3 w-3" />
+					View
+				</a>
+			),
+		},
+	]
+
+	const renderToolbar = () => (
+		<div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
+			<div className="relative w-full sm:w-80">
+				<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+				<Input
+					placeholder="Search customers..."
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					className="pl-9"
+				/>
+			</div>
+			<Button variant="ghost" size="sm" onClick={() => setSearch('')}>
+				Clear Filters
+			</Button>
+		</div>
+	)
+
+	const renderPagination = (table: DataTableRenderContext<Customer>) => {
+		const { pageIndex, pageSize } = table.getState().pagination
+		const totalRows = table.getFilteredRowModel().rows.length
+		const startRow = pageIndex * pageSize + 1
+		const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
+		return (
+			<div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
+				<div className="text-xs text-gray-500">
+					Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
+					to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
+					<span className="font-medium text-gray-900">{totalRows}</span> results
+				</div>
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={!table.getCanPreviousPage()}
+						onClick={() => table.previousPage()}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={!table.getCanNextPage()}
+						onClick={() => table.nextPage()}
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		)
+	}
+
+	if (loading) {
+		return (
+			<div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
+				<PageHeader title="Customers" />
+				<div className="flex-1 p-6">
+					<Skeleton className="h-96 w-full" />
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
+			<style>{contentManagerStyles}</style>
+			<PageHeader
+				title="Customers"
+				description={`${customers.length} customer(s) total.`}
+			/>
+			<div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
+				<div className="flex-1 overflow-hidden relative">
+					<div className="absolute inset-0 overflow-auto">
+						<DataTable
+							data={filtered}
+							columns={columns}
+							getRowId={(row) => row.id}
+							renderToolbar={renderToolbar}
+							renderPagination={renderPagination}
+							enablePagination
+							pageSizeOptions={[10, 20, 50]}
+							initialPagination={{ pageIndex: 0, pageSize: 10 }}
+							showCount={false}
+							className="h-full flex flex-col"
+							variant="content-manager"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default CustomersPage

package/src/admin/pages/payments.tsx

@@ -0,0 +1,251 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Badge,
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { useEffect, useState } from 'react'
+
+const contentManagerStyles = `
+  .table-row-hover:hover td {
+    background-color: #F9FAFB;
+  }
+  .table-row-hover.group:hover td {
+    background-color: #F9FAFB;
+  }
+`
+
+interface Payment {
+	id: string
+	stripePaymentIntentId: string
+	customerId: string
+	amount: number
+	currency: string
+	status: string
+	receiptUrl?: string
+	invoiceId?: string
+	createdAt: string
+}
+
+function formatCurrency(cents: number, currency: string): string {
+	return `${currency.toUpperCase()} ${(cents / 100).toFixed(2)}`
+}
+
+function getStatusVariant(
+	status: string,
+): 'default' | 'secondary' | 'destructive' | 'outline' {
+	switch (status) {
+		case 'succeeded':
+			return 'default'
+		case 'failed':
+			return 'destructive'
+		case 'refunded':
+			return 'secondary'
+		default:
+			return 'outline'
+	}
+}
+
+const PaymentsPage = () => {
+	const adapter = useAdapter()
+	const [payments, setPayments] = useState<Payment[]>([])
+	const [statusFilter, setStatusFilter] = useState<string>('all')
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function fetch() {
+			try {
+				const data = await adapter.request<Payment[]>('/stripe/admin/payments')
+				setPayments(data)
+			} catch (error) {
+				console.error('[Stripe] Failed to fetch payments:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetch()
+	}, [adapter])
+
+	const filtered =
+		statusFilter === 'all'
+			? payments
+			: payments.filter((p) => p.status === statusFilter)
+
+	const handleRefund = async (paymentIntentId: string) => {
+		try {
+			await adapter.request(
+				`/stripe/admin/payments/${paymentIntentId}/refund`,
+				{ method: 'POST' },
+			)
+			setPayments((prev) =>
+				prev.map((p) =>
+					p.stripePaymentIntentId === paymentIntentId
+						? { ...p, status: 'refunded' }
+						: p,
+				),
+			)
+		} catch (error) {
+			console.error('[Stripe] Failed to refund payment:', error)
+		}
+	}
+
+	const columns: DataTableColumn<Payment>[] = [
+		{
+			type: 'custom',
+			header: 'Amount',
+			cell: (row) => (
+				<span className="font-medium">
+					{formatCurrency(row.original.amount, row.original.currency)}
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Status',
+			cell: (row) => (
+				<Badge variant={getStatusVariant(row.original.status)}>
+					{row.original.status}
+				</Badge>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Customer',
+			accessorKey: 'customerId',
+			format: (value) => (
+				<span className="font-mono text-sm text-muted-foreground">
+					{value as string}
+				</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Date',
+			accessorKey: 'createdAt',
+			format: (value) => (
+				<span className="text-muted-foreground">
+					{new Date(value as string).toLocaleDateString()}
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Actions',
+			cell: (row) =>
+				row.original.status === 'succeeded' ? (
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => handleRefund(row.original.stripePaymentIntentId)}
+					>
+						Refund
+					</Button>
+				) : null,
+		},
+	]
+
+	const renderToolbar = () => (
+		<div className="px-6 py-4 flex flex-col sm:flex-row gap-3 items-center justify-between flex-none bg-white border-b border-gray-200">
+			<div className="max-w-[200px]">
+				<Select value={statusFilter} onValueChange={setStatusFilter}>
+					<SelectTrigger>
+						<SelectValue placeholder="Filter by status" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">All Statuses</SelectItem>
+						<SelectItem value="succeeded">Succeeded</SelectItem>
+						<SelectItem value="failed">Failed</SelectItem>
+						<SelectItem value="refunded">Refunded</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+			<Button variant="ghost" size="sm" onClick={() => setStatusFilter('all')}>
+				Clear Filters
+			</Button>
+		</div>
+	)
+
+	const renderPagination = (table: DataTableRenderContext<Payment>) => {
+		const { pageIndex, pageSize } = table.getState().pagination
+		const totalRows = table.getFilteredRowModel().rows.length
+		const startRow = pageIndex * pageSize + 1
+		const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
+		return (
+			<div className="flex-none px-6 py-4 border-t border-gray-200 bg-white flex items-center justify-between">
+				<div className="text-xs text-gray-500">
+					Showing <span className="font-medium text-gray-900">{startRow}</span>{' '}
+					to <span className="font-medium text-gray-900">{endRow}</span> of{' '}
+					<span className="font-medium text-gray-900">{totalRows}</span> results
+				</div>
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={!table.getCanPreviousPage()}
+						onClick={() => table.previousPage()}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={!table.getCanNextPage()}
+						onClick={() => table.nextPage()}
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		)
+	}
+
+	if (loading) {
+		return (
+			<div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
+				<PageHeader title="Payments" />
+				<div className="flex-1 p-6">
+					<Skeleton className="h-96 w-full" />
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex-1 flex flex-col min-w-0 bg-white h-full relative overflow-hidden">
+			<style>{contentManagerStyles}</style>
+			<PageHeader
+				title="Payments"
+				description={`${payments.length} payment(s) total.`}
+			/>
+			<div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
+				<div className="flex-1 overflow-hidden relative">
+					<div className="absolute inset-0 overflow-auto">
+						<DataTable
+							data={filtered}
+							columns={columns}
+							getRowId={(row) => row.id}
+							renderToolbar={renderToolbar}
+							renderPagination={renderPagination}
+							enablePagination
+							pageSizeOptions={[10, 20, 50]}
+							initialPagination={{ pageIndex: 0, pageSize: 10 }}
+							showCount={false}
+							className="h-full flex flex-col"
+							variant="content-manager"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default PaymentsPage