-
- Missing Required Fields
+
+ Required Fields
-
- This part is missing required information for enrichment from{' '}
+
+ Please fill in the required information to enrich from{' '}
{requirementCheck.supplier_name}:
-
- {requirementCheck.required_checks.map((check) => (
- -
-
- {check.is_present ? 'ā' : 'ā'}
-
-
- {check.display_name}
-
- {!check.is_present && check.validation_message && (
-
- - {check.validation_message}
-
- )}
-
- ))}
-
+
+ {/* Input fields for missing required data */}
+
+ {requirementCheck.required_checks
+ .filter((check) => !check.is_present)
+ .map((check) => {
+ const isFilled = missingFieldValues[check.field_name]?.trim().length > 0
+ return (
+
+
+
+
+ setMissingFieldValues({
+ ...missingFieldValues,
+ [check.field_name]: e.target.value,
+ })
+ }
+ placeholder={`Enter ${check.display_name.toLowerCase()}`}
+ className={`w-full px-3 py-2 pr-10 border rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors ${
+ isFilled
+ ? 'border-green-500 dark:border-green-600'
+ : 'border-gray-300 dark:border-gray-600'
+ }`}
+ />
+ {isFilled && (
+
+ )}
+
+ {check.validation_message && (
+
+ {check.validation_message}
+
+ )}
+
+ )
+ })}
+
+
{requirementCheck.suggestions &&
requirementCheck.suggestions.length > 0 && (
-
-
+
+
Suggestions:
{requirementCheck.suggestions.map((suggestion, idx) => (
- -
+
-
ā¢ {suggestion}
))}
@@ -649,7 +746,8 @@ const PartEnrichmentModal = ({
selectedCapabilities.length === 0 ||
!selectedSupplier ||
isCheckingRequirements ||
- (requirementCheck && !requirementCheck.can_enrich)
+ isSavingFields ||
+ !areAllRequiredFieldsFilled()
}
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2"
title={
@@ -657,19 +755,25 @@ const PartEnrichmentModal = ({
? 'Select a supplier to start enrichment'
: isCheckingRequirements
? 'Checking enrichment requirements...'
- : requirementCheck && !requirementCheck.can_enrich
- ? `Cannot enrich: Missing required fields (${requirementCheck.missing_required.join(', ')})`
- : selectedCapabilities.length === 0
- ? 'Select at least one capability to enrich (e.g., fetch datasheet, fetch image)'
- : `Start enriching ${part.name} using ${selectedSupplier} with ${selectedCapabilities.length} selected capabilities`
+ : isSavingFields
+ ? 'Saving field values...'
+ : !areAllRequiredFieldsFilled()
+ ? 'Fill in all required fields to continue'
+ : selectedCapabilities.length === 0
+ ? 'Select at least one capability to enrich (e.g., fetch datasheet, fetch image)'
+ : `Start enriching ${part.name} using ${selectedSupplier} with ${selectedCapabilities.length} selected capabilities`
}
>
- {isCheckingRequirements ? (
+ {isCheckingRequirements || isSavingFields ? (
) : (
)}
- {isCheckingRequirements ? 'Checking...' : 'Start Enrichment'}
+ {isCheckingRequirements
+ ? 'Checking...'
+ : isSavingFields
+ ? 'Saving...'
+ : 'Start Enrichment'}
diff --git a/MakerMatrix/frontend/src/components/tools/ToolDetailModal.tsx b/MakerMatrix/frontend/src/components/tools/ToolDetailModal.tsx
new file mode 100644
index 00000000..c279da95
--- /dev/null
+++ b/MakerMatrix/frontend/src/components/tools/ToolDetailModal.tsx
@@ -0,0 +1,787 @@
+import { useState, useEffect } from 'react'
+import {
+ Wrench,
+ Edit3,
+ Trash2,
+ MapPin,
+ Calendar,
+ DollarSign,
+ User,
+ Package,
+ CheckCircle,
+ XCircle,
+ ExternalLink,
+ Tag,
+ Settings,
+ AlertCircle,
+ Clock,
+ FileText,
+ Plus,
+} from 'lucide-react'
+import Modal from '@/components/ui/Modal'
+import PartImage from '@/components/parts/PartImage'
+import { toolsService } from '@/services/tools.service'
+import { useAuthStore } from '@/store/authStore'
+import type { Tool } from '@/types/tools'
+import toast from 'react-hot-toast'
+
+interface ToolDetailModalProps {
+ isOpen: boolean
+ onClose: () => void
+ toolId: string
+ onEdit?: (tool: Tool) => void
+ onDelete?: (toolId: string) => void
+ onStatusChange?: () => void
+}
+
+const ToolDetailModal = ({ isOpen, onClose, toolId, onEdit, onDelete, onStatusChange }: ToolDetailModalProps) => {
+ const [tool, setTool] = useState
(null)
+ const [loading, setLoading] = useState(true)
+ const [checkoutNotes, setCheckoutNotes] = useState('')
+ const [checkinNotes, setCheckinNotes] = useState('')
+ const [isCheckoutMode, setIsCheckoutMode] = useState(false)
+ const [isCheckinMode, setIsCheckinMode] = useState(false)
+ const [processingCheckout, setProcessingCheckout] = useState(false)
+
+ // Maintenance record state
+ const [maintenanceRecords, setMaintenanceRecords] = useState([])
+ const [showAddMaintenance, setShowAddMaintenance] = useState(false)
+ const [maintenanceForm, setMaintenanceForm] = useState({
+ maintenance_date: new Date().toISOString().split('T')[0],
+ maintenance_type: 'inspection',
+ notes: '',
+ next_maintenance_date: '',
+ cost: '',
+ })
+ const [processingMaintenance, setProcessingMaintenance] = useState(false)
+
+ const { user } = useAuthStore()
+
+ useEffect(() => {
+ if (isOpen && toolId) {
+ loadTool()
+ loadMaintenanceRecords()
+ }
+ }, [isOpen, toolId])
+
+ const loadTool = async () => {
+ try {
+ setLoading(true)
+ const data = await toolsService.getTool(toolId)
+ setTool(data)
+ } catch (error: any) {
+ console.error('Failed to load tool:', error)
+ toast.error('Failed to load tool details')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const loadMaintenanceRecords = async () => {
+ try {
+ const records = await toolsService.getMaintenanceRecords(toolId)
+ setMaintenanceRecords(records)
+ } catch (error: any) {
+ console.error('Failed to load maintenance records:', error)
+ }
+ }
+
+ const handleAddMaintenance = async () => {
+ if (!maintenanceForm.maintenance_date || !maintenanceForm.maintenance_type) {
+ toast.error('Please fill in required fields')
+ return
+ }
+
+ try {
+ setProcessingMaintenance(true)
+ await toolsService.createMaintenanceRecord(toolId, {
+ maintenance_date: maintenanceForm.maintenance_date,
+ maintenance_type: maintenanceForm.maintenance_type,
+ notes: maintenanceForm.notes || undefined,
+ next_maintenance_date: maintenanceForm.next_maintenance_date || undefined,
+ cost: maintenanceForm.cost ? parseFloat(maintenanceForm.cost) : undefined,
+ })
+
+ toast.success('Maintenance record added successfully')
+ setShowAddMaintenance(false)
+ setMaintenanceForm({
+ maintenance_date: new Date().toISOString().split('T')[0],
+ maintenance_type: 'inspection',
+ notes: '',
+ next_maintenance_date: '',
+ cost: '',
+ })
+ await loadMaintenanceRecords()
+ await loadTool() // Reload tool to update maintenance dates
+ } catch (error: any) {
+ console.error('Failed to add maintenance record:', error)
+ toast.error(error.message || 'Failed to add maintenance record')
+ } finally {
+ setProcessingMaintenance(false)
+ }
+ }
+
+ const handleDeleteMaintenance = async (recordId: string) => {
+ if (!window.confirm('Are you sure you want to delete this maintenance record?')) {
+ return
+ }
+
+ try {
+ await toolsService.deleteMaintenanceRecord(toolId, recordId)
+ toast.success('Maintenance record deleted successfully')
+ await loadMaintenanceRecords()
+ await loadTool()
+ } catch (error: any) {
+ console.error('Failed to delete maintenance record:', error)
+ toast.error(error.message || 'Failed to delete maintenance record')
+ }
+ }
+
+ const handleCheckout = async () => {
+ if (!tool || !user) return
+
+ try {
+ setProcessingCheckout(true)
+ const updatedTool = await toolsService.checkoutTool(tool.id, user.username, checkoutNotes)
+ setTool(updatedTool)
+ setCheckoutNotes('')
+ setIsCheckoutMode(false)
+ toast.success('Tool checked out successfully')
+ if (onStatusChange) {
+ onStatusChange()
+ }
+ } catch (error: any) {
+ console.error('Failed to checkout tool:', error)
+ toast.error(error.message || 'Failed to checkout tool')
+ } finally {
+ setProcessingCheckout(false)
+ }
+ }
+
+ const handleCheckin = async () => {
+ if (!tool) return
+
+ try {
+ setProcessingCheckout(true)
+ const updatedTool = await toolsService.checkinTool(tool.id, checkinNotes)
+ setTool(updatedTool)
+ setCheckinNotes('')
+ setIsCheckinMode(false)
+ toast.success('Tool checked in successfully')
+ if (onStatusChange) {
+ onStatusChange()
+ }
+ } catch (error: any) {
+ console.error('Failed to checkin tool:', error)
+ toast.error(error.message || 'Failed to checkin tool')
+ } finally {
+ setProcessingCheckout(false)
+ }
+ }
+
+ const formatDate = (dateString?: string) => {
+ if (!dateString) return '-'
+ return new Date(dateString).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })
+ }
+
+ const formatCurrency = (amount?: number) => {
+ if (amount === undefined) return '-'
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(amount)
+ }
+
+ const getConditionColor = (condition: string) => {
+ switch (condition) {
+ case 'excellent':
+ return 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20'
+ case 'good':
+ return 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
+ case 'fair':
+ return 'text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20'
+ case 'poor':
+ return 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20'
+ case 'needs_repair':
+ return 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20'
+ case 'out_of_service':
+ return 'text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/20'
+ default:
+ return 'text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/20'
+ }
+ }
+
+ if (!tool && !loading) {
+ return null
+ }
+
+ return (
+
+ {loading ? (
+
+
+
Loading tool details...
+
+ {/* Header Section */}
+
+
+
+
+
+
+
+
{tool.tool_name}
+ {tool.tool_number && (
+
Tool #{tool.tool_number}
+ )}
+ {(tool.manufacturer || tool.model_number) && (
+
+ {tool.manufacturer && tool.model_number
+ ? `${tool.manufacturer} - ${tool.model_number}`
+ : tool.manufacturer || tool.model_number}
+
+ )}
+
+
+
+ {/* Status Badge - Only show for checkable tools */}
+
+ {tool.is_checkable && (
+
+ {tool.is_checked_out ? (
+ <>
+
+ Checked Out
+
+ ) : (
+ <>
+
+ Available
+
+ )}
+
+ )}
+ {/* Condition Badge */}
+
+ {tool.condition.replace(/_/g, ' ')}
+
+
+
+
+
+ {/* Image and Information Grid */}
+
+ {/* Tool Image */}
+ {tool.image_url && (
+
+ )}
+
+ {/* Basic Information */}
+
+
+
+ Basic Information
+
+
+ {tool.product_url && (
+
+ )}
+
+
+
Checkout Status
+
+ {tool.is_checkable ? (
+ <>
+
+ Can be checked out
+
+ ) : (
+ <>
+
+ Not available for checkout
+
+ )}
+
+
+
+ {tool.location && (
+
+
Location
+
+
+ {tool.location.name}
+
+
+ )}
+
+ {tool.categories && tool.categories.length > 0 && (
+
+
Categories
+
+ {tool.categories.map((category) => (
+
+
+ {category.name}
+
+ ))}
+
+
+ )}
+
+
+ {/* Purchase & Maintenance Information */}
+
+
+
+ Purchase & Maintenance
+
+
+ {tool.purchase_date && (
+
+
Purchase Date
+
+
+ {formatDate(tool.purchase_date)}
+
+
+ )}
+
+ {tool.purchase_price !== undefined && (
+
+
Purchase Price
+
+
+ {formatCurrency(tool.purchase_price)}
+
+
+ )}
+
+ {tool.last_maintenance_date && (
+
+
Last Maintenance
+
+
+ {formatDate(tool.last_maintenance_date)}
+
+
+ )}
+
+ {tool.next_maintenance_date && (
+
+
Next Maintenance
+
+
+ {formatDate(tool.next_maintenance_date)}
+
+
+ )}
+
+ {tool.maintenance_notes && (
+
+
Maintenance Notes
+
{tool.maintenance_notes}
+
+ )}
+
+
+
+ {/* Checkout/Checkin Actions */}
+ {tool.is_checkable && !tool.is_checked_out && !isCheckoutMode && (
+
+
+
+
+
+ Tool is available for checkout
+
+
+
+
+
+ )}
+
+ {tool.is_checkable && tool.is_checked_out && tool.checked_out_by === user?.username && !isCheckinMode && (
+
+
+
+
+
+
+ You have this tool checked out
+
+
+ {tool.checked_out_at && (
+
+ Since {formatDate(tool.checked_out_at)}
+
+ )}
+
+
+
+
+ )}
+
+ {tool.is_checkable && tool.is_checked_out && tool.checked_out_by !== user?.username && (
+
+
+
+
+
+ Checked out by: {tool.checked_out_by}
+
+ {tool.checked_out_at && (
+
+ Since {formatDate(tool.checked_out_at)}
+
+ )}
+ {tool.expected_return_date && (
+
+ Expected return: {formatDate(tool.expected_return_date)}
+
+ )}
+
+
+
+ )}
+
+ {/* Checkout Form */}
+ {tool.is_checkable && isCheckoutMode && (
+