Compare commits
3 Commits
721b9960c8
...
8b0c699d76
| Author | SHA1 | Date | |
|---|---|---|---|
| 8b0c699d76 | |||
| e04fc22bb8 | |||
| 1138ee2fa0 |
120
app/components/FileOrUrlField.tsx
Normal file
120
app/components/FileOrUrlField.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { type RouteConfig, index, route } from '@react-router/dev/routes';
|
import { type RouteConfig, index, route } from '@react-router/dev/routes';
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
index('routes/home.tsx'),
|
index('routes/dashboard.tsx'),
|
||||||
route('ar/:id', './qr-ar/ar-viewer.tsx'),
|
route('login', 'routes/login.tsx'),
|
||||||
|
route('ar/:id', 'qr-ar/ar-viewer.tsx'),
|
||||||
] satisfies RouteConfig;
|
] satisfies RouteConfig;
|
||||||
|
|||||||
277
app/routes/dashboard.tsx
Normal file
277
app/routes/dashboard.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
139
app/routes/login.tsx
Normal file
139
app/routes/login.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user