@magnet-cms/plugin-polar 0.1.0

package/src/admin/pages/products.tsx

@@ -0,0 +1,203 @@
+import { PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Badge,
+	Button,
+	DataTable,
+	type DataTableColumn,
+	type DataTableRenderContext,
+	Input,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { RefreshCw, Search } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+interface Product {
+	id: string
+	polarProductId: string
+	name: string
+	description?: string
+	isRecurring: boolean
+	isArchived: 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[]>('/polar/admin/products')
+			setProducts(data)
+		} catch (error) {
+			console.error('[Polar] Failed to fetch products:', error)
+		} finally {
+			setLoading(false)
+		}
+	}, [adapter])
+
+	useEffect(() => {
+		fetchProducts()
+	}, [fetchProducts])
+
+	const handleSync = async () => {
+		setSyncing(true)
+		try {
+			await adapter.request('/polar/admin/sync-products', { method: 'POST' })
+			await fetchProducts()
+		} catch (error) {
+			console.error('[Polar] 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: 'Type',
+			cell: (row) => (
+				<Badge variant="outline">
+					{row.original.isRecurring ? 'Recurring' : 'One-time'}
+				</Badge>
+			),
+		},
+		{
+			type: 'custom',
+			header: 'Status',
+			cell: (row) => (
+				<Badge variant={row.original.isArchived ? 'secondary' : 'default'}>
+					{row.original.isArchived ? 'Archived' : 'Active'}
+				</Badge>
+			),
+		},
+	]
+
+	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">
+			<PageHeader
+				title="Products"
+				description={`${products.length} product(s). Click "Sync from Polar" to import.`}
+				actions={
+					<Button onClick={handleSync} disabled={syncing} variant="outline">
+						<RefreshCw
+							className={`h-4 w-4 mr-2 ${syncing ? 'animate-spin' : ''}`}
+						/>
+						Sync from Polar
+					</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/subscriptions.tsx

@@ -0,0 +1,245 @@
+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'
+
+interface Subscription {
+	id: string
+	polarSubscriptionId: string
+	customerId: string
+	productId: string
+	status: string
+	amount?: number
+	currency?: 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':
+		case 'revoked':
+			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[]>(
+					'/polar/admin/subscriptions',
+				)
+				setSubscriptions(data)
+			} catch (error) {
+				console.error('[Polar] Failed to fetch subscriptions:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		fetch()
+	}, [adapter])
+
+	const filtered =
+		statusFilter === 'all'
+			? subscriptions
+			: subscriptions.filter((s) => s.status === statusFilter)
+
+	const handleCancel = async (polarSubscriptionId: string) => {
+		try {
+			await adapter.request(
+				`/polar/admin/subscriptions/${polarSubscriptionId}/cancel`,
+				{ method: 'POST' },
+			)
+			setSubscriptions((prev) =>
+				prev.map((s) =>
+					s.polarSubscriptionId === polarSubscriptionId
+						? { ...s, status: 'revoked' }
+						: s,
+				),
+			)
+		} catch (error) {
+			console.error('[Polar] 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: 'Product',
+			accessorKey: 'productId',
+			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.polarSubscriptionId)}
+					>
+						Revoke
+					</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="revoked">Revoked</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">
+			<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