chore: update yarn.lock

app/components/FileOrUrlField.tsx

@@ -1,4 +1,6 @@
 import { Upload, Link, X } from 'lucide-react';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
 
 export type InputMode = 'url' | 'file';
 
@@ -14,21 +16,24 @@ export interface FileOrUrlFieldProps {
     url: string;
     onUrlChange: (u: string) => void;
     urlPlaceholder: string;
+    existingFileName?: string;
+    onClearExistingFile?: () => void;
 }
 
 export function FileOrUrlField({
     label, required, mode, onModeChange,
     accept, file, onFileChange, inputRef,
     url, onUrlChange, urlPlaceholder,
+    existingFileName, onClearExistingFile,
 }: FileOrUrlFieldProps) {
     return (
         <div className='space-y-1.5'>
             {/* Label + toggle */}
             <div className='flex items-center justify-between ml-1'>
-                <label className='text-xs font-bold text-neutral-400 uppercase tracking-wider'>
+                <Label>
                     {label}{required && <span className='text-orange-500 ml-0.5'>*</span>}
-                </label>
-                <div className='flex items-center gap-1 rounded-xl bg-[#181818] border border-neutral-800 p-1 text-xs'>
+                </Label>
+                <div className='flex items-center gap-1 rounded-xl bg-[#181818] border border-neutral-850 p-1 text-xs'>
                     <button
                         type='button'
                         onClick={() => onModeChange('file')}
@@ -60,7 +65,7 @@ export function FileOrUrlField({
                 <div
                     onClick={() => inputRef.current?.click()}
                     className={`flex cursor-pointer items-center gap-3 rounded-xl border-2 border-dashed px-4 py-4 transition-all duration-200 ${
-                        file
+                        file || existingFileName
                             ? 'border-orange-500/50 bg-[#161616]'
                             : 'border-neutral-800 hover:border-neutral-700 bg-[#161616]/40 hover:bg-[#161616]/70'
                     }`}
@@ -97,6 +102,30 @@ export function FileOrUrlField({
                                 <X size={15} />
                             </button>
                         </>
+                    ) : existingFileName ? (
+                        <>
+                            <div className='flex flex-1 items-center gap-3.5 min-w-0'>
+                                <div className='w-8 h-8 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center shrink-0'>
+                                    <Upload size={14} className='text-orange-500' />
+                                </div>
+                                <div className="flex flex-col min-w-0">
+                                    <span className='text-sm text-white font-semibold truncate'>{existingFileName}</span>
+                                    <span className='text-[10px] text-neutral-500 font-medium mt-0.5'>
+                                        Existing File (Keep)
+                                    </span>
+                                </div>
+                            </div>
+                            <button
+                                type='button'
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    if (onClearExistingFile) onClearExistingFile();
+                                }}
+                                className='shrink-0 text-neutral-500 hover:text-white p-1 hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer'
+                            >
+                                <X size={15} />
+                            </button>
+                        </>
                     ) : (
                         <div className='flex flex-1 items-center gap-3 text-neutral-500 py-1'>
                             <Upload size={16} className="text-neutral-600" />
@@ -107,9 +136,8 @@ export function FileOrUrlField({
                     )}
                 </div>
             ) : (
-                <input
+                <Input
                     type='url'
-                    className='w-full bg-[#181818] border border-neutral-800 rounded-xl px-4 py-3 text-sm text-white placeholder-neutral-700 focus:border-orange-500 focus:outline-none transition-colors duration-200'
                     placeholder={urlPlaceholder}
                     value={url}
                     onChange={(e) => onUrlChange(e.target.value)}

app/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+
+const badgeVariants = cva(
+    'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none uppercase tracking-wider',
+    {
+        variants: {
+            variant: {
+                default:
+                    'border-transparent bg-neutral-800 text-white hover:bg-neutral-700',
+                secondary:
+                    'border-transparent bg-neutral-900 text-neutral-400 hover:bg-neutral-850',
+                destructive:
+                    'border-transparent bg-red-500/10 text-red-500 border-red-500/20',
+                outline: 'border-neutral-800 text-neutral-400',
+                orange:
+                    'border-orange-500/20 bg-orange-500/5 text-orange-500 font-bold',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+);
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return (
+        <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    );
+}
+
+export { Badge, badgeVariants };

app/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+
+const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-700 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98] cursor-pointer',
+    {
+        variants: {
+            variant: {
+                default: 'bg-orange-500 text-black shadow-[0_0_24px_rgba(249,115,22,0.15)] hover:bg-orange-400 hover:shadow-[0_0_32px_rgba(249,115,22,0.3)]',
+                destructive: 'bg-red-500/10 text-red-500 border border-red-500/20 hover:bg-red-500 hover:text-white',
+                outline: 'border border-neutral-800 bg-[#121212] text-neutral-400 hover:bg-neutral-900 hover:text-white hover:border-orange-500/40',
+                secondary: 'bg-neutral-800 text-neutral-300 hover:bg-neutral-750 hover:text-white',
+                ghost: 'hover:bg-neutral-850 hover:text-white text-neutral-400',
+                link: 'text-orange-500 underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-10 px-5 py-2.5',
+                sm: 'h-8 rounded-lg px-3 text-xs',
+                lg: 'h-12 rounded-xl px-8 text-base',
+                icon: 'h-9 w-9 rounded-lg',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

app/components/ui/card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'rounded-2xl border border-neutral-900 bg-[#121212] text-white shadow-2xl transition-all duration-300',
+            className
+        )}
+        {...props}
+    />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex flex-col space-y-1.5 p-6', className)}
+        {...props}
+    />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3
+        ref={ref}
+        className={cn(
+            'text-lg font-bold tracking-tight text-white uppercase',
+            className
+        )}
+        {...props}
+    />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p
+        ref={ref}
+        className={cn('text-xs text-neutral-500 uppercase tracking-wider', className)}
+        {...props}
+    />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex items-center p-6 pt-0', className)}
+        {...props}
+    />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

app/components/ui/confirm-dialog.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+} from '~/components/ui/dialog';
+import { Button } from '~/components/ui/button';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'destructive' | 'default';
+    loading?: boolean;
+    onConfirm: () => void;
+}
+
+export function ConfirmDialog({
+    open,
+    onOpenChange,
+    title,
+    description,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    variant = 'destructive',
+    loading = false,
+    onConfirm,
+}: ConfirmDialogProps) {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-md bg-[#121212] border-neutral-850 p-6">
+                <DialogHeader className="space-y-2">
+                    <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-red-500 shrink-0">
+                            <AlertTriangle size={20} />
+                        </div>
+                        <div>
+                            <DialogTitle className="text-base font-bold text-white uppercase tracking-wider">
+                                {title}
+                            </DialogTitle>
+                            <DialogDescription className="text-xs text-neutral-400 mt-1">
+                                {description}
+                            </DialogDescription>
+                        </div>
+                    </div>
+                </DialogHeader>
+
+                <DialogFooter className="mt-6 flex flex-row items-center justify-end gap-3">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={loading}
+                        onClick={() => onOpenChange(false)}
+                        className="h-9"
+                    >
+                        {cancelText}
+                    </Button>
+                    <Button
+                        type="button"
+                        variant={variant}
+                        size="sm"
+                        disabled={loading}
+                        onClick={onConfirm}
+                        className="h-9"
+                    >
+                        {loading ? (
+                            <RefreshCw size={14} className="animate-spin" />
+                        ) : (
+                            confirmText
+                        )}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

app/components/ui/dialog.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '~/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            'fixed inset-0 z-50 bg-black/85 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] border border-neutral-850 bg-[#121212] shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 rounded-2xl',
+                !className?.includes('flex') && !className?.includes('grid') && 'grid gap-4',
+                !className?.includes('max-w-') && 'max-w-lg',
+                !className?.includes('p-') && 'p-0 p-6', // default padding if not overridden
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full p-2 bg-black/60 border border-neutral-850 text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all cursor-pointer opacity-70 hover:opacity-100 focus:outline-none disabled:pointer-events-none z-20">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col space-y-1.5 text-center sm:text-left',
+            className
+        )}
+        {...props}
+    />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            className
+        )}
+        {...props}
+    />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            'text-lg font-semibold leading-none tracking-tight text-white',
+            className
+        )}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn('text-sm text-neutral-400', className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};

app/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    'flex h-10 w-full rounded-xl border border-neutral-800 bg-[#181818] px-4 py-3 text-sm text-white placeholder-neutral-600 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-white focus-visible:outline-none focus-visible:border-orange-500 disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Input.displayName = 'Input';
+
+export { Input };

app/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+
+const labelVariants = cva(
+    'text-xs font-bold text-neutral-400 uppercase tracking-wider select-none leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+    HTMLLabelElement,
+    React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <label ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = 'Label';
+
+export { Label };

app/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '~/lib/utils';
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn('animate-pulse rounded-xl bg-neutral-900', className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };

app/global.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model-viewer': React.DetailedHTMLProps<
+                React.HTMLAttributes<HTMLElement> & {
+                    src?: string;
+                    'ios-src'?: string;
+                    ar?: boolean;
+                    'ar-modes'?: string;
+                    'ar-scale'?: string;
+                    'ar-placement'?: string;
+                    'camera-controls'?: boolean;
+                    'touch-action'?: string;
+                    alt?: string;
+                    'shadow-intensity'?: string | number;
+                    'shadow-softness'?: string | number;
+                    exposure?: string | number;
+                    'interaction-prompt'?: string;
+                    'min-camera-orbit'?: string;
+                    'max-camera-orbit'?: string;
+                    'camera-orbit'?: string;
+                    'field-of-view'?: string;
+                    scale?: string;
+                    'auto-rotate'?: boolean;
+                    'rotation-per-second'?: string;
+                    onLoad?: (e: any) => void;
+                    'onAr-status'?: (e: any) => void;
+                    'onModel-visibility'?: (e: any) => void;
+                    'onCamera-change'?: (e: any) => void;
+                },
+                HTMLElement
+            >;
+        }
+    }
+}

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

app/root.tsx

@@ -24,6 +24,8 @@ export const links: Route.LinksFunction = () => [
   },
 ];
 
+import { Toaster } from "sonner";
+
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
@@ -32,11 +34,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
+        <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
       </head>
-      <body>
+      <body className="bg-[#0D0D0D] text-white">
         {children}
         <ScrollRestoration />
         <Scripts />
+        <Toaster theme="dark" position="bottom-right" richColors />
       </body>
     </html>
   );

app/routes.ts

@@ -1,7 +1,11 @@
 import { type RouteConfig, index, route } from '@react-router/dev/routes';
 
 export default [
-    index('routes/dashboard.tsx'),
-    route('login', 'routes/login.tsx'),
-    route('ar/:id', 'qr-ar/ar-viewer.tsx'),
+    index('routes/admin/dashboard.tsx'),
+    route('login', 'routes/admin/login.tsx'),
+    route('preview/:id', 'routes/admin/asset-preview.tsx'),
+
+    route('ar/:id', 'routes/ar/ar-viewer.tsx'),
+
+    route('*', 'routes/not-found.tsx'),
 ] satisfies RouteConfig;

app/routes/admin/asset-preview.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useLoaderData, Link, redirect, useNavigate } from 'react-router';
+import type { Route } from './+types/asset-preview';
+import { pb } from '~/lib/pocketbase';
+import { Button } from '~/components/ui/button';
+import { Badge } from '~/components/ui/badge';
+import { Card } from '~/components/ui/card';
+import { Download, ImageOff, FileCode, ArrowLeft, Box } from 'lucide-react';
+import { toast } from 'sonner';
+
+
+export async function clientLoader({ params }: Route.ClientLoaderArgs) {
+    if (!pb.authStore.isValid) {
+        return redirect('/login');
+    }
+    try {
+        const asset = await pb.collection('ar_assets').getOne(params.id);
+        return { asset, error: null };
+    } catch (err: any) {
+        console.error('Failed to load asset in clientLoader:', err);
+        return { asset: null, error: err?.message || 'Failed to fetch asset details' };
+    }
+}
+
+export default function Preview() {
+    const { asset, error } = useLoaderData<typeof clientLoader>();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (error || !asset) {
+            toast.error(error || 'Asset not found');
+            navigate('/', { replace: true });
+        }
+    }, [error, asset, navigate]);
+
+    if (!asset) return null;
+
+    const glbUrl = asset.glb_file
+        ? pb.files.getURL(asset, asset.glb_file)
+        : asset.glb_url;
+    const usdzUrl = asset.usdz_file
+        ? pb.files.getURL(asset, asset.usdz_file)
+        : asset.usdz_url;
+
+    const downloadQR = async () => {
+        const qrUrl = asset.qr_image
+            ? pb.files.getURL(asset, asset.qr_image)
+            : asset.qr_file
+            ? pb.files.getURL(asset, asset.qr_file)
+            : null;
+        if (!qrUrl) {
+            toast.error('No QR code image found for this asset');
+            return;
+        }
+
+        try {
+            const response = await fetch(qrUrl);
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${asset.name.replace(/\s+/g, '_')}_qr.png`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+            toast.success('QR Code downloaded successfully');
+        } catch (err) {
+            console.error('Failed to download QR code:', err);
+            toast.error('Failed to download QR code');
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-[#0D0D0D] text-white px-4 py-8 md:p-10 font-sans selection:bg-orange-500/20">
+            <div className="mx-auto max-w-5xl space-y-6">
+                <div className="flex items-center justify-between pb-4 border-b border-neutral-900">
+                    <Link
+                        to="/"
+                        className="inline-flex items-center gap-2 text-xs font-bold text-neutral-400 hover:text-orange-500 transition-colors uppercase tracking-wider cursor-pointer"
+                    >
+                        <ArrowLeft size={16} />
+                        <span>Back to Dashboard</span>
+                    </Link>
+                    <div className="w-8 h-8 bg-black border border-neutral-850 rounded-xl flex items-center justify-center shrink-0">
+                        <span className="text-orange-500 font-extrabold text-lg pl-0.5 select-none">t.</span>
+                    </div>
+                </div>
+
+                <Card className="flex flex-col lg:flex-row gap-6 overflow-hidden shadow-2xl border-neutral-900">
+                    <div className="flex-grow lg:flex-1 min-h-[350px] sm:min-h-[450px] lg:min-h-[600px] bg-black relative rounded-t-2xl lg:rounded-l-2xl lg:rounded-tr-none overflow-hidden">
+                        {glbUrl ? (
+                            <model-viewer
+                                src={glbUrl}
+                                ios-src={usdzUrl || undefined}
+                                ar
+                                ar-modes="webxr scene-viewer quick-look"
+                                camera-controls
+                                auto-rotate
+                                shadow-intensity="1"
+                                shadow-softness="0.8"
+                                exposure="1.1"
+                                style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', top: 0, left: 0 }}
+                                className="w-full h-full"
+                                alt={asset.name}
+                            />
+                        ) : (
+                            <div className="w-full h-full flex flex-col items-center justify-center text-neutral-500 p-8">
+                                <FileCode size={40} className="mb-2 text-neutral-600 animate-pulse" />
+                                <span className="text-xs uppercase tracking-widest text-neutral-600">Initializing 3D viewport…</span>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="w-full lg:w-[360px] bg-[#121212] p-6 sm:p-8 flex flex-col justify-between shrink-0 border-t lg:border-t-0 lg:border-l border-neutral-850">
+                        <div className="space-y-6">
+                            <div>
+                                <Badge variant="orange" className="mb-2">Asset Details</Badge>
+                                <h3 className="text-xl font-bold text-white leading-snug">{asset.name}</h3>
+                            </div>
+
+                            <div className="bg-white p-4 rounded-xl flex items-center justify-center max-w-[210px] mx-auto shadow-md border border-neutral-200">
+                                {asset.qr_image ? (
+                                    <img
+                                        src={pb.files.getURL(asset, asset.qr_image)}
+                                        alt={asset.name}
+                                        className="w-full aspect-square rounded-lg object-contain"
+                                    />
+                                ) : asset.qr_file ? (
+                                    <img
+                                        src={pb.files.getURL(asset, asset.qr_file)}
+                                        alt={asset.name}
+                                        className="w-full aspect-square rounded-lg object-contain"
+                                    />
+                                ) : (
+                                    <div className="flex aspect-square w-full flex-col items-center justify-center text-neutral-400 bg-neutral-100 rounded-lg p-4">
+                                        <ImageOff size={32} />
+                                        <span className="text-[10px] mt-1 font-semibold uppercase">No QR code</span>
+                                    </div>
+                                )}
+                            </div>
+
+                            <p className="text-xs text-neutral-400 text-center leading-relaxed px-2">
+                                Scan this QR code with a smartphone camera to instantly project the 3D model in your space using AR.
+                            </p>
+
+                            <div className="border-t border-neutral-850 pt-5 space-y-3">
+                                <div>
+                                    <span className="text-[10px] font-bold text-neutral-500 uppercase tracking-wider">GLB File Target</span>
+                                    <div className="text-xs font-mono text-neutral-300 truncate mt-1 bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-850 select-all">
+                                        {glbUrl}
+                                    </div>
+                                </div>
+                                {usdzUrl && (
+                                    <div>
+                                        <span className="text-[10px] font-bold text-neutral-500 uppercase tracking-wider">USDZ File Target</span>
+                                        <div className="text-xs font-mono text-neutral-300 truncate mt-1 bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-850 select-all">
+                                            {usdzUrl}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="space-y-3 mt-8">
+                            <Button
+                                onClick={downloadQR}
+                                variant="outline"
+                                className="w-full py-6 text-xs uppercase tracking-wider"
+                            >
+                                <Download size={15} className="text-orange-500" />
+                                <span>Download QR Code</span>
+                            </Button>
+                            <a
+                                href={`${import.meta.env.VITE_FRONTEND_URL}/ar/${asset.id}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-orange-500 hover:bg-orange-400 text-black transition-all font-bold text-xs uppercase tracking-wider shadow-[0_0_15px_rgba(249,115,22,0.15)]"
+                            >
+                                <Box size={14} />
+                                <span>Launch AR View</span>
+                            </a>
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
+}

app/routes/admin/dashboard.tsx

@@ -0,0 +1,727 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useLoaderData, useSubmit, useNavigation, useActionData, useSearchParams, useNavigate, redirect } from 'react-router';
+import type { Route } from './+types/dashboard';
+import QRCode from 'qrcode';
+import { toast } from 'sonner';
+import { pb } from '~/lib/pocketbase';
+import { ImageOff, LogOut, FileCode, Edit2, Trash2, X, Eye, RefreshCw } from 'lucide-react';
+import { FileOrUrlField, type InputMode } from '~/components/FileOrUrlField';
+import { Button } from '~/components/ui/button';
+import { Input } from '~/components/ui/input';
+import { Badge } from '~/components/ui/badge';
+import { Label } from '~/components/ui/label';
+import { Card, CardHeader, CardTitle, CardContent } from '~/components/ui/card';
+import { ConfirmDialog } from '~/components/ui/confirm-dialog';
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const DEFAULT_FORM_VALUES = {
+    id: '',
+    name: '',
+    glbMode: 'file' as const,
+    glbUrl: '',
+    glbFile: null as File | null,
+    existingGlbName: '',
+    usdzMode: 'file' as const,
+    usdzUrl: '',
+    usdzFile: null as File | null,
+    existingUsdzName: '',
+};
+
+function getPaginationRange(current: number, total: number) {
+    const range: (number | string)[] = [];
+    const delta = 1;
+
+    for (let i = 1; i <= total; i++) {
+        if (
+            i === 1 ||
+            i === total ||
+            (i >= current - delta && i <= current + delta)
+        ) {
+            range.push(i);
+        } else if (range[range.length - 1] !== '...') {
+            range.push('...');
+        }
+    }
+    return range;
+}
+
+const formSchema = z.object({
+    id: z.string().optional(),
+    name: z.string().min(1, 'Asset name is required'),
+    glbMode: z.enum(['file', 'url']),
+    glbUrl: z.string().optional(),
+    glbFile: z.any().nullable().optional(),
+    existingGlbName: z.string().optional(),
+    usdzMode: z.enum(['file', 'url']),
+    usdzUrl: z.string().optional(),
+    usdzFile: z.any().nullable().optional(),
+    existingUsdzName: z.string().optional(),
+});
+
+const assetSchema = formSchema.superRefine((data, ctx) => {
+    // GLB Validation rules
+    if (data.glbMode === 'url') {
+        if (!data.glbUrl || data.glbUrl.trim() === '') {
+            ctx.addIssue({
+                code: 'custom',
+                message: 'GLB URL is required when URL mode is active',
+                path: ['glbUrl'],
+            });
+        } else {
+            try {
+                new URL(data.glbUrl);
+            } catch (_) {
+                ctx.addIssue({
+                    code: 'custom',
+                    message: 'GLB URL must be a valid absolute URL',
+                    path: ['glbUrl'],
+                });
+            }
+        }
+    } else {
+        if (!data.glbFile && !data.existingGlbName) {
+            ctx.addIssue({
+                code: 'custom',
+                message: 'GLB file is required when Upload mode is active',
+                path: ['glbFile'],
+            });
+        }
+    }
+
+    // USDZ optional URL Validation rules
+    if (data.usdzMode === 'url' && data.usdzUrl && data.usdzUrl.trim() !== '') {
+        try {
+            new URL(data.usdzUrl);
+        } catch (_) {
+            ctx.addIssue({
+                code: 'custom',
+                message: 'USDZ URL must be a valid absolute URL',
+                path: ['usdzUrl'],
+            });
+        }
+    }
+});
+
+type FormValues = z.infer<typeof assetSchema>;
+
+export async function clientLoader({ request }: Route.ClientLoaderArgs) {
+    if (!pb.authStore.isValid) {
+        return redirect('/login');
+    }
+    const url = new URL(request.url);
+    const page = parseInt(url.searchParams.get('page') || '1', 10);
+
+    try {
+        const resultList = await pb.collection('ar_assets').getList(page, 10, {
+            sort: '-created',
+        });
+        return {
+            assets: resultList.items || [],
+            page: resultList.page,
+            totalPages: resultList.totalPages,
+            totalItems: resultList.totalItems,
+            error: null,
+        };
+    } catch (err: any) {
+        console.error('Failed to load assets in clientLoader:', err);
+        return {
+            assets: [],
+            page: 1,
+            totalPages: 1,
+            totalItems: 0,
+            error: err?.message || 'Failed to load assets',
+        };
+    }
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+    if (!pb.authStore.isValid) {
+        return redirect('/login');
+    }
+
+    const formData = await request.formData();
+    const intent = formData.get('intent') as string;
+
+    try {
+        // --- DELETE INTENT ---
+        if (intent === 'delete') {
+            const id = formData.get('id') as string;
+            if (!id) throw new Error('Missing asset ID');
+            await pb.collection('ar_assets').delete(id);
+            return { success: true, intent, message: 'Asset deleted successfully' };
+        }
+
+        // Parse fields for validation
+        const glbFileVal = formData.get('glb_file');
+        const usdzFileVal = formData.get('usdz_file');
+
+        const rawFields = {
+            id: (formData.get('id') as string) || undefined,
+            name: (formData.get('name') as string) || undefined,
+            glbMode: (formData.get('glbMode') as 'file' | 'url') || undefined,
+            glbUrl: (formData.get('glb_url') as string) || undefined,
+            glbFile: (glbFileVal instanceof File && glbFileVal.size > 0) ? glbFileVal : undefined,
+            existingGlbName: (formData.get('existingGlbName') as string) || undefined,
+            usdzMode: (formData.get('usdzMode') as 'file' | 'url') || undefined,
+            usdzUrl: (formData.get('usdz_url') as string) || undefined,
+            usdzFile: (usdzFileVal instanceof File && usdzFileVal.size > 0) ? usdzFileVal : undefined,
+            existingUsdzName: (formData.get('existingUsdzName') as string) || undefined,
+        };
+
+        const validatedResult = assetSchema.safeParse(rawFields);
+        if (!validatedResult.success) {
+            return { success: false, error: validatedResult.error.issues[0].message };
+        }
+
+        const data = validatedResult.data;
+
+        // --- CREATE INTENT ---
+        if (intent === 'create') {
+            const pbFormData = new FormData();
+            pbFormData.append('name', data.name.trim());
+
+            if (data.glbMode === 'file') {
+                if (data.glbFile) pbFormData.append('glb_file', data.glbFile);
+            } else {
+                pbFormData.append('glb_url', (data.glbUrl || '').trim());
+            }
+
+            if (data.usdzMode === 'file') {
+                if (data.usdzFile) pbFormData.append('usdz_file', data.usdzFile);
+            } else {
+                pbFormData.append('usdz_url', (data.usdzUrl || '').trim());
+            }
+
+            // Create record
+            const record = await pb.collection('ar_assets').create(pbFormData);
+
+            // Generate QR Code
+            const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
+            const qrImage = await QRCode.toDataURL(qrUrl, {
+                width: 512,
+                margin: 2,
+            });
+
+            const qrBlob = await (await fetch(qrImage)).blob();
+            const qrFormData = new FormData();
+            qrFormData.append('qr_url', qrUrl);
+            qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
+
+            // Update QR code fields
+            await pb.collection('ar_assets').update(record.id, qrFormData);
+            return { success: true, intent, message: 'New AR Asset created successfully' };
+        }
+
+        // --- UPDATE INTENT ---
+        if (intent === 'update') {
+            const id = data.id;
+            if (!id) throw new Error('Missing asset ID');
+
+            const pbFormData = new FormData();
+            pbFormData.append('name', data.name.trim());
+
+            if (data.glbMode === 'file') {
+                if (data.glbFile) {
+                    pbFormData.append('glb_file', data.glbFile);
+                }
+                pbFormData.append('glb_url', '');
+            } else {
+                pbFormData.append('glb_url', (data.glbUrl || '').trim());
+                pbFormData.append('glb_file', '');
+            }
+
+            if (data.usdzMode === 'file') {
+                if (data.usdzFile) {
+                    pbFormData.append('usdz_file', data.usdzFile);
+                } else if (!data.existingUsdzName) {
+                    pbFormData.append('usdz_file', '');
+                }
+                pbFormData.append('usdz_url', '');
+            } else {
+                pbFormData.append('usdz_url', (data.usdzUrl || '').trim());
+                pbFormData.append('usdz_file', '');
+            }
+
+            await pb.collection('ar_assets').update(id, pbFormData);
+            return { success: true, intent, message: 'Asset updated successfully' };
+        }
+
+        return { success: false, error: 'Invalid intent' };
+    } catch (err: any) {
+        console.error('Action failure:', err);
+        return { success: false, error: err?.message || 'Something went wrong' };
+    }
+}
+
+export function HydrateFallback() {
+    return (
+        <div className="fixed inset-0 bg-[#0D0D0D] flex flex-col items-center justify-center">
+            <div className="w-10 h-10 rounded-full border-2 border-orange-500/20 border-t-orange-500 animate-spin mb-4" />
+            <p className="text-white/40 text-xs tracking-widest uppercase animate-pulse">Loading Dashboard…</p>
+        </div>
+    );
+}
+
+export default function Dashboard() {
+    const navigate = useNavigate();
+    const { assets, page, totalPages, totalItems, error } = useLoaderData<typeof clientLoader>();
+    const actionData = useActionData<typeof clientAction>();
+    const submit = useSubmit();
+    const navigation = useNavigation();
+    const [, setSearchParams] = useSearchParams();
+
+    const [editingAsset, setEditingAsset] = useState<any | null>(null);
+    const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+    const glbInputRef = useRef<HTMLInputElement>(null);
+    const usdzInputRef = useRef<HTMLInputElement>(null);
+
+    const {
+        register,
+        handleSubmit,
+        control,
+        setValue,
+        watch,
+        reset,
+        formState: { errors },
+    } = useForm<FormValues>({
+        resolver: zodResolver(assetSchema),
+        defaultValues: DEFAULT_FORM_VALUES,
+    });
+
+    const glbMode = watch('glbMode');
+    const usdzMode = watch('usdzMode');
+    const existingGlbName = watch('existingGlbName');
+    const existingUsdzName = watch('existingUsdzName');
+
+    const isSubmitting = navigation.state !== 'idle';
+
+    const handleLogout = useCallback(() => {
+        pb.authStore.clear();
+        toast.success('Logged out successfully');
+        navigate('/login', { replace: true });
+    }, [navigate]);
+
+    const cancelEditing = useCallback(() => {
+        setEditingAsset(null);
+        reset(DEFAULT_FORM_VALUES);
+        if (glbInputRef.current) glbInputRef.current.value = '';
+        if (usdzInputRef.current) usdzInputRef.current.value = '';
+    }, [reset]);
+
+    const startEditing = useCallback((asset: any) => {
+        if (!asset) return;
+        setEditingAsset(asset);
+        reset({
+            id: asset.id,
+            name: asset.name || '',
+            glbMode: asset.glb_file ? 'file' : 'url',
+            glbUrl: asset.glb_file ? '' : (asset.glb_url || ''),
+            glbFile: null,
+            existingGlbName: asset.glb_file || '',
+            usdzMode: asset.usdz_file ? 'file' : 'url',
+            usdzUrl: asset.usdz_file ? '' : (asset.usdz_url || ''),
+            usdzFile: null,
+            existingUsdzName: asset.usdz_file || '',
+        });
+
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }, [reset]);
+
+    const handleDeleteConfirm = useCallback(() => {
+        if (!deleteTargetId) return;
+        const formData = new FormData();
+        formData.append('intent', 'delete');
+        formData.append('id', deleteTargetId);
+
+        submit(formData, { method: 'post' });
+
+        if (editingAsset?.id === deleteTargetId) {
+            cancelEditing();
+        }
+        setDeleteTargetId(null);
+    }, [deleteTargetId, submit, editingAsset, cancelEditing]);
+
+    const onSubmit = useCallback((data: FormValues) => {
+        const formData = new FormData();
+        formData.append('intent', editingAsset ? 'update' : 'create');
+        formData.append('name', data.name.trim());
+        formData.append('glbMode', data.glbMode);
+        formData.append('usdzMode', data.usdzMode);
+
+        if (editingAsset) {
+            formData.append('id', editingAsset.id);
+        }
+
+        // GLB
+        if (data.glbMode === 'file') {
+            if (data.glbFile) {
+                formData.append('glb_file', data.glbFile);
+            }
+            formData.append('existingGlbName', data.existingGlbName || '');
+        } else {
+            formData.append('glb_url', (data.glbUrl || '').trim());
+        }
+
+        // USDZ
+        if (data.usdzMode === 'file') {
+            if (data.usdzFile) {
+                formData.append('usdz_file', data.usdzFile);
+            } else {
+                formData.append('existingUsdzName', data.existingUsdzName || '');
+            }
+        } else {
+            formData.append('usdz_url', (data.usdzUrl || '').trim());
+        }
+
+        submit(formData, { method: 'post', encType: 'multipart/form-data' });
+    }, [editingAsset, submit]);
+
+    const handlePageChange = useCallback((pageNum: number) => {
+        setSearchParams({ page: pageNum.toString() });
+    }, [setSearchParams]);
+
+    useEffect(() => {
+        if (error) {
+            toast.error(error);
+        }
+    }, [error]);
+
+    useEffect(() => {
+        if (actionData) {
+            if (actionData.success) {
+                toast.success(actionData.message);
+                if (actionData.intent === 'create' || actionData.intent === 'update') {
+                    cancelEditing();
+                }
+            } else if (actionData.error) {
+                toast.error(actionData.error);
+            }
+        }
+    }, [actionData, cancelEditing]);
+
+    return (
+        <div className='min-h-screen bg-[#0D0D0D] text-white px-6 py-10 font-sans selection:bg-orange-500/20'>
+            <div className='mx-auto max-w-5xl space-y-10'>
+                <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-neutral-900 pb-6'>
+                    <div className='flex items-center gap-4'>
+                        <div className="w-10 h-10 bg-black border border-neutral-800 rounded-xl flex items-center justify-center shrink-0">
+                            <span className="text-orange-500 font-extrabold text-2xl pl-0.5 select-none">t.</span>
+                        </div>
+                        <div>
+                            <h1 className='text-2xl font-bold tracking-tight text-white'>
+                                AR Asset Dashboard
+                            </h1>
+                            <p className='text-xs text-neutral-500 mt-0.5 uppercase tracking-wider'>
+                                Manage 3D assets and generate AR QR codes
+                            </p>
+                        </div>
+                    </div>
+                    <div className='flex items-center gap-3'>
+                        {pb.authStore.model?.email && (
+                            <Badge variant="orange" className="lowercase tracking-normal font-medium">
+                                {pb.authStore.model.email}
+                            </Badge>
+                        )}
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleLogout}
+                            className="h-9 gap-1.5"
+                        >
+                            <LogOut size={14} />
+                            <span>Sign Out</span>
+                        </Button>
+                    </div>
+                </div>
+
+                <form
+                    onSubmit={handleSubmit(onSubmit)}
+                    className='rounded-2xl bg-[#121212] border border-neutral-900 p-6 shadow-2xl transition-all duration-300'
+                >
+                    <div className='flex items-center justify-between mb-6'>
+                        <h2 className='text-base font-bold text-white uppercase tracking-wider text-orange-500'>
+                            {editingAsset ? `Edit Asset: ${editingAsset.name}` : 'Create New Asset'}
+                        </h2>
+                        {editingAsset && (
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={cancelEditing}
+                                className="h-8 hover:bg-neutral-800 text-neutral-400 hover:text-white"
+                            >
+                                <X size={13} />
+                                <span>Cancel Edit</span>
+                            </Button>
+                        )}
+                    </div>
+
+                    <div className='space-y-5'>
+                        <div className='space-y-1.5'>
+                            <Label className='ml-1'>
+                                Asset Name
+                            </Label>
+                            <Input
+                                placeholder='Enter asset name'
+                                {...register('name')}
+                            />
+                            {errors.name && (
+                                <span className="text-[11px] font-semibold text-red-500 ml-1 block tracking-wide">
+                                    {errors.name.message}
+                                </span>
+                            )}
+                        </div>
+
+                        {/* GLB — Android / Web */}
+                        <div className='space-y-1.5'>
+                            <Controller
+                                name="glbFile"
+                                control={control}
+                                render={({ field }) => (
+                                    <FileOrUrlField
+                                        label='GLB File (Android / Web)'
+                                        required
+                                        mode={glbMode}
+                                        onModeChange={(mode) => setValue('glbMode', mode, { shouldValidate: true })}
+                                        accept='.glb'
+                                        file={field.value}
+                                        onFileChange={field.onChange}
+                                        inputRef={glbInputRef}
+                                        url={watch('glbUrl') || ''}
+                                        onUrlChange={(val) => setValue('glbUrl', val, { shouldValidate: true })}
+                                        urlPlaceholder='https://example.com/model.glb'
+                                        existingFileName={existingGlbName}
+                                        onClearExistingFile={() => setValue('existingGlbName', '', { shouldValidate: true })}
+                                    />
+                                )}
+                            />
+                            {errors.glbFile && (
+                                <span className="text-[11px] font-semibold text-red-500 ml-1 block tracking-wide">
+                                    {errors.glbFile.message as string}
+                                </span>
+                            )}
+                            {errors.glbUrl && (
+                                <span className="text-[11px] font-semibold text-red-500 ml-1 block tracking-wide">
+                                    {errors.glbUrl.message}
+                                </span>
+                            )}
+                        </div>
+
+                        {/* USDZ — iOS */}
+                        <div className='space-y-1.5'>
+                            <Controller
+                                name="usdzFile"
+                                control={control}
+                                render={({ field }) => (
+                                    <FileOrUrlField
+                                        label='USDZ File (iOS) — Optional'
+                                        mode={usdzMode}
+                                        onModeChange={(mode) => setValue('usdzMode', mode, { shouldValidate: true })}
+                                        accept='.usdz,.reality'
+                                        file={field.value}
+                                        onFileChange={field.onChange}
+                                        inputRef={usdzInputRef}
+                                        url={watch('usdzUrl') || ''}
+                                        onUrlChange={(val) => setValue('usdzUrl', val, { shouldValidate: true })}
+                                        urlPlaceholder='https://example.com/model.usdz'
+                                        existingFileName={existingUsdzName}
+                                        onClearExistingFile={() => setValue('existingUsdzName', '', { shouldValidate: true })}
+                                    />
+                                )}
+                            />
+                            {errors.usdzFile && (
+                                <span className="text-[11px] font-semibold text-red-500 ml-1 block tracking-wide">
+                                    {errors.usdzFile.message as string}
+                                </span>
+                            )}
+                            {errors.usdzUrl && (
+                                <span className="text-[11px] font-semibold text-red-500 ml-1 block tracking-wide">
+                                    {errors.usdzUrl.message}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+
+                    <div className='mt-6 flex items-center gap-3'>
+                        <Button
+                            type="submit"
+                            disabled={isSubmitting}
+                            className="w-full sm:w-auto h-11"
+                        >
+                            {isSubmitting ? (
+                                <>
+                                    <RefreshCw size={14} className="animate-spin text-black" />
+                                    <span>Saving Asset…</span>
+                                </>
+                            ) : editingAsset ? (
+                                'Save Changes'
+                            ) : (
+                                'Create Asset'
+                            )}
+                        </Button>
+                        {editingAsset && (
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                onClick={cancelEditing}
+                                className="hidden sm:inline-flex h-11"
+                            >
+                                Cancel
+                            </Button>
+                        )}
+                    </div>
+                </form>
+
+                <div>
+                    <h2 className='mb-5 text-base font-bold text-neutral-400 uppercase tracking-wider ml-1'>
+                        Generated Assets
+                    </h2>
+
+                    {assets.length === 0 ? (
+                        <div className="text-center py-12 rounded-2xl bg-[#121212]/50 border border-dashed border-neutral-800">
+                            <FileCode size={36} className="mx-auto text-neutral-600 mb-3" />
+                            <p className='text-sm text-neutral-500'>
+                                No assets created yet. Upload a model above to get started.
+                            </p>
+                        </div>
+                    ) : (
+                        <div className='space-y-6'>
+                            <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
+                                {assets.map((asset) => {
+                                    if (!asset) return null;
+                                    return (
+                                        <Card
+                                            key={asset.id}
+                                            className='group p-5 hover:border-orange-500/30 flex flex-col justify-between'
+                                        >
+                                            <div className='flex items-start justify-between gap-3 mb-4'>
+                                                <h3 className='text-sm font-bold text-white group-hover:text-orange-500 transition-colors truncate flex-1 mt-1'>
+                                                    {asset.name || 'Unnamed Asset'}
+                                                </h3>
+                                                <div className='flex items-center gap-1 select-none'>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => startEditing(asset)}
+                                                        className='p-1.5 rounded-lg text-neutral-500 hover:text-orange-500 hover:bg-neutral-800/80 transition-all cursor-pointer'
+                                                        title='Edit Asset'
+                                                    >
+                                                        <Edit2 size={13} />
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => setDeleteTargetId(asset.id)}
+                                                        className='p-1.5 rounded-lg text-neutral-500 hover:text-red-500 hover:bg-neutral-800/80 transition-all cursor-pointer'
+                                                        title='Delete Asset'
+                                                    >
+                                                        <Trash2 size={13} />
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            <div
+                                                onClick={() => navigate('/preview/' + asset.id)}
+                                                className="relative bg-white p-3.5 rounded-xl flex items-center justify-center max-w-[190px] w-full mx-auto shadow-md cursor-pointer hover:scale-[1.03] transition-transform duration-200 group/qr"
+                                            >
+                                                <div className="absolute inset-0 bg-black/60 rounded-xl opacity-0 group-hover/qr:opacity-100 flex flex-col items-center justify-center gap-1.5 transition-opacity duration-200">
+                                                    <Eye size={20} className="text-orange-500 animate-bounce" />
+                                                    <span className="text-[10px] font-bold text-white uppercase tracking-wider">Preview 3D & QR</span>
+                                                </div>
+
+                                                {asset.qr_image ? (
+                                                    <img
+                                                        src={pb.files.getURL(asset, asset.qr_image)}
+                                                        alt={asset.name}
+                                                        className='w-full aspect-square rounded-lg object-contain'
+                                                    />
+                                                ) : (
+                                                    asset.qr_file ? (
+                                                        <img
+                                                            src={pb.files.getURL(asset, asset.qr_file)}
+                                                            alt={asset.name}
+                                                            className='w-full aspect-square rounded-lg object-contain'
+                                                        />
+                                                    ) : (
+                                                        <div className='flex aspect-square w-full flex-col items-center justify-center space-y-2 text-neutral-400 bg-neutral-100 rounded-lg p-4'>
+                                                            <ImageOff size={28} strokeWidth={1.5} className="text-neutral-400" />
+                                                            <span className='text-[10px] font-semibold uppercase tracking-wider text-neutral-500'>No QR Image</span>
+                                                        </div>
+                                                    )
+                                                )}
+                                            </div>
+                                        </Card>
+                                    );
+                                })}
+                            </div>
+
+                            {totalPages > 1 && (
+                                <div className="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-neutral-900 pt-6">
+                                    <span className="text-xs text-neutral-500 select-none font-medium">
+                                        Showing {Math.min((page - 1) * 10 + 1, totalItems)} to {Math.min(page * 10, totalItems)} of {totalItems} assets
+                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            disabled={page === 1}
+                                            onClick={() => handlePageChange(page - 1)}
+                                            className="px-3"
+                                        >
+                                            Previous
+                                        </Button>
+                                        {getPaginationRange(page, totalPages).map((pageNum, idx) => {
+                                            if (pageNum === '...') {
+                                                return (
+                                                    <span key={`ellipsis-${idx}`} className="text-neutral-600 px-2 select-none">
+                                                        …
+                                                    </span>
+                                                );
+                                            }
+                                            return (
+                                                <Button
+                                                    type="button"
+                                                    key={pageNum}
+                                                    variant={page === pageNum ? "default" : "outline"}
+                                                    size="sm"
+                                                    className="w-9 h-9 p-0"
+                                                    onClick={() => handlePageChange(pageNum as number)}
+                                                >
+                                                    {pageNum}
+                                                </Button>
+                                            );
+                                        })}
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            disabled={page === totalPages}
+                                            onClick={() => handlePageChange(page + 1)}
+                                            className="px-3"
+                                        >
+                                            Next
+                                        </Button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            <ConfirmDialog
+                open={!!deleteTargetId}
+                onOpenChange={(open) => !open && setDeleteTargetId(null)}
+                title="Delete 3D Asset"
+                description="Are you sure you want to delete this asset? This action cannot be undone and will permanently delete the model files."
+                confirmText="Delete Asset"
+                variant="destructive"
+                onConfirm={handleDeleteConfirm}
+            />
+        </div>
+    );
+}

app/routes/admin/login.tsx

@@ -1,52 +1,91 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useSubmit, useNavigation, useActionData, useNavigate, redirect } from 'react-router';
+import type { Route } from './+types/login';
 import { pb } from '~/lib/pocketbase';
 import { Lock, Mail, Eye, EyeOff, Loader2, ArrowRight } from 'lucide-react';
+import { Input } from '~/components/ui/input';
+import { Button } from '~/components/ui/button';
+import { Label } from '~/components/ui/label';
+import { Card } from '~/components/ui/card';
+import { toast } from 'sonner';
+
+export async function clientLoader() {
+    if (pb.authStore.isValid) {
+        return redirect('/');
+    }
+    return null;
+}
+
+export async function clientAction({ request }: Route.ClientActionArgs) {
+    const formData = await request.formData();
+    const email = formData.get('email') as string;
+    const password = formData.get('password') as string;
+
+    if (!email || !password) {
+        return { error: 'Please enter both email and password' };
+    }
+
+    try {
+        await pb.collection('users').authWithPassword(email, password);
+        return redirect('/');
+    } catch (err: any) {
+        return { error: err?.message || 'Invalid email or password' };
+    }
+}
 
 export default function Login() {
     const navigate = useNavigate();
+    const submit = useSubmit();
+    const navigation = useNavigation();
+    const actionData = useActionData<typeof clientAction>();
+
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [showPassword, setShowPassword] = useState(false);
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(false);
+    const [localError, setLocalError] = useState('');
 
-    // If already logged in, redirect to dashboard
+    const isLoading = navigation.state !== 'idle';
+
+    // Already-authenticated redirect fallback
     useEffect(() => {
         if (pb.authStore.isValid) {
             navigate('/', { replace: true });
         }
     }, [navigate]);
 
-    const handleLogin = async (e: React.FormEvent) => {
+    // Handle authentication feedback
+    useEffect(() => {
+        if (actionData) {
+            if (actionData.error) {
+                setLocalError(actionData.error);
+                toast.error(actionData.error);
+            } else {
+                toast.success('Logged in successfully');
+            }
+        }
+    }, [actionData]);
+
+    const handleLogin = (e: React.FormEvent) => {
         e.preventDefault();
         if (!email || !password) {
-            setError('Please enter both email and password');
+            setLocalError('Please enter both email and password');
             return;
         }
 
-        setLoading(true);
-        setError('');
+        setLocalError('');
+        const formData = new FormData();
+        formData.append('email', email);
+        formData.append('password', password);
 
-        try {
-            await pb.collection('users').authWithPassword(email, password);
-            navigate('/', { replace: true });
-        } catch (err: any) {
-            setError(err?.message || 'Invalid email or password');
-        } finally {
-            setLoading(false);
-        }
+        submit(formData, { method: 'post' });
     };
 
     return (
         <div className="relative min-h-screen bg-[#0D0D0D] flex items-center justify-center p-4 overflow-hidden select-none font-sans text-white">
-            {/* Background Decorative Orange Glow */}
             <div className="absolute top-[20%] left-[30%] w-[40%] h-[40%] rounded-full bg-orange-500/5 blur-[130px] pointer-events-none" />
 
             <div className="w-full max-w-md relative z-10">
-                {/* Logo & Header */}
                 <div className="text-center mb-8">
-                    {/* Logo styled exactly like the AR Viewer top-right logo */}
                     <div className="inline-flex w-14 h-14 bg-black border border-neutral-800 rounded-2xl items-center justify-center shadow-lg shadow-black mb-4">
                         <span className="text-orange-500 font-extrabold text-3xl pl-1 select-none">t.</span>
                     </div>
@@ -56,28 +95,27 @@ export default function Login() {
                     </p>
                 </div>
 
-                {/* Login Card */}
-                <div className="bg-[#121212] border border-neutral-900 rounded-2xl p-8 shadow-2xl">
+                <Card className="p-8 shadow-2xl">
                     <form onSubmit={handleLogin} className="space-y-6">
-                        {error && (
+                        {(localError || actionData?.error) && (
                             <div className="p-4 bg-red-500/10 border border-red-500/25 rounded-xl text-red-400 text-xs font-semibold text-center uppercase tracking-wider">
-                                {error}
+                                {localError || actionData?.error}
                             </div>
                         )}
 
-                        {/* Email Input */}
                         <div className="space-y-1.5">
-                            <label className="text-xs font-bold text-neutral-400 uppercase tracking-wider ml-1">
+                            <Label className="ml-1">
                                 Email Address
-                            </label>
+                            </Label>
                             <div className="relative">
                                 <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
                                     <Mail size={16} />
                                 </span>
-                                <input
+                                <Input
                                     type="email"
+                                    name="email"
                                     required
-                                    className="w-full bg-[#181818] border border-neutral-800 rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder-neutral-700 focus:border-orange-500 focus:outline-none transition-colors duration-200"
+                                    className="pl-10"
                                     placeholder="admin@thob.studio"
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
@@ -85,19 +123,19 @@ export default function Login() {
                             </div>
                         </div>
 
-                        {/* Password Input */}
                         <div className="space-y-1.5">
-                            <label className="text-xs font-bold text-neutral-400 uppercase tracking-wider ml-1">
+                            <Label className="ml-1">
                                 Password
-                            </label>
+                            </Label>
                             <div className="relative">
                                 <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
                                     <Lock size={16} />
                                 </span>
-                                <input
+                                <Input
                                     type={showPassword ? 'text' : 'password'}
+                                    name="password"
                                     required
-                                    className="w-full bg-[#181818] border border-neutral-800 rounded-xl pl-10 pr-10 py-3 text-sm text-white placeholder-neutral-700 focus:border-orange-500 focus:outline-none transition-colors duration-200"
+                                    className="pl-10 pr-10"
                                     placeholder="••••••••"
                                     value={password}
                                     onChange={(e) => setPassword(e.target.value)}
@@ -112,23 +150,22 @@ export default function Login() {
                             </div>
                         </div>
 
-                        {/* Submit Button */}
-                        <button
+                        <Button
                             type="submit"
-                            disabled={loading}
-                            className="w-full flex items-center justify-center gap-2 bg-orange-500 hover:bg-orange-400 text-black font-bold uppercase tracking-wider py-3.5 px-4 rounded-xl shadow-[0_0_24px_rgba(249,115,22,0.15)] hover:shadow-[0_0_32px_rgba(249,115,22,0.3)] active:scale-[0.98] transition-all duration-200 disabled:opacity-55 disabled:pointer-events-none cursor-pointer text-sm"
+                            disabled={isLoading}
+                            className="w-full py-6 text-sm font-bold uppercase tracking-wider"
                         >
-                            {loading ? (
-                                <Loader2 size={16} className="animate-spin" />
+                            {isLoading ? (
+                                <Loader2 size={16} className="animate-spin text-black" />
                             ) : (
                                 <>
                                     <span>Sign In</span>
                                     <ArrowRight size={15} />
                                 </>
                             )}
-                        </button>
+                        </Button>
                     </form>
-                </div>
+                </Card>
 
                 <div className="mt-8 text-center text-[10px] text-neutral-700 uppercase tracking-widest">
                     SYSTEM IP MONITORED SECURE PORTAL

app/routes/ar/ar-viewer.tsx

@@ -4,48 +4,7 @@ import { useParams } from 'react-router';
 import { Box } from 'lucide-react';
 import { pb } from '~/lib/pocketbase';
 
-// --- A-FRAME/AR.JS CUSTOM ELEMENTS TYPING FIX ---
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'a-scene': any;
-            'a-assets': any;
-            'a-asset-item': any;
-            'a-marker': any;
-            'a-entity': any;
-            'a-text': any;
-            'model-viewer': React.DetailedHTMLProps<
-                React.HTMLAttributes<HTMLElement>,
-                HTMLElement
-            > & {
-                src?: string;
-                'ios-src'?: string;
-                ar?: boolean;
-                'ar-modes'?: string;
-                'ar-scale'?: string;
-                'ar-placement'?: string;
-                'camera-controls'?: boolean;
-                'touch-action'?: string;
-                alt?: string;
-                'shadow-intensity'?: string | number;
-                'shadow-softness'?: string | number;
-                exposure?: string | number;
-                'interaction-prompt'?: string;
-                'min-camera-orbit'?: string;
-                'max-camera-orbit'?: string;
-                'camera-orbit'?: string;
-                'field-of-view'?: string;
-                scale?: string;
-                'auto-rotate'?: boolean;
-                'rotation-per-second'?: string;
-                onLoad?: (e: any) => void;
-                'onAr-status'?: (e: any) => void;
-                'onModel-visibility'?: (e: any) => void;
-                'onCamera-change'?: (e: any) => void;
-            };
-        }
-    }
-}
+
 
 const AR_HINTS = [
     'Arranging models to view…',
@@ -69,9 +28,7 @@ export default function ARViewer() {
     useEffect(() => {
         if (!id) return;
         const loadAsset = async () => {
-            // const response = await fetch(`https://thobapi.bopconsultancy.com/v2/ar-assets/${id}`);
             const data = await pb.collection('ar_assets').getOne(id);
-            // const data = await response.json();
             setAsset(data);
         };
         loadAsset();

app/routes/dashboard.tsx

@@ -1,277 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
-import QRCode from 'qrcode';
-import { pb } from '~/lib/pocketbase';
-import { ImageOff, LogOut, FileCode } from 'lucide-react';
-import { FileOrUrlField, type InputMode } from '~/components/FileOrUrlField';
-
-export default function Dashboard() {
-    const navigate = useNavigate();
-    const [authCheckComplete, setAuthCheckComplete] = useState(false);
-    const [name, setName] = useState('');
-
-    // GLB
-    const [glbMode, setGlbMode] = useState<InputMode>('file');
-    const [glbUrl, setGlbUrl] = useState('');
-    const [glbFile, setGlbFile] = useState<File | null>(null);
-    const glbInputRef = useRef<HTMLInputElement>(null);
-
-    // USDZ
-    const [usdzMode, setUsdzMode] = useState<InputMode>('file');
-    const [usdzUrl, setUsdzUrl] = useState('');
-    const [usdzFile, setUsdzFile] = useState<File | null>(null);
-    const usdzInputRef = useRef<HTMLInputElement>(null);
-
-    const [assets, setAssets] = useState<any[]>([]);
-    const [loading, setLoading] = useState(false);
-
-    const fetchAssets = async () => {
-        try {
-            const records = await pb.collection('ar_assets').getFullList({
-                sort: '-created',
-            });
-            setAssets(records);
-        } catch (err) {
-            console.error('Failed to fetch assets:', err);
-            setAssets([]);
-        }
-    };
-
-    useEffect(() => {
-        if (!pb.authStore.isValid) {
-            navigate('/login', { replace: true });
-        } else {
-            setAuthCheckComplete(true);
-            fetchAssets();
-        }
-    }, [navigate]);
-
-    const handleLogout = () => {
-        pb.authStore.clear();
-        navigate('/login', { replace: true });
-    };
-
-    const createAsset = async () => {
-        const hasGlb = glbMode === 'file' ? !!glbFile : !!glbUrl.trim();
-        if (!name.trim() || !hasGlb) {
-            alert('Please provide a name and a GLB file or URL');
-            return;
-        }
-
-        setLoading(true);
-
-        try {
-            const formData = new FormData();
-            formData.append('name', name.trim());
-
-            if (glbMode === 'file' && glbFile) {
-                formData.append('glb_file', glbFile);
-            } else {
-                formData.append('glb_url', glbUrl.trim());
-            }
-
-            if (usdzMode === 'file' && usdzFile) {
-                formData.append('usdz_file', usdzFile);
-            } else if (usdzMode === 'url' && usdzUrl.trim()) {
-                formData.append('usdz_url', usdzUrl.trim());
-            }
-
-            const record = await pb.collection('ar_assets').create(formData);
-
-            const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
-
-            const qrImage = await QRCode.toDataURL(qrUrl, {
-                width: 512,
-                margin: 2,
-            });
-
-            const qrBlob = await (await fetch(qrImage)).blob();
-
-            const qrFormData = new FormData();
-            qrFormData.append('qr_url', qrUrl);
-            qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
-
-            await pb.collection('ar_assets').update(record.id, qrFormData);
-
-            // Reset all fields
-            setName('');
-            setGlbUrl('');
-            setGlbFile(null);
-            setUsdzUrl('');
-            setUsdzFile(null);
-            if (glbInputRef.current) glbInputRef.current.value = '';
-            if (usdzInputRef.current) usdzInputRef.current.value = '';
-
-            fetchAssets();
-        } catch (err: any) {
-            alert(err?.message || 'Failed to create asset');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (!authCheckComplete) {
-        return (
-            <div className="fixed inset-0 bg-[#0D0D0D] flex flex-col items-center justify-center">
-                <div className="w-10 h-10 rounded-full border-2 border-orange-500/20 border-t-orange-500 animate-spin mb-4" />
-                <p className="text-white/40 text-xs tracking-widest uppercase">Checking authorization…</p>
-            </div>
-        );
-    }
-
-    return (
-        <div className='min-h-screen bg-[#0D0D0D] text-white px-6 py-10 font-sans selection:bg-orange-500/20'>
-            <div className='mx-auto max-w-5xl space-y-10'>
-                {/* Header */}
-                <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-neutral-900 pb-6'>
-                    <div className='flex items-center gap-4'>
-                        <div className="w-10 h-10 bg-black border border-neutral-800 rounded-xl flex items-center justify-center shrink-0">
-                            <span className="text-orange-500 font-extrabold text-2xl pl-0.5 select-none">t.</span>
-                        </div>
-                        <div>
-                            <h1 className='text-2xl font-bold tracking-tight text-white'>
-                                AR Asset Dashboard
-                            </h1>
-                            <p className='text-xs text-neutral-500 mt-0.5 uppercase tracking-wider'>
-                                Manage 3D assets and generate AR QR codes
-                            </p>
-                        </div>
-                    </div>
-                    <div className='flex items-center gap-3'>
-                        {pb.authStore.model?.email && (
-                            <span className='text-xs text-orange-500 border border-orange-500/20 bg-orange-500/5 px-3 py-1.5 rounded-full font-semibold select-none'>
-                                {pb.authStore.model.email}
-                            </span>
-                        )}
-                        <button
-                            onClick={handleLogout}
-                            className='inline-flex items-center gap-2 rounded-xl bg-[#121212] border border-neutral-800 px-4 py-2 text-sm font-medium text-neutral-400 hover:text-white hover:border-orange-500/50 hover:bg-neutral-900 shadow-sm transition-all duration-200 cursor-pointer'
-                        >
-                            <LogOut size={15} />
-                            <span>Sign Out</span>
-                        </button>
-                    </div>
-                </div>
-
-                {/* Form Card */}
-                <div className='rounded-2xl bg-[#121212] border border-neutral-900 p-6 shadow-2xl'>
-                    <h2 className='mb-5 text-base font-bold text-white uppercase tracking-wider text-orange-500'>
-                        Create New Asset
-                    </h2>
-
-                    <div className='space-y-5'>
-                        {/* Asset Name */}
-                        <div className='space-y-1.5'>
-                            <label className='text-xs font-bold text-neutral-400 uppercase tracking-wider ml-1'>
-                                Asset Name
-                            </label>
-                            <input
-                                className='w-full bg-[#181818] border border-neutral-800 rounded-xl px-4 py-3 text-sm text-white placeholder-neutral-600 focus:border-orange-500 focus:outline-none transition-colors duration-200'
-                                placeholder='Enter asset name'
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                            />
-                        </div>
-
-                        {/* GLB — Android / Web */}
-                        <FileOrUrlField
-                            label='GLB File (Android / Web)'
-                            required
-                            mode={glbMode}
-                            onModeChange={setGlbMode}
-                            accept='.glb'
-                            file={glbFile}
-                            onFileChange={setGlbFile}
-                            inputRef={glbInputRef}
-                            url={glbUrl}
-                            onUrlChange={setGlbUrl}
-                            urlPlaceholder='https://example.com/model.glb'
-                        />
-
-                        {/* USDZ — iOS */}
-                        <FileOrUrlField
-                            label='USDZ File (iOS) — Optional'
-                            mode={usdzMode}
-                            onModeChange={setUsdzMode}
-                            accept='.usdz,.reality'
-                            file={usdzFile}
-                            onFileChange={setUsdzFile}
-                            inputRef={usdzInputRef}
-                            url={usdzUrl}
-                            onUrlChange={setUsdzUrl}
-                            urlPlaceholder='https://example.com/model.usdz'
-                        />
-                    </div>
-
-                    <button
-                        onClick={createAsset}
-                        disabled={loading}
-                        className='mt-6 w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-xl bg-orange-500 px-6 py-3 text-sm font-bold text-black hover:bg-orange-400 shadow-[0_0_24px_rgba(249,115,22,0.2)] hover:shadow-[0_0_32px_rgba(249,115,22,0.35)] transition-all duration-200 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none'
-                    >
-                        {loading ? (
-                            <>
-                                <div className='w-3.5 h-3.5 rounded-full border-2 border-black/30 border-t-black animate-spin' />
-                                Creating Asset…
-                            </>
-                        ) : 'Create Asset'}
-                    </button>
-                </div>
-
-                {/* Grid Header */}
-                <div>
-                    <h2 className='mb-5 text-base font-bold text-neutral-400 uppercase tracking-wider ml-1'>
-                        Generated Assets
-                    </h2>
-
-                    {assets.length === 0 ? (
-                        <div className="text-center py-12 rounded-2xl bg-[#121212]/50 border border-dashed border-neutral-800">
-                            <FileCode size={36} className="mx-auto text-neutral-600 mb-3" />
-                            <p className='text-sm text-neutral-500'>
-                                No assets created yet. Upload a model above to get started.
-                            </p>
-                        </div>
-                    ) : (
-                        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
-                            {assets.map((asset) => (
-                                <div
-                                    key={asset.id}
-                                    className='group rounded-2xl bg-gradient-to-b from-[#141414] to-[#0D0D0D] border border-neutral-900 p-5 hover:border-orange-500/30 transition-all duration-300 shadow-lg'
-                                >
-                                    <h3 className='mb-4 text-sm font-bold text-white group-hover:text-orange-500 transition-colors truncate'>
-                                        {asset?.name}
-                                    </h3>
-
-                                    <div className="bg-white p-3.5 rounded-xl flex items-center justify-center max-w-[190px] mx-auto shadow-md">
-                                        {asset?.qr_image ? (
-                                            <img
-                                                src={pb.files.getURL(asset, asset.qr_image)}
-                                                alt={asset?.name}
-                                                className='w-full aspect-square rounded-lg object-contain'
-                                            />
-                                        ) : (
-                                            asset?.qr_file ? (
-                                                <img
-                                                    src={pb.files.getURL(asset, asset.qr_file)}
-                                                    alt={asset?.name}
-                                                    className='w-full aspect-square rounded-lg object-contain'
-                                                />
-                                            ) : (
-                                                <div className='flex aspect-square w-full flex-col items-center justify-center space-y-2 text-neutral-400 bg-neutral-100 rounded-lg p-4'>
-                                                    <ImageOff size={28} strokeWidth={1.5} className="text-neutral-400" />
-                                                    <span className='text-[10px] font-semibold uppercase tracking-wider text-neutral-500'>No QR Image</span>
-                                                </div>
-                                            )
-                                        )}
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}
-

app/routes/not-found.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-router';
+import { Button } from '~/components/ui/button';
+import { Card } from '~/components/ui/card';
+import { Badge } from '~/components/ui/badge';
+import { FileQuestion } from 'lucide-react';
+
+export default function NotFound() {
+    return (
+        <div className="relative min-h-screen bg-[#0D0D0D] flex items-center justify-center p-6 overflow-hidden select-none font-sans text-white">
+            <div className="absolute top-[30%] left-[30%] w-[40%] h-[40%] rounded-full bg-orange-500/5 blur-[130px] pointer-events-none" />
+
+            <Card className="p-6 text-center border-neutral-850 shadow-2xl relative z-10 space-y-4 max-w-xs">
+                <div className="inline-flex w-12 h-12 bg-neutral-900 border border-neutral-850 rounded-xl items-center justify-center shadow-md mb-2">
+                    <FileQuestion className="text-orange-500" size={22} />
+                </div>
+                <div className="space-y-1">
+                    <Badge variant="orange">404 Error</Badge>
+                    <h1 className="text-lg font-bold text-white uppercase tracking-tight mt-2">Page Not Found</h1>
+                </div>
+                <p className="text-neutral-500 text-[11px] leading-relaxed max-w-[240px] mx-auto">
+                    The page you are looking for does not exist or has been moved.
+                </p>
+                <div className="pt-3">
+                    <Link to="/" className="block w-full">
+                        <Button size="sm" className="w-full font-bold uppercase tracking-wider text-[10px] py-4 h-10">
+                            Return to Dashboard
+                        </Button>
+                    </Link>
+                </div>
+            </Card>
+        </div>
+    );
+}

package.json

@@ -9,15 +9,24 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-dialog": "^1.1.20",
+    "@radix-ui/react-slot": "^1.3.0",
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "isbot": "^5.1.31",
     "lucide-react": "^0.555.0",
     "pocketbase": "^0.26.8",
     "qrcode": "^1.5.4",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.9.2"
+    "react-hook-form": "^7.82.0",
+    "react-router": "^7.9.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@react-router/dev": "^7.9.2",

yarn.lock

@@ -399,6 +399,13 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz#0eaf705c941a218a43dba8e09f1df1d6cd2f1f17"
   integrity sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==
 
+"@hookform/resolvers@^5.4.0":
+  version "5.5.7"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-5.5.7.tgz#03cf4283686490c0747c828afb94d3cfc63b2d4d"
+  integrity sha512-CyPCYV8/KlXfEXLWj8HHHhVsR/IZ6Ckm3b/a4fWtO/lRnRK1huqncb8LlAWrmpPRsse5glF5aVuDRMHEr3UGag==
+  dependencies:
+    "@standard-schema/utils" "^0.3.0"
+
 "@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
@@ -447,6 +454,129 @@
     "@emnapi/runtime" "^1.7.1"
     "@tybys/wasm-util" "^0.10.1"
 
+"@radix-ui/primitive@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.7.tgz#0d0929d20299f60b0cd8a0deafad79f8048f9306"
+  integrity sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==
+
+"@radix-ui/react-compose-refs@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz#883e642c5ec0ba393dd1bf586e7e772985770d87"
+  integrity sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==
+
+"@radix-ui/react-context@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.2.2.tgz#fe2548e98465f5f9b776c5953de35d04a8919b6b"
+  integrity sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==
+
+"@radix-ui/react-dialog@^1.1.20":
+  version "1.1.23"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz#b7d8e83a3ccf97e46f3c3f477a0bf563f0de8239"
+  integrity sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.5"
+    "@radix-ui/react-context" "1.2.2"
+    "@radix-ui/react-dismissable-layer" "1.1.19"
+    "@radix-ui/react-focus-guards" "1.1.6"
+    "@radix-ui/react-focus-scope" "1.1.16"
+    "@radix-ui/react-id" "1.1.4"
+    "@radix-ui/react-portal" "1.1.17"
+    "@radix-ui/react-presence" "1.1.10"
+    "@radix-ui/react-primitive" "2.1.10"
+    "@radix-ui/react-slot" "1.3.3"
+    "@radix-ui/react-use-controllable-state" "1.2.6"
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.7.2"
+
+"@radix-ui/react-dismissable-layer@1.1.19":
+  version "1.1.19"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz#ef64a08943bdf04e00996f55472456353014fa68"
+  integrity sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.10"
+    "@radix-ui/react-use-callback-ref" "1.1.4"
+    "@radix-ui/react-use-effect-event" "0.0.5"
+
+"@radix-ui/react-focus-guards@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz#853985fb77fb7f6f65ab2e4750d1cfde9c702e36"
+  integrity sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==
+
+"@radix-ui/react-focus-scope@1.1.16":
+  version "1.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz#1221498b222efaae678a25ae4b81025c5feda195"
+  integrity sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.10"
+    "@radix-ui/react-use-callback-ref" "1.1.4"
+
+"@radix-ui/react-id@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.4.tgz#e642714bdaf551c1bfacbe51508ed843a3a27980"
+  integrity sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+
+"@radix-ui/react-portal@1.1.17":
+  version "1.1.17"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.17.tgz#f3b60bb5d78f12143e17553c45ed0506b026ec18"
+  integrity sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.10"
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+
+"@radix-ui/react-presence@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.10.tgz#49041cb9c41c3e8d1791d6b96a1d3bcd8429a151"
+  integrity sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+
+"@radix-ui/react-primitive@2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz#292b7476499d17227f337c8d1c59f270c683842a"
+  integrity sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==
+  dependencies:
+    "@radix-ui/react-slot" "1.3.3"
+
+"@radix-ui/react-slot@1.3.3", "@radix-ui/react-slot@^1.3.0":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.3.3.tgz#ccc8c8936fff12f7e324d6917fe5167357097676"
+  integrity sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.5"
+
+"@radix-ui/react-use-callback-ref@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz#1e55d37148e60a3f47de4bc7ea7cff6fa3f425ae"
+  integrity sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==
+
+"@radix-ui/react-use-controllable-state@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz#0f109eff004c3c1ff5f9709570f45dee9955513e"
+  integrity sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.7"
+    "@radix-ui/react-use-effect-event" "0.0.5"
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+
+"@radix-ui/react-use-effect-event@0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz#7732a4ae6bc032c7f654e658203df92d3520f8d1"
+  integrity sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.4"
+
+"@radix-ui/react-use-layout-effect@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz#51a0bbc342315070983383b3f8f00061083782a8"
+  integrity sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==
+
 "@react-router/dev@^7.9.2":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@react-router/dev/-/dev-7.13.0.tgz#e66b09dc0a4c13a861e924f43ebb61078d79942f"
@@ -639,6 +769,11 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz#a03348e7b559c792b6277cc58874b89ef46e1e72"
   integrity sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==
 
+"@standard-schema/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/utils/-/utils-0.3.0.tgz#3d5e608f16c2390c10528e98e59aef6bf73cae7b"
+  integrity sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==
+
 "@tailwindcss/node@4.1.18":
   version "4.1.18"
   resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.1.18.tgz#9863be0d26178638794a38d6c7c14666fb992e8a"
@@ -849,6 +984,13 @@ arg@^5.0.1:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
+aria-hidden@^1.2.4:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
+  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
+  dependencies:
+    tslib "^2.0.0"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -953,6 +1095,13 @@ chokidar@^4.0.0:
   dependencies:
     readdirp "^4.0.1"
 
+class-variance-authority@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
+  integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
+  dependencies:
+    clsx "^2.1.1"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -962,6 +1111,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -1075,6 +1229,11 @@ detect-libc@^2.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
   integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 dijkstrajs@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23"
@@ -1310,6 +1469,11 @@ get-intrinsic@^1.2.5, get-intrinsic@^1.3.0:
     hasown "^2.0.2"
     math-intrinsics "^1.1.0"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-port@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
@@ -1768,11 +1932,35 @@ react-dom@^19.1.1:
   dependencies:
     scheduler "^0.27.0"
 
+react-hook-form@^7.82.0:
+  version "7.83.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.83.0.tgz#b4d43c42108645c2ae4d425ada2818d03522e8a9"
+  integrity sha512-AXt8cMCmx5a7u4uvpb2uRFVrWQhllI4pV+LSykxIac/hjt44TnQkmX9BKuQi2i+LDC62esmiLpilkav+kjVf/A==
+
 react-refresh@^0.14.0:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
+  dependencies:
+    react-style-singleton "^2.2.2"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz#6442da56791117661978ae99cd29be9026fecca0"
+  integrity sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==
+  dependencies:
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
+
 react-router@^7.9.2:
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.13.0.tgz#de9484aee764f4f65b93275836ff5944d7f5bd3b"
@@ -1781,6 +1969,14 @@ react-router@^7.9.2:
     cookie "^1.0.1"
     set-cookie-parser "^2.6.0"
 
+react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
+  dependencies:
+    get-nonce "^1.0.0"
+    tslib "^2.0.0"
+
 react@^19.1.1:
   version "19.2.4"
   resolved "https://registry.yarnpkg.com/react/-/react-19.2.4.tgz#438e57baa19b77cb23aab516cf635cd0579ee09a"
@@ -1949,6 +2145,11 @@ side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
+sonner@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-2.0.7.tgz#810c1487a67ec3370126e0f400dfb9edddc3e4f6"
+  integrity sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -1988,6 +2189,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+tailwind-merge@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.6.0.tgz#88d83242d1dd7bc847223f73dcf210dd1f2ee11c"
+  integrity sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==
+
 tailwindcss@4.1.18, tailwindcss@^4.1.13:
   version "4.1.18"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.18.tgz#f488ba47853abdb5354daf9679d3e7791fc4f4e3"
@@ -2016,7 +2222,7 @@ tsconfck@^3.0.3:
   resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.1.6.tgz#da1f0b10d82237ac23422374b3fce1edb23c3ead"
   integrity sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==
 
-tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -2057,6 +2263,21 @@ update-browserslist-db@^1.2.0:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -2154,3 +2375,8 @@ yargs@^15.3.1:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
+
+zod@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.4.3.tgz#b680f172885d18bbebf21a834ea25e55a1bbf356"
+  integrity sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==