DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
855 lines
32 KiB
TypeScript
855 lines
32 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo, useEffect, useCallback } from 'react'
|
|
import Image from 'next/image'
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { Download, Search, Filter, X, Coffee, Utensils, Package, Droplet, Eye, ShoppingCart, LayoutGrid, List, ExternalLink, Loader2, AlertCircle } from 'lucide-react'
|
|
import type { Manual, ManualGroup } from '@/lib/manuals-types'
|
|
import { getManualUrl, getThumbnailUrl } from '@/lib/manuals-types'
|
|
import { getMachineTypeInfo, getAllMachineTypeNames } from '@/lib/manuals-config'
|
|
import { ManualViewer } from '@/components/manual-viewer'
|
|
import { getManualsWithParts } from '@/lib/parts-lookup'
|
|
import { ebayClient } from '@/lib/ebay-api'
|
|
|
|
// Product Suggestion Component
|
|
interface ProductSuggestion {
|
|
itemId: string
|
|
title: string
|
|
price: string
|
|
currency: string
|
|
imageUrl?: string
|
|
viewItemUrl: string
|
|
affiliateLink: string
|
|
condition?: string
|
|
}
|
|
|
|
interface ProductSuggestionsProps {
|
|
manual: Manual
|
|
className?: string
|
|
}
|
|
|
|
function ProductSuggestions({ manual, className = '' }: ProductSuggestionsProps) {
|
|
const [suggestions, setSuggestions] = useState<ProductSuggestion[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
async function loadSuggestions() {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
// Generate search query from manual content
|
|
const query = `${manual.manufacturer} ${manual.category} vending machine`
|
|
const results = await ebayClient.searchItems({
|
|
keywords: query,
|
|
maxResults: 6,
|
|
sortOrder: 'BestMatch',
|
|
})
|
|
|
|
setSuggestions(results)
|
|
} catch (err) {
|
|
console.error('Error loading product suggestions:', err)
|
|
setError('Could not load product suggestions')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
if (manual) {
|
|
loadSuggestions()
|
|
}
|
|
}, [manual])
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}>
|
|
<div className="flex items-center justify-center h-32">
|
|
<Loader2 className="h-5 w-5 text-yellow-700 dark:text-yellow-300 animate-spin" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}>
|
|
<div className="flex items-center justify-center h-32">
|
|
<AlertCircle className="h-6 w-6 text-red-500" />
|
|
<span className="ml-2 text-sm text-red-500">{error}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (suggestions.length === 0) {
|
|
return (
|
|
<div className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}>
|
|
<div className="flex items-center justify-center h-32">
|
|
<AlertCircle className="h-6 w-6 text-yellow-500" />
|
|
<span className="ml-2 text-sm text-yellow-600">
|
|
No products found in sandbox environment
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<ShoppingCart className="h-4 w-4 text-yellow-700 dark:text-yellow-300" />
|
|
<h3 className="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
|
|
Related Products
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{suggestions.map((product) => (
|
|
<a
|
|
key={product.itemId}
|
|
href={product.affiliateLink}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block group"
|
|
>
|
|
<div className="bg-white dark:bg-yellow-900/30 rounded border border-yellow-300/40 dark:border-yellow-700/40 p-2 hover:bg-yellow-50 dark:hover:bg-yellow-900/40 transition-colors">
|
|
{/* Image */}
|
|
{product.imageUrl && (
|
|
<div className="mb-2 rounded overflow-hidden bg-yellow-100 dark:bg-yellow-900/50">
|
|
<img
|
|
src={product.imageUrl}
|
|
alt={product.title}
|
|
className="w-full h-16 object-cover"
|
|
onError={(e) => {
|
|
e.currentTarget.src = `https://via.placeholder.com/120x80/fbbf24/1f2937?text=${encodeURIComponent(product.title)}`
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!product.imageUrl && (
|
|
<div className="mb-2 rounded overflow-hidden bg-yellow-100 dark:bg-yellow-900/50 h-16 flex items-center justify-center">
|
|
<span className="text-[10px] text-yellow-700 dark:text-yellow-300">No Image</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Product Details */}
|
|
<div className="space-y-1">
|
|
<div className="text-[11px] text-yellow-900 dark:text-yellow-100 line-clamp-2 min-h-[1.5rem]">
|
|
{product.title}
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-semibold text-yellow-900 dark:text-yellow-100">
|
|
{product.price}
|
|
</span>
|
|
<ExternalLink className="h-3 w-3 text-yellow-700 dark:text-yellow-300 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 transition-colors flex-shrink-0" />
|
|
</div>
|
|
{product.condition && (
|
|
<div className="text-[9px] text-yellow-700/80 dark:text-yellow-300/80">
|
|
{product.condition}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface ManualsPageClientProps {
|
|
manuals: Manual[]
|
|
groupedManuals: ManualGroup[]
|
|
manufacturers: string[]
|
|
categories: string[]
|
|
}
|
|
|
|
interface ManualCardProps {
|
|
manual: Manual
|
|
onView: (manual: { url: string; filename: string }) => void
|
|
manualHasParts: (manual: Manual) => boolean
|
|
getCategoryBadgeClass: (category: string) => string
|
|
formatFileSize: (bytes?: number) => string
|
|
showManufacturer?: boolean
|
|
}
|
|
|
|
function ManualCard({
|
|
manual,
|
|
onView,
|
|
manualHasParts,
|
|
getCategoryBadgeClass,
|
|
formatFileSize,
|
|
showManufacturer = false,
|
|
}: ManualCardProps) {
|
|
const thumbnailUrl = getThumbnailUrl(manual)
|
|
|
|
return (
|
|
<Card className="hover:shadow-md transition-shadow transition-colors">
|
|
{thumbnailUrl && (
|
|
<div className="relative w-full h-48 min-h-[192px] bg-muted overflow-hidden">
|
|
<Image
|
|
src={thumbnailUrl}
|
|
alt={manual.filename.replace(/\.pdf$/i, '')}
|
|
fill
|
|
className="object-contain"
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
<CardHeader>
|
|
<CardTitle className="text-base line-clamp-2">
|
|
{manual.filename.replace(/\.pdf$/i, '')}
|
|
</CardTitle>
|
|
{manual.commonNames && manual.commonNames.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{manual.commonNames.map((name, index) => (
|
|
<Badge key={index} variant="secondary">
|
|
{name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
{manual.searchTerms && manual.searchTerms.length > 0 && !manual.commonNames && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{manual.searchTerms.map((term, index) => (
|
|
<Badge key={index} variant="secondary">
|
|
{term}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge
|
|
variant="outline"
|
|
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${getCategoryBadgeClass(
|
|
manual.category
|
|
)}`}
|
|
>
|
|
{manual.category}
|
|
</Badge>
|
|
{manualHasParts(manual) && (
|
|
<Badge
|
|
variant="outline"
|
|
className="bg-yellow-50 text-yellow-800 border-yellow-300 dark:bg-yellow-950 dark:text-yellow-200 dark:border-yellow-700"
|
|
>
|
|
<ShoppingCart className="h-3 w-3 mr-1" />
|
|
Has Parts
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground space-y-1">
|
|
{showManufacturer && (
|
|
<p>
|
|
<strong>Manufacturer:</strong> {manual.manufacturer}
|
|
</p>
|
|
)}
|
|
{manual.size && (
|
|
<p>
|
|
<strong>Size:</strong> {formatFileSize(manual.size)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onView({ url: getManualUrl(manual), filename: manual.filename })}
|
|
className="flex-1"
|
|
>
|
|
<Eye className="h-4 w-4 mr-1" />
|
|
View PDF
|
|
</Button>
|
|
<a
|
|
href={getManualUrl(manual)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-sm font-medium hover:underline px-2"
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function ManualsPageClient({
|
|
manuals,
|
|
groupedManuals,
|
|
manufacturers,
|
|
categories,
|
|
}: ManualsPageClientProps) {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [selectedManufacturer, setSelectedManufacturer] = useState<string>('')
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('')
|
|
const [hasPartsOnly, setHasPartsOnly] = useState(false)
|
|
const [viewMode, setViewMode] = useState<'grouped' | 'list'>('grouped')
|
|
const [viewingManual, setViewingManual] = useState<{ url: string; filename: string } | null>(null)
|
|
const [manualsWithParts, setManualsWithParts] = useState<Set<string>>(new Set())
|
|
const [partsLoading, setPartsLoading] = useState(true)
|
|
|
|
// Load manuals with parts on mount
|
|
useEffect(() => {
|
|
getManualsWithParts().then(set => {
|
|
setManualsWithParts(set)
|
|
setPartsLoading(false)
|
|
}).catch(() => {
|
|
setPartsLoading(false)
|
|
})
|
|
}, [])
|
|
|
|
// Helper function to check if a manual has parts
|
|
const manualHasParts = useCallback((manual: Manual): boolean => {
|
|
if (manualsWithParts.size === 0) return false
|
|
const filename = manual.filename
|
|
return manualsWithParts.has(filename) ||
|
|
manualsWithParts.has(filename.toLowerCase()) ||
|
|
manualsWithParts.has(filename.replace(/\.pdf$/i, '')) ||
|
|
manualsWithParts.has(filename.replace(/\.pdf$/i, '').toLowerCase())
|
|
}, [manualsWithParts])
|
|
|
|
// Filter manuals based on search and filters
|
|
const filteredManuals = useMemo(() => {
|
|
let filtered = manuals
|
|
|
|
if (selectedManufacturer) {
|
|
filtered = filtered.filter((m) => m.manufacturer === selectedManufacturer)
|
|
}
|
|
|
|
if (selectedCategory) {
|
|
filtered = filtered.filter((m) => m.category === selectedCategory)
|
|
}
|
|
|
|
if (hasPartsOnly) {
|
|
filtered = filtered.filter((m) => manualHasParts(m))
|
|
}
|
|
|
|
if (searchTerm) {
|
|
const search = searchTerm.toLowerCase()
|
|
filtered = filtered.filter(
|
|
(m) =>
|
|
m.filename.toLowerCase().includes(search) ||
|
|
m.manufacturer.toLowerCase().includes(search) ||
|
|
m.category.toLowerCase().includes(search) ||
|
|
(m.commonNames && m.commonNames.some(name => name.toLowerCase().includes(search))) ||
|
|
(m.searchTerms && m.searchTerms.some(term => term.includes(search)))
|
|
)
|
|
}
|
|
|
|
return filtered
|
|
}, [manuals, searchTerm, selectedManufacturer, selectedCategory, hasPartsOnly, manualHasParts])
|
|
|
|
// Get filtered categories based on selected manufacturer
|
|
const filteredCategories = useMemo(() => {
|
|
if (!selectedManufacturer) {
|
|
return categories
|
|
}
|
|
|
|
const manufacturerManuals = manuals.filter(m => m.manufacturer === selectedManufacturer)
|
|
const uniqueCategories = new Set(manufacturerManuals.map(m => m.category))
|
|
return Array.from(uniqueCategories)
|
|
}, [manuals, selectedManufacturer, categories])
|
|
|
|
// Filter grouped manuals
|
|
const filteredGroupedManuals = useMemo(() => {
|
|
if (!selectedManufacturer && !selectedCategory && !searchTerm && !hasPartsOnly) {
|
|
return groupedManuals
|
|
}
|
|
|
|
return groupedManuals
|
|
.filter((group) => {
|
|
if (selectedManufacturer && group.manufacturer !== selectedManufacturer) {
|
|
return false
|
|
}
|
|
return true
|
|
})
|
|
.map((group) => {
|
|
const filteredCategories: { [key: string]: Manual[] } = {}
|
|
for (const [category, categoryManuals] of Object.entries(group.categories)) {
|
|
if (selectedCategory && category !== selectedCategory) {
|
|
continue
|
|
}
|
|
const filtered = categoryManuals.filter((manual) => {
|
|
if (hasPartsOnly && !manualHasParts(manual)) {
|
|
return false
|
|
}
|
|
if (searchTerm) {
|
|
const search = searchTerm.toLowerCase()
|
|
return (
|
|
manual.filename.toLowerCase().includes(search) ||
|
|
manual.manufacturer.toLowerCase().includes(search) ||
|
|
manual.category.toLowerCase().includes(search) ||
|
|
(manual.commonNames && manual.commonNames.some(name => name.toLowerCase().includes(search))) ||
|
|
(manual.searchTerms && manual.searchTerms.some(term => term.includes(search)))
|
|
)
|
|
}
|
|
return true
|
|
})
|
|
if (filtered.length > 0) {
|
|
filteredCategories[category] = filtered
|
|
}
|
|
}
|
|
return {
|
|
...group,
|
|
categories: filteredCategories,
|
|
}
|
|
})
|
|
.filter((group) => Object.keys(group.categories).length > 0)
|
|
}, [groupedManuals, selectedManufacturer, selectedCategory, searchTerm, hasPartsOnly, manualHasParts])
|
|
|
|
const hasActiveFilters = selectedManufacturer || selectedCategory || searchTerm || hasPartsOnly
|
|
|
|
const clearFilters = () => {
|
|
setSearchTerm('')
|
|
setSelectedManufacturer('')
|
|
setSelectedCategory('')
|
|
setHasPartsOnly(false)
|
|
}
|
|
|
|
const formatFileSize = (bytes?: number): string => {
|
|
if (!bytes) return 'Unknown size'
|
|
if (bytes < 1024) return `${bytes} B`
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
|
}
|
|
|
|
// Organize categories by machine type first, then others
|
|
const organizeCategories = (categories: { [key: string]: Manual[] }) => {
|
|
const machineTypes = getAllMachineTypeNames()
|
|
const machineTypeCategories: { [key: string]: Manual[] } = {}
|
|
const otherCategories: { [key: string]: Manual[] } = {}
|
|
|
|
for (const [category, manuals] of Object.entries(categories)) {
|
|
if (machineTypes.includes(category)) {
|
|
machineTypeCategories[category] = manuals
|
|
} else {
|
|
otherCategories[category] = manuals
|
|
}
|
|
}
|
|
|
|
// Sort machine types by priority order
|
|
const sortedMachineTypes = machineTypes
|
|
.filter((type) => machineTypeCategories[type])
|
|
.map((type) => [type, machineTypeCategories[type]] as [string, Manual[]])
|
|
|
|
// Sort other categories alphabetically
|
|
const sortedOthers = Object.entries(otherCategories).sort(([a], [b]) =>
|
|
a.localeCompare(b)
|
|
)
|
|
|
|
return { machineTypes: sortedMachineTypes, others: sortedOthers }
|
|
}
|
|
|
|
// Get icon for machine type
|
|
const getCategoryIcon = (category: string) => {
|
|
const machineType = getMachineTypeInfo(category)
|
|
if (!machineType) return null
|
|
|
|
switch (category) {
|
|
case 'Coffee':
|
|
return <Coffee className="h-4 w-4" />
|
|
case 'Food':
|
|
return <Utensils className="h-4 w-4" />
|
|
case 'Beverage':
|
|
return <Droplet className="h-4 w-4" />
|
|
case 'Snack':
|
|
return <Package className="h-4 w-4" />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
// Get badge color for category
|
|
const getCategoryBadgeClass = (category: string): string => {
|
|
const machineType = getMachineTypeInfo(category)
|
|
const categoryLower = category.toLowerCase()
|
|
|
|
// Check for common category patterns
|
|
if (categoryLower.includes('snack')) {
|
|
return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'
|
|
}
|
|
if (categoryLower.includes('beverage') || categoryLower.includes('drink')) {
|
|
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
|
}
|
|
if (categoryLower.includes('frozen')) {
|
|
return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200'
|
|
}
|
|
if (categoryLower.includes('combo')) {
|
|
return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
|
|
}
|
|
if (categoryLower.includes('coffee') || categoryLower.includes('hot')) {
|
|
return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
|
|
}
|
|
if (categoryLower.includes('food')) {
|
|
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
|
}
|
|
if (categoryLower.includes('bulk')) {
|
|
return 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200'
|
|
}
|
|
if (categoryLower.includes('ice') || categoryLower.includes('cream')) {
|
|
return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
|
|
}
|
|
if (categoryLower.includes('service') || categoryLower.includes('repair')) {
|
|
return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
|
}
|
|
if (categoryLower.includes('parts')) {
|
|
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
|
}
|
|
if (categoryLower.includes('operator') || categoryLower.includes('user')) {
|
|
return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200'
|
|
}
|
|
if (categoryLower.includes('installation') || categoryLower.includes('setup')) {
|
|
return 'bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-200'
|
|
}
|
|
|
|
// Fallback for machine types
|
|
if (machineType) {
|
|
switch (category) {
|
|
case 'Snack':
|
|
return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'
|
|
case 'Beverage':
|
|
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
|
case 'Combo':
|
|
return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
|
|
case 'Coffee':
|
|
return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
|
|
case 'Food':
|
|
return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
|
case 'Bulk':
|
|
return 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200'
|
|
case 'Ice Cream':
|
|
return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
|
|
default:
|
|
return 'bg-muted text-muted-foreground'
|
|
}
|
|
}
|
|
|
|
return 'bg-muted text-muted-foreground'
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Search and Filter Controls */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="space-y-6">
|
|
{/* Search Bar */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search manuals by name, manufacturer, or category..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filters Row */}
|
|
<div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 items-start sm:items-center">
|
|
<div className="flex items-center gap-2 w-full sm:w-auto">
|
|
<Filter className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
|
<span className="text-sm font-medium">Filters:</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full sm:w-auto">
|
|
<div className="relative">
|
|
<Select
|
|
value={selectedManufacturer || undefined}
|
|
onValueChange={(value) => {
|
|
setSelectedManufacturer(value ?? '')
|
|
// Clear category when manufacturer changes
|
|
if (value && selectedCategory && !filteredCategories.includes(selectedCategory)) {
|
|
setSelectedCategory('')
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-full sm:w-[180px]">
|
|
<SelectValue placeholder="All Manufacturers" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{manufacturers.map((mfr) => (
|
|
<SelectItem key={mfr} value={mfr}>
|
|
{mfr}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{selectedManufacturer && (
|
|
<Badge className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-1.5 py-0.5 rounded-full">
|
|
Applied
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Select
|
|
value={selectedCategory || undefined}
|
|
onValueChange={(value) => {
|
|
setSelectedCategory(value ?? '')
|
|
}}
|
|
disabled={!selectedManufacturer && filteredCategories.length === categories.length}
|
|
>
|
|
<SelectTrigger className="w-full sm:w-[180px]">
|
|
<SelectValue placeholder="All Categories" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{filteredCategories.map((cat) => (
|
|
<SelectItem key={cat} value={cat}>
|
|
{cat}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{selectedCategory && (
|
|
<Badge className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-1.5 py-0.5 rounded-full">
|
|
Applied
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 w-full sm:w-auto">
|
|
<Checkbox
|
|
id="has-parts"
|
|
checked={hasPartsOnly}
|
|
onCheckedChange={(checked) => setHasPartsOnly(checked === true)}
|
|
/>
|
|
<label
|
|
htmlFor="has-parts"
|
|
className="text-sm font-medium flex items-center gap-1.5 cursor-pointer"
|
|
>
|
|
<ShoppingCart className="h-3.5 w-3.5" />
|
|
Has Parts Available
|
|
</label>
|
|
{hasPartsOnly && (
|
|
<Badge className="bg-green-500 text-white text-xs px-1.5 py-0.5 rounded-full">
|
|
Applied
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{hasActiveFilters && (
|
|
<Button variant="outline" size="sm" onClick={clearFilters} className="w-full sm:w-auto">
|
|
<X className="h-4 w-4 mr-1" />
|
|
Clear Filters
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* View Mode Toggle and Results Count */}
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
|
|
<div className="flex items-center gap-3 w-full sm:w-auto">
|
|
<span className="text-sm text-muted-foreground flex-shrink-0">View:</span>
|
|
<div className="inline-flex items-center rounded-md border border-input bg-background shadow-xs flex-1 sm:flex-initial">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setViewMode('grouped')}
|
|
className={`rounded-r-none border-r flex-1 sm:flex-initial ${
|
|
viewMode === 'grouped'
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'hover:bg-muted'
|
|
}`}
|
|
aria-label="Grouped view"
|
|
>
|
|
<LayoutGrid className="h-4 w-4 mr-1.5" />
|
|
<span className="hidden xs:inline">Grouped</span>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setViewMode('list')}
|
|
className={`rounded-l-none flex-1 sm:flex-initial ${
|
|
viewMode === 'list'
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'hover:bg-muted'
|
|
}`}
|
|
aria-label="List view"
|
|
>
|
|
<List className="h-4 w-4 mr-1.5" />
|
|
<span className="hidden xs:inline">List</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground w-full sm:w-auto text-center sm:text-left">
|
|
Showing <strong>{filteredManuals.length}</strong> of <strong>{manuals.length}</strong>{' '}
|
|
manuals
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Manuals Display */}
|
|
{filteredManuals.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-16 text-center">
|
|
<div className="space-y-2">
|
|
<p className="text-lg font-medium text-foreground">
|
|
No manuals found
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Try adjusting your search or filters to find what you're looking for.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : viewMode === 'grouped' ? (
|
|
/* Grouped View */
|
|
<div className="space-y-10">
|
|
{filteredGroupedManuals.map((group) => {
|
|
const organized = organizeCategories(group.categories)
|
|
return (
|
|
<div key={group.manufacturer} className="space-y-6">
|
|
<div className="border-b pb-3">
|
|
<h2 className="text-2xl font-bold tracking-tight">{group.manufacturer}</h2>
|
|
</div>
|
|
|
|
{/* Machine Type Categories First */}
|
|
{organized.machineTypes.length > 0 && (
|
|
<div className="space-y-6">
|
|
{organized.machineTypes.map(([category, categoryManuals]) => {
|
|
const machineTypeInfo = getMachineTypeInfo(category)
|
|
const icon = getCategoryIcon(category)
|
|
return (
|
|
<div key={category} className="space-y-4">
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
{icon && <span className="text-muted-foreground">{icon}</span>}
|
|
<h3 className="text-lg font-semibold">{category}</h3>
|
|
<Badge
|
|
variant="outline"
|
|
className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${getCategoryBadgeClass(
|
|
category
|
|
)}`}
|
|
>
|
|
{categoryManuals.length} {categoryManuals.length === 1 ? 'manual' : 'manuals'}
|
|
</Badge>
|
|
{machineTypeInfo && (
|
|
<span className="text-sm text-muted-foreground hidden sm:inline">
|
|
{machineTypeInfo.description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{categoryManuals.map((manual) => (
|
|
<ManualCard
|
|
key={manual.path}
|
|
manual={manual}
|
|
onView={setViewingManual}
|
|
manualHasParts={manualHasParts}
|
|
getCategoryBadgeClass={getCategoryBadgeClass}
|
|
formatFileSize={formatFileSize}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Other Categories (Model Numbers, Document Types, etc.) */}
|
|
{organized.others.length > 0 && (
|
|
<div className="space-y-6">
|
|
{organized.machineTypes.length > 0 && (
|
|
<div className="border-t pt-6">
|
|
<h3 className="text-lg font-semibold text-muted-foreground mb-4">
|
|
Models & Other Documents
|
|
</h3>
|
|
</div>
|
|
)}
|
|
{organized.others.map(([category, categoryManuals]) => (
|
|
<div key={category} className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-base font-semibold text-muted-foreground">
|
|
{category}
|
|
</h4>
|
|
<span className="text-xs text-muted-foreground">
|
|
({categoryManuals.length} {categoryManuals.length === 1 ? 'manual' : 'manuals'})
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{categoryManuals.map((manual) => (
|
|
<ManualCard
|
|
key={manual.path}
|
|
manual={manual}
|
|
onView={setViewingManual}
|
|
manualHasParts={manualHasParts}
|
|
getCategoryBadgeClass={getCategoryBadgeClass}
|
|
formatFileSize={formatFileSize}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Product Suggestions Section */}
|
|
{filteredManuals.length > 0 && (
|
|
<div className="space-y-6 mt-8">
|
|
<div className="border-t pt-6">
|
|
<h3 className="text-lg font-semibold text-muted-foreground mb-4">
|
|
Related Products
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredManuals.slice(0, 3).map((manual) => (
|
|
<ProductSuggestions
|
|
key={manual.path}
|
|
manual={manual}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
) : (
|
|
/* List View */
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredManuals.map((manual) => (
|
|
<ManualCard
|
|
key={manual.path}
|
|
manual={manual}
|
|
onView={setViewingManual}
|
|
manualHasParts={manualHasParts}
|
|
getCategoryBadgeClass={getCategoryBadgeClass}
|
|
formatFileSize={formatFileSize}
|
|
showManufacturer={true}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* PDF Viewer Modal */}
|
|
{viewingManual && (
|
|
<ManualViewer
|
|
manualUrl={viewingManual.url}
|
|
filename={viewingManual.filename}
|
|
isOpen={!!viewingManual}
|
|
onClose={() => setViewingManual(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|