forked from rajun/ar-test
Compare commits
No commits in common. "294687aace31cb1d36e4547f62687e1c82097a66" and "cb588b5caa621906a7cfc703bf6781f279ca20e2" have entirely different histories.
294687aace
...
cb588b5caa
Binary file not shown.
@ -1,8 +0,0 @@
|
|||||||
approvedGitRepositories:
|
|
||||||
- "**"
|
|
||||||
|
|
||||||
enableScripts: true
|
|
||||||
|
|
||||||
nodeLinker: node-modules
|
|
||||||
|
|
||||||
npmMinimalAgeGate: 0
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
import { Upload, Link, X } from 'lucide-react';
|
|
||||||
import { Input } from '~/components/ui/input';
|
|
||||||
import { Label } from '~/components/ui/label';
|
|
||||||
|
|
||||||
export type InputMode = 'url' | 'file';
|
|
||||||
|
|
||||||
export interface FileOrUrlFieldProps {
|
|
||||||
label: string;
|
|
||||||
required?: boolean;
|
|
||||||
mode: InputMode;
|
|
||||||
onModeChange: (m: InputMode) => void;
|
|
||||||
accept: string;
|
|
||||||
file: File | null;
|
|
||||||
onFileChange: (f: File | null) => void;
|
|
||||||
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
||||||
url: string;
|
|
||||||
onUrlChange: (u: string) => void;
|
|
||||||
urlPlaceholder: string;
|
|
||||||
existingFileName?: string;
|
|
||||||
onClearExistingFile?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FileOrUrlField({
|
|
||||||
label, required, mode, onModeChange,
|
|
||||||
accept, file, onFileChange, inputRef,
|
|
||||||
url, onUrlChange, urlPlaceholder,
|
|
||||||
existingFileName, onClearExistingFile,
|
|
||||||
}: FileOrUrlFieldProps) {
|
|
||||||
return (
|
|
||||||
<div className='space-y-1.5'>
|
|
||||||
{/* Label + toggle */}
|
|
||||||
<div className='flex items-center justify-between ml-1'>
|
|
||||||
<Label>
|
|
||||||
{label}{required && <span className='text-orange-500 ml-0.5'>*</span>}
|
|
||||||
</Label>
|
|
||||||
<div className='flex items-center gap-1 rounded-xl bg-[#181818] border border-neutral-850 p-1 text-xs'>
|
|
||||||
<button
|
|
||||||
type='button'
|
|
||||||
onClick={() => onModeChange('file')}
|
|
||||||
className={`flex items-center gap-1 rounded-lg px-3 py-1.5 transition-all font-bold cursor-pointer ${
|
|
||||||
mode === 'file'
|
|
||||||
? 'bg-orange-500 text-black shadow-md'
|
|
||||||
: 'text-neutral-500 hover:text-neutral-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Upload size={11} />
|
|
||||||
Upload
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type='button'
|
|
||||||
onClick={() => onModeChange('url')}
|
|
||||||
className={`flex items-center gap-1 rounded-lg px-3 py-1.5 transition-all font-bold cursor-pointer ${
|
|
||||||
mode === 'url'
|
|
||||||
? 'bg-orange-500 text-black shadow-md'
|
|
||||||
: 'text-neutral-500 hover:text-neutral-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Link size={11} />
|
|
||||||
URL
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mode === 'file' ? (
|
|
||||||
<div
|
|
||||||
onClick={() => inputRef.current?.click()}
|
|
||||||
className={`flex cursor-pointer items-center gap-3 rounded-xl border-2 border-dashed px-4 py-4 transition-all duration-200 ${
|
|
||||||
file || existingFileName
|
|
||||||
? 'border-orange-500/50 bg-[#161616]'
|
|
||||||
: 'border-neutral-800 hover:border-neutral-700 bg-[#161616]/40 hover:bg-[#161616]/70'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type='file'
|
|
||||||
accept={accept}
|
|
||||||
className='hidden'
|
|
||||||
onChange={(e) => onFileChange(e.target.files?.[0] ?? null)}
|
|
||||||
/>
|
|
||||||
{file ? (
|
|
||||||
<>
|
|
||||||
<div className='flex flex-1 items-center gap-3.5 min-w-0'>
|
|
||||||
<div className='w-8 h-8 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center shrink-0'>
|
|
||||||
<Upload size={14} className='text-orange-500' />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col min-w-0">
|
|
||||||
<span className='text-sm text-white font-semibold truncate'>{file.name}</span>
|
|
||||||
<span className='text-[10px] text-neutral-500 font-medium mt-0.5'>
|
|
||||||
{(file.size / 1024 / 1024).toFixed(2)} MB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type='button'
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
onFileChange(null);
|
|
||||||
if (inputRef.current) inputRef.current.value = '';
|
|
||||||
}}
|
|
||||||
className='shrink-0 text-neutral-500 hover:text-white p-1 hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer'
|
|
||||||
>
|
|
||||||
<X size={15} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : existingFileName ? (
|
|
||||||
<>
|
|
||||||
<div className='flex flex-1 items-center gap-3.5 min-w-0'>
|
|
||||||
<div className='w-8 h-8 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center shrink-0'>
|
|
||||||
<Upload size={14} className='text-orange-500' />
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col min-w-0">
|
|
||||||
<span className='text-sm text-white font-semibold truncate'>{existingFileName}</span>
|
|
||||||
<span className='text-[10px] text-neutral-500 font-medium mt-0.5'>
|
|
||||||
Existing File (Keep)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type='button'
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (onClearExistingFile) onClearExistingFile();
|
|
||||||
}}
|
|
||||||
className='shrink-0 text-neutral-500 hover:text-white p-1 hover:bg-neutral-800 rounded-lg transition-colors cursor-pointer'
|
|
||||||
>
|
|
||||||
<X size={15} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className='flex flex-1 items-center gap-3 text-neutral-500 py-1'>
|
|
||||||
<Upload size={16} className="text-neutral-600" />
|
|
||||||
<span className='text-sm font-medium'>
|
|
||||||
Choose a file <span className='text-neutral-600 font-normal'>({accept})</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Input
|
|
||||||
type='url'
|
|
||||||
placeholder={urlPlaceholder}
|
|
||||||
value={url}
|
|
||||||
onChange={(e) => onUrlChange(e.target.value)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none uppercase tracking-wider',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default:
|
|
||||||
'border-transparent bg-neutral-800 text-white hover:bg-neutral-700',
|
|
||||||
secondary:
|
|
||||||
'border-transparent bg-neutral-900 text-neutral-400 hover:bg-neutral-850',
|
|
||||||
destructive:
|
|
||||||
'border-transparent bg-red-500/10 text-red-500 border-red-500/20',
|
|
||||||
outline: 'border-neutral-800 text-neutral-400',
|
|
||||||
orange:
|
|
||||||
'border-orange-500/20 bg-orange-500/5 text-orange-500 font-bold',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export interface BadgeProps
|
|
||||||
extends React.HTMLAttributes<HTMLDivElement>,
|
|
||||||
VariantProps<typeof badgeVariants> {}
|
|
||||||
|
|
||||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
||||||
return (
|
|
||||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Badge, badgeVariants };
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { Slot } from '@radix-ui/react-slot';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const buttonVariants = cva(
|
|
||||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-700 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98] cursor-pointer',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'bg-orange-500 text-black shadow-[0_0_24px_rgba(249,115,22,0.15)] hover:bg-orange-400 hover:shadow-[0_0_32px_rgba(249,115,22,0.3)]',
|
|
||||||
destructive: 'bg-red-500/10 text-red-500 border border-red-500/20 hover:bg-red-500 hover:text-white',
|
|
||||||
outline: 'border border-neutral-800 bg-[#121212] text-neutral-400 hover:bg-neutral-900 hover:text-white hover:border-orange-500/40',
|
|
||||||
secondary: 'bg-neutral-800 text-neutral-300 hover:bg-neutral-750 hover:text-white',
|
|
||||||
ghost: 'hover:bg-neutral-850 hover:text-white text-neutral-400',
|
|
||||||
link: 'text-orange-500 underline-offset-4 hover:underline',
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
default: 'h-10 px-5 py-2.5',
|
|
||||||
sm: 'h-8 rounded-lg px-3 text-xs',
|
|
||||||
lg: 'h-12 rounded-xl px-8 text-base',
|
|
||||||
icon: 'h-9 w-9 rounded-lg',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
size: 'default',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export interface ButtonProps
|
|
||||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
||||||
VariantProps<typeof buttonVariants> {
|
|
||||||
asChild?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
||||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
||||||
const Comp = asChild ? Slot : 'button';
|
|
||||||
return (
|
|
||||||
<Comp
|
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
Button.displayName = 'Button';
|
|
||||||
|
|
||||||
export { Button, buttonVariants };
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const Card = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'rounded-2xl border border-neutral-900 bg-[#121212] text-white shadow-2xl transition-all duration-300',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
Card.displayName = 'Card';
|
|
||||||
|
|
||||||
const CardHeader = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn('flex flex-col space-y-1.5 p-6', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
CardHeader.displayName = 'CardHeader';
|
|
||||||
|
|
||||||
const CardTitle = React.forwardRef<
|
|
||||||
HTMLParagraphElement,
|
|
||||||
React.HTMLAttributes<HTMLHeadingElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<h3
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'text-lg font-bold tracking-tight text-white uppercase',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
CardTitle.displayName = 'CardTitle';
|
|
||||||
|
|
||||||
const CardDescription = React.forwardRef<
|
|
||||||
HTMLParagraphElement,
|
|
||||||
React.HTMLAttributes<HTMLParagraphElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<p
|
|
||||||
ref={ref}
|
|
||||||
className={cn('text-xs text-neutral-500 uppercase tracking-wider', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
CardDescription.displayName = 'CardDescription';
|
|
||||||
|
|
||||||
const CardContent = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
|
||||||
));
|
|
||||||
CardContent.displayName = 'CardContent';
|
|
||||||
|
|
||||||
const CardFooter = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
className={cn('flex items-center p-6 pt-0', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
CardFooter.displayName = 'CardFooter';
|
|
||||||
|
|
||||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
} from '~/components/ui/dialog';
|
|
||||||
import { Button } from '~/components/ui/button';
|
|
||||||
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
||||||
|
|
||||||
interface ConfirmDialogProps {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
confirmText?: string;
|
|
||||||
cancelText?: string;
|
|
||||||
variant?: 'destructive' | 'default';
|
|
||||||
loading?: boolean;
|
|
||||||
onConfirm: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ConfirmDialog({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
confirmText = 'Confirm',
|
|
||||||
cancelText = 'Cancel',
|
|
||||||
variant = 'destructive',
|
|
||||||
loading = false,
|
|
||||||
onConfirm,
|
|
||||||
}: ConfirmDialogProps) {
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-md bg-[#121212] border-neutral-850 p-6">
|
|
||||||
<DialogHeader className="space-y-2">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-red-500 shrink-0">
|
|
||||||
<AlertTriangle size={20} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<DialogTitle className="text-base font-bold text-white uppercase tracking-wider">
|
|
||||||
{title}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription className="text-xs text-neutral-400 mt-1">
|
|
||||||
{description}
|
|
||||||
</DialogDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<DialogFooter className="mt-6 flex flex-row items-center justify-end gap-3">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
disabled={loading}
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
className="h-9"
|
|
||||||
>
|
|
||||||
{cancelText}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant={variant}
|
|
||||||
size="sm"
|
|
||||||
disabled={loading}
|
|
||||||
onClick={onConfirm}
|
|
||||||
className="h-9"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<RefreshCw size={14} className="animate-spin" />
|
|
||||||
) : (
|
|
||||||
confirmText
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
||||||
import { X } from 'lucide-react';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const Dialog = DialogPrimitive.Root;
|
|
||||||
const DialogTrigger = DialogPrimitive.Trigger;
|
|
||||||
const DialogPortal = DialogPrimitive.Portal;
|
|
||||||
const DialogClose = DialogPrimitive.Close;
|
|
||||||
|
|
||||||
const DialogOverlay = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Overlay
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'fixed inset-0 z-50 bg-black/85 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<DialogPortal>
|
|
||||||
<DialogOverlay />
|
|
||||||
<DialogPrimitive.Content
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'fixed left-[50%] top-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] border border-neutral-850 bg-[#121212] shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 rounded-2xl',
|
|
||||||
!className?.includes('flex') && !className?.includes('grid') && 'grid gap-4',
|
|
||||||
!className?.includes('max-w-') && 'max-w-lg',
|
|
||||||
!className?.includes('p-') && 'p-0 p-6', // default padding if not overridden
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-full p-2 bg-black/60 border border-neutral-850 text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all cursor-pointer opacity-70 hover:opacity-100 focus:outline-none disabled:pointer-events-none z-20">
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
<span className="sr-only">Close</span>
|
|
||||||
</DialogPrimitive.Close>
|
|
||||||
</DialogPrimitive.Content>
|
|
||||||
</DialogPortal>
|
|
||||||
));
|
|
||||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
||||||
|
|
||||||
const DialogHeader = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex flex-col space-y-1.5 text-center sm:text-left',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
DialogHeader.displayName = 'DialogHeader';
|
|
||||||
|
|
||||||
const DialogFooter = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
DialogFooter.displayName = 'DialogFooter';
|
|
||||||
|
|
||||||
const DialogTitle = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Title
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'text-lg font-semibold leading-none tracking-tight text-white',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
||||||
|
|
||||||
const DialogDescription = React.forwardRef<
|
|
||||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<DialogPrimitive.Description
|
|
||||||
ref={ref}
|
|
||||||
className={cn('text-sm text-neutral-400', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
||||||
|
|
||||||
export {
|
|
||||||
Dialog,
|
|
||||||
DialogPortal,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogClose,
|
|
||||||
DialogTrigger,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogFooter,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
};
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
|
|
||||||
({ className, type, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type={type}
|
|
||||||
className={cn(
|
|
||||||
'flex h-10 w-full rounded-xl border border-neutral-800 bg-[#181818] px-4 py-3 text-sm text-white placeholder-neutral-600 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-white focus-visible:outline-none focus-visible:border-orange-500 disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
Input.displayName = 'Input';
|
|
||||||
|
|
||||||
export { Input };
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
const labelVariants = cva(
|
|
||||||
'text-xs font-bold text-neutral-400 uppercase tracking-wider select-none leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
|
|
||||||
);
|
|
||||||
|
|
||||||
const Label = React.forwardRef<
|
|
||||||
HTMLLabelElement,
|
|
||||||
React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<label ref={ref} className={cn(labelVariants(), className)} {...props} />
|
|
||||||
));
|
|
||||||
Label.displayName = 'Label';
|
|
||||||
|
|
||||||
export { Label };
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { cn } from '~/lib/utils';
|
|
||||||
|
|
||||||
function Skeleton({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={cn('animate-pulse rounded-xl bg-neutral-900', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Skeleton };
|
|
||||||
37
app/global.d.ts
vendored
37
app/global.d.ts
vendored
@ -1,37 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
declare module 'react' {
|
|
||||||
namespace JSX {
|
|
||||||
interface IntrinsicElements {
|
|
||||||
'model-viewer': React.DetailedHTMLProps<
|
|
||||||
React.HTMLAttributes<HTMLElement> & {
|
|
||||||
src?: string;
|
|
||||||
'ios-src'?: string;
|
|
||||||
ar?: boolean;
|
|
||||||
'ar-modes'?: string;
|
|
||||||
'ar-scale'?: string;
|
|
||||||
'ar-placement'?: string;
|
|
||||||
'camera-controls'?: boolean;
|
|
||||||
'touch-action'?: string;
|
|
||||||
alt?: string;
|
|
||||||
'shadow-intensity'?: string | number;
|
|
||||||
'shadow-softness'?: string | number;
|
|
||||||
exposure?: string | number;
|
|
||||||
'interaction-prompt'?: string;
|
|
||||||
'min-camera-orbit'?: string;
|
|
||||||
'max-camera-orbit'?: string;
|
|
||||||
'camera-orbit'?: string;
|
|
||||||
'field-of-view'?: string;
|
|
||||||
scale?: string;
|
|
||||||
'auto-rotate'?: boolean;
|
|
||||||
'rotation-per-second'?: string;
|
|
||||||
onLoad?: (e: any) => void;
|
|
||||||
'onAr-status'?: (e: any) => void;
|
|
||||||
'onModel-visibility'?: (e: any) => void;
|
|
||||||
'onCamera-change'?: (e: any) => void;
|
|
||||||
},
|
|
||||||
HTMLElement
|
|
||||||
>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +1,3 @@
|
|||||||
import PocketBase from 'pocketbase';
|
import PocketBase from 'pocketbase';
|
||||||
|
|
||||||
const rawUrl = import.meta.env.VITE_POCKETBASE_URL ?? '';
|
export const pb = new PocketBase(import.meta.env.VITE_POCKETBASE_URL);
|
||||||
// Ensure URL always has a protocol so PocketBase SDK treats it as absolute
|
|
||||||
const pbUrl = rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`;
|
|
||||||
|
|
||||||
export const pb = new PocketBase(pbUrl);
|
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
import { clsx, type ClassValue } from 'clsx';
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
@ -4,7 +4,48 @@ import { useParams } from 'react-router';
|
|||||||
import { Box } from 'lucide-react';
|
import { Box } from 'lucide-react';
|
||||||
import { pb } from '~/lib/pocketbase';
|
import { pb } from '~/lib/pocketbase';
|
||||||
|
|
||||||
|
// --- A-FRAME/AR.JS CUSTOM ELEMENTS TYPING FIX ---
|
||||||
|
declare module 'react' {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
'a-scene': any;
|
||||||
|
'a-assets': any;
|
||||||
|
'a-asset-item': any;
|
||||||
|
'a-marker': any;
|
||||||
|
'a-entity': any;
|
||||||
|
'a-text': any;
|
||||||
|
'model-viewer': React.DetailedHTMLProps<
|
||||||
|
React.HTMLAttributes<HTMLElement>,
|
||||||
|
HTMLElement
|
||||||
|
> & {
|
||||||
|
src?: string;
|
||||||
|
'ios-src'?: string;
|
||||||
|
ar?: boolean;
|
||||||
|
'ar-modes'?: string;
|
||||||
|
'ar-scale'?: string;
|
||||||
|
'ar-placement'?: string;
|
||||||
|
'camera-controls'?: boolean;
|
||||||
|
'touch-action'?: string;
|
||||||
|
alt?: string;
|
||||||
|
'shadow-intensity'?: string | number;
|
||||||
|
'shadow-softness'?: string | number;
|
||||||
|
exposure?: string | number;
|
||||||
|
'interaction-prompt'?: string;
|
||||||
|
'min-camera-orbit'?: string;
|
||||||
|
'max-camera-orbit'?: string;
|
||||||
|
'camera-orbit'?: string;
|
||||||
|
'field-of-view'?: string;
|
||||||
|
scale?: string;
|
||||||
|
'auto-rotate'?: boolean;
|
||||||
|
'rotation-per-second'?: string;
|
||||||
|
onLoad?: (e: any) => void;
|
||||||
|
'onAr-status'?: (e: any) => void;
|
||||||
|
'onModel-visibility'?: (e: any) => void;
|
||||||
|
'onCamera-change'?: (e: any) => void;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const AR_HINTS = [
|
const AR_HINTS = [
|
||||||
'Arranging models to view…',
|
'Arranging models to view…',
|
||||||
@ -28,7 +69,9 @@ export default function ARViewer() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!id) return;
|
if (!id) return;
|
||||||
const loadAsset = async () => {
|
const loadAsset = async () => {
|
||||||
|
// const response = await fetch(`https://thobapi.bopconsultancy.com/v2/ar-assets/${id}`);
|
||||||
const data = await pb.collection('ar_assets').getOne(id);
|
const data = await pb.collection('ar_assets').getOne(id);
|
||||||
|
// const data = await response.json();
|
||||||
setAsset(data);
|
setAsset(data);
|
||||||
};
|
};
|
||||||
loadAsset();
|
loadAsset();
|
||||||
@ -24,8 +24,6 @@ export const links: Route.LinksFunction = () => [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
import { Toaster } from "sonner";
|
|
||||||
|
|
||||||
export function Layout({ children }: { children: React.ReactNode }) {
|
export function Layout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
@ -34,13 +32,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<Meta />
|
<Meta />
|
||||||
<Links />
|
<Links />
|
||||||
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body className="bg-[#0D0D0D] text-white">
|
<body>
|
||||||
{children}
|
{children}
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
<Scripts />
|
<Scripts />
|
||||||
<Toaster theme="dark" position="bottom-right" richColors />
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,11 +1,6 @@
|
|||||||
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/admin/dashboard.tsx'),
|
index('routes/home.tsx'),
|
||||||
route('login', 'routes/admin/login.tsx'),
|
route('ar/:id', './qr-ar/ar-viewer.tsx'),
|
||||||
route('preview/:id', 'routes/admin/asset-preview.tsx'),
|
|
||||||
|
|
||||||
route('ar/:id', 'routes/ar/ar-viewer.tsx'),
|
|
||||||
|
|
||||||
route('*', 'routes/not-found.tsx'),
|
|
||||||
] satisfies RouteConfig;
|
] satisfies RouteConfig;
|
||||||
|
|||||||
@ -1,191 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState, useRef } from 'react';
|
|
||||||
import { useLoaderData, Link, redirect, useNavigate } from 'react-router';
|
|
||||||
import type { Route } from './+types/asset-preview';
|
|
||||||
import { pb } from '~/lib/pocketbase';
|
|
||||||
import { Button } from '~/components/ui/button';
|
|
||||||
import { Badge } from '~/components/ui/badge';
|
|
||||||
import { Card } from '~/components/ui/card';
|
|
||||||
import { Download, ImageOff, FileCode, ArrowLeft, Box } from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
|
|
||||||
export async function clientLoader({ params }: Route.ClientLoaderArgs) {
|
|
||||||
if (!pb.authStore.isValid) {
|
|
||||||
return redirect('/login');
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const asset = await pb.collection('ar_assets').getOne(params.id);
|
|
||||||
return { asset, error: null };
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Failed to load asset in clientLoader:', err);
|
|
||||||
return { asset: null, error: err?.message || 'Failed to fetch asset details' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Preview() {
|
|
||||||
const { asset, error } = useLoaderData<typeof clientLoader>();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (error || !asset) {
|
|
||||||
toast.error(error || 'Asset not found');
|
|
||||||
navigate('/', { replace: true });
|
|
||||||
}
|
|
||||||
}, [error, asset, navigate]);
|
|
||||||
|
|
||||||
if (!asset) return null;
|
|
||||||
|
|
||||||
const glbUrl = asset.glb_file
|
|
||||||
? pb.files.getURL(asset, asset.glb_file)
|
|
||||||
: asset.glb_url;
|
|
||||||
const usdzUrl = asset.usdz_file
|
|
||||||
? pb.files.getURL(asset, asset.usdz_file)
|
|
||||||
: asset.usdz_url;
|
|
||||||
|
|
||||||
const downloadQR = async () => {
|
|
||||||
const qrUrl = asset.qr_image
|
|
||||||
? pb.files.getURL(asset, asset.qr_image)
|
|
||||||
: asset.qr_file
|
|
||||||
? pb.files.getURL(asset, asset.qr_file)
|
|
||||||
: null;
|
|
||||||
if (!qrUrl) {
|
|
||||||
toast.error('No QR code image found for this asset');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(qrUrl);
|
|
||||||
const blob = await response.blob();
|
|
||||||
const url = window.URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = `${asset.name.replace(/\s+/g, '_')}_qr.png`;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
toast.success('QR Code downloaded successfully');
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to download QR code:', err);
|
|
||||||
toast.error('Failed to download QR code');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-[#0D0D0D] text-white px-4 py-8 md:p-10 font-sans selection:bg-orange-500/20">
|
|
||||||
<div className="mx-auto max-w-5xl space-y-6">
|
|
||||||
<div className="flex items-center justify-between pb-4 border-b border-neutral-900">
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
className="inline-flex items-center gap-2 text-xs font-bold text-neutral-400 hover:text-orange-500 transition-colors uppercase tracking-wider cursor-pointer"
|
|
||||||
>
|
|
||||||
<ArrowLeft size={16} />
|
|
||||||
<span>Back to Dashboard</span>
|
|
||||||
</Link>
|
|
||||||
<div className="w-8 h-8 bg-black border border-neutral-850 rounded-xl flex items-center justify-center shrink-0">
|
|
||||||
<span className="text-orange-500 font-extrabold text-lg pl-0.5 select-none">t.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="flex flex-col lg:flex-row gap-6 overflow-hidden shadow-2xl border-neutral-900">
|
|
||||||
<div className="flex-grow lg:flex-1 min-h-[350px] sm:min-h-[450px] lg:min-h-[600px] bg-black relative rounded-t-2xl lg:rounded-l-2xl lg:rounded-tr-none overflow-hidden">
|
|
||||||
{glbUrl ? (
|
|
||||||
<model-viewer
|
|
||||||
src={glbUrl}
|
|
||||||
ios-src={usdzUrl || undefined}
|
|
||||||
ar
|
|
||||||
ar-modes="webxr scene-viewer quick-look"
|
|
||||||
camera-controls
|
|
||||||
auto-rotate
|
|
||||||
shadow-intensity="1"
|
|
||||||
shadow-softness="0.8"
|
|
||||||
exposure="1.1"
|
|
||||||
style={{ width: '100%', height: '100%', display: 'block', position: 'absolute', top: 0, left: 0 }}
|
|
||||||
className="w-full h-full"
|
|
||||||
alt={asset.name}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-full h-full flex flex-col items-center justify-center text-neutral-500 p-8">
|
|
||||||
<FileCode size={40} className="mb-2 text-neutral-600 animate-pulse" />
|
|
||||||
<span className="text-xs uppercase tracking-widest text-neutral-600">Initializing 3D viewport…</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full lg:w-[360px] bg-[#121212] p-6 sm:p-8 flex flex-col justify-between shrink-0 border-t lg:border-t-0 lg:border-l border-neutral-850">
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<Badge variant="orange" className="mb-2">Asset Details</Badge>
|
|
||||||
<h3 className="text-xl font-bold text-white leading-snug">{asset.name}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white p-4 rounded-xl flex items-center justify-center max-w-[210px] mx-auto shadow-md border border-neutral-200">
|
|
||||||
{asset.qr_image ? (
|
|
||||||
<img
|
|
||||||
src={pb.files.getURL(asset, asset.qr_image)}
|
|
||||||
alt={asset.name}
|
|
||||||
className="w-full aspect-square rounded-lg object-contain"
|
|
||||||
/>
|
|
||||||
) : asset.qr_file ? (
|
|
||||||
<img
|
|
||||||
src={pb.files.getURL(asset, asset.qr_file)}
|
|
||||||
alt={asset.name}
|
|
||||||
className="w-full aspect-square rounded-lg object-contain"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex aspect-square w-full flex-col items-center justify-center text-neutral-400 bg-neutral-100 rounded-lg p-4">
|
|
||||||
<ImageOff size={32} />
|
|
||||||
<span className="text-[10px] mt-1 font-semibold uppercase">No QR code</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-xs text-neutral-400 text-center leading-relaxed px-2">
|
|
||||||
Scan this QR code with a smartphone camera to instantly project the 3D model in your space using AR.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="border-t border-neutral-850 pt-5 space-y-3">
|
|
||||||
<div>
|
|
||||||
<span className="text-[10px] font-bold text-neutral-500 uppercase tracking-wider">GLB File Target</span>
|
|
||||||
<div className="text-xs font-mono text-neutral-300 truncate mt-1 bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-850 select-all">
|
|
||||||
{glbUrl}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{usdzUrl && (
|
|
||||||
<div>
|
|
||||||
<span className="text-[10px] font-bold text-neutral-500 uppercase tracking-wider">USDZ File Target</span>
|
|
||||||
<div className="text-xs font-mono text-neutral-300 truncate mt-1 bg-neutral-900 px-3 py-2 rounded-lg border border-neutral-850 select-all">
|
|
||||||
{usdzUrl}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3 mt-8">
|
|
||||||
<Button
|
|
||||||
onClick={downloadQR}
|
|
||||||
variant="outline"
|
|
||||||
className="w-full py-6 text-xs uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
<Download size={15} className="text-orange-500" />
|
|
||||||
<span>Download QR Code</span>
|
|
||||||
</Button>
|
|
||||||
<a
|
|
||||||
href={`${import.meta.env.VITE_FRONTEND_URL}/ar/${asset.id}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-orange-500 hover:bg-orange-400 text-black transition-all font-bold text-xs uppercase tracking-wider shadow-[0_0_15px_rgba(249,115,22,0.15)]"
|
|
||||||
>
|
|
||||||
<Box size={14} />
|
|
||||||
<span>Launch AR View</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,727 +0,0 @@
|
|||||||
'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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { useSubmit, useNavigation, useActionData, useNavigate, redirect } from 'react-router';
|
|
||||||
import type { Route } from './+types/login';
|
|
||||||
import { pb } from '~/lib/pocketbase';
|
|
||||||
import { Lock, Mail, Eye, EyeOff, Loader2, ArrowRight } from 'lucide-react';
|
|
||||||
import { Input } from '~/components/ui/input';
|
|
||||||
import { Button } from '~/components/ui/button';
|
|
||||||
import { Label } from '~/components/ui/label';
|
|
||||||
import { Card } from '~/components/ui/card';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
export async function clientLoader() {
|
|
||||||
if (pb.authStore.isValid) {
|
|
||||||
return redirect('/');
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function clientAction({ request }: Route.ClientActionArgs) {
|
|
||||||
const formData = await request.formData();
|
|
||||||
const email = formData.get('email') as string;
|
|
||||||
const password = formData.get('password') as string;
|
|
||||||
|
|
||||||
if (!email || !password) {
|
|
||||||
return { error: 'Please enter both email and password' };
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await pb.collection('users').authWithPassword(email, password);
|
|
||||||
return redirect('/');
|
|
||||||
} catch (err: any) {
|
|
||||||
return { error: err?.message || 'Invalid email or password' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Login() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const submit = useSubmit();
|
|
||||||
const navigation = useNavigation();
|
|
||||||
const actionData = useActionData<typeof clientAction>();
|
|
||||||
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
const [localError, setLocalError] = useState('');
|
|
||||||
|
|
||||||
const isLoading = navigation.state !== 'idle';
|
|
||||||
|
|
||||||
// Already-authenticated redirect fallback
|
|
||||||
useEffect(() => {
|
|
||||||
if (pb.authStore.isValid) {
|
|
||||||
navigate('/', { replace: true });
|
|
||||||
}
|
|
||||||
}, [navigate]);
|
|
||||||
|
|
||||||
// Handle authentication feedback
|
|
||||||
useEffect(() => {
|
|
||||||
if (actionData) {
|
|
||||||
if (actionData.error) {
|
|
||||||
setLocalError(actionData.error);
|
|
||||||
toast.error(actionData.error);
|
|
||||||
} else {
|
|
||||||
toast.success('Logged in successfully');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [actionData]);
|
|
||||||
|
|
||||||
const handleLogin = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!email || !password) {
|
|
||||||
setLocalError('Please enter both email and password');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLocalError('');
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('email', email);
|
|
||||||
formData.append('password', password);
|
|
||||||
|
|
||||||
submit(formData, { method: 'post' });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative min-h-screen bg-[#0D0D0D] flex items-center justify-center p-4 overflow-hidden select-none font-sans text-white">
|
|
||||||
<div className="absolute top-[20%] left-[30%] w-[40%] h-[40%] rounded-full bg-orange-500/5 blur-[130px] pointer-events-none" />
|
|
||||||
|
|
||||||
<div className="w-full max-w-md relative z-10">
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<div className="inline-flex w-14 h-14 bg-black border border-neutral-800 rounded-2xl items-center justify-center shadow-lg shadow-black mb-4">
|
|
||||||
<span className="text-orange-500 font-extrabold text-3xl pl-1 select-none">t.</span>
|
|
||||||
</div>
|
|
||||||
<h1 className="text-2xl font-bold tracking-tight text-white uppercase">AR Management</h1>
|
|
||||||
<p className="mt-1 text-neutral-500 text-xs uppercase tracking-wider">
|
|
||||||
Authorized Access Only
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="p-8 shadow-2xl">
|
|
||||||
<form onSubmit={handleLogin} className="space-y-6">
|
|
||||||
{(localError || actionData?.error) && (
|
|
||||||
<div className="p-4 bg-red-500/10 border border-red-500/25 rounded-xl text-red-400 text-xs font-semibold text-center uppercase tracking-wider">
|
|
||||||
{localError || actionData?.error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="ml-1">
|
|
||||||
Email Address
|
|
||||||
</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
|
|
||||||
<Mail size={16} />
|
|
||||||
</span>
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
required
|
|
||||||
className="pl-10"
|
|
||||||
placeholder="admin@thob.studio"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<Label className="ml-1">
|
|
||||||
Password
|
|
||||||
</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
|
|
||||||
<Lock size={16} />
|
|
||||||
</span>
|
|
||||||
<Input
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
name="password"
|
|
||||||
required
|
|
||||||
className="pl-10 pr-10"
|
|
||||||
placeholder="••••••••"
|
|
||||||
value={password}
|
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
className="absolute inset-y-0 right-0 pr-3.5 flex items-center text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
|
|
||||||
>
|
|
||||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={isLoading}
|
|
||||||
className="w-full py-6 text-sm font-bold uppercase tracking-wider"
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<Loader2 size={16} className="animate-spin text-black" />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<span>Sign In</span>
|
|
||||||
<ArrowRight size={15} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div className="mt-8 text-center text-[10px] text-neutral-700 uppercase tracking-widest">
|
|
||||||
SYSTEM IP MONITORED SECURE PORTAL
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
178
app/routes/home.tsx
Normal file
178
app/routes/home.tsx
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import QRCode from 'qrcode';
|
||||||
|
import { pb } from '~/lib/pocketbase';
|
||||||
|
import { ImageOff } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
const [glbUrl, setGlbUrl] = useState('');
|
||||||
|
const [usdzUrl, setUsdzUrl] = useState('');
|
||||||
|
const [assets, setAssets] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchAssets = async () => {
|
||||||
|
try {
|
||||||
|
const records = await pb.collection('ar_assets').getFullList({
|
||||||
|
sort: '-created',
|
||||||
|
});
|
||||||
|
setAssets(records);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch assets:', err);
|
||||||
|
setAssets([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchAssets();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const createAsset = async () => {
|
||||||
|
if (!name || !glbUrl) {
|
||||||
|
alert('Please provide a name and a GLB URL');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const record = await pb.collection('ar_assets').create({
|
||||||
|
name,
|
||||||
|
glb_url: glbUrl,
|
||||||
|
usdz_url: usdzUrl || '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
|
||||||
|
|
||||||
|
const qrImage = await QRCode.toDataURL(qrUrl, {
|
||||||
|
width: 512,
|
||||||
|
margin: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
const qrBlob = await (await fetch(qrImage)).blob();
|
||||||
|
|
||||||
|
const qrFormData = new FormData();
|
||||||
|
qrFormData.append('qr_url', qrUrl);
|
||||||
|
qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
|
||||||
|
|
||||||
|
await pb.collection('ar_assets').update(record.id, qrFormData);
|
||||||
|
|
||||||
|
setName('');
|
||||||
|
setGlbUrl('');
|
||||||
|
setUsdzUrl('');
|
||||||
|
|
||||||
|
fetchAssets();
|
||||||
|
} catch (err: any) {
|
||||||
|
alert(err?.message || 'Failed to create asset');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='min-h-screen bg-gray-50 px-6 py-10'>
|
||||||
|
<div className='mx-auto max-w-5xl space-y-10'>
|
||||||
|
<div>
|
||||||
|
<h1 className='text-3xl font-bold text-gray-900'>
|
||||||
|
AR Asset Dashboard
|
||||||
|
</h1>
|
||||||
|
<p className='mt-1 text-gray-500'>
|
||||||
|
Manage 3D assets and generate AR QR codes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='rounded-2xl bg-white p-6 shadow-sm'>
|
||||||
|
<h2 className='mb-4 text-lg font-semibold text-gray-800'>
|
||||||
|
Create New Asset
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className='grid gap-4 md:grid-cols-3 text-black'>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="text-xs font-semibold text-gray-600 ml-1">Asset Name</label>
|
||||||
|
<input
|
||||||
|
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||||
|
placeholder='Asset name'
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="text-xs font-semibold text-gray-600 ml-1">GLB URL (Android/Web)</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||||
|
placeholder='https://example.com/model.glb'
|
||||||
|
value={glbUrl}
|
||||||
|
onChange={(e) => setGlbUrl(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="text-xs font-semibold text-gray-600 ml-1">USDZ URL (iOS) - Optional</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||||
|
placeholder='USDZ URL'
|
||||||
|
value={usdzUrl}
|
||||||
|
onChange={(e) => setUsdzUrl(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={createAsset}
|
||||||
|
disabled={loading}
|
||||||
|
className='mt-6 inline-flex items-center justify-center rounded-xl bg-black px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60'
|
||||||
|
>
|
||||||
|
{loading ? 'Creating…' : 'Create Asset'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className='mb-4 text-lg font-semibold text-gray-800'>
|
||||||
|
Generated Assets
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{assets.length === 0 ? (
|
||||||
|
<p className='text-sm text-gray-500'>
|
||||||
|
No assets created yet.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
|
||||||
|
{assets.map((asset) => (
|
||||||
|
<div
|
||||||
|
key={asset.id}
|
||||||
|
className='rounded-2xl bg-white p-5 shadow-sm transition hover:shadow-md bg-radial-[at_0%_0%] to-70% from-black/20 to-transparent '
|
||||||
|
>
|
||||||
|
<h3 className='mb-3 text-base font-semibold text-gray-900'>
|
||||||
|
{asset?.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{asset?.qr_image ? (
|
||||||
|
<img
|
||||||
|
src={pb.files.getURL(asset, asset.qr_image)}
|
||||||
|
alt={asset?.name}
|
||||||
|
className='mx-auto w-40 rounded-lg'
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
asset?.qr_file ? (
|
||||||
|
<img
|
||||||
|
src={pb.files.getURL(asset, asset.qr_file)}
|
||||||
|
alt={asset?.name}
|
||||||
|
className='mx-auto w-40 rounded-lg'
|
||||||
|
/>
|
||||||
|
) : <div className='mx-auto flex h-40 w-40 flex-col items-center justify-center space-y-2 rounded-lg bg-gray-50 text-gray-400'>
|
||||||
|
<ImageOff size={32} strokeWidth={1.5} />
|
||||||
|
<span className='text-xs font-medium'>No QR Image</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { Link } from 'react-router';
|
|
||||||
import { Button } from '~/components/ui/button';
|
|
||||||
import { Card } from '~/components/ui/card';
|
|
||||||
import { Badge } from '~/components/ui/badge';
|
|
||||||
import { FileQuestion } from 'lucide-react';
|
|
||||||
|
|
||||||
export default function NotFound() {
|
|
||||||
return (
|
|
||||||
<div className="relative min-h-screen bg-[#0D0D0D] flex items-center justify-center p-6 overflow-hidden select-none font-sans text-white">
|
|
||||||
<div className="absolute top-[30%] left-[30%] w-[40%] h-[40%] rounded-full bg-orange-500/5 blur-[130px] pointer-events-none" />
|
|
||||||
|
|
||||||
<Card className="p-6 text-center border-neutral-850 shadow-2xl relative z-10 space-y-4 max-w-xs">
|
|
||||||
<div className="inline-flex w-12 h-12 bg-neutral-900 border border-neutral-850 rounded-xl items-center justify-center shadow-md mb-2">
|
|
||||||
<FileQuestion className="text-orange-500" size={22} />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Badge variant="orange">404 Error</Badge>
|
|
||||||
<h1 className="text-lg font-bold text-white uppercase tracking-tight mt-2">Page Not Found</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-neutral-500 text-[11px] leading-relaxed max-w-[240px] mx-auto">
|
|
||||||
The page you are looking for does not exist or has been moved.
|
|
||||||
</p>
|
|
||||||
<div className="pt-3">
|
|
||||||
<Link to="/" className="block w-full">
|
|
||||||
<Button size="sm" className="w-full font-bold uppercase tracking-wider text-[10px] py-4 h-10">
|
|
||||||
Return to Dashboard
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
922
package-lock.json
generated
922
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -9,24 +9,15 @@
|
|||||||
"typecheck": "react-router typegen && tsc"
|
"typecheck": "react-router typegen && tsc"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^5.4.0",
|
|
||||||
"@radix-ui/react-dialog": "^1.1.20",
|
|
||||||
"@radix-ui/react-slot": "^1.3.0",
|
|
||||||
"@react-router/node": "^7.9.2",
|
"@react-router/node": "^7.9.2",
|
||||||
"@react-router/serve": "^7.9.2",
|
"@react-router/serve": "^7.9.2",
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"isbot": "^5.1.31",
|
"isbot": "^5.1.31",
|
||||||
"lucide-react": "^0.555.0",
|
"lucide-react": "^0.555.0",
|
||||||
"pocketbase": "^0.26.8",
|
"pocketbase": "^0.26.8",
|
||||||
"qrcode": "^1.5.4",
|
"qrcode": "^1.5.4",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-dom": "^19.1.1",
|
"react-dom": "^19.1.1",
|
||||||
"react-hook-form": "^7.82.0",
|
"react-router": "^7.9.2"
|
||||||
"react-router": "^7.9.2",
|
|
||||||
"sonner": "^2.0.7",
|
|
||||||
"tailwind-merge": "^3.6.0",
|
|
||||||
"zod": "^4.4.3"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@react-router/dev": "^7.9.2",
|
"@react-router/dev": "^7.9.2",
|
||||||
@ -40,6 +31,5 @@
|
|||||||
"typescript": "^5.9.2",
|
"typescript": "^5.9.2",
|
||||||
"vite": "^7.1.7",
|
"vite": "^7.1.7",
|
||||||
"vite-tsconfig-paths": "^5.1.4"
|
"vite-tsconfig-paths": "^5.1.4"
|
||||||
},
|
}
|
||||||
"packageManager": "yarn@4.16.0+sha512.5374c94eb4ef6aa8188fb112f20c1aa6569f248d676c5e576e1fd2a1a4d8d87a96df65d9dfe1c2a0252cbe38bda46cf18d955005b81b43cc7607a5c9d56fd2b6"
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user