chore: migrate to Yarn Berry (4.16.0)

Adds .yarnrc.yml and pins packageManager in package.json so installs
use yarn 4 with the node-modules linker instead of yarn classic.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.yarnrc.yml

@@ -0,0 +1,8 @@
+approvedGitRepositories:
+  - "**"
+
+enableScripts: true
+
+nodeLinker: node-modules
+
+npmMinimalAgeGate: 0

app/components/FileOrUrlField.tsx

@@ -0,0 +1,148 @@
+import { Upload, Link, X } from 'lucide-react';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+
+export type InputMode = 'url' | 'file';
+
+export interface FileOrUrlFieldProps {
+    label: string;
+    required?: boolean;
+    mode: InputMode;
+    onModeChange: (m: InputMode) => void;
+    accept: string;
+    file: File | null;
+    onFileChange: (f: File | null) => void;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    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>
+                    {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-850 p-1 text-xs'>
+                    <button
+                        type='button'
+                        onClick={() => onModeChange('file')}
+                        className={`flex items-center gap-1 rounded-lg px-3 py-1.5 transition-all font-bold cursor-pointer ${
+                            mode === 'file'
+                                ? 'bg-orange-500 text-black shadow-md'
+                                : 'text-neutral-500 hover:text-neutral-300'
+                        }`}
+                    >
+                        <Upload size={11} />
+                        Upload
+                    </button>
+                    <button
+                        type='button'
+                        onClick={() => onModeChange('url')}
+                        className={`flex items-center gap-1 rounded-lg px-3 py-1.5 transition-all font-bold cursor-pointer ${
+                            mode === 'url'
+                                ? 'bg-orange-500 text-black shadow-md'
+                                : 'text-neutral-500 hover:text-neutral-300'
+                        }`}
+                    >
+                        <Link size={11} />
+                        URL
+                    </button>
+                </div>
+            </div>
+
+            {mode === 'file' ? (
+                <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 || existingFileName
+                            ? 'border-orange-500/50 bg-[#161616]'
+                            : 'border-neutral-800 hover:border-neutral-700 bg-[#161616]/40 hover:bg-[#161616]/70'
+                    }`}
+                >
+                    <input
+                        ref={inputRef}
+                        type='file'
+                        accept={accept}
+                        className='hidden'
+                        onChange={(e) => onFileChange(e.target.files?.[0] ?? null)}
+                    />
+                    {file ? (
+                        <>
+                            <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'>{file.name}</span>
+                                    <span className='text-[10px] text-neutral-500 font-medium mt-0.5'>
+                                        {(file.size / 1024 / 1024).toFixed(2)} MB
+                                    </span>
+                                </div>
+                            </div>
+                            <button
+                                type='button'
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onFileChange(null);
+                                    if (inputRef.current) inputRef.current.value = '';
+                                }}
+                                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>
+                        </>
+                    ) : 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" />
+                            <span className='text-sm font-medium'>
+                                Choose a file <span className='text-neutral-600 font-normal'>({accept})</span>
+                            </span>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <Input
+                    type='url'
+                    placeholder={urlPlaceholder}
+                    value={url}
+                    onChange={(e) => onUrlChange(e.target.value)}
+                />
+            )}
+        </div>
+    );
+}

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/pocketbase.ts

@@ -1,3 +1,7 @@
 import PocketBase from 'pocketbase';
 
-export const pb = new PocketBase(import.meta.env.VITE_POCKETBASE_URL);
+const rawUrl = import.meta.env.VITE_POCKETBASE_URL ?? '';
+// Ensure URL always has a protocol so PocketBase SDK treats it as absolute
+const pbUrl = rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`;
+
+export const pb = new PocketBase(pbUrl);

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,6 +1,11 @@
 import { type RouteConfig, index, route } from '@react-router/dev/routes';
 
 export default [
-    index('routes/home.tsx'),
+    index('routes/admin/dashboard.tsx'),
-    route('ar/:id', './qr-ar/ar-viewer.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

@@ -0,0 +1,176 @@
+import { useState, useEffect } from 'react';
+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 [localError, setLocalError] = useState('');
+
+    const isLoading = navigation.state !== 'idle';
+
+    // Already-authenticated redirect fallback
+    useEffect(() => {
+        if (pb.authStore.isValid) {
+            navigate('/', { replace: true });
+        }
+    }, [navigate]);
+
+    // 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) {
+            setLocalError('Please enter both email and password');
+            return;
+        }
+
+        setLocalError('');
+        const formData = new FormData();
+        formData.append('email', email);
+        formData.append('password', password);
+
+        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">
+            <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">
+                <div className="text-center mb-8">
+                    <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>
+                    <h1 className="text-2xl font-bold tracking-tight text-white uppercase">AR Management</h1>
+                    <p className="mt-1 text-neutral-500 text-xs uppercase tracking-wider">
+                        Authorized Access Only
+                    </p>
+                </div>
+
+                <Card className="p-8 shadow-2xl">
+                    <form onSubmit={handleLogin} className="space-y-6">
+                        {(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">
+                                {localError || actionData?.error}
+                            </div>
+                        )}
+
+                        <div className="space-y-1.5">
+                            <Label className="ml-1">
+                                Email Address
+                            </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
+                                    type="email"
+                                    name="email"
+                                    required
+                                    className="pl-10"
+                                    placeholder="admin@thob.studio"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label className="ml-1">
+                                Password
+                            </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
+                                    type={showPassword ? 'text' : 'password'}
+                                    name="password"
+                                    required
+                                    className="pl-10 pr-10"
+                                    placeholder="••••••••"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                                <button
+                                    type="button"
+                                    onClick={() => setShowPassword(!showPassword)}
+                                    className="absolute inset-y-0 right-0 pr-3.5 flex items-center text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
+                                >
+                                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                                </button>
+                            </div>
+                        </div>
+
+                        <Button
+                            type="submit"
+                            disabled={isLoading}
+                            className="w-full py-6 text-sm font-bold uppercase tracking-wider"
+                        >
+                            {isLoading ? (
+                                <Loader2 size={16} className="animate-spin text-black" />
+                            ) : (
+                                <>
+                                    <span>Sign In</span>
+                                    <ArrowRight size={15} />
+                                </>
+                            )}
+                        </Button>
+                    </form>
+                </Card>
+
+                <div className="mt-8 text-center text-[10px] text-neutral-700 uppercase tracking-widest">
+                    SYSTEM IP MONITORED SECURE PORTAL
+                </div>
+            </div>
+        </div>
+    );
+}

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/home.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import QRCode from 'qrcode';
-import { pb } from '~/lib/pocketbase';
-import { ImageOff } from 'lucide-react';
-
-export default function Dashboard() {
-    const [name, setName] = useState('');
-    const [glbUrl, setGlbUrl] = useState('');
-    const [usdzUrl, setUsdzUrl] = useState('');
-    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(() => {
-        fetchAssets();
-    }, []);
-
-    const createAsset = async () => {
-        if (!name || !glbUrl) {
-            alert('Please provide a name and a GLB URL');
-            return;
-        }
-
-        setLoading(true);
-
-        try {
-            const record = await pb.collection('ar_assets').create({
-                name,
-                glb_url: glbUrl,
-                usdz_url: usdzUrl || '',
-            });
-
-            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);
-
-            setName('');
-            setGlbUrl('');
-            setUsdzUrl('');
-
-            fetchAssets();
-        } catch (err: any) {
-            alert(err?.message || 'Failed to create asset');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className='min-h-screen bg-gray-50 px-6 py-10'>
-            <div className='mx-auto max-w-5xl space-y-10'>
-                <div>
-                    <h1 className='text-3xl font-bold text-gray-900'>
-                        AR Asset Dashboard
-                    </h1>
-                    <p className='mt-1 text-gray-500'>
-                        Manage 3D assets and generate AR QR codes
-                    </p>
-                </div>
-
-                <div className='rounded-2xl bg-white p-6 shadow-sm'>
-                    <h2 className='mb-4 text-lg font-semibold text-gray-800'>
-                        Create New Asset
-                    </h2>
-
-                    <div className='grid gap-4 md:grid-cols-3 text-black'>
-                        <div className="space-y-1">
-                            <label className="text-xs font-semibold text-gray-600 ml-1">Asset Name</label>
-                            <input
-                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                                placeholder='Asset name'
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                            />
-                        </div>
-                        <div className="space-y-1">
-                            <label className="text-xs font-semibold text-gray-600 ml-1">GLB URL (Android/Web)</label>
-                            <input
-                                type="url"
-                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                                placeholder='https://example.com/model.glb'
-                                value={glbUrl}
-                                onChange={(e) => setGlbUrl(e.target.value)}
-                            />
-                        </div>
-                        <div className="space-y-1">
-                            <label className="text-xs font-semibold text-gray-600 ml-1">USDZ URL (iOS) - Optional</label>
-                            <input
-                                type="url"
-                                className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
-                                placeholder='USDZ URL'
-                                value={usdzUrl}
-                                onChange={(e) => setUsdzUrl(e.target.value)}
-                            />
-                        </div>
-                    </div>
-
-                    <button
-                        onClick={createAsset}
-                        disabled={loading}
-                        className='mt-6 inline-flex items-center justify-center rounded-xl bg-black px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60'
-                    >
-                        {loading ? 'Creating…' : 'Create Asset'}
-                    </button>
-                </div>
-
-                <div>
-                    <h2 className='mb-4 text-lg font-semibold text-gray-800'>
-                        Generated Assets
-                    </h2>
-
-                    {assets.length === 0 ? (
-                        <p className='text-sm text-gray-500'>
-                            No assets created yet.
-                        </p>
-                    ) : (
-                        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
-                            {assets.map((asset) => (
-                                <div
-                                    key={asset.id}
-                                    className='rounded-2xl bg-white p-5 shadow-sm transition hover:shadow-md bg-radial-[at_0%_0%] to-70% from-black/20 to-transparent '
-                                >
-                                    <h3 className='mb-3 text-base font-semibold text-gray-900'>
-                                        {asset?.name}
-                                    </h3>
-
-                                    {asset?.qr_image ? (
-                                        <img
-                                            src={pb.files.getURL(asset, asset.qr_image)}
-                                            alt={asset?.name}
-                                            className='mx-auto w-40 rounded-lg'
-                                        />
-                                    ) : (
-                                        asset?.qr_file ? (
-                                            <img
-                                                src={pb.files.getURL(asset, asset.qr_file)}
-                                                alt={asset?.name}
-                                                className='mx-auto w-40 rounded-lg'
-                                            />
-                                        ) : <div className='mx-auto flex h-40 w-40 flex-col items-center justify-center space-y-2 rounded-lg bg-gray-50 text-gray-400'>
-                                            <ImageOff size={32} strokeWidth={1.5} />
-                                            <span className='text-xs font-medium'>No QR Image</span>
-                                        </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",
@@ -31,5 +40,6 @@
     "typescript": "^5.9.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4"
-  }
+  },
+  "packageManager": "yarn@4.16.0+sha512.5374c94eb4ef6aa8188fb112f20c1aa6569f248d676c5e576e1fd2a1a4d8d87a96df65d9dfe1c2a0252cbe38bda46cf18d955005b81b43cc7607a5c9d56fd2b6"
 }