@questpie/admin 0.0.1

package/src/views/common/version-history.tsx

@@ -0,0 +1,406 @@
+/**
+ * VersionHistory Component
+ *
+ * Displays version history and audit log for a collection item
+ * - Shows all versions with timestamps
+ * - Displays who made changes
+ * - Allows comparing versions
+ * - Shows diff between versions
+ * - Ability to restore previous versions
+ */
+
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+	ClockCounterClockwise,
+	User,
+	Clock,
+	CaretDown,
+	CaretRight,
+	ArrowCounterClockwise,
+} from "@phosphor-icons/react";
+import { Button } from "../../components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "../../components/ui/card";
+import { Badge } from "../../components/ui/badge";
+import { Separator } from "../../components/ui/separator";
+import { Spinner } from "../../components/ui/spinner";
+import { useAdminContext } from "../../hooks/admin-provider";
+import type { Questpie } from "questpie";
+
+export interface VersionHistoryProps<T extends Questpie<any>> {
+	/**
+	 * Collection name
+	 */
+	collection: string;
+
+	/**
+	 * Item ID
+	 */
+	itemId: string;
+
+	/**
+	 * Show restore buttons
+	 */
+	allowRestore?: boolean;
+
+	/**
+	 * Callback when version is restored
+	 */
+	onRestore?: (versionId: string) => void;
+
+	/**
+	 * Custom render for version data
+	 */
+	renderVersion?: (version: any) => React.ReactNode;
+
+	/**
+	 * Show full diff or summary
+	 */
+	showFullDiff?: boolean;
+}
+
+interface Version {
+	id: string;
+	versionNumber: number;
+	createdAt: string;
+	createdBy?: {
+		id: string;
+		name?: string;
+		email?: string;
+	};
+	changes?: {
+		field: string;
+		oldValue: any;
+		newValue: any;
+	}[];
+	action: "created" | "updated" | "deleted" | "restored";
+	data: Record<string, any>;
+}
+
+export function VersionHistory<T extends Questpie<any>>({
+	collection,
+	itemId,
+	allowRestore = false,
+	onRestore,
+	renderVersion,
+	showFullDiff = false,
+}: VersionHistoryProps<T>) {
+	const { client, locale } = useAdminContext<T>();
+	const localeKey = locale ?? "default";
+	const [expandedVersions, setExpandedVersions] = React.useState<Set<string>>(
+		new Set(),
+	);
+
+	// Fetch version history
+	const {
+		data: versions,
+		isLoading,
+		error,
+	} = useQuery({
+		queryKey: ["version-history", collection, itemId, localeKey],
+		queryFn: async () => {
+			// TODO: Implement actual version history endpoint
+			// For now, return mock data structure
+			// const result = await client.collections[collection].getVersionHistory(itemId);
+			// return result;
+
+			// Mock data for demonstration
+			return [
+				{
+					id: "v3",
+					versionNumber: 3,
+					createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+					createdBy: {
+						id: "user1",
+						name: "John Doe",
+						email: "john@example.com",
+					},
+					action: "updated",
+					changes: [
+						{ field: "status", oldValue: "pending", newValue: "confirmed" },
+					],
+					data: {},
+				},
+				{
+					id: "v2",
+					versionNumber: 2,
+					createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+					createdBy: {
+						id: "user2",
+						name: "Jane Smith",
+						email: "jane@example.com",
+					},
+					action: "updated",
+					changes: [
+						{
+							field: "scheduledAt",
+							oldValue: "2025-01-15T10:00:00",
+							newValue: "2025-01-20T14:00:00",
+						},
+					],
+					data: {},
+				},
+				{
+					id: "v1",
+					versionNumber: 1,
+					createdAt: new Date(
+						Date.now() - 7 * 24 * 60 * 60 * 1000,
+					).toISOString(),
+					createdBy: {
+						id: "user1",
+						name: "John Doe",
+						email: "john@example.com",
+					},
+					action: "created",
+					changes: [],
+					data: {},
+				},
+			] as Version[];
+		},
+	});
+
+	const toggleVersion = (versionId: string) => {
+		setExpandedVersions((prev) => {
+			const next = new Set(prev);
+			if (next.has(versionId)) {
+				next.delete(versionId);
+			} else {
+				next.add(versionId);
+			}
+			return next;
+		});
+	};
+
+	const handleRestore = (versionId: string) => {
+		onRestore?.(versionId);
+	};
+
+	const formatDate = (dateString: string) => {
+		const date = new Date(dateString);
+		const now = new Date();
+		const diffMs = now.getTime() - date.getTime();
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+		const diffDays = Math.floor(diffMs / 86400000);
+
+		if (diffMins < 1) return "Just now";
+		if (diffMins < 60)
+			return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
+		if (diffHours < 24)
+			return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
+		if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
+		return date.toLocaleDateString();
+	};
+
+	const getActionBadge = (action: Version["action"]) => {
+		const variants: Record<Version["action"], { variant: any; label: string }> =
+			{
+				created: { variant: "default", label: "Created" },
+				updated: { variant: "secondary", label: "Updated" },
+				deleted: { variant: "destructive", label: "Deleted" },
+				restored: { variant: "outline", label: "Restored" },
+			};
+
+		const config = variants[action];
+		return <Badge variant={config.variant}>{config.label}</Badge>;
+	};
+
+	const formatValue = (value: any): string => {
+		if (value === null || value === undefined) return "—";
+		if (typeof value === "boolean") return value ? "Yes" : "No";
+		if (typeof value === "object") return JSON.stringify(value);
+		return String(value);
+	};
+
+	if (isLoading) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<ClockCounterClockwise className="h-5 w-5" />
+						Version History
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="flex items-center justify-center p-8">
+					<Spinner className="h-6 w-6" />
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (error) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<ClockCounterClockwise className="h-5 w-5" />
+						Version History
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="text-sm text-destructive">
+						Failed to load version history:{" "}
+						{error instanceof Error ? error.message : "Unknown error"}
+					</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	if (!versions || versions.length === 0) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<ClockCounterClockwise className="h-5 w-5" />
+						Version History
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p className="text-sm text-muted-foreground">
+						No version history available
+					</p>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<ClockCounterClockwise className="h-5 w-5" />
+					Version History
+				</CardTitle>
+				<CardDescription>
+					{versions.length} version{versions.length !== 1 ? "s" : ""}
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				{versions.map((version, index) => {
+					const isExpanded = expandedVersions.has(version.id);
+					const isLatest = index === 0;
+
+					return (
+						<div key={version.id}>
+							{index > 0 && <Separator className="my-4" />}
+
+							<div className="space-y-2">
+								<div className="flex items-start gap-3">
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-6 w-6 shrink-0"
+										onClick={() => toggleVersion(version.id)}
+									>
+										{isExpanded ? (
+											<CaretDown className="h-4 w-4" />
+										) : (
+											<CaretRight className="h-4 w-4" />
+										)}
+									</Button>
+
+									<div className="flex-1 space-y-1">
+										{/* Version Header */}
+										<div className="flex items-center gap-2">
+											<span className="text-sm font-medium">
+												Version {version.versionNumber}
+											</span>
+											{getActionBadge(version.action)}
+											{isLatest && <Badge variant="outline">Current</Badge>}
+										</div>
+
+										{/* Metadata */}
+										<div className="flex items-center gap-4 text-xs text-muted-foreground">
+											<div className="flex items-center gap-1">
+												<Clock className="h-3 w-3" />
+												{formatDate(version.createdAt)}
+											</div>
+											{version.createdBy && (
+												<div className="flex items-center gap-1">
+													<User className="h-3 w-3" />
+													{version.createdBy.name || version.createdBy.email}
+												</div>
+											)}
+										</div>
+
+										{/* Changes Summary */}
+										{version.changes &&
+											version.changes.length > 0 &&
+											!isExpanded && (
+												<p className="text-xs text-muted-foreground">
+													{version.changes.length} field
+													{version.changes.length !== 1 ? "s" : ""} changed
+												</p>
+											)}
+
+										{/* Expanded Changes */}
+										{isExpanded && (
+											<div className="mt-3 space-y-2">
+												{version.changes && version.changes.length > 0 ? (
+													<div className="rounded-lg border bg-muted/50 p-3 space-y-2">
+														{version.changes.map((change, changeIndex) => (
+															<div key={changeIndex} className="text-xs">
+																<div className="font-medium text-foreground mb-1">
+																	{change.field}
+																</div>
+																<div className="grid grid-cols-2 gap-2">
+																	<div>
+																		<div className="text-muted-foreground">
+																			Old value:
+																		</div>
+																		<div className="font-mono rounded bg-background p-1 mt-1">
+																			{formatValue(change.oldValue)}
+																		</div>
+																	</div>
+																	<div>
+																		<div className="text-muted-foreground">
+																			New value:
+																		</div>
+																		<div className="font-mono rounded bg-background p-1 mt-1">
+																			{formatValue(change.newValue)}
+																		</div>
+																	</div>
+																</div>
+															</div>
+														))}
+													</div>
+												) : (
+													<p className="text-xs text-muted-foreground">
+														No changes recorded
+													</p>
+												)}
+
+												{/* Custom Version Render */}
+												{renderVersion && renderVersion(version)}
+
+												{/* Restore Button */}
+												{allowRestore && !isLatest && (
+													<Button
+														variant="outline"
+														size="sm"
+														onClick={() => handleRestore(version.id)}
+														className="mt-2"
+													>
+														<ArrowCounterClockwise className="mr-2 h-3 w-3" />
+														Restore this version
+													</Button>
+												)}
+											</div>
+										)}
+									</div>
+								</div>
+							</div>
+						</div>
+					);
+				})}
+			</CardContent>
+		</Card>
+	);
+}

package/src/views/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @questpie/admin Views
+ *
+ * Full-page and section-level view components.
+ * Views are smart components that handle routing, data fetching, and state.
+ *
+ * Architecture:
+ * - ui/        - Headless/styled primitives (Button, Card, Input)
+ * - primitives/ - Generic input wrappers with callback API
+ * - fields/    - react-hook-form connected field components
+ * - views/     - Route-level components with business logic (this directory)
+ * - features/  - Complex feature modules (Puck editor, media library)
+ */
+
+// Auth views
+export * from "./auth";
+
+// Layout views
+export * from "./layout";
+
+// Collection views
+export * from "./collection";
+
+// Common/utility views
+export * from "./common";

package/src/views/layout/admin-layout.tsx

@@ -0,0 +1,117 @@
+/**
+ * AdminLayout Component
+ *
+ * Complete admin layout generated from config
+ * - Sidebar navigation
+ * - Main content area
+ * - Optional header/footer
+ */
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { AdminSidebar, type AdminSidebarProps } from "./admin-sidebar";
+
+export interface AdminLayoutProps {
+	/**
+	 * Admin configuration
+	 */
+	config: AdminSidebarProps["config"] & {
+		app?: {
+			header?: {
+				show?: boolean;
+				component?: React.ComponentType;
+			};
+			footer?: {
+				show?: boolean;
+				component?: React.ComponentType;
+			};
+		};
+	};
+
+	/**
+	 * Current active route
+	 */
+	activeRoute?: string;
+
+	/**
+	 * Link component (router-specific)
+	 */
+	LinkComponent: AdminSidebarProps["LinkComponent"];
+
+	/**
+	 * Main content to render
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Custom layout className
+	 */
+	className?: string;
+
+	/**
+	 * Custom sidebar props
+	 */
+	sidebarProps?: Partial<AdminSidebarProps>;
+
+	/**
+	 * Custom header content
+	 */
+	renderHeader?: () => React.ReactNode;
+
+	/**
+	 * Custom footer content
+	 */
+	renderFooter?: () => React.ReactNode;
+}
+
+export function AdminLayout({
+	config,
+	activeRoute,
+	LinkComponent,
+	children,
+	className,
+	sidebarProps,
+	renderHeader,
+	renderFooter,
+}: AdminLayoutProps): React.ReactElement {
+	const showHeader = config.app?.header?.show ?? false;
+	const showFooter = config.app?.footer?.show ?? false;
+	const HeaderComponent = config.app?.header?.component;
+	const FooterComponent = config.app?.footer?.component;
+
+	return (
+		<div className={cn("flex h-screen flex-col", className)}>
+			{/* Header (optional) */}
+			{showHeader && (
+				<header className="border-b">
+					{renderHeader
+						? renderHeader()
+						: HeaderComponent && <HeaderComponent />}
+				</header>
+			)}
+
+			{/* Main Layout */}
+			<div className="flex flex-1 overflow-hidden">
+				{/* Sidebar */}
+				<AdminSidebar
+					config={config}
+					activeRoute={activeRoute}
+					LinkComponent={LinkComponent}
+					{...sidebarProps}
+				/>
+
+				{/* Main Content */}
+				<main className="flex-1 overflow-auto">{children}</main>
+			</div>
+
+			{/* Footer (optional) */}
+			{showFooter && (
+				<footer className="border-t">
+					{renderFooter
+						? renderFooter()
+						: FooterComponent && <FooterComponent />}
+				</footer>
+			)}
+		</div>
+	);
+}