img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/resources/js/components/ui/checkbox.tsx b/resources/js/components/ui/checkbox.tsx
new file mode 100644
index 0000000..6d1d6be
--- /dev/null
+++ b/resources/js/components/ui/checkbox.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+
+
+
+ )
+}
+
+export { Checkbox }
diff --git a/resources/js/components/ui/collapsible.tsx b/resources/js/components/ui/collapsible.tsx
new file mode 100644
index 0000000..63fc8ef
--- /dev/null
+++ b/resources/js/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+ & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ inset?: boolean
+}) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+ ) {
+ return (
+ ) {
+ return & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ containerClassName?: string
+}) {
+ return (
+
+ )
+}
+
+function InputOTPSlot({
+ index,
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ index: number
+}) {
+ const inputOTPContext = React.useContext(OTPInputContext)
+ const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+ return (
+
+ {char}
+ {hasFakeCaret && (
+
+ )}
+
+
+ )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/resources/js/components/ui/input.tsx b/resources/js/components/ui/input.tsx
new file mode 100644
index 0000000..d763cd9
--- /dev/null
+++ b/resources/js/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+ ) {
+ return (
+ & {
+ viewport?: boolean
+}) {
+ return (
+
+ {children}
+ {viewport &&
+ )
+}
+
+function NavigationMenuList({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ {children}{" "}
+
+ )
+}
+
+function NavigationMenuContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function NavigationMenuLink({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+ )
+}
+
+export {
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+ navigationMenuTriggerStyle,
+}
diff --git a/resources/js/components/ui/placeholder-pattern.tsx b/resources/js/components/ui/placeholder-pattern.tsx
new file mode 100644
index 0000000..09f7ea4
--- /dev/null
+++ b/resources/js/components/ui/placeholder-pattern.tsx
@@ -0,0 +1,20 @@
+import { useId } from 'react';
+
+interface PlaceholderPatternProps {
+ className?: string;
+}
+
+export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
+ const patternId = useId();
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/resources/js/components/ui/select.tsx b/resources/js/components/ui/select.tsx
new file mode 100644
index 0000000..8333850
--- /dev/null
+++ b/resources/js/components/ui/select.tsx
@@ -0,0 +1,190 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+ {children}
+
+
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/resources/js/components/ui/separator.tsx b/resources/js/components/ui/separator.tsx
new file mode 100644
index 0000000..d457090
--- /dev/null
+++ b/resources/js/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ side?: "top" | "right" | "bottom" | "left"
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ (null)
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext)
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.")
+ }
+
+ return context
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ defaultOpen?: boolean
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+}) {
+ const isMobile = useIsMobile()
+ const [openMobile, setOpenMobile] = React.useState(false)
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen)
+ const open = openProp ?? _open
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value
+ if (setOpenProp) {
+ setOpenProp(openState)
+ } else {
+ _setOpen(openState)
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+ },
+ [setOpenProp, open]
+ )
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+ }, [isMobile, setOpen, setOpenMobile])
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (
+ event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+ (event.metaKey || event.ctrlKey)
+ ) {
+ event.preventDefault()
+ toggleSidebar()
+ }
+ }
+
+ window.addEventListener("keydown", handleKeyDown)
+ return () => window.removeEventListener("keydown", handleKeyDown)
+ }, [toggleSidebar])
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed"
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ )
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ dir,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right"
+ variant?: "sidebar" | "floating" | "inset"
+ collapsible?: "offcanvas" | "icon" | "none"
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+ if (collapsible === "none") {
+ return (
+
+ {children}
+
+ )
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ )
+ }
+
+ return (
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+
) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+ {
+ onClick?.(event)
+ toggleSidebar()
+ }}
+ {...props}
+ >
+ Toggle Sidebar
+
+ )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SidebarGroupLabel({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "div"
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function SidebarGroupContent({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+
+} & VariantProps) {
+ const Comp = asChild ? Slot.Root : "button"
+ const { isMobile, state } = useSidebar()
+
+ const button = (
+
+ {button}
+
+ )
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean
+ showOnHover?: boolean
+}) {
+ const Comp = asChild ? Slot.Root : "button"
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ showOnHover &&
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean
+}) {
+ // Random width between 50 to 90%.
+ const [width] = React.useState(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`
+ })
+
+ return (
+
+ {showIcon && (
+
+ )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ )
+}
+
+function SidebarMenuSubItem({
+ className,
+ ...props
+}: React.ComponentProps<"li">) {
+ return (
+ span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+}
diff --git a/resources/js/components/ui/skeleton.tsx b/resources/js/components/ui/skeleton.tsx
new file mode 100644
index 0000000..0118624
--- /dev/null
+++ b/resources/js/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/resources/js/components/ui/sonner.tsx b/resources/js/components/ui/sonner.tsx
new file mode 100644
index 0000000..9772eb2
--- /dev/null
+++ b/resources/js/components/ui/sonner.tsx
@@ -0,0 +1,47 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+ & {
+ spacing?: number
+ orientation?: "horizontal" | "vertical"
+ }
+>({
+ size: "default",
+ variant: "default",
+ spacing: 2,
+ orientation: "horizontal",
+})
+
+function ToggleGroup({
+ className,
+ variant,
+ size,
+ spacing = 2,
+ orientation = "horizontal",
+ children,
+ ...props
+}: React.ComponentProps &
+ VariantProps & {
+ spacing?: number
+ orientation?: "horizontal" | "vertical"
+ }) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function ToggleGroupItem({
+ className,
+ children,
+ variant = "default",
+ size = "default",
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ const context = React.useContext(ToggleGroupContext)
+
+ return (
+
+ {children}
+
+ )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/resources/js/components/ui/toggle.tsx b/resources/js/components/ui/toggle.tsx
new file mode 100644
index 0000000..25b3acc
--- /dev/null
+++ b/resources/js/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+ "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline: "border border-input bg-transparent hover:bg-muted",
+ },
+ size: {
+ default:
+ "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+ lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Toggle({
+ className,
+ variant = "default",
+ size = "default",
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/resources/js/components/user-info.tsx b/resources/js/components/user-info.tsx
new file mode 100644
index 0000000..dd0848e
--- /dev/null
+++ b/resources/js/components/user-info.tsx
@@ -0,0 +1,32 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useInitials } from '@/hooks/use-initials';
+import type { User } from '@/types';
+
+export function UserInfo({
+ user,
+ showEmail = false,
+}: {
+ user: User;
+ showEmail?: boolean;
+}) {
+ const getInitials = useInitials();
+
+ return (
+ <>
+
+
+ {getInitials(user.name)}
+
+
+
+ {user.name}
+ {showEmail && (
+
+ {user.email}
+
+ )}
+
+
+ );
+}
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user-menu-content.tsx
new file mode 100644
index 0000000..adbda71
--- /dev/null
+++ b/resources/js/components/user-menu-content.tsx
@@ -0,0 +1,63 @@
+import { Link, router } from '@inertiajs/react';
+import { LogOut, Settings } from 'lucide-react';
+import {
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { UserInfo } from '@/components/user-info';
+import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
+import { logout } from '@/routes';
+import { edit } from '@/routes/profile';
+import type { User } from '@/types';
+
+type Props = {
+ user: User;
+};
+
+export function UserMenuContent({ user }: Props) {
+ const cleanup = useMobileNavigation();
+
+ const handleLogout = () => {
+ cleanup();
+ router.flushAll();
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/resources/js/hooks/use-appearance.tsx b/resources/js/hooks/use-appearance.tsx
new file mode 100644
index 0000000..fa03f34
--- /dev/null
+++ b/resources/js/hooks/use-appearance.tsx
@@ -0,0 +1,115 @@
+import { useSyncExternalStore } from 'react';
+
+export type ResolvedAppearance = 'light' | 'dark';
+export type Appearance = ResolvedAppearance | 'system';
+
+export type UseAppearanceReturn = {
+ readonly appearance: Appearance;
+ readonly resolvedAppearance: ResolvedAppearance;
+ readonly updateAppearance: (mode: Appearance) => void;
+};
+
+const listeners = new Set<() => void>();
+let currentAppearance: Appearance = 'system';
+
+const prefersDark = (): boolean => {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365): void => {
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ const maxAge = days * 24 * 60 * 60;
+ document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const getStoredAppearance = (): Appearance => {
+ if (typeof window === 'undefined') {
+ return 'system';
+ }
+
+ return (localStorage.getItem('appearance') as Appearance) || 'system';
+};
+
+const isDarkMode = (appearance: Appearance): boolean => {
+ return appearance === 'dark' || (appearance === 'system' && prefersDark());
+};
+
+const applyTheme = (appearance: Appearance): void => {
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ const isDark = isDarkMode(appearance);
+
+ document.documentElement.classList.toggle('dark', isDark);
+ document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+const subscribe = (callback: () => void) => {
+ listeners.add(callback);
+
+ return () => listeners.delete(callback);
+};
+
+const notify = (): void => listeners.forEach((listener) => listener());
+
+const mediaQuery = (): MediaQueryList | null => {
+ if (typeof window === 'undefined') {
+ return null;
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const handleSystemThemeChange = (): void => applyTheme(currentAppearance);
+
+export function initializeTheme(): void {
+ if (typeof window === 'undefined') {
+ return;
+ }
+
+ if (!localStorage.getItem('appearance')) {
+ localStorage.setItem('appearance', 'system');
+ setCookie('appearance', 'system');
+ }
+
+ currentAppearance = getStoredAppearance();
+ applyTheme(currentAppearance);
+
+ // Set up system theme change listener
+ mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance(): UseAppearanceReturn {
+ const appearance: Appearance = useSyncExternalStore(
+ subscribe,
+ () => currentAppearance,
+ () => 'system',
+ );
+
+ const resolvedAppearance: ResolvedAppearance = isDarkMode(appearance)
+ ? 'dark'
+ : 'light';
+
+ const updateAppearance = (mode: Appearance): void => {
+ currentAppearance = mode;
+
+ // Store in localStorage for client-side persistence...
+ localStorage.setItem('appearance', mode);
+
+ // Store in cookie for SSR...
+ setCookie('appearance', mode);
+
+ applyTheme(mode);
+ notify();
+ };
+
+ return { appearance, resolvedAppearance, updateAppearance } as const;
+}
diff --git a/resources/js/hooks/use-clipboard.ts b/resources/js/hooks/use-clipboard.ts
new file mode 100644
index 0000000..03dada7
--- /dev/null
+++ b/resources/js/hooks/use-clipboard.ts
@@ -0,0 +1,32 @@
+// Credit: https://usehooks-ts.com/
+import { useState } from 'react';
+
+export type CopiedValue = string | null;
+export type CopyFn = (text: string) => Promise;
+export type UseClipboardReturn = [CopiedValue, CopyFn];
+
+export function useClipboard(): UseClipboardReturn {
+ const [copiedText, setCopiedText] = useState(null);
+
+ const copy: CopyFn = async (text) => {
+ if (!navigator?.clipboard) {
+ console.warn('Clipboard not supported');
+
+ return false;
+ }
+
+ try {
+ await navigator.clipboard.writeText(text);
+ setCopiedText(text);
+
+ return true;
+ } catch (error) {
+ console.warn('Copy failed', error);
+ setCopiedText(null);
+
+ return false;
+ }
+ };
+
+ return [copiedText, copy];
+}
diff --git a/resources/js/hooks/use-current-url.ts b/resources/js/hooks/use-current-url.ts
new file mode 100644
index 0000000..ee8cd2b
--- /dev/null
+++ b/resources/js/hooks/use-current-url.ts
@@ -0,0 +1,83 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import { usePage } from '@inertiajs/react';
+import { toUrl } from '@/lib/utils';
+
+export type IsCurrentUrlFn = (
+ urlToCheck: NonNullable,
+ currentUrl?: string,
+ startsWith?: boolean,
+) => boolean;
+
+export type IsCurrentOrParentUrlFn = (
+ urlToCheck: NonNullable,
+ currentUrl?: string,
+) => boolean;
+
+export type WhenCurrentUrlFn = (
+ urlToCheck: NonNullable,
+ ifTrue: TIfTrue,
+ ifFalse?: TIfFalse,
+) => TIfTrue | TIfFalse;
+
+export type UseCurrentUrlReturn = {
+ currentUrl: string;
+ isCurrentUrl: IsCurrentUrlFn;
+ isCurrentOrParentUrl: IsCurrentOrParentUrlFn;
+ whenCurrentUrl: WhenCurrentUrlFn;
+};
+
+export function useCurrentUrl(): UseCurrentUrlReturn {
+ const page = usePage();
+ const currentUrlPath = new URL(
+ page.url,
+ typeof window !== 'undefined'
+ ? window.location.origin
+ : 'http://localhost',
+ ).pathname;
+
+ const isCurrentUrl: IsCurrentUrlFn = (
+ urlToCheck: NonNullable,
+ currentUrl?: string,
+ startsWith: boolean = false,
+ ) => {
+ const urlToCompare = currentUrl ?? currentUrlPath;
+ const urlString = toUrl(urlToCheck);
+
+ const comparePath = (path: string): boolean =>
+ startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
+
+ if (!urlString.startsWith('http')) {
+ return comparePath(urlString);
+ }
+
+ try {
+ const absoluteUrl = new URL(urlString);
+
+ return comparePath(absoluteUrl.pathname);
+ } catch {
+ return false;
+ }
+ };
+
+ const isCurrentOrParentUrl: IsCurrentOrParentUrlFn = (
+ urlToCheck: NonNullable,
+ currentUrl?: string,
+ ) => {
+ return isCurrentUrl(urlToCheck, currentUrl, true);
+ };
+
+ const whenCurrentUrl: WhenCurrentUrlFn = (
+ urlToCheck: NonNullable,
+ ifTrue: TIfTrue,
+ ifFalse: TIfFalse = null as TIfFalse,
+ ): TIfTrue | TIfFalse => {
+ return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
+ };
+
+ return {
+ currentUrl: currentUrlPath,
+ isCurrentUrl,
+ isCurrentOrParentUrl,
+ whenCurrentUrl,
+ };
+}
diff --git a/resources/js/hooks/use-flash-toast.ts b/resources/js/hooks/use-flash-toast.ts
new file mode 100644
index 0000000..755c210
--- /dev/null
+++ b/resources/js/hooks/use-flash-toast.ts
@@ -0,0 +1,19 @@
+import { router } from '@inertiajs/react';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+import type { FlashToast } from '@/types/ui';
+
+export function useFlashToast(): void {
+ useEffect(() => {
+ return router.on('flash', (event) => {
+ const flash = (event as CustomEvent).detail?.flash;
+ const data = flash?.toast as FlashToast | undefined;
+
+ if (!data) {
+ return;
+ }
+
+ toast[data.type](data.message);
+ });
+ }, []);
+}
diff --git a/resources/js/hooks/use-initials.tsx b/resources/js/hooks/use-initials.tsx
new file mode 100644
index 0000000..407309f
--- /dev/null
+++ b/resources/js/hooks/use-initials.tsx
@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+export type GetInitialsFn = (fullName: string) => string;
+
+function getInitial(name: string): string {
+ return Array.from(name)[0] ?? '';
+}
+
+export function useInitials(): GetInitialsFn {
+ return useCallback((fullName: string): string => {
+ const names = fullName.trim().split(/\s+/u).filter(Boolean);
+
+ if (names.length === 0) {
+ return '';
+ }
+
+ if (names.length === 1) {
+ return getInitial(names[0]).toUpperCase();
+ }
+
+ const firstInitial = getInitial(names[0]);
+ const lastInitial = getInitial(names[names.length - 1]);
+
+ return `${firstInitial}${lastInitial}`.toUpperCase();
+ }, []);
+}
diff --git a/resources/js/hooks/use-mobile-navigation.ts b/resources/js/hooks/use-mobile-navigation.ts
new file mode 100644
index 0000000..834b9c9
--- /dev/null
+++ b/resources/js/hooks/use-mobile-navigation.ts
@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+
+export type CleanupFn = () => void;
+
+export function useMobileNavigation(): CleanupFn {
+ return useCallback(() => {
+ // Remove pointer-events style from body...
+ document.body.style.removeProperty('pointer-events');
+ }, []);
+}
diff --git a/resources/js/hooks/use-mobile.ts b/resources/js/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/resources/js/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined)
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ }
+ mql.addEventListener("change", onChange)
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ return () => mql.removeEventListener("change", onChange)
+ }, [])
+
+ return !!isMobile
+}
diff --git a/resources/js/hooks/use-mobile.tsx b/resources/js/hooks/use-mobile.tsx
new file mode 100644
index 0000000..3ff7d30
--- /dev/null
+++ b/resources/js/hooks/use-mobile.tsx
@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+const mql =
+ typeof window === 'undefined'
+ ? undefined
+ : window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
+ if (!mql) {
+ return () => {};
+ }
+
+ mql.addEventListener('change', callback);
+
+ return () => {
+ mql.removeEventListener('change', callback);
+ };
+}
+
+function isSmallerThanBreakpoint(): boolean {
+ return mql?.matches ?? false;
+}
+
+function getServerSnapshot(): boolean {
+ return false;
+}
+
+export function useIsMobile(): boolean {
+ return useSyncExternalStore(
+ mediaQueryListener,
+ isSmallerThanBreakpoint,
+ getServerSnapshot,
+ );
+}
diff --git a/resources/js/hooks/use-two-factor-auth.ts b/resources/js/hooks/use-two-factor-auth.ts
new file mode 100644
index 0000000..c89adcd
--- /dev/null
+++ b/resources/js/hooks/use-two-factor-auth.ts
@@ -0,0 +1,111 @@
+import { useHttp } from '@inertiajs/react';
+import { useCallback, useState } from 'react';
+import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
+
+export type UseTwoFactorAuthReturn = {
+ qrCodeSvg: string | null;
+ manualSetupKey: string | null;
+ recoveryCodesList: string[];
+ hasSetupData: boolean;
+ errors: string[];
+ clearErrors: () => void;
+ clearSetupData: () => void;
+ clearTwoFactorAuthData: () => void;
+ fetchQrCode: () => Promise;
+ fetchSetupKey: () => Promise;
+ fetchSetupData: () => Promise;
+ fetchRecoveryCodes: () => Promise;
+};
+
+export const OTP_MAX_LENGTH = 6;
+
+export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
+ const { submit } = useHttp();
+
+ const [qrCodeSvg, setQrCodeSvg] = useState(null);
+ const [manualSetupKey, setManualSetupKey] = useState(null);
+ const [recoveryCodesList, setRecoveryCodesList] = useState([]);
+ const [errors, setErrors] = useState([]);
+
+ const hasSetupData = qrCodeSvg !== null && manualSetupKey !== null;
+
+ const clearErrors = useCallback((): void => {
+ setErrors([]);
+ }, []);
+
+ const clearSetupData = useCallback((): void => {
+ setManualSetupKey(null);
+ setQrCodeSvg(null);
+ setErrors([]);
+ }, []);
+
+ const clearTwoFactorAuthData = useCallback((): void => {
+ setManualSetupKey(null);
+ setQrCodeSvg(null);
+ setErrors([]);
+ setRecoveryCodesList([]);
+ }, []);
+
+ const fetchQrCode = useCallback(async (): Promise => {
+ try {
+ const { svg } = (await submit(qrCode())) as {
+ svg: string;
+ url: string;
+ };
+
+ setQrCodeSvg(svg);
+ } catch {
+ setErrors((prev) => [...prev, 'Failed to fetch QR code']);
+ setQrCodeSvg(null);
+ }
+ }, [submit]);
+
+ const fetchSetupKey = useCallback(async (): Promise => {
+ try {
+ const { secretKey: key } = (await submit(secretKey())) as {
+ secretKey: string;
+ };
+
+ setManualSetupKey(key);
+ } catch {
+ setErrors((prev) => [...prev, 'Failed to fetch a setup key']);
+ setManualSetupKey(null);
+ }
+ }, [submit]);
+
+ const fetchRecoveryCodes = useCallback(async (): Promise => {
+ try {
+ setErrors([]);
+ const codes = (await submit(recoveryCodes())) as string[];
+ setRecoveryCodesList(codes);
+ } catch {
+ setErrors((prev) => [...prev, 'Failed to fetch recovery codes']);
+ setRecoveryCodesList([]);
+ }
+ }, [submit]);
+
+ const fetchSetupData = useCallback(async (): Promise => {
+ try {
+ setErrors([]);
+ await Promise.all([fetchQrCode(), fetchSetupKey()]);
+ } catch {
+ setQrCodeSvg(null);
+ setManualSetupKey(null);
+ }
+ }, [fetchQrCode, fetchSetupKey]);
+
+ return {
+ qrCodeSvg,
+ manualSetupKey,
+ recoveryCodesList,
+ hasSetupData,
+ errors,
+ clearErrors,
+ clearSetupData,
+ clearTwoFactorAuthData,
+ fetchQrCode,
+ fetchSetupKey,
+ fetchSetupData,
+ fetchRecoveryCodes,
+ };
+};
diff --git a/resources/js/layouts/app-layout.tsx b/resources/js/layouts/app-layout.tsx
new file mode 100644
index 0000000..098b981
--- /dev/null
+++ b/resources/js/layouts/app-layout.tsx
@@ -0,0 +1,16 @@
+import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
+import type { BreadcrumbItem } from '@/types';
+
+export default function AppLayout({
+ breadcrumbs = [],
+ children,
+}: {
+ breadcrumbs?: BreadcrumbItem[];
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/resources/js/layouts/app/app-header-layout.tsx b/resources/js/layouts/app/app-header-layout.tsx
new file mode 100644
index 0000000..227530b
--- /dev/null
+++ b/resources/js/layouts/app/app-header-layout.tsx
@@ -0,0 +1,16 @@
+import { AppContent } from '@/components/app-content';
+import { AppHeader } from '@/components/app-header';
+import { AppShell } from '@/components/app-shell';
+import type { AppLayoutProps } from '@/types';
+
+export default function AppHeaderLayout({
+ children,
+ breadcrumbs,
+}: AppLayoutProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/resources/js/layouts/app/app-sidebar-layout.tsx b/resources/js/layouts/app/app-sidebar-layout.tsx
new file mode 100644
index 0000000..a6edb62
--- /dev/null
+++ b/resources/js/layouts/app/app-sidebar-layout.tsx
@@ -0,0 +1,20 @@
+import { AppContent } from '@/components/app-content';
+import { AppShell } from '@/components/app-shell';
+import { AppSidebar } from '@/components/app-sidebar';
+import { AppSidebarHeader } from '@/components/app-sidebar-header';
+import type { AppLayoutProps } from '@/types';
+
+export default function AppSidebarLayout({
+ children,
+ breadcrumbs = [],
+}: AppLayoutProps) {
+ return (
+
+
+
+
+ );
+}
diff --git a/resources/js/layouts/auth-layout.tsx b/resources/js/layouts/auth-layout.tsx
new file mode 100644
index 0000000..698dd75
--- /dev/null
+++ b/resources/js/layouts/auth-layout.tsx
@@ -0,0 +1,17 @@
+import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
+
+export default function AuthLayout({
+ title = '',
+ description = '',
+ children,
+}: {
+ title?: string;
+ description?: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/resources/js/layouts/auth/auth-card-layout.tsx b/resources/js/layouts/auth/auth-card-layout.tsx
new file mode 100644
index 0000000..851ac5f
--- /dev/null
+++ b/resources/js/layouts/auth/auth-card-layout.tsx
@@ -0,0 +1,48 @@
+import { Link } from '@inertiajs/react';
+import type { PropsWithChildren } from 'react';
+import AppLogoIcon from '@/components/app-logo-icon';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import { home } from '@/routes';
+
+export default function AuthCardLayout({
+ children,
+ title,
+ description,
+}: PropsWithChildren<{
+ name?: string;
+ title?: string;
+ description?: string;
+}>) {
+ return (
+
+
+
+
+
+
+
+
+
+ {title}
+ {description}
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
{title}
+
+
+
+
{title}
+
+ {description}
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
{title}
+
+ {description}
+
+
+ {children}
+
+
+
+
+
+
+
+
+ {sidebarNavItems.map((item, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
): string {
+ return typeof url === 'string' ? url : url.url;
+}
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
new file mode 100644
index 0000000..0489ce8
--- /dev/null
+++ b/resources/js/pages/auth/confirm-password.tsx
@@ -0,0 +1,66 @@
+import { Form, Head } from '@inertiajs/react';
+import {
+ index as confirmOptions,
+ store as confirmStore,
+} from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyConfirmationController';
+import InputError from '@/components/input-error';
+import PasskeyVerify from '@/components/passkey-verify';
+import PasswordInput from '@/components/password-input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import { store } from '@/routes/password/confirm';
+
+export default function ConfirmPassword() {
+ return (
+ <>
+
+
+
+
+ {status && (
+
+ {status}
+
+ )}
+
+
+
+
+
+ Or, return to
+ log in
+
+
+
+
+ {status}
+
+ )}
+
+ );
+}
+
+Login.layout = {
+ title: 'Log in to your account',
+ description: 'Enter your email and password below to log in',
+};
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
new file mode 100644
index 0000000..ce766ef
--- /dev/null
+++ b/resources/js/pages/auth/register.tsx
@@ -0,0 +1,120 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import PasswordInput from '@/components/password-input';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import { login } from '@/routes';
+import { store } from '@/routes/register';
+
+type Props = {
+ passwordRules: string;
+};
+
+export default function Register({ passwordRules }: Props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+Register.layout = {
+ title: 'Create an account',
+ description: 'Enter your details below to create your account',
+};
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
new file mode 100644
index 0000000..8b762c3
--- /dev/null
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -0,0 +1,96 @@
+import { Form, Head } from '@inertiajs/react';
+import InputError from '@/components/input-error';
+import PasswordInput from '@/components/password-input';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import { update } from '@/routes/password';
+
+type Props = {
+ token: string;
+ email: string;
+ passwordRules: string;
+};
+
+export default function ResetPassword({ token, email, passwordRules }: Props) {
+ return (
+ <>
+
+
+
+
+ );
+}
+
+ResetPassword.layout = {
+ title: 'Reset password',
+ description: 'Please enter your new password below',
+};
diff --git a/resources/js/pages/auth/two-factor-challenge.tsx b/resources/js/pages/auth/two-factor-challenge.tsx
new file mode 100644
index 0000000..3cddec3
--- /dev/null
+++ b/resources/js/pages/auth/two-factor-challenge.tsx
@@ -0,0 +1,133 @@
+import { Form, Head, setLayoutProps } from '@inertiajs/react';
+import { REGEXP_ONLY_DIGITS } from 'input-otp';
+import { useMemo, useState } from 'react';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth';
+import { store } from '@/routes/two-factor/login';
+
+export default function TwoFactorChallenge() {
+ const [showRecoveryInput, setShowRecoveryInput] = useState(false);
+ const [code, setCode] = useState('');
+
+ const authConfigContent = useMemo<{
+ title: string;
+ description: string;
+ toggleText: string;
+ }>(() => {
+ if (showRecoveryInput) {
+ return {
+ title: 'Recovery code',
+ description:
+ 'Please confirm access to your account by entering one of your emergency recovery codes.',
+ toggleText: 'login using an authentication code',
+ };
+ }
+
+ return {
+ title: 'Authentication code',
+ description:
+ 'Enter the authentication code provided by your authenticator application.',
+ toggleText: 'login using a recovery code',
+ };
+ }, [showRecoveryInput]);
+
+ setLayoutProps({
+ title: authConfigContent.title,
+ description: authConfigContent.description,
+ });
+
+ const toggleRecoveryMode = (clearErrors: () => void): void => {
+ setShowRecoveryInput(!showRecoveryInput);
+ clearErrors();
+ setCode('');
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
new file mode 100644
index 0000000..a6fee14
--- /dev/null
+++ b/resources/js/pages/auth/verify-email.tsx
@@ -0,0 +1,46 @@
+// Components
+import { Form, Head } from '@inertiajs/react';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { logout } from '@/routes';
+import { send } from '@/routes/verification';
+
+export default function VerifyEmail({ status }: { status?: string }) {
+ return (
+ <>
+
+
+ {status === 'verification-link-sent' && (
+
+ A new verification link has been sent to the email address
+ you provided during registration.
+
+ )}
+
+
+
+ );
+}
+
+VerifyEmail.layout = {
+ title: 'Email verification',
+ description:
+ 'Please verify your email address by clicking on the link we just emailed to you.',
+};
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
new file mode 100644
index 0000000..3fe0cc7
--- /dev/null
+++ b/resources/js/pages/dashboard.tsx
@@ -0,0 +1,36 @@
+import { Head } from '@inertiajs/react';
+import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
+import { dashboard } from '@/routes';
+
+export default function Dashboard() {
+ return (
+ <>
+
+
+
+ );
+}
+
+Dashboard.layout = {
+ breadcrumbs: [
+ {
+ title: 'Dashboard',
+ href: dashboard(),
+ },
+ ],
+};
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
new file mode 100644
index 0000000..ca18d76
--- /dev/null
+++ b/resources/js/pages/settings/appearance.tsx
@@ -0,0 +1,32 @@
+import { Head } from '@inertiajs/react';
+import AppearanceTabs from '@/components/appearance-tabs';
+import Heading from '@/components/heading';
+import { edit as editAppearance } from '@/routes/appearance';
+
+export default function Appearance() {
+ return (
+ <>
+
+
+ Appearance settings
+
+
+
+ );
+}
+
+Appearance.layout = {
+ breadcrumbs: [
+ {
+ title: 'Appearance settings',
+ href: editAppearance(),
+ },
+ ],
+};
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
new file mode 100644
index 0000000..0a242cd
--- /dev/null
+++ b/resources/js/pages/settings/profile.tsx
@@ -0,0 +1,138 @@
+import { Form, Head, usePage } from '@inertiajs/react';
+import { Link } from '@inertiajs/react';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import DeleteUser from '@/components/delete-user';
+import Heading from '@/components/heading';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { edit } from '@/routes/profile';
+import { send } from '@/routes/verification';
+import type { Auth } from '@/types';
+
+type PageProps = {
+ auth: Auth;
+};
+
+export default function Profile({
+ mustVerifyEmail,
+ status,
+}: {
+ mustVerifyEmail: boolean;
+ status?: string;
+}) {
+ const { auth } = usePage().props;
+
+ return (
+ <>
+
+
+ Profile settings
+
+
+
+ (null);
+ const currentPasswordInput = useRef(null);
+
+ return (
+ <>
+
+
+ Security settings
+
+
+
+
+
+
+
+ {auth.user ? (
+
+
+
+
+
+
+ Let's get started
+
+
+ Laravel has an incredibly rich ecosystem.
+
+
+
+
+ {/* Laravel Logo */}
+
+
+
+ {/* 13 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ passwordrules?: string;
+ }
+}
+
+declare module '@inertiajs/core' {
+ export interface InertiaConfig {
+ sharedPageProps: {
+ name: string;
+ auth: Auth;
+ sidebarOpen: boolean;
+ [key: string]: unknown;
+ };
+ }
+}
diff --git a/resources/js/types/index.ts b/resources/js/types/index.ts
new file mode 100644
index 0000000..b1f0ee6
--- /dev/null
+++ b/resources/js/types/index.ts
@@ -0,0 +1,3 @@
+export type * from './auth';
+export type * from './navigation';
+export type * from './ui';
diff --git a/resources/js/types/navigation.ts b/resources/js/types/navigation.ts
new file mode 100644
index 0000000..dbf6f83
--- /dev/null
+++ b/resources/js/types/navigation.ts
@@ -0,0 +1,14 @@
+import type { InertiaLinkProps } from '@inertiajs/react';
+import type { LucideIcon } from 'lucide-react';
+
+export type BreadcrumbItem = {
+ title: string;
+ href: NonNullable;
+};
+
+export type NavItem = {
+ title: string;
+ href: NonNullable;
+ icon?: LucideIcon | null;
+ isActive?: boolean;
+};
diff --git a/resources/js/types/ui.ts b/resources/js/types/ui.ts
new file mode 100644
index 0000000..0920e71
--- /dev/null
+++ b/resources/js/types/ui.ts
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { BreadcrumbItem } from '@/types/navigation';
+
+export type AppLayoutProps = {
+ children: ReactNode;
+ breadcrumbs?: BreadcrumbItem[];
+};
+
+export type AppVariant = 'header' | 'sidebar';
+
+export type FlashToast = {
+ type: 'success' | 'info' | 'warning' | 'error';
+ message: string;
+};
+
+export type AuthLayoutProps = {
+ children?: ReactNode;
+ name?: string;
+ title?: string;
+ description?: string;
+};
diff --git a/resources/js/types/vite-env.d.ts b/resources/js/types/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/resources/js/types/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ {{ config('app.name', 'Laravel') }}
+
+
+
+ 's from expanding the number of files TypeScript should add to a project. */
+
+ /* JavaScript Support */
+ "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+ // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
+ // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+ /* Emit */
+ // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+ // "declarationMap": true, /* Create sourcemaps for d.ts files. */
+ // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
+ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */
+ // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
+ "noEmit": true /* Disable emitting files from a compilation. */,
+ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+ // "outDir": "./", /* Specify an output folder for all emitted files. */
+ // "removeComments": true, /* Disable emitting comments. */
+ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+ // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+ // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
+ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
+ // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
+ // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+ // "newLine": "crlf", /* Set the newline character for emitting files. */
+ // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+ // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
+ // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
+ // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
+ // "declarationDir": "./", /* Specify the output directory for generated declaration files. */
+
+ /* Interop Constraints */
+ "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+ // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+ // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+ // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
+ "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+ // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+ "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+ /* Type Checking */
+ "strict": true /* Enable all strict type-checking options. */,
+ "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+ // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
+ // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+ // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+ // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
+ // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+ // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
+ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+ // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
+ // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
+ // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
+ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
+ // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
+ // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
+ // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+ // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
+ // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
+ // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
+ // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
+
+ /* Completeness */
+ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
+ "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./resources/js/*"]
+ },
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "resources/js/**/*.ts",
+ "resources/js/**/*.d.ts",
+ "resources/js/**/*.tsx"
+ ]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b855732
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,31 @@
+import inertia from '@inertiajs/vite';
+import { wayfinder } from '@laravel/vite-plugin-wayfinder';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import laravel from 'laravel-vite-plugin';
+import { bunny } from 'laravel-vite-plugin/fonts';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+ plugins: [
+ laravel({
+ input: ['resources/css/app.css', 'resources/js/app.tsx'],
+ refresh: true,
+ fonts: [
+ bunny('Instrument Sans', {
+ weights: [400, 500, 600],
+ }),
+ ],
+ }),
+ inertia(),
+ react({
+ babel: {
+ plugins: ['babel-plugin-react-compiler'],
+ },
+ }),
+ tailwindcss(),
+ wayfinder({
+ formVariants: true,
+ }),
+ ],
+});