diff --git a/client/src/pages/project-detail/item-thumbnail.tsx b/client/src/pages/project-detail/item-thumbnail.tsx index b91f62c..53117a1 100644 --- a/client/src/pages/project-detail/item-thumbnail.tsx +++ b/client/src/pages/project-detail/item-thumbnail.tsx @@ -3,13 +3,14 @@ import { useState } from 'react'; interface ItemThumbnailProps { url: string | null; alt: string; - size?: 'sm' | 'md'; + size?: 'sm' | 'md' | 'lg'; onClick?: () => void; } const sizeClassMap: Record['size'], string> = { sm: 'h-14 w-14', - md: 'h-20 w-20' + md: 'h-20 w-20', + lg: 'h-28 w-28' }; export function ItemThumbnail({ url, alt, size = 'sm', onClick }: ItemThumbnailProps) { diff --git a/client/src/pages/project-detail/project-items-desktop-table.tsx b/client/src/pages/project-detail/project-items-desktop-table.tsx index b7fe815..aaee53b 100644 --- a/client/src/pages/project-detail/project-items-desktop-table.tsx +++ b/client/src/pages/project-detail/project-items-desktop-table.tsx @@ -13,6 +13,7 @@ interface ProjectItemsDesktopTableProps { onEditItem: (item: Item) => void; projectId: string | undefined; onViewItemImages: (item: Item) => void; + showLargeImages: boolean; } export function ProjectItemsDesktopTable({ @@ -22,7 +23,8 @@ export function ProjectItemsDesktopTable({ onTogglePrices, onEditItem, projectId, - onViewItemImages + onViewItemImages, + showLargeImages }: ProjectItemsDesktopTableProps) { return (
@@ -64,7 +66,7 @@ export function ProjectItemsDesktopTable({ onViewItemImages(item)} />
diff --git a/client/src/pages/project-detail/project-items-header.tsx b/client/src/pages/project-detail/project-items-header.tsx index ab18cfe..0d01ccf 100644 --- a/client/src/pages/project-detail/project-items-header.tsx +++ b/client/src/pages/project-detail/project-items-header.tsx @@ -4,6 +4,8 @@ interface ProjectItemsHeaderProps { showDifferencesOnly: boolean; hasAttributeDifferences: boolean; onToggleDifferences: (value: boolean) => void; + showLargeImages: boolean; + onToggleLargeImages: (value: boolean) => void; } export function ProjectItemsHeader({ @@ -11,7 +13,9 @@ export function ProjectItemsHeader({ isLoading, showDifferencesOnly, hasAttributeDifferences, - onToggleDifferences + onToggleDifferences, + showLargeImages, + onToggleLargeImages }: ProjectItemsHeaderProps) { const subtitle = isLoading ? 'Loading items…' @@ -25,16 +29,27 @@ export function ProjectItemsHeader({

Items

{subtitle}

- +
+ + +
); } diff --git a/client/src/pages/project-detail/project-items-mobile-list.tsx b/client/src/pages/project-detail/project-items-mobile-list.tsx index 5f84da0..0fceba7 100644 --- a/client/src/pages/project-detail/project-items-mobile-list.tsx +++ b/client/src/pages/project-detail/project-items-mobile-list.tsx @@ -12,6 +12,7 @@ interface ProjectItemsMobileListProps { onEditItem: (item: Item) => void; projectId: string | undefined; onViewItemImages: (item: Item) => void; + showLargeImages: boolean; } export function ProjectItemsMobileList({ @@ -21,7 +22,8 @@ export function ProjectItemsMobileList({ onTogglePrices, onEditItem, projectId, - onViewItemImages + onViewItemImages, + showLargeImages }: ProjectItemsMobileListProps) { return (
@@ -38,7 +40,7 @@ export function ProjectItemsMobileList({ onViewItemImages(item)} />
diff --git a/client/src/pages/project-detail/project-items-section.tsx b/client/src/pages/project-detail/project-items-section.tsx index 6484aed..129e6a2 100644 --- a/client/src/pages/project-detail/project-items-section.tsx +++ b/client/src/pages/project-detail/project-items-section.tsx @@ -39,6 +39,7 @@ export function ProjectItemsSection({ }: ProjectItemsSectionProps) { const [showDifferencesOnly, setShowDifferencesOnly] = useState(false); const [expandedItemId, setExpandedItemId] = useState(null); + const [showLargeImages, setShowLargeImages] = useState(false); const mismatchedAttributes = useMemo(() => { const result = new Set(); @@ -117,6 +118,8 @@ export function ProjectItemsSection({ showDifferencesOnly={showDifferencesOnly} hasAttributeDifferences={hasAttributeDifferences} onToggleDifferences={(value) => setShowDifferencesOnly(value)} + showLargeImages={showLargeImages} + onToggleLargeImages={(value) => setShowLargeImages(value)} /> {error ? ( @@ -137,6 +140,7 @@ export function ProjectItemsSection({ onEditItem={onEditItem} projectId={projectId} onViewItemImages={onViewItemImages} + showLargeImages={showLargeImages} />