@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/workspaces/src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent
+				className={cn("overflow-hidden p-0", className)}
+				showCloseButton={showCloseButton}
+			>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

package/registry/admin-apps/react/variants/workspaces/src/components/ui/date-picker.tsx

@@ -0,0 +1,323 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CalendarProps } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { add, format } from "date-fns";
+import { type Locale, enUS } from "date-fns/locale";
+import {
+	Calendar as CalendarIcon,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
+import * as React from "react";
+import { useImperativeHandle, useRef } from "react";
+
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { DayPicker } from "react-day-picker";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	startYear = 1900,
+	endYear = 2025,
+	...props
+}: CalendarProps & { startYear?: number; endYear?: number }) {
+	const MONTHS = React.useMemo(() => {
+		let locale: Pick<Locale, "options" | "localize" | "formatLong"> = enUS;
+		const { options, localize, formatLong } = props.locale || {};
+		if (options && localize && formatLong) {
+			locale = {
+				options,
+				localize,
+				formatLong,
+			};
+		}
+		return genMonths(locale);
+	}, []);
+
+	const YEARS = React.useMemo(() => genYears(startYear, endYear), []);
+	const disableLeftNavigation = () => {
+		const today = new Date();
+		const startDate = new Date(today.getFullYear() - startYear, 0, 1);
+		if (props.month) {
+			return (
+				props.month.getMonth() === startDate.getMonth() &&
+				props.month.getFullYear() === startDate.getFullYear()
+			);
+		}
+		return false;
+	};
+	const disableRightNavigation = () => {
+		const today = new Date();
+		const endDate = new Date(today.getFullYear() + endYear, 11, 31);
+		if (props.month) {
+			return (
+				props.month.getMonth() === endDate.getMonth() &&
+				props.month.getFullYear() === endDate.getFullYear()
+			);
+		}
+		return false;
+	};
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months:
+					"flex flex-col sm:flex-row space-y-4  sm:space-y-0 justify-center",
+				month: "flex flex-col items-center space-y-4",
+				month_caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center ",
+				button_previous: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5",
+					disableLeftNavigation() && "pointer-events-none",
+				),
+				button_next: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5",
+					disableRightNavigation() && "pointer-events-none",
+				),
+				month_grid: "w-full border-collapse space-y-1",
+				weekdays: cn("flex", props.showWeekNumber && "justify-end"),
+				weekday:
+					"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+				week: "flex w-full mt-2",
+				day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1",
+				day_button: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md",
+				),
+				range_end: "day-range-end",
+				selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
+				today: "bg-accent text-accent-foreground",
+				outside:
+					"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+				disabled: "text-muted-foreground opacity-50",
+				range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				Chevron: ({ ...props }) =>
+					props.orientation === "left" ? (
+						<ChevronLeft className="h-4 w-4" />
+					) : (
+						<ChevronRight className="h-4 w-4" />
+					),
+				MonthCaption: ({ calendarMonth }) => {
+					return (
+						<div className="inline-flex gap-2">
+							<Select
+								defaultValue={calendarMonth.date.getMonth().toString()}
+								onValueChange={(value) => {
+									const newDate = new Date(calendarMonth.date);
+									newDate.setMonth(Number.parseInt(value, 10));
+									props.onMonthChange?.(newDate);
+								}}
+							>
+								<SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{MONTHS.map((month) => (
+										<SelectItem
+											key={month.value}
+											value={month.value.toString()}
+										>
+											{month.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<Select
+								defaultValue={calendarMonth.date.getFullYear().toString()}
+								onValueChange={(value) => {
+									const newDate = new Date(calendarMonth.date);
+									newDate.setFullYear(Number.parseInt(value, 10));
+									props.onMonthChange?.(newDate);
+								}}
+							>
+								<SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{YEARS.map((year) => (
+										<SelectItem key={year.value} value={year.value.toString()}>
+											{year.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					);
+				},
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = "Calendar";
+
+function genMonths(
+	locale: Pick<Locale, "options" | "localize" | "formatLong">,
+) {
+	return Array.from({ length: 12 }, (_, i) => ({
+		value: i,
+		label: format(new Date(2021, i), "MMMM", { locale }),
+	}));
+}
+
+function genYears(startYear = 1900, endYear = 2025) {
+	return Array.from({ length: endYear - startYear + 1 }, (_, i) => ({
+		value: startYear + i,
+		label: (startYear + i).toString(),
+	}));
+}
+
+type DatePickerProps = {
+	value?: Date;
+	onChange?: (date: Date | undefined) => void;
+	disabled?: boolean;
+	placeholder?: string;
+	/**
+	 * The year range will be: `This year + yearRange` and `this year - yearRange`.
+	 * Default is 50.
+	 * */
+	startYear?: number;
+	endYear?: number;
+	/**
+	 * The format is derived from the `date-fns` documentation.
+	 * @reference https://date-fns.org/v3.6.0/docs/format
+	 **/
+	displayFormat?: string;
+	className?: string;
+	/**
+	 * Show the default month when popup the calendar. Default is the current Date().
+	 **/
+	defaultPopupValue?: Date;
+} & Pick<
+	CalendarProps,
+	"locale" | "weekStartsOn" | "showWeekNumber" | "showOutsideDays"
+>;
+
+type DatePickerRef = {
+	value?: Date;
+} & Omit<HTMLButtonElement, "value">;
+
+const DatePicker = React.forwardRef<Partial<DatePickerRef>, DatePickerProps>(
+	(
+		{
+			locale = enUS,
+			defaultPopupValue = new Date(),
+			value,
+			onChange,
+			startYear = 1980,
+			endYear = 2025,
+			disabled = false,
+			displayFormat = "PPP",
+			placeholder = "Pick a date",
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [month, setMonth] = React.useState<Date>(value ?? defaultPopupValue);
+		const buttonRef = useRef<HTMLButtonElement>(null);
+		const displayDate = React.useMemo(() => value, [value]);
+
+		// Add effect to update month when value changes
+		React.useEffect(() => {
+			if (value) {
+				setMonth(value);
+			}
+		}, [value]);
+
+		const handleSelect = (newDay: Date | undefined) => {
+			if (!newDay) return;
+			onChange?.(newDay);
+			setMonth(newDay);
+		};
+
+		useImperativeHandle(
+			ref,
+			() => ({
+				...buttonRef.current,
+				value: displayDate,
+			}),
+			[displayDate],
+		);
+
+		let loc = enUS;
+		const { options, localize, formatLong } = locale;
+		if (options && localize && formatLong) {
+			loc = {
+				...enUS,
+				options,
+				localize,
+				formatLong,
+			};
+		}
+
+		return (
+			<Popover>
+				<PopoverTrigger asChild disabled={disabled}>
+					<Button
+						variant="outline"
+						className={cn(
+							"w-full justify-start text-left font-normal",
+							!displayDate && "text-muted-foreground",
+							className,
+						)}
+						ref={buttonRef}
+					>
+						<CalendarIcon className="mr-2 h-4 w-4" />
+						{displayDate ? (
+							format(displayDate, displayFormat, { locale: loc })
+						) : (
+							<span>{placeholder}</span>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto p-0">
+					<Calendar
+						mode="single"
+						selected={displayDate}
+						month={month}
+						onSelect={(newDate) => {
+							if (newDate) {
+								handleSelect(newDate);
+							}
+						}}
+						onMonthChange={setMonth}
+						startYear={startYear}
+						endYear={endYear}
+						locale={locale}
+						{...props}
+					/>
+				</PopoverContent>
+			</Popover>
+		);
+	},
+);
+
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+export type { DatePickerProps, DatePickerRef };

package/registry/admin-apps/react/variants/workspaces/src/components/ui/sonner.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { useTheme } from "@/lib/theme";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+function Toaster({ ...props }: ToasterProps) {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+}
+
+export { Toaster };

package/registry/admin-apps/react/variants/workspaces/src/components/user-menu.tsx

@@ -0,0 +1,66 @@
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
+import { ChangePasswordDialog } from "@/components/change-password-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { useAuthStore } from "@/stores/store-context";
+
+function initialsOf(label: string): string {
+  return (
+    label
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+/** Top-right profile dropdown, alongside `NavUser` in the sidebar footer — puts the same account
+ * actions in the top bar, not just the sidebar. */
+export const UserMenu = observer(function UserMenu() {
+  const store = useAuthStore();
+  const navigate = useNavigate();
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
+
+  const label = store.currentUser?.displayName || store.currentUser?.email || store.currentUser?.sub || "Account";
+  const photo = store.currentUser?.photo ?? null;
+
+  async function handleLogOut() {
+    await store.logout();
+    navigate("/login", { replace: true });
+  }
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Avatar className="size-8 cursor-pointer">
+            {photo && <AvatarImage src={photo} alt="" className="object-cover" />}
+            <AvatarFallback>{initialsOf(label)}</AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => navigate("/account")}>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setChangePasswordOpen(true)}>
+              <KeyRoundIcon />
+              Change password
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onClick={() => void handleLogOut()}>
+            <LogOutIcon />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ChangePasswordDialog open={changePasswordOpen} onClose={() => setChangePasswordOpen(false)} />
+    </>
+  );
+});

package/registry/admin-apps/react/variants/workspaces/src/hooks/use-live-audit-feed.ts

@@ -0,0 +1,50 @@
+import type { AuditLogEntry } from "@simple-auth-kit/auth-client";
+import { useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+import { cookieTokenStorage } from "@/lib/token-storage";
+
+const AUTH_API_URL = import.meta.env["VITE_AUTH_API_URL"] ?? "http://localhost:3005";
+
+export type LiveFeedStatus = "connecting" | "connected" | "disconnected";
+
+/**
+ * Live tail of the backend's `/audit-logs` socket.io namespace. Entries arrive as
+ * `audit-log:created` in the same wire shape as the REST list, newest first, capped.
+ */
+export function useLiveAuditFeed(enabled: boolean, cap = 20) {
+  const [status, setStatus] = useState<LiveFeedStatus>("connecting");
+  const [entries, setEntries] = useState<AuditLogEntry[]>([]);
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+
+    (async () => {
+      const tokens = await cookieTokenStorage.get();
+      if (cancelled || !tokens) {
+        setStatus("disconnected");
+        return;
+      }
+      const socket = io(`${AUTH_API_URL}/audit-logs`, {
+        auth: { token: tokens.accessToken },
+      });
+      socketRef.current = socket;
+
+      socket.on("connect", () => setStatus("connected"));
+      socket.on("disconnect", () => setStatus("disconnected"));
+      socket.on("connect_error", () => setStatus("disconnected"));
+      socket.on("audit-log:created", (entry: AuditLogEntry) => {
+        setEntries((prev) => [entry, ...prev].slice(0, cap));
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+      socketRef.current?.disconnect();
+      socketRef.current = null;
+    };
+  }, [enabled, cap]);
+
+  return { status, entries };
+}