450 lines
16 KiB
TypeScript
450 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { ArrowLeft, ChevronRight, Loader2, Camera, Upload, X } from 'lucide-react';
|
|
import { useItemCreate } from '@/hooks/useItemCreate';
|
|
import ItemPhotoUpload from '@/components/ItemPhotoUpload';
|
|
import ManualCropUI from '@/components/ManualCropUI';
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
interface Category {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
interface ItemType {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
export default function CreateItemPage() {
|
|
const router = useRouter();
|
|
const {
|
|
step,
|
|
formData,
|
|
setFormData,
|
|
uploadedPhoto,
|
|
cropBounds,
|
|
setCropBounds,
|
|
isLoading,
|
|
error,
|
|
photoError,
|
|
goToStep,
|
|
nextStep,
|
|
prevStep,
|
|
uploadPhoto,
|
|
submitItem,
|
|
reset,
|
|
} = useItemCreate();
|
|
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
const [itemTypes, setItemTypes] = useState<ItemType[]>([]);
|
|
const [currentUser, setCurrentUser] = useState<{ id: number; username: string } | null>(null);
|
|
const [useFullPhoto, setUseFullPhoto] = useState(true);
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
|
|
// Load categories and current user on mount
|
|
useEffect(() => {
|
|
const loadInitialData = async () => {
|
|
try {
|
|
// Get categories from localStorage or API
|
|
const savedCategories = localStorage.getItem('categories');
|
|
const savedUser = localStorage.getItem('currentUser');
|
|
|
|
if (savedCategories) {
|
|
setCategories(JSON.parse(savedCategories));
|
|
}
|
|
if (savedUser) {
|
|
setCurrentUser(JSON.parse(savedUser));
|
|
}
|
|
} catch (err) {
|
|
// Silently handle initial data load failure - use default empty state
|
|
}
|
|
};
|
|
|
|
loadInitialData();
|
|
}, []);
|
|
|
|
const handlePhotoUpload = async (file: File) => {
|
|
setSelectedFile(file);
|
|
try {
|
|
await uploadPhoto(file);
|
|
toast.success('Photo uploaded successfully');
|
|
nextStep(); // Move to preview after upload
|
|
} catch (err: any) {
|
|
toast.error(err.message || 'Failed to upload photo');
|
|
}
|
|
};
|
|
|
|
const handleDetailsSubmit = async () => {
|
|
try {
|
|
if (!currentUser) {
|
|
toast.error('User not authenticated');
|
|
return;
|
|
}
|
|
|
|
await submitItem(currentUser.id);
|
|
nextStep(); // Move to photo upload after item creation
|
|
} catch (err: any) {
|
|
toast.error(err.message || 'Failed to create item');
|
|
}
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
toast.success('Item created successfully');
|
|
reset();
|
|
router.push('/inventory');
|
|
};
|
|
|
|
const stepIndicator = (stepName: string, stepNum: number) => {
|
|
const stepOrder: Record<string, number> = {
|
|
details: 1,
|
|
photo: 2,
|
|
preview: 3,
|
|
confirm: 4,
|
|
};
|
|
const currentNum = stepOrder[step];
|
|
const isActive = currentNum === stepNum;
|
|
const isCompleted = currentNum > stepNum;
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-2 text-xs font-normal ${
|
|
isActive ? 'text-primary' : isCompleted ? 'text-slate-400' : 'text-slate-500'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
|
isActive
|
|
? 'bg-primary text-white'
|
|
: isCompleted
|
|
? 'bg-slate-400 text-white'
|
|
: 'bg-slate-700'
|
|
}`}
|
|
>
|
|
{stepNum}
|
|
</div>
|
|
{stepName}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-white p-4">
|
|
{/* Header */}
|
|
<div className="max-w-2xl mx-auto mb-6">
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="flex items-center gap-2 text-sm text-slate-400 hover:text-white transition-colors mb-6"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
Back
|
|
</button>
|
|
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<div className="p-3 bg-primary/10 rounded-lg border border-primary/20">
|
|
<Upload size={24} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-normal">Create New Item</h1>
|
|
<p className="text-xs text-slate-500 mt-1">
|
|
Step {step === 'details' ? 1 : step === 'photo' ? 2 : step === 'preview' ? 3 : 4} of 4
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Indicator */}
|
|
<div className="flex justify-between gap-4 text-center mb-8">
|
|
{stepIndicator('Details', 1)}
|
|
{stepIndicator('Photo', 2)}
|
|
{stepIndicator('Preview', 3)}
|
|
{stepIndicator('Confirm', 4)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="max-w-2xl mx-auto">
|
|
{/* Details Step */}
|
|
{step === 'details' && (
|
|
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
|
|
<h2 className="text-lg font-normal mb-6">Item Details</h2>
|
|
|
|
<div className="space-y-4">
|
|
{/* Name */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Item Name</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ name: e.target.value })}
|
|
placeholder="Enter item name"
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Category */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Category</label>
|
|
<select
|
|
value={formData.category}
|
|
onChange={(e) => setFormData({ category: e.target.value })}
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
>
|
|
<option value="">Select a category</option>
|
|
{categories.map((cat) => (
|
|
<option key={cat.id} value={cat.name}>
|
|
{cat.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Item Type */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Item Type</label>
|
|
<input
|
|
type="text"
|
|
value={formData.item_type}
|
|
onChange={(e) => setFormData({ item_type: e.target.value })}
|
|
placeholder="e.g., Component, Part, Equipment"
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Quantity */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Quantity</label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={formData.quantity}
|
|
onChange={(e) => setFormData({ quantity: parseInt(e.target.value) || 1 })}
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Part Number (Optional) */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Part Number (Optional)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.part_number || ''}
|
|
onChange={(e) => setFormData({ part_number: e.target.value })}
|
|
placeholder="e.g., PN-12345"
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Barcode (Optional) */}
|
|
<div>
|
|
<label className="block text-sm font-normal mb-2">Barcode (Optional)</label>
|
|
<input
|
|
type="text"
|
|
value={formData.barcode || ''}
|
|
onChange={(e) => setFormData({ barcode: e.target.value })}
|
|
placeholder="e.g., 1234567890"
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:border-primary focus:outline-none"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
|
|
disabled={isLoading}
|
|
>
|
|
Discard Draft
|
|
</button>
|
|
<button
|
|
onClick={handleDetailsSubmit}
|
|
disabled={isLoading}
|
|
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
|
|
>
|
|
{isLoading ? <Loader2 size={16} className="animate-spin" /> : <ChevronRight size={16} />}
|
|
{isLoading ? 'Creating...' : 'Next: Upload Photo'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Photo Upload Step */}
|
|
{step === 'photo' && (
|
|
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
|
|
<h2 className="text-lg font-normal mb-4">Upload Item Photo</h2>
|
|
<p className="text-sm text-slate-400 mb-6">
|
|
Take a photo or upload an image. You can crop it manually on the next step.
|
|
</p>
|
|
|
|
<div className="mb-6">
|
|
<ItemPhotoUpload
|
|
itemId={0} // Placeholder - item already created
|
|
onUploadSuccess={(photo) => {
|
|
setSelectedFile(null);
|
|
}}
|
|
onError={(error) => {
|
|
toast.error(error);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{photoError && (
|
|
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm mb-6">
|
|
{photoError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={prevStep}
|
|
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={nextStep}
|
|
disabled={!uploadedPhoto}
|
|
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:bg-slate-700 disabled:text-slate-500 transition-colors font-normal flex items-center justify-center gap-2"
|
|
>
|
|
<ChevronRight size={16} />
|
|
Next: Crop & Preview
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview Step (Crop) */}
|
|
{step === 'preview' && uploadedPhoto && (
|
|
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
|
|
<h2 className="text-lg font-normal mb-4">Crop & Preview</h2>
|
|
<p className="text-sm text-slate-400 mb-6">
|
|
Adjust the crop area or use the full photo. Manual crop handles are visible.
|
|
</p>
|
|
|
|
<div className="mb-6 bg-slate-800 rounded-lg p-4">
|
|
<ManualCropUI
|
|
imageUrl={uploadedPhoto.full_url}
|
|
onCropChange={setCropBounds}
|
|
initialCrop={cropBounds || undefined}
|
|
/>
|
|
</div>
|
|
|
|
{/* Use Full Photo Toggle */}
|
|
<div className="flex items-center gap-3 mb-6 p-3 bg-slate-800 rounded-lg">
|
|
<input
|
|
type="checkbox"
|
|
id="use-full-photo"
|
|
checked={useFullPhoto}
|
|
onChange={(e) => {
|
|
setUseFullPhoto(e.target.checked);
|
|
if (e.target.checked) {
|
|
setCropBounds(null);
|
|
}
|
|
}}
|
|
className="w-4 h-4 rounded border-slate-600 accent-primary"
|
|
/>
|
|
<label htmlFor="use-full-photo" className="text-sm font-normal text-slate-300">
|
|
Use full photo (skip cropping)
|
|
</label>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={prevStep}
|
|
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={nextStep}
|
|
className="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-normal flex items-center justify-center gap-2"
|
|
>
|
|
<ChevronRight size={16} />
|
|
Next: Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Confirm Step */}
|
|
{step === 'confirm' && (
|
|
<div className="bg-slate-900 rounded-lg border border-slate-800 p-6">
|
|
<h2 className="text-lg font-normal mb-6">Confirm & Save</h2>
|
|
|
|
{/* Item Summary */}
|
|
<div className="bg-slate-800 rounded-lg p-4 mb-6 space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Name:</span>
|
|
<span className="font-normal">{formData.name}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Category:</span>
|
|
<span className="font-normal">{formData.category}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Type:</span>
|
|
<span className="font-normal">{formData.item_type}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Quantity:</span>
|
|
<span className="font-normal">{formData.quantity}</span>
|
|
</div>
|
|
{uploadedPhoto && (
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Photo:</span>
|
|
<span className="font-normal text-green-400">Uploaded</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Photo Thumbnail */}
|
|
{uploadedPhoto && (
|
|
<div className="mb-6">
|
|
<p className="text-sm text-slate-400 mb-2">Photo Preview</p>
|
|
<img
|
|
src={uploadedPhoto.thumbnail_url}
|
|
alt="Item"
|
|
className="w-full h-48 object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={prevStep}
|
|
className="flex-1 px-4 py-2 border border-slate-700 text-slate-300 rounded-lg hover:border-slate-600 transition-colors font-normal"
|
|
>
|
|
Back
|
|
</button>
|
|
<button
|
|
onClick={handleConfirm}
|
|
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-normal flex items-center justify-center gap-2"
|
|
>
|
|
Save & Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|