forked from rajun/ar-test
728 lines
33 KiB
TypeScript
728 lines
33 KiB
TypeScript
'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>
|
|
);
|
|
}
|