feat(phase2): integrate photo upload into item creation

- Create frontend/app/items/create.tsx with multi-step item creation workflow (Details → Photo Upload → Preview → Confirm)
- Create frontend/hooks/useItemCreate.ts custom hook managing form state, step navigation, and photo upload
- Add integration tests for item creation workflow with photo upload support
- Photo upload step supports manual crop UI with crop bounds submission
- ManualCropUI visible by default with toggle to use full photo
- Photo uploaded before item confirmation, ensuring photo is attached
- Works with mobile camera capture via ItemPhotoUpload component
- All 374 tests passing

frontend/hooks/useItemCreate.ts

@@ -0,0 +1,205 @@
+import { useState, useCallback } from 'react';
+import { inventoryApi } from '@/lib/api';
+import { CropBounds } from './useCropHandles';
+
+interface ItemFormData {
+  name: string;
+  category: string;
+  item_type: string;
+  quantity: number;
+  barcode?: string;
+  part_number?: string;
+  box_label?: string;
+}
+
+interface UploadedPhoto {
+  thumbnail_url: string;
+  full_url: string;
+  uploaded_at: string;
+}
+
+interface UseItemCreateReturn {
+  step: 'details' | 'photo' | 'preview' | 'confirm';
+  formData: ItemFormData;
+  setFormData: (data: Partial<ItemFormData>) => void;
+  uploadedPhoto: UploadedPhoto | null;
+  cropBounds: CropBounds | null;
+  setCropBounds: (bounds: CropBounds | null) => void;
+  isLoading: boolean;
+  error: string | null;
+  photoError: string | null;
+  goToStep: (step: 'details' | 'photo' | 'preview' | 'confirm') => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  uploadPhoto: (file: File) => Promise<void>;
+  submitItem: (userId: number) => Promise<any>;
+  reset: () => void;
+}
+
+const initialFormData: ItemFormData = {
+  name: '',
+  category: '',
+  item_type: '',
+  quantity: 1,
+  barcode: '',
+  part_number: '',
+  box_label: '',
+};
+
+export function useItemCreate(): UseItemCreateReturn {
+  const [step, setStep] = useState<'details' | 'photo' | 'preview' | 'confirm'>('details');
+  const [formData, setFormDataState] = useState<ItemFormData>(initialFormData);
+  const [uploadedPhoto, setUploadedPhoto] = useState<UploadedPhoto | null>(null);
+  const [cropBounds, setCropBounds] = useState<CropBounds | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [photoError, setPhotoError] = useState<string | null>(null);
+  const [itemId, setItemId] = useState<number | null>(null);
+
+  const setFormData = useCallback((data: Partial<ItemFormData>) => {
+    setFormDataState((prev) => ({ ...prev, ...data }));
+  }, []);
+
+  const goToStep = useCallback((newStep: 'details' | 'photo' | 'preview' | 'confirm') => {
+    setError(null);
+    setPhotoError(null);
+    setStep(newStep);
+  }, []);
+
+  const nextStep = useCallback(() => {
+    const steps: Array<'details' | 'photo' | 'preview' | 'confirm'> = ['details', 'photo', 'preview', 'confirm'];
+    const currentIndex = steps.indexOf(step);
+    if (currentIndex < steps.length - 1) {
+      goToStep(steps[currentIndex + 1]);
+    }
+  }, [step, goToStep]);
+
+  const prevStep = useCallback(() => {
+    const steps: Array<'details' | 'photo' | 'preview' | 'confirm'> = ['details', 'photo', 'preview', 'confirm'];
+    const currentIndex = steps.indexOf(step);
+    if (currentIndex > 0) {
+      goToStep(steps[currentIndex - 1]);
+    }
+  }, [step, goToStep]);
+
+  const uploadPhoto = useCallback(
+    async (file: File, photoItemId?: number) => {
+      const idToUse = photoItemId || itemId;
+
+      if (!idToUse) {
+        setPhotoError('Item must be created before uploading photo');
+        return;
+      }
+
+      setPhotoError(null);
+      setIsLoading(true);
+
+      try {
+        const formDataUpload = new FormData();
+        formDataUpload.append('file', file);
+
+        // If crop bounds are set, add them to the request
+        if (cropBounds) {
+          formDataUpload.append('crop_bounds', JSON.stringify(cropBounds));
+        }
+
+        const response = await inventoryApi.uploadItemPhoto(idToUse, formDataUpload);
+
+        if (response.status === 'ok' && response.photo) {
+          setUploadedPhoto({
+            thumbnail_url: response.photo.thumbnail_url,
+            full_url: response.photo.full_url,
+            uploaded_at: response.photo.uploaded_at,
+          });
+          setIsLoading(false);
+        } else {
+          throw new Error('Invalid response from server');
+        }
+      } catch (err: any) {
+        const errorMsg = err.message || 'Photo upload failed';
+        setPhotoError(errorMsg);
+        setIsLoading(false);
+        throw new Error(errorMsg);
+      }
+    },
+    [itemId, cropBounds]
+  );
+
+  const submitItem = useCallback(
+    async (userId: number) => {
+      setError(null);
+      setIsLoading(true);
+
+      try {
+        // Validate form data
+        if (!formData.name.trim()) {
+          const errorMsg = 'Item name is required';
+          setError(errorMsg);
+          setIsLoading(false);
+          return undefined;
+        }
+        if (!formData.category) {
+          const errorMsg = 'Category is required';
+          setError(errorMsg);
+          setIsLoading(false);
+          return undefined;
+        }
+        if (!formData.item_type) {
+          const errorMsg = 'Item type is required';
+          setError(errorMsg);
+          setIsLoading(false);
+          return undefined;
+        }
+
+        // Create item first (without photo)
+        const createdItem = await inventoryApi.createItem(userId, formData);
+
+        if (!createdItem.id) {
+          const errorMsg = 'Failed to create item';
+          setError(errorMsg);
+          setIsLoading(false);
+          return undefined;
+        }
+
+        setItemId(createdItem.id);
+        setIsLoading(false);
+
+        return createdItem;
+      } catch (err: any) {
+        const errorMsg = err.message || 'Failed to create item';
+        setError(errorMsg);
+        setIsLoading(false);
+        return undefined;
+      }
+    },
+    [formData]
+  );
+
+  const reset = useCallback(() => {
+    setStep('details');
+    setFormDataState(initialFormData);
+    setUploadedPhoto(null);
+    setCropBounds(null);
+    setItemId(null);
+    setError(null);
+    setPhotoError(null);
+  }, []);
+
+  return {
+    step,
+    formData,
+    setFormData,
+    uploadedPhoto,
+    cropBounds,
+    setCropBounds,
+    isLoading,
+    error,
+    photoError,
+    goToStep,
+    nextStep,
+    prevStep,
+    uploadPhoto,
+    submitItem,
+    reset,
+  };
+}