feat: create FileOrUrlField component

app/components/FileOrUrlField.tsx

@@ -0,0 +1,120 @@
+import { Upload, Link, X } from 'lucide-react';
+
+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;
+}
+
+export function FileOrUrlField({
+    label, required, mode, onModeChange,
+    accept, file, onFileChange, inputRef,
+    url, onUrlChange, urlPlaceholder,
+}: 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}{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'>
+                    <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
+                            ? '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>
+                        </>
+                    ) : (
+                        <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'
+                    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)}
+                />
+            )}
+        </div>
+    );
+}

app/routes.ts

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

app/routes/dashboard.tsx

@@ -0,0 +1,277 @@
+'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/home.tsx

@@ -1,335 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import QRCode from 'qrcode';
-import { pb } from '~/lib/pocketbase';
-import { ImageOff, Upload, Link, X } from 'lucide-react';
-
-type InputMode = 'url' | 'file';
-
-export default function Dashboard() {
-    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(() => {
-        fetchAssets();
-    }, []);
-
-    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 {
-            // Build FormData so we can send files + fields in one request
-            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);
-        }
-    };
-
-    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-5 text-lg font-semibold text-gray-800'>
-                        Create New Asset
-                    </h2>
-
-                    <div className='space-y-5 text-black'>
-                        {/* Asset Name */}
-                        <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>
-
-                        {/* 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 inline-flex items-center justify-center gap-2 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 ? (
-                            <>
-                                <div className='w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin' />
-                                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>
-    );
-}
-
-// ─── Reusable File-or-URL field ───────────────────────────────────────────────
-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;
-}
-
-function FileOrUrlField({
-    label, required, mode, onModeChange,
-    accept, file, onFileChange, inputRef,
-    url, onUrlChange, urlPlaceholder,
-}: FileOrUrlFieldProps) {
-    return (
-        <div className='space-y-1.5'>
-            {/* Label + toggle */}
-            <div className='flex items-center justify-between ml-1'>
-                <label className='text-xs font-semibold text-gray-600'>
-                    {label}{required && <span className='text-red-500 ml-0.5'>*</span>}
-                </label>
-                <div className='flex items-center gap-1 rounded-lg border border-gray-200 p-0.5 text-xs'>
-                    <button
-                        type='button'
-                        onClick={() => onModeChange('file')}
-                        className={`flex items-center gap-1 rounded-md px-2.5 py-1 transition-all font-medium ${
-                            mode === 'file'
-                                ? 'bg-black text-white'
-                                : 'text-gray-500 hover:text-gray-800'
-                        }`}
-                    >
-                        <Upload size={11} />
-                        Upload
-                    </button>
-                    <button
-                        type='button'
-                        onClick={() => onModeChange('url')}
-                        className={`flex items-center gap-1 rounded-md px-2.5 py-1 transition-all font-medium ${
-                            mode === 'url'
-                                ? 'bg-black text-white'
-                                : 'text-gray-500 hover:text-gray-800'
-                        }`}
-                    >
-                        <Link size={11} />
-                        URL
-                    </button>
-                </div>
-            </div>
-
-            {mode === 'file' ? (
-                <div
-                    onClick={() => inputRef.current?.click()}
-                    className={`flex cursor-pointer items-center gap-3 rounded-lg border-2 border-dashed px-4 py-3 transition-colors ${
-                        file ? 'border-black bg-gray-50' : 'border-gray-200 hover:border-gray-400'
-                    }`}
-                >
-                    <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-2 min-w-0'>
-                                <div className='w-7 h-7 rounded bg-black flex items-center justify-center shrink-0'>
-                                    <Upload size={13} className='text-white' />
-                                </div>
-                                <span className='text-sm text-gray-800 font-medium truncate'>{file.name}</span>
-                                <span className='text-xs text-gray-400 shrink-0'>
-                                    {(file.size / 1024 / 1024).toFixed(1)} MB
-                                </span>
-                            </div>
-                            <button
-                                type='button'
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    onFileChange(null);
-                                    if (inputRef.current) inputRef.current.value = '';
-                                }}
-                                className='shrink-0 text-gray-400 hover:text-gray-700'
-                            >
-                                <X size={15} />
-                            </button>
-                        </>
-                    ) : (
-                        <div className='flex flex-1 items-center gap-3 text-gray-400'>
-                            <Upload size={16} />
-                            <span className='text-sm'>Click to choose a file <span className='text-gray-300'>({accept})</span></span>
-                        </div>
-                    )}
-                </div>
-            ) : (
-                <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={urlPlaceholder}
-                    value={url}
-                    onChange={(e) => onUrlChange(e.target.value)}
-                />
-            )}
-        </div>
-    );
-}

app/routes/login.tsx

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { pb } from '~/lib/pocketbase';
+import { Lock, Mail, Eye, EyeOff, Loader2, ArrowRight } from 'lucide-react';
+
+export default function Login() {
+    const navigate = useNavigate();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    // If already logged in, redirect to dashboard
+    useEffect(() => {
+        if (pb.authStore.isValid) {
+            navigate('/', { replace: true });
+        }
+    }, [navigate]);
+
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!email || !password) {
+            setError('Please enter both email and password');
+            return;
+        }
+
+        setLoading(true);
+        setError('');
+
+        try {
+            await pb.collection('users').authWithPassword(email, password);
+            navigate('/', { replace: true });
+        } catch (err: any) {
+            setError(err?.message || 'Invalid email or password');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    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>
+                    <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>
+
+                {/* Login Card */}
+                <div className="bg-[#121212] border border-neutral-900 rounded-2xl p-8 shadow-2xl">
+                    <form onSubmit={handleLogin} className="space-y-6">
+                        {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}
+                            </div>
+                        )}
+
+                        {/* Email Input */}
+                        <div className="space-y-1.5">
+                            <label className="text-xs font-bold text-neutral-400 uppercase tracking-wider 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"
+                                    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"
+                                    placeholder="admin@thob.studio"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Password Input */}
+                        <div className="space-y-1.5">
+                            <label className="text-xs font-bold text-neutral-400 uppercase tracking-wider 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'}
+                                    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"
+                                    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>
+
+                        {/* Submit 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"
+                        >
+                            {loading ? (
+                                <Loader2 size={16} className="animate-spin" />
+                            ) : (
+                                <>
+                                    <span>Sign In</span>
+                                    <ArrowRight size={15} />
+                                </>
+                            )}
+                        </button>
+                    </form>
+                </div>
+
+                <div className="mt-8 text-center text-[10px] text-neutral-700 uppercase tracking-widest">
+                    SYSTEM IP MONITORED SECURE PORTAL
+                </div>
+            </div>
+        </div>
+    );
+}