@magnet-cms/plugin-polar 0.1.0

package/src/admin/pages/benefits.tsx

@@ -0,0 +1,175 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Badge,
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Input,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { Search } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+interface Benefit {
+	id: string
+	polarBenefitId: string
+	type: string
+	description?: string
+	organizationId?: string
+	selectable: boolean
+	createdAt: string
+}
+
+const BenefitsPage = () => {
+	const adapter = useAdapter()
+	const [benefits, setBenefits] = useState<Benefit[]>([])
+	const [search, setSearch] = useState('')
+	const [loading, setLoading] = useState(true)
+
+	const fetchBenefits = useCallback(async () => {
+		try {
+			const data = await adapter.request<Benefit[]>('/polar/admin/benefits')
+			setBenefits(data)
+		} catch (error) {
+			console.error('[Polar] Failed to fetch benefits:', error)
+		} finally {
+			setLoading(false)
+		}
+	}, [adapter])
+
+	useEffect(() => {
+		fetchBenefits()
+	}, [fetchBenefits])
+
+	const filtered = benefits.filter(
+		(b) =>
+			b.type.toLowerCase().includes(search.toLowerCase()) ||
+			(b.description ?? '').toLowerCase().includes(search.toLowerCase()),
+	)
+
+	const columns: DataTableColumn<Benefit>[] = [
+		{
+			type: 'custom',
+			header: 'Type',
+			cell: (row) => <Badge variant="outline">{row.original.type}</Badge>,
+		},
+		{
+			type: 'text',
+			header: 'Description',
+			accessorKey: 'description',
+			format: (value) => (
+				<div className="text-sm text-muted-foreground max-w-[400px] truncate">
+					{(value as string) ?? '—'}
+				</div>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Selectable',
+			cell: (row) => (
+				<Badge variant={row.original.selectable ? 'default' : 'secondary'}>
+					{row.original.selectable ? 'Yes' : 'No'}
+				</Badge>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Created',
+			accessorKey: 'createdAt',
+			format: (value) => new Date(value as string).toLocaleDateString(),
+		},
+	]
+
+	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 benefits..."
+					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<Benefit>) => {
+		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="Benefits" />
+				<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">
+			<PageHeader
+				title="Benefits"
+				description={`${benefits.length} benefit(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 BenefitsPage

package/src/admin/pages/customers.tsx

@@ -0,0 +1,187 @@
+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 { useCallback, useEffect, useState } from 'react'
+
+interface Customer {
+	id: string
+	polarCustomerId: 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)
+
+	const fetchCustomers = useCallback(async () => {
+		try {
+			const data = await adapter.request<Customer[]>('/polar/admin/customers')
+			setCustomers(data)
+		} catch (error) {
+			console.error('[Polar] Failed to fetch customers:', error)
+		} finally {
+			setLoading(false)
+		}
+	}, [adapter])
+
+	useEffect(() => {
+		fetchCustomers()
+	}, [fetchCustomers])
+
+	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) => (
+				<div className="text-sm font-medium text-gray-900">
+					{(value as string) ?? '—'}
+				</div>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Email',
+			accessorKey: 'email',
+		},
+		{
+			type: 'text',
+			header: 'User ID',
+			accessorKey: 'userId',
+			format: (value) => (
+				<span className="font-mono text-sm">{(value as string) ?? '—'}</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Created',
+			accessorKey: 'createdAt',
+			format: (value) => new Date(value as string).toLocaleDateString(),
+		},
+		{
+			type: 'custom',
+			header: 'Polar',
+			cell: (row) => (
+				<a
+					href={`https://dashboard.polar.sh/customers/${row.original.polarCustomerId}`}
+					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">
+			<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/orders.tsx

@@ -0,0 +1,188 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Badge,
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { useEffect, useState } from 'react'
+
+interface Order {
+	id: string
+	polarOrderId: string
+	customerId: string
+	productId: string
+	status: string
+	totalAmount: number
+	currency: string
+	billingReason?: string
+	createdAt: string
+}
+
+function getStatusVariant(
+	status: string,
+): 'default' | 'secondary' | 'destructive' {
+	switch (status) {
+		case 'paid':
+			return 'default'
+		case 'refunded':
+			return 'destructive'
+		default:
+			return 'secondary'
+	}
+}
+
+function formatCurrency(cents: number, currency: string): string {
+	return `${currency.toUpperCase()} $${(cents / 100).toFixed(2)}`
+}
+
+const OrdersPage = () => {
+	const adapter = useAdapter()
+	const [orders, setOrders] = useState<Order[]>([])
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function fetch() {
+			try {
+				const data = await adapter.request<Order[]>('/polar/admin/orders')
+				setOrders(data)
+			} catch (error) {
+				console.error('[Polar] Failed to fetch orders:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetch()
+	}, [adapter])
+
+	const columns: DataTableColumn<Order>[] = [
+		{
+			type: 'text',
+			header: 'Order ID',
+			accessorKey: 'polarOrderId',
+			format: (value) => (
+				<span className="font-mono text-sm">
+					{(value as string).slice(0, 12)}...
+				</span>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Amount',
+			cell: (row) => (
+				<span className="font-medium">
+					{formatCurrency(row.original.totalAmount, 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">{value as string}</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Reason',
+			accessorKey: 'billingReason',
+			format: (value) => (
+				<span className="text-sm text-muted-foreground">
+					{(value as string) ?? '—'}
+				</span>
+			),
+		},
+		{
+			type: 'text',
+			header: 'Date',
+			accessorKey: 'createdAt',
+			format: (value) => new Date(value as string).toLocaleDateString(),
+		},
+	]
+
+	const renderPagination = (table: DataTableRenderContext<Order>) => {
+		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="Orders" />
+				<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">
+			<PageHeader
+				title="Orders"
+				description={`${orders.length} order(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={orders}
+							columns={columns}
+							getRowId={(row) => row.id}
+							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 OrdersPage

package/src/admin/pages/polar-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 { RecentOrders } from '../components/recent-orders'
+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 }>
+	recentOrders: Array<{
+		id: string
+		totalAmount: 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 PolarDashboard = () => {
+	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>('/polar/admin/metrics')
+				setMetrics(data)
+			} catch (error) {
+				console.error('[Polar] Failed to fetch metrics:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetchMetrics()
+	}, [adapter])
+
+	return (
+		<>
+			<PageHeader title="Polar 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 Orders</h3>
+							<RecentOrders orders={metrics.recentOrders} />
+						</div>
+					</div>
+				)}
+			</PageContent>
+		</>
+	)
+}
+
+export default PolarDashboard