@magnet-cms/plugin-stripe 0.1.0

package/src/admin/pages/products.tsx

@@ -0,0 +1,220 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Badge,
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Input,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { ExternalLink, RefreshCw, Search } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+const contentManagerStyles = `
+  .table-row-hover:hover td {
+    background-color: #F9FAFB;
+  }
+  .table-row-hover.group:hover td {
+    background-color: #F9FAFB;
+  }
+`
+
+interface Product {
+	id: string
+	stripeProductId: string
+	name: string
+	description?: string
+	active: boolean
+}
+
+const ProductsPage = () => {
+	const adapter = useAdapter()
+	const [products, setProducts] = useState<Product[]>([])
+	const [search, setSearch] = useState('')
+	const [loading, setLoading] = useState(true)
+	const [syncing, setSyncing] = useState(false)
+
+	const fetchProducts = useCallback(async () => {
+		try {
+			const data = await adapter.request<Product[]>('/stripe/admin/products')
+			setProducts(data)
+		} catch (error) {
+			console.error('[Stripe] Failed to fetch products:', error)
+		} finally {
+			setLoading(false)
+		}
+	}, [adapter])
+
+	useEffect(() => {
+		fetchProducts()
+	}, [fetchProducts])
+
+	const handleSync = async () => {
+		setSyncing(true)
+		try {
+			await adapter.request('/stripe/admin/sync-products', {
+				method: 'POST',
+			})
+			await fetchProducts()
+		} catch (error) {
+			console.error('[Stripe] Failed to sync products:', error)
+		} finally {
+			setSyncing(false)
+		}
+	}
+
+	const filtered = products.filter(
+		(p) =>
+			p.name.toLowerCase().includes(search.toLowerCase()) ||
+			(p.description ?? '').toLowerCase().includes(search.toLowerCase()),
+	)
+
+	const columns: DataTableColumn<Product>[] = [
+		{
+			type: 'text',
+			header: 'Name',
+			accessorKey: 'name',
+			format: (value) => (
+				<div className="text-sm font-medium text-gray-900">
+					{value as string}
+				</div>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Description',
+			accessorKey: 'description',
+			format: (value) => (
+				<div className="text-sm text-muted-foreground max-w-[300px] truncate">
+					{(value as string) ?? '—'}
+				</div>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Status',
+			cell: (row) => (
+				<Badge variant={row.original.active ? 'default' : 'secondary'}>
+					{row.original.active ? 'Active' : 'Archived'}
+				</Badge>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Stripe',
+			cell: (row) => (
+				<a
+					href={`https://dashboard.stripe.com/products/${row.original.stripeProductId}`}
+					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 products..."
+					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<Product>) => {
+		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="Products" />
+				<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="Products"
+				description={`${products.length} product(s). Click "Sync from Stripe" to import.`}
+				actions={
+					<Button onClick={handleSync} disabled={syncing} variant="outline">
+						<RefreshCw
+							className={`h-4 w-4 mr-2 ${syncing ? 'animate-spin' : ''}`}
+						/>
+						Sync from Stripe
+					</Button>
+				}
+			/>
+			<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 ProductsPage

package/src/admin/pages/stripe-dashboard.tsx

@@ -0,0 +1,90 @@
+import { PageContent, PageHeader, useAdapter } from '@magnet-cms/admin'
+import { Card, Skeleton } from '@magnet-cms/ui/components'
+import { useEffect, useState } from 'react'
+import { RecentPayments } from '../components/recent-payments'
+import { RevenueChart } from '../components/revenue-chart'
+import { SubscriptionMetrics } from '../components/subscription-metrics'
+
+interface MetricsData {
+	mrr: number
+	revenueThisMonth: number
+	activeSubscriptions: number
+	churnRate: number
+	revenueByMonth: Array<{ month: string; revenue: number }>
+	recentPayments: Array<{
+		id: string
+		amount: number
+		currency: string
+		status: string
+		customerEmail: string
+		createdAt: string
+	}>
+}
+
+function DashboardSkeleton() {
+	return (
+		<div className="space-y-6 p-6">
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+				{['mrr', 'revenue', 'subscriptions', 'churn'].map((id) => (
+					<Skeleton key={id} className="h-24" />
+				))}
+			</div>
+			<Skeleton className="h-[300px]" />
+			<Skeleton className="h-[200px]" />
+		</div>
+	)
+}
+
+const StripeDashboard = () => {
+	const adapter = useAdapter()
+	const [metrics, setMetrics] = useState<MetricsData | null>(null)
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function fetchMetrics() {
+			try {
+				const data = await adapter.request<MetricsData>('/stripe/admin/metrics')
+				setMetrics(data)
+			} catch (error) {
+				console.error('[Stripe] Failed to fetch metrics:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetchMetrics()
+	}, [adapter])
+
+	return (
+		<>
+			<PageHeader title="Stripe Dashboard" />
+			<PageContent>
+				{loading || !metrics ? (
+					<DashboardSkeleton />
+				) : (
+					<div className="space-y-6 p-6">
+						<SubscriptionMetrics
+							mrr={metrics.mrr}
+							revenueThisMonth={metrics.revenueThisMonth}
+							activeSubscriptions={metrics.activeSubscriptions}
+							churnRate={metrics.churnRate}
+						/>
+
+						<Card className="p-6">
+							<h3 className="text-lg font-semibold mb-4">
+								Revenue (Last 12 Months)
+							</h3>
+							<RevenueChart data={metrics.revenueByMonth} />
+						</Card>
+
+						<div>
+							<h3 className="text-lg font-semibold mb-4">Recent Payments</h3>
+							<RecentPayments payments={metrics.recentPayments} />
+						</div>
+					</div>
+				)}
+			</PageContent>
+		</>
+	)
+}
+
+export default StripeDashboard

package/src/admin/pages/subscriptions.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 Subscription {
+	id: string
+	stripeSubscriptionId: string
+	customerId: string
+	priceId: string
+	status: string
+	currentPeriodStart: string
+	currentPeriodEnd: string
+	cancelAtPeriodEnd: boolean
+}
+
+function getStatusVariant(
+	status: string,
+): 'default' | 'secondary' | 'destructive' | 'outline' {
+	switch (status) {
+		case 'active':
+		case 'trialing':
+			return 'default'
+		case 'past_due':
+		case 'unpaid':
+			return 'destructive'
+		case 'canceled':
+			return 'secondary'
+		default:
+			return 'outline'
+	}
+}
+
+const SubscriptionsPage = () => {
+	const adapter = useAdapter()
+	const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
+	const [statusFilter, setStatusFilter] = useState<string>('all')
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function fetch() {
+			try {
+				const data = await adapter.request<Subscription[]>(
+					'/stripe/admin/subscriptions',
+				)
+				setSubscriptions(data)
+			} catch (error) {
+				console.error('[Stripe] Failed to fetch subscriptions:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetch()
+	}, [adapter])
+
+	const filtered =
+		statusFilter === 'all'
+			? subscriptions
+			: subscriptions.filter((s) => s.status === statusFilter)
+
+	const handleCancel = async (stripeSubscriptionId: string) => {
+		try {
+			await adapter.request(
+				`/stripe/admin/subscriptions/${stripeSubscriptionId}/cancel`,
+				{ method: 'POST' },
+			)
+			setSubscriptions((prev) =>
+				prev.map((s) =>
+					s.stripeSubscriptionId === stripeSubscriptionId
+						? { ...s, status: 'canceled' }
+						: s,
+				),
+			)
+		} catch (error) {
+			console.error('[Stripe] Failed to cancel subscription:', error)
+		}
+	}
+
+	const columns: DataTableColumn<Subscription>[] = [
+		{
+			type: 'text',
+			header: 'Customer',
+			accessorKey: 'customerId',
+			format: (value) => (
+				<span className="font-mono text-sm">{value as string}</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Price',
+			accessorKey: 'priceId',
+			format: (value) => (
+				<span className="font-mono text-sm">{value as string}</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Status',
+			cell: (row) => (
+				<Badge variant={getStatusVariant(row.original.status)}>
+					{row.original.status}
+					{row.original.cancelAtPeriodEnd && ' (canceling)'}
+				</Badge>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Period',
+			cell: (row) => (
+				<span className="text-sm text-muted-foreground">
+					{new Date(row.original.currentPeriodStart).toLocaleDateString()}
+					{' — '}
+					{new Date(row.original.currentPeriodEnd).toLocaleDateString()}
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Actions',
+			cell: (row) =>
+				row.original.status === 'active' && !row.original.cancelAtPeriodEnd ? (
+					<Button
+						variant="destructive"
+						size="sm"
+						onClick={() => handleCancel(row.original.stripeSubscriptionId)}
+					>
+						Cancel
+					</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="active">Active</SelectItem>
+						<SelectItem value="trialing">Trialing</SelectItem>
+						<SelectItem value="past_due">Past Due</SelectItem>
+						<SelectItem value="canceled">Canceled</SelectItem>
+						<SelectItem value="unpaid">Unpaid</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+			<Button variant="ghost" size="sm" onClick={() => setStatusFilter('all')}>
+				Clear Filters
+			</Button>
+		</div>
+	)
+
+	const renderPagination = (table: DataTableRenderContext<Subscription>) => {
+		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="Subscriptions" />
+				<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="Subscriptions"
+				description={`${subscriptions.length} subscription(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 SubscriptionsPage