function WeatherForecast({ defaultCity = 'Cambridge' }) { const { useState, useEffect } = React; const [weather, setWeather] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [selectedCity, setSelectedCity] = useState(defaultCity); const ukCities = [ 'Cambridge', 'London', 'Manchester', 'Birmingham', 'Edinburgh', 'Glasgow', 'Leeds' ]; const fetchWeatherData = async ()=>{ try { setLoading(true); setError(null); const response = await fetch(`/integrations/weather-by-city/weather/${encodeURIComponent(selectedCity)}`, { method: 'GET' }); if (!response.ok) { throw new Error(`Weather API returned status: ${response.status}`); } const data = await response.json(); if (!data || !data.location || !data.current) { throw new Error('Invalid weather data format received'); } setWeather(data); } catch (err) { console.error('Weather fetch error:', err); setError('Unable to load weather information. Please try again later.'); } finally{ setLoading(false); } }; useEffect(()=>{ fetchWeatherData(); }, [ selectedCity ]); const getWeatherIcon = (condition)=>{ const text = condition?.toLowerCase() || ''; if (text.includes('sunny') || text.includes('clear')) return 'fa-sun'; if (text.includes('partly cloudy')) return 'fa-cloud-sun'; if (text.includes('cloudy')) return 'fa-cloud'; if (text.includes('rain') || text.includes('drizzle')) return 'fa-cloud-rain'; if (text.includes('thunder')) return 'fa-cloud-bolt'; if (text.includes('snow') || text.includes('sleet')) return 'fa-snowflake'; if (text.includes('mist') || text.includes('fog')) return 'fa-smog'; return 'fa-cloud'; }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-sun mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), "Weather Forecast"), /*#__PURE__*/ React.createElement("select", { disabled: true, className: "px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm opacity-50", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, selectedCity))), /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-24 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })))); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-sun mr-2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }), "Weather Forecast"), /*#__PURE__*/ React.createElement("select", { value: selectedCity, onChange: (e)=>setSelectedCity(e.target.value), className: "px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, ukCities.map((city)=>/*#__PURE__*/ React.createElement("option", { key: city, value: city, __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, city)))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 rounded-lg", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 dark:text-red-400 text-sm flex items-center", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }), error)))); } return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white flex items-center", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-sun mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), "Weather Forecast"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedCity, onChange: (e)=>setSelectedCity(e.target.value), className: "px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, ukCities.map((city)=>/*#__PURE__*/ React.createElement("option", { key: city, value: city, __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, city))), /*#__PURE__*/ React.createElement("button", { onClick: fetchWeatherData, className: "px-3 py-1 rounded-md bg-blue-500 text-white text-sm hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Refresh"))), weather && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, weather.location.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, weather.location.region, ", ", weather.location.country)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, Math.round(weather.current.temp_c), "°C"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, "Feels like ", Math.round(weather.current.feelslike_c), "°C"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 flex items-center justify-center", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${getWeatherIcon(weather.current.condition.text)} text-4xl text-gray-700 dark:text-gray-300`, __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 dark:text-white font-medium", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }, weather.current.condition.text), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, "Humidity: ", weather.current.humidity, "% • Wind: ", Math.round(weather.current.wind_mph), " mph"))))))); } function WeatherForecastStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", __source: { fileName: "", lineNumber: 190, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }, "Weather Forecast - Default City (Cambridge)"), /*#__PURE__*/ React.createElement(WeatherForecast, { __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }, "Weather Forecast - London"), /*#__PURE__*/ React.createElement(WeatherForecast, { defaultCity: "London", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, "Weather Forecast - Error State"), /*#__PURE__*/ React.createElement(WeatherForecast, { defaultCity: "NonExistentCity", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this })))); } function VehicleCard({ vehicle, onViewDetails, onViewTasks, onEdit, onMarkAsSold, onReturnToStock, onMarkAsDelivered, onStatusChange, className = "" }) { const [isLoading, setIsLoading] = React.useState(false); const [feedback, setFeedback] = React.useState(null); const calculateDaysInStock = ()=>{ if (!vehicle.date_added) return 0; const addedDate = new Date(vehicle.date_added); const today = new Date(); const diffTime = Math.abs(today - addedDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; }; const isOverdue = ()=>{ const daysInStock = calculateDaysInStock(); const hasOutstandingTasks = (vehicle.total_tasks || 0) > (vehicle.completed_tasks || 0); return vehicle.vehicle_type === 'used' && (vehicle.status === 'in_stock' || vehicle.status === 'sold') && daysInStock > 5 && hasOutstandingTasks; }; const getStatusBadge = (status)=>{ switch(status){ case "in_stock": return /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1.5 text-sm font-bold rounded-full bg-blue-500 text-white dark:bg-blue-600 dark:text-white uppercase", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "STOCK"); case "sold": return /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1.5 text-sm font-bold rounded-full bg-amber-500 text-white dark:bg-amber-600 dark:text-white uppercase", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "SOLD"); case "delivered": return /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1.5 text-sm font-bold rounded-full bg-green-500 text-white dark:bg-green-600 dark:text-white uppercase", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "DELIVERED"); default: return /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1.5 text-sm font-bold rounded-full bg-gray-500 text-white dark:bg-gray-600 dark:text-white uppercase", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, status ? status.replace(/_/g, ' ').toUpperCase() : "UNKNOWN"); } }; const renderProgressBar = ()=>{ const completedTasks = vehicle.completed_tasks || 0; const totalTasks = vehicle.total_tasks || 0; const percentage = totalTasks > 0 ? Math.round(completedTasks / totalTasks * 100) : 0; const barColor = isOverdue() ? 'bg-red-600' : percentage === 100 ? 'bg-green-600' : 'bg-green-500'; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${barColor} h-2.5 rounded-full transition-all duration-300 ease-in-out`, style: { width: `${percentage}%` }, role: "progressbar", "aria-valuenow": percentage, "aria-valuemin": "0", "aria-valuemax": "100", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })); }; const handleViewDetails = ()=>{ if (onViewDetails && vehicle && vehicle.id) { onViewDetails(vehicle.id, vehicle); } }; const handleViewTasks = ()=>{ if (onViewTasks && vehicle && vehicle.id) { onViewTasks(vehicle.id, vehicle); } }; const handleEdit = ()=>{ if (onEdit && vehicle && vehicle.id) { onEdit(vehicle.id, vehicle); } }; const handleMarkAsSold = ()=>{ if (onMarkAsSold && vehicle && vehicle.id) { onMarkAsSold(vehicle.id, vehicle); } }; const handleReturnToStock = ()=>{ if (onReturnToStock && vehicle && vehicle.id) { onReturnToStock(vehicle.id, vehicle); } }; const handleMarkAsDelivered = async ()=>{ if (!vehicle?.id) return; setIsLoading(true); setFeedback(null); try { const response = await fetch("/api/mark-vehicle-delivered", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vehicleId: vehicle.id }) }); const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to mark vehicle as delivered"); } setFeedback({ type: "success", message: "Vehicle marked as delivered successfully" }); if (onMarkAsDelivered) { onMarkAsDelivered(vehicle.id, vehicle); } if (onStatusChange) { onStatusChange(); } } catch (error) { console.error("Error marking vehicle as delivered:", error); setFeedback({ type: "error", message: error.message || "Failed to mark vehicle as delivered" }); } finally{ setIsLoading(false); } }; const formatCurrency = (value)=>{ if (!value) return ''; return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(value); }; const formatDate = (dateString)=>{ if (!dateString) return ''; const date = new Date(dateString); return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '/'); }; const cardClasses = isOverdue() ? `bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 w-full ${className} hover:shadow-md transition-shadow duration-200 border-2 border-red-500` : `bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 w-full ${className} hover:shadow-md transition-shadow duration-200`; return /*#__PURE__*/ React.createElement("div", { className: cardClasses, __source: { fileName: "", lineNumber: 180, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-6", __source: { fileName: "", lineNumber: 181, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 182, columnNumber: 9 }, __self: this }, vehicle.make, " ", vehicle.model), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, isOverdue() && /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1.5 text-sm font-bold rounded-full bg-red-500 text-white dark:bg-red-600 dark:text-white uppercase animate-pulse", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "OVERDUE"), vehicle.status && getStatusBadge(vehicle.status))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 dark:bg-gray-900 rounded-lg p-4 pt-5", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-base font-semibold text-gray-900 dark:text-white mb-4 border-b border-gray-300 dark:border-gray-700 pb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, "Vehicle Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-y-3", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "Stock Number"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, vehicle.stock_number)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 207, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, "Type"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white capitalize", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, vehicle.vehicle_type)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, "Registration"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, vehicle.registration || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 218, columnNumber: 15 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, vehicle.color || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 224, columnNumber: 15 }, __self: this }, formatCurrency(vehicle.price) || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, "Payment Method"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white capitalize", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, vehicle.payment_method || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white capitalize", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, vehicle.status ? vehicle.status.replace(/_/g, ' ') : 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Mileage"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, vehicle.mileage ? `${vehicle.mileage} miles` : 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, "Chassis Number"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, vehicle.chassis_number || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, "Key Number"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, vehicle.key_number || 'Not specified')))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 dark:bg-gray-900 rounded-lg p-4 pt-5", __source: { fileName: "", lineNumber: 254, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-base font-semibold text-gray-900 dark:text-white mb-4 border-b border-gray-300 dark:border-gray-700 pb-2", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, "Sales Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-y-3", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, "Date Added"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, formatDate(vehicle.date_added))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, "Sale Date"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }, formatDate(vehicle.sale_date) || 'Not sold')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "Target Completion"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, formatDate(vehicle.target_completion_date) || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, "Handover Date"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, formatDate(vehicle.handover_date) || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, "Salesperson"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, vehicle.salesperson || 'Not specified')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-sm text-gray-500 dark:text-gray-400 ${isOverdue() ? 'font-bold text-red-600 dark:text-red-400' : ''}`, __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, "Days in Stock"), /*#__PURE__*/ React.createElement("div", { className: `text-sm font-medium ${isOverdue() ? 'text-red-600 dark:text-red-400 font-bold' : 'text-gray-900 dark:text-white'}`, __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }, calculateDaysInStock(), isOverdue() && ' (OVERDUE)'))))), /*#__PURE__*/ React.createElement("div", { className: `mt-6 mb-6 ${isOverdue() ? 'bg-red-50 dark:bg-red-900/20' : 'bg-gray-100 dark:bg-gray-900'} rounded-lg p-4 pt-5`, __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: `text-base font-semibold ${isOverdue() ? 'text-red-700 dark:text-red-400' : 'text-gray-900 dark:text-white'}`, __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, "Task Progress ", isOverdue() && '(PRIORITY)'), /*#__PURE__*/ React.createElement("div", { className: `text-sm font-medium ${isOverdue() ? 'text-red-700 dark:text-red-400' : 'text-gray-700 dark:text-gray-300'}`, __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, vehicle.completed_tasks || 0, "/", vehicle.total_tasks || 0, " tasks complete")), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, renderProgressBar(), (!vehicle.total_tasks || vehicle.total_tasks === 0) && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 311, columnNumber: 15 }, __self: this }, "No tasks assigned")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-6 justify-end", __source: { fileName: "", lineNumber: 319, columnNumber: 7 }, __self: this }, feedback && /*#__PURE__*/ React.createElement("div", { className: `w-full mb-4 p-3 rounded-lg text-sm ${feedback.type === 'success' ? 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300'}`, __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, feedback.message), isOverdue() && /*#__PURE__*/ React.createElement("button", { onClick: handleViewTasks, className: "px-4 py-2 text-sm bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded hover:bg-red-100 dark:hover:bg-red-800/50 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all flex items-center font-bold", "aria-label": `View priority tasks for ${vehicle.make} ${vehicle.model}`, tabIndex: "0", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }), " Priority Tasks"), vehicle.status === 'in_stock' && /*#__PURE__*/ React.createElement("button", { onClick: handleMarkAsSold, className: "px-4 py-2 text-sm bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded hover:bg-green-100 dark:hover:bg-green-800/50 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all flex items-center", "aria-label": `Mark ${vehicle.make} ${vehicle.model} as sold`, tabIndex: "0", __source: { fileName: "", lineNumber: 342, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pound-sign mr-2", __source: { fileName: "", lineNumber: 348, columnNumber: 13 }, __self: this }), " Mark as Sold"), vehicle.status === 'sold' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleReturnToStock, className: "px-4 py-2 text-sm bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded hover:bg-amber-100 dark:hover:bg-amber-800/50 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all flex items-center", "aria-label": `Return ${vehicle.make} ${vehicle.model} to stock`, tabIndex: "0", __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 360, columnNumber: 15 }, __self: this }), " Return to Stock"), /*#__PURE__*/ React.createElement("button", { onClick: handleMarkAsDelivered, disabled: isLoading, className: "px-4 py-2 text-sm bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded hover:bg-green-100 dark:hover:bg-green-800/50 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all flex items-center disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": `Mark ${vehicle.make} ${vehicle.model} as delivered`, tabIndex: "0", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isLoading ? 'fa-spinner fa-spin' : 'fa-truck'} mr-2`, __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }), isLoading ? "Processing..." : "Mark as Delivered")), /*#__PURE__*/ React.createElement("button", { onClick: handleViewDetails, className: "px-4 py-2 text-sm bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded hover:bg-blue-100 dark:hover:bg-blue-800/50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all flex items-center", "aria-label": `View details for ${vehicle.make} ${vehicle.model}`, tabIndex: "0", __source: { fileName: "", lineNumber: 375, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 381, columnNumber: 11 }, __self: this }), " View Details"), /*#__PURE__*/ React.createElement("button", { onClick: handleViewTasks, className: "px-4 py-2 text-sm bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded hover:bg-purple-100 dark:hover:bg-purple-800/50 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all flex items-center", "aria-label": `View tasks for ${vehicle.make} ${vehicle.model}`, tabIndex: "0", __source: { fileName: "", lineNumber: 383, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tasks mr-2", __source: { fileName: "", lineNumber: 389, columnNumber: 11 }, __self: this }), " View Tasks"), /*#__PURE__*/ React.createElement("button", { onClick: handleEdit, className: "px-4 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all flex items-center", "aria-label": `Edit ${vehicle.make} ${vehicle.model}`, tabIndex: "0", __source: { fileName: "", lineNumber: 391, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 397, columnNumber: 11 }, __self: this }), " Edit"))); } function VehicleCardStory() { const inStockVehicle = { id: 1, make: "BMW", model: "3 Series", year: "2023", stock_number: "ST12345", registration: "AB12 CDE", key_number: "K789", status: "in_stock", vehicle_type: "used", color: "Black", price: 25000, payment_method: "finance", mileage: 15000, chassis_number: "WBA8E9C50GK123456", date_added: "2025-01-15", target_completion_date: "2025-02-01", completed_tasks: 3, total_tasks: 5 }; const soldVehicle = { id: 2, make: "Mercedes", model: "C-Class", year: "2024", stock_number: "ST67890", registration: "XY34 ZAB", key_number: "K456", status: "sold", vehicle_type: "new", color: "Silver", price: 35000, payment_method: "cash", mileage: 500, chassis_number: "WDD2050401R123456", date_added: "2024-12-10", sale_date: "2025-01-20", handover_date: "2025-02-15", salesperson: "John Smith", completed_tasks: 8, total_tasks: 8 }; const noTasksVehicle = { id: 3, make: "Audi", model: "Q5", year: "2022", stock_number: "ST54321", registration: "CD45 EFG", key_number: "K123", status: "in_stock", vehicle_type: "used", color: "Blue", price: 28000, payment_method: "finance", mileage: 22000, chassis_number: "WAUZZZ8R5DA123456", date_added: "2025-01-25" }; const overdueVehicle = { id: 4, make: "Ford", model: "Focus", year: "2021", stock_number: "ST98765", registration: "GH67 IJK", key_number: "K321", status: "in_stock", vehicle_type: "used", color: "Red", price: 18000, payment_method: "finance", mileage: 35000, chassis_number: "WF0GXXGBWG1A12345", date_added: "2025-01-01", target_completion_date: "2025-01-15", completed_tasks: 2, total_tasks: 7 }; const overdueSoldVehicle = { id: 5, make: "Volkswagen", model: "Golf", year: "2022", stock_number: "ST24680", registration: "LM90 NOP", key_number: "K555", status: "sold", vehicle_type: "used", color: "White", price: 22000, payment_method: "finance", mileage: 18000, chassis_number: "WVWZZZ1KZAW123456", date_added: "2025-01-05", sale_date: "2025-01-18", target_completion_date: "2025-01-25", salesperson: "Jane Smith", completed_tasks: 4, total_tasks: 9 }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-8 bg-gray-100 dark:bg-gray-900", __source: { fileName: "", lineNumber: 512, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 513, columnNumber: 7 }, __self: this }, "Vehicle Card Component"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 515, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 516, columnNumber: 9 }, __self: this }, "Overdue Vehicle In Stock (Priority)"), /*#__PURE__*/ React.createElement(VehicleCard, { vehicle: overdueVehicle, onViewDetails: (id, vehicle)=>console.log("View details clicked", id, vehicle), onViewTasks: (id, vehicle)=>console.log("View tasks clicked", id, vehicle), onEdit: (id, vehicle)=>console.log("Edit clicked", id, vehicle), onMarkAsSold: (id, vehicle)=>console.log("Mark as sold clicked", id, vehicle), onReturnToStock: (id, vehicle)=>console.log("Return to stock clicked", id, vehicle), onMarkAsDelivered: (id, vehicle)=>console.log("Mark as delivered clicked", id, vehicle), __source: { fileName: "", lineNumber: 517, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 528, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 529, columnNumber: 9 }, __self: this }, "Overdue Sold Vehicle (Priority)"), /*#__PURE__*/ React.createElement(VehicleCard, { vehicle: overdueSoldVehicle, onViewDetails: (id, vehicle)=>console.log("View details clicked", id, vehicle), onViewTasks: (id, vehicle)=>console.log("View tasks clicked", id, vehicle), onEdit: (id, vehicle)=>console.log("Edit clicked", id, vehicle), onMarkAsSold: (id, vehicle)=>console.log("Mark as sold clicked", id, vehicle), onReturnToStock: (id, vehicle)=>console.log("Return to stock clicked", id, vehicle), onMarkAsDelivered: (id, vehicle)=>console.log("Mark as delivered clicked", id, vehicle), __source: { fileName: "", lineNumber: 530, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 541, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 542, columnNumber: 9 }, __self: this }, "In Stock Vehicle with Tasks"), /*#__PURE__*/ React.createElement(VehicleCard, { vehicle: inStockVehicle, onViewDetails: (id, vehicle)=>console.log("View details clicked", id, vehicle), onViewTasks: (id, vehicle)=>console.log("View tasks clicked", id, vehicle), onEdit: (id, vehicle)=>console.log("Edit clicked", id, vehicle), onMarkAsSold: (id, vehicle)=>console.log("Mark as sold clicked", id, vehicle), onReturnToStock: (id, vehicle)=>console.log("Return to stock clicked", id, vehicle), onMarkAsDelivered: (id, vehicle)=>console.log("Mark as delivered clicked", id, vehicle), __source: { fileName: "", lineNumber: 543, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 554, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 555, columnNumber: 9 }, __self: this }, "Sold Vehicle with Completed Tasks"), /*#__PURE__*/ React.createElement(VehicleCard, { vehicle: soldVehicle, onViewDetails: (id, vehicle)=>console.log("View details clicked", id, vehicle), onViewTasks: (id, vehicle)=>console.log("View tasks clicked", id, vehicle), onEdit: (id, vehicle)=>console.log("Edit clicked", id, vehicle), onMarkAsSold: (id, vehicle)=>console.log("Mark as sold clicked", id, vehicle), onReturnToStock: (id, vehicle)=>console.log("Return to stock clicked", id, vehicle), onMarkAsDelivered: (id, vehicle)=>console.log("Mark as delivered clicked", id, vehicle), __source: { fileName: "", lineNumber: 556, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 567, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 568, columnNumber: 9 }, __self: this }, "Vehicle with No Tasks"), /*#__PURE__*/ React.createElement(VehicleCard, { vehicle: noTasksVehicle, onViewDetails: (id, vehicle)=>console.log("View details clicked", id, vehicle), onViewTasks: (id, vehicle)=>console.log("View tasks clicked", id, vehicle), onEdit: (id, vehicle)=>console.log("Edit clicked", id, vehicle), onMarkAsSold: (id, vehicle)=>console.log("Mark as sold clicked", id, vehicle), onReturnToStock: (id, vehicle)=>console.log("Return to stock clicked", id, vehicle), onMarkAsDelivered: (id, vehicle)=>console.log("Mark as delivered clicked", id, vehicle), __source: { fileName: "", lineNumber: 569, columnNumber: 9 }, __self: this }))); } function KeyNumberLocator() { const { useState } = React; const [registration, setRegistration] = useState(""); const [chassis, setChassis] = useState(""); const [results, setResults] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [searched, setSearched] = useState(false); const handleSearch = async (e)=>{ e.preventDefault(); if (!registration && !chassis) { setError("Please enter either a registration number or chassis number"); return; } setLoading(true); setError(null); setSearched(true); try { const response = await fetch("/api/find-key-number", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ registration: registration.trim(), chassis: chassis.trim() }) }); const data = await response.json(); if (data.success) { setResults(data.vehicles); } else { setError(data.error); setResults(null); } } catch (err) { setError("An error occurred while searching. Please try again."); console.error("Error searching for key:", err); } finally{ setLoading(false); } }; const handleClear = ()=>{ setRegistration(""); setChassis(""); setResults(null); setError(null); setSearched(false); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-inter font-bold text-gray-900 dark:text-white mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Key Number Locator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-inter text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Registration Number"), /*#__PURE__*/ React.createElement("input", { type: "text", value: registration, onChange: (e)=>setRegistration(e.target.value), placeholder: "Enter registration number", className: "w-full p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter text-sm focus:outline-none focus:border-gray-900 dark:focus:border-gray-500", name: "registration", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-inter text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Chassis Number"), /*#__PURE__*/ React.createElement("input", { type: "text", value: chassis, onChange: (e)=>setChassis(e.target.value), placeholder: "Enter chassis number", className: "w-full p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter text-sm focus:outline-none focus:border-gray-900 dark:focus:border-gray-500", name: "chassis", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-md font-inter text-sm hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white dark:text-gray-900", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this })), "Searching...") : "Search"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleClear, className: "px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white rounded-md font-inter text-sm hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, "Clear"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded-lg", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, error), results && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-inter font-semibold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50 dark:bg-gray-700", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "Stock #"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, "Vehicle"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, "Registration"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, "Chassis"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "Key Number"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, results.map((vehicle)=>/*#__PURE__*/ React.createElement("tr", { key: vehicle.id, className: "hover:bg-gray-50 dark:hover:bg-gray-700", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, vehicle.stock_number), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 194, columnNumber: 21 }, __self: this }, vehicle.year, " ", vehicle.make, " ", vehicle.model), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }, vehicle.registration || "N/A"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 200, columnNumber: 21 }, __self: this }, vehicle.chassis_number || "N/A"), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }, vehicle.key_number))))))), searched && !loading && (!results || results.length === 0) && !error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center py-8", __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, "No vehicles found with the provided details"))); } function KeyNumberLocatorStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 dark:bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 241, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 242, columnNumber: 7 }, __self: this }, "Key Number Locator Component"), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 246, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(KeyNumberLocator, { __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }))); } function VehicleEditForm({ vehicle, onSave, onCancel }) { const { useState, useEffect } = React; const [formData, setFormData] = useState({ id: "", stock_number: "", vehicle_type: "used", make: "", model: "", year: "", registration: "", color: "", price: "", mileage: "", status: "in_stock", salesperson: "", handover_date: "", target_completion_date: "", notes: "", key_number: "", chassis_number: "", payment_method: "", sale_date: "" }); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); useEffect(()=>{ if (vehicle) { const formattedHandoverDate = vehicle.handover_date ? new Date(vehicle.handover_date).toISOString().split("T")[0] : ""; const formattedTargetDate = vehicle.target_completion_date ? new Date(vehicle.target_completion_date).toISOString().split("T")[0] : ""; const formattedSaleDate = vehicle.sale_date ? new Date(vehicle.sale_date).toISOString().split("T")[0] : ""; setFormData({ id: vehicle.id, stock_number: vehicle.stock_number || "", vehicle_type: vehicle.vehicle_type || "used", make: vehicle.make || "", model: vehicle.model || "", year: vehicle.year || "", registration: vehicle.registration || "", color: vehicle.color || "", price: vehicle.price || "", mileage: vehicle.mileage || "", status: vehicle.status || "in_stock", salesperson: vehicle.salesperson || "", handover_date: formattedHandoverDate, target_completion_date: formattedTargetDate, notes: vehicle.notes || "", key_number: vehicle.key_number || "", chassis_number: vehicle.chassis_number || "", payment_method: vehicle.payment_method || "", sale_date: formattedSaleDate }); } }, [ vehicle ]); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setSuccess(false); try { const result = await onSave(formData); if (result) { setSuccess(true); setTimeout(()=>setSuccess(false), 3000); } } catch (err) { setError(err.message || "An error occurred while saving"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Error!"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, " ", error)), success && /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative", role: "alert", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Success!"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, " Vehicle updated successfully.")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Stock Number*"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "stock_number", value: formData.stock_number, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Vehicle Type*"), /*#__PURE__*/ React.createElement("select", { name: "vehicle_type", value: formData.vehicle_type, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "used", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Used"), /*#__PURE__*/ React.createElement("option", { value: "new", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "New"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Make*"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "make", value: formData.make, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Model*"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "model", value: formData.model, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, "Year*"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "year", value: formData.year, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Registration"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "registration", value: formData.registration, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "color", value: formData.color, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "price", value: formData.price, onChange: handleChange, step: "0.01", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Mileage"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "mileage", value: formData.mileage, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Status*"), /*#__PURE__*/ React.createElement("select", { name: "status", value: formData.status, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "in_stock", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "In Stock"), /*#__PURE__*/ React.createElement("option", { value: "sold", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, "Sold"), /*#__PURE__*/ React.createElement("option", { value: "delivered", __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, "Delivered"))), formData.status === "sold" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, "Payment Method*"), /*#__PURE__*/ React.createElement("select", { name: "payment_method", value: formData.payment_method, onChange: handleChange, required: formData.status === "sold", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, "Select Payment Method"), /*#__PURE__*/ React.createElement("option", { value: "cash", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "Cash"), /*#__PURE__*/ React.createElement("option", { value: "finance", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, "Finance"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 271, columnNumber: 13 }, __self: this }, "Salesperson"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "salesperson", value: formData.salesperson, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 274, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 284, columnNumber: 13 }, __self: this }, "Sale Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "sale_date", value: formData.sale_date, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 287, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, "Handover Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "handover_date", value: formData.handover_date, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, "Target Completion Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "target_completion_date", value: formData.target_completion_date, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 322, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }, "Key Number*"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "key_number", value: formData.key_number, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 336, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }, "Chassis Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "chassis_number", value: formData.chassis_number, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 350, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 351, columnNumber: 11 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("textarea", { name: "notes", value: formData.notes, onChange: handleChange, rows: "4", className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 354, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3", __source: { fileName: "", lineNumber: 363, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 364, columnNumber: 11 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50", __source: { fileName: "", lineNumber: 371, columnNumber: 11 }, __self: this }, loading ? "Saving..." : "Save Changes")))); } function VehicleEditFormStory() { const [activeTab, setActiveTab] = React.useState("edit"); const mockVehicle = { id: 123, make: "Toyota", model: "Camry", year: 2022, stock_number: "ST12345", registration: "ABC123", chassis_number: "JT153YHB2000001", key_number: "K123", status: "sold", vehicle_type: "new", color: "Silver", mileage: 15000, price: 19999.99, date_added: "2023-01-15T00:00:00.000Z", sale_date: "2023-02-15T00:00:00.000Z", handover_date: "2023-02-20T00:00:00.000Z", target_completion_date: "2023-04-15T00:00:00.000Z", salesperson: "John Smith", payment_method: "finance", notes: "Customer requested a test drive. Vehicle has minor scratch on rear bumper.", tasks: [ { id: 1, task_name: "Vehicle Inspection", description: "Complete a full inspection of the vehicle", status: "not_started", start_date: null, completion_date: null, assigned_to: "John Doe", notes: "Priority inspection needed" }, { id: 2, task_name: "Additional Mechanical", description: "Replace timing belt and water pump", status: "in_progress", start_date: "2025-01-15", completion_date: null, authority_status: "declined", assigned_to: "Jane Smith", notes: "Parts ordered" }, { id: 3, task_name: "Bodyshop", description: "Repair dent on rear passenger door", status: "in_progress", start_date: "2025-01-10", completion_date: null, authority_status: "authorised", assigned_to: "Mike Johnson", notes: "Paint matching required" } ] }; const newVehicle = { id: null, vehicle_type: "new", status: "in_stock" }; const handleSave = async (vehicle)=>{ console.log("Vehicle saved:", vehicle); try { if (vehicle.id) { const response = await fetch("/api/update-vehicle", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(vehicle) }); if (!response.ok) { throw new Error(`Error updating vehicle: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to update vehicle"); } return true; } else { const response = await fetch("/api/vehicles/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(vehicle) }); if (!response.ok) { throw new Error(`Error creating vehicle: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to create vehicle"); } return true; } } catch (error) { console.error("Save vehicle error:", error); throw error; } }; const handleCancel = ()=>{ console.log("Edit cancelled"); }; const handleMarkAsSold = async (vehicleId, salesperson, paymentMethod, handoverDate)=>{ try { const response = await fetch("/api/update-vehicle-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vehicleId, newStatus: "sold", salesperson, paymentMethod, handoverDate }) }); if (!response.ok) { throw new Error(`Error marking vehicle as sold: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to mark vehicle as sold"); } return true; } catch (error) { console.error("Mark as sold error:", error); throw error; } }; const handleReturnToStock = async (vehicleId)=>{ try { const response = await fetch("/api/update-vehicle-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vehicleId, newStatus: "in_stock" }) }); if (!response.ok) { throw new Error(`Error returning vehicle to stock: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to return vehicle to stock"); } return true; } catch (error) { console.error("Return to stock error:", error); throw error; } }; const handleTaskStatusChange = async (taskId, newStatus, authorityStatus, notes, assignedTo, changedBy)=>{ try { const response = await fetch("/api/update-task-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ task_id: taskId, status: newStatus, authority_status: authorityStatus, notes: notes, assigned_to: assignedTo, changed_by: changedBy, history_notes: "Status updated via API" }) }); if (!response.ok) { throw new Error(`Error updating task status: ${response.status}`); } const data = await response.json(); if (data.success) { return true; } else { throw new Error(data.error || "Failed to update task status"); } } catch (error) { console.error("Error updating task status:", error); return false; } }; const handleRefresh = ()=>{ console.log("Refreshed"); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-6 bg-gray-50 dark:bg-gray-900", __source: { fileName: "", lineNumber: 600, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 601, columnNumber: 7 }, __self: this }, "Vehicle Edit Form"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 603, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 604, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("edit"), className: `px-4 py-2 rounded-md ${activeTab === "edit" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200"}`, __source: { fileName: "", lineNumber: 605, columnNumber: 11 }, __self: this }, "Edit Existing Vehicle"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("new"), className: `px-4 py-2 rounded-md ${activeTab === "new" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200"}`, __source: { fileName: "", lineNumber: 615, columnNumber: 11 }, __self: this }, "Create New Vehicle"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("view"), className: `px-4 py-2 rounded-md ${activeTab === "view" ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200"}`, __source: { fileName: "", lineNumber: 625, columnNumber: 11 }, __self: this }, "View Vehicle")), activeTab === "edit" && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow", __source: { fileName: "", lineNumber: 638, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 639, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 640, columnNumber: 15 }, __self: this }, "Edit Vehicle: ", mockVehicle.make, " ", mockVehicle.model)), /*#__PURE__*/ React.createElement(VehicleEditForm, { vehicle: mockVehicle, onSave: handleSave, onCancel: handleCancel, __source: { fileName: "", lineNumber: 644, columnNumber: 13 }, __self: this })), activeTab === "new" && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow", __source: { fileName: "", lineNumber: 653, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 654, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 655, columnNumber: 15 }, __self: this }, "Create New Vehicle")), /*#__PURE__*/ React.createElement(VehicleEditForm, { vehicle: newVehicle, onSave: handleSave, onCancel: handleCancel, __source: { fileName: "", lineNumber: 659, columnNumber: 13 }, __self: this })), activeTab === "view" && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 668, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 669, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: mockVehicle, onMarkAsSold: handleMarkAsSold, onReturnToStock: handleReturnToStock, __source: { fileName: "", lineNumber: 670, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(VehicleTaskList, { vehicle: mockVehicle, onTaskStatusChange: handleTaskStatusChange, onRefresh: handleRefresh, __source: { fileName: "", lineNumber: 675, columnNumber: 15 }, __self: this }))))); } function VehicleTaskList({ vehicle, onTaskStatusChange, onRefresh }) { const [error, setError] = React.useState(null); const [tasks, setTasks] = React.useState(vehicle?.tasks || []); const handleStatusChange = async (taskId, currentStatus)=>{ try { const newStatus = currentStatus === 'completed' ? 'not_started' : 'completed'; const success = await onTaskStatusChange(taskId, newStatus, null, null, null, 'User'); if (success) { setTasks((prevTasks)=>prevTasks.map((task)=>task.id === taskId ? { ...task, status: newStatus } : task)); if (onRefresh) { onRefresh(); } } } catch (err) { setError("Failed to update task status"); setTimeout(()=>setError(null), 3000); } }; if (!tasks.length) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white dark:bg-gray-800 rounded-lg shadow", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 dark:text-gray-400 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "No tasks found")); } const completedTasks = tasks.filter((t)=>t.status === 'completed').length; const totalTasks = tasks.length; const completionPercentage = Math.round(completedTasks / totalTasks * 100); return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Tasks (", completionPercentage, "% Complete)"), /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 dark:bg-gray-700 rounded-full h-2.5", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${completionPercentage}%` }, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, task.task_name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleStatusChange(task.id, task.status), className: `px-3 py-1 rounded-full text-sm font-medium ${task.status === 'completed' ? 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/20 dark:text-green-400' : 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300'}`, __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, task.status === 'completed' ? '✓ Done' : 'Complete'))))); } function VehicleTaskListStory() { const [refreshTrigger, setRefreshTrigger] = React.useState(0); const mockVehicle = { id: 1, stock_number: "ST12345", make: "Toyota", model: "Corolla", year: 2022, status: "in_stock", tasks: [ { id: 1, task_name: "Vehicle Inspection", description: "Complete a full inspection of the vehicle", status: "not_started", start_date: null, completion_date: null, assigned_to: "John Doe", notes: "Priority inspection needed" }, { id: 2, task_name: "Additional Mechanical", description: "Replace timing belt and water pump", status: "in_progress", start_date: "2025-01-15", completion_date: null, authority_status: "declined", assigned_to: "Jane Smith", notes: "Parts ordered" }, { id: 3, task_name: "Bodyshop", description: "Repair dent on rear passenger door", status: "in_progress", start_date: "2025-01-10", completion_date: null, authority_status: "authorised", assigned_to: "Mike Johnson", notes: "Paint matching required" } ] }; const emptyVehicle = { id: 2, stock_number: "ST67890", make: "Honda", model: "Civic", year: 2023 }; const handleTaskStatusChange = async (taskId, newStatus, authorityStatus, notes, assignedTo, changedBy)=>{ try { const response = await fetch("/api/update-task-status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ task_id: taskId, status: newStatus, authority_status: authorityStatus, notes: notes, assigned_to: assignedTo, changed_by: changedBy, history_notes: "Status updated via API" }) }); if (!response.ok) { throw new Error(`Error updating task status: ${response.status}`); } const data = await response.json(); if (data.success) { return true; } else { throw new Error(data.error || "Failed to update task status"); } } catch (error) { console.error("Error updating task status:", error); return false; } }; const handleRefresh = ()=>{ setRefreshTrigger((prev)=>prev + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 191, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-6", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, "Vehicle Task List Component"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, "Vehicle with Tasks"), /*#__PURE__*/ React.createElement(VehicleTaskList, { vehicle: mockVehicle, onTaskStatusChange: handleTaskStatusChange, onRefresh: handleRefresh, __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, "Empty Vehicle"), /*#__PURE__*/ React.createElement(VehicleTaskList, { vehicle: emptyVehicle, onTaskStatusChange: handleTaskStatusChange, onRefresh: handleRefresh, __source: { fileName: "", lineNumber: 205, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, "No Vehicle"), /*#__PURE__*/ React.createElement(VehicleTaskList, { vehicle: null, onTaskStatusChange: handleTaskStatusChange, onRefresh: handleRefresh, __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }))); } function KeyLabel({ vehicle }) { const { useState, useEffect } = React; const [downloading, setDownloading] = useState(false); const [exportingCsv, setExportingCsv] = useState(false); const [html2canvasLoaded, setHtml2canvasLoaded] = useState(false); const mmToPx = (mm)=>Math.round(mm * 3.78); const labelWidth = mmToPx(50); const labelHeight = mmToPx(30); useEffect(()=>{ const script = document.createElement('script'); script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js'; script.async = true; script.onload = ()=>setHtml2canvasLoaded(true); document.body.appendChild(script); return ()=>{ if (document.body.contains(script)) { document.body.removeChild(script); } }; }, []); if (!vehicle) return null; const formatDate = (dateString)=>{ if (!dateString) return ''; const date = new Date(dateString); return date.toLocaleDateString('en-GB'); }; const getStatusDisplay = ()=>{ if (vehicle.status === 'sold') return 'SOLD'; if (vehicle.status === 'delivered') return 'DELIVERED'; return 'IN STOCK'; }; const handleDownload = async ()=>{ setDownloading(true); try { if (!window.html2canvas) { throw new Error('html2canvas library not loaded'); } const labelElement = document.getElementById(`keyLabel-${vehicle.key_number}`); if (!labelElement) { throw new Error('Label element not found'); } const canvas = await window.html2canvas(labelElement, { backgroundColor: '#ffffff', scale: 2, logging: false, useCORS: true, allowTaint: false, removeContainer: false, imageTimeout: 0, onclone: (clonedDoc)=>{ const clonedElement = clonedDoc.getElementById(`keyLabel-${vehicle.key_number}`); if (clonedElement) { clonedElement.style.transform = 'none'; clonedElement.style.borderColor = '#000000'; } } }); const link = document.createElement('a'); link.download = `key-label-${vehicle.key_number}.png`; link.href = canvas.toDataURL('image/png'); link.click(); setDownloading(false); } catch (err) { console.error('Failed to generate label:', err); alert('Failed to generate label: ' + err.message); setDownloading(false); } }; const handleExcelExport = ()=>{ setExportingCsv(true); try { const headers = [ "Key Number", "Registration", "Status" ]; const data = [ vehicle.key_number || "", vehicle.registration || "", getStatusDisplay() || "" ]; const csvContent = [ headers.join(","), data.join(",") ].join("\n"); const blob = new Blob([ csvContent ], { type: "text/csv;charset=utf-8;" }); const url = URL.createObjectURL(blob); const downloadLink = document.createElement("a"); downloadLink.href = url; downloadLink.download = `key-label-${vehicle.key_number}.csv`; document.body.appendChild(downloadLink); downloadLink.click(); setTimeout(()=>{ document.body.removeChild(downloadLink); URL.revokeObjectURL(url); setExportingCsv(false); }, 100); } catch (err) { console.error("Failed to generate Excel file:", err); alert("Failed to generate Excel file: " + err.message); setExportingCsv(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 border border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "Label Preview"), /*#__PURE__*/ React.createElement("div", { id: `keyLabel-${vehicle.key_number}`, style: { width: `${labelWidth}px`, height: `${labelHeight}px`, minWidth: `${labelWidth}px`, maxWidth: `${labelWidth}px`, minHeight: `${labelHeight}px`, maxHeight: `${labelHeight}px`, overflow: 'hidden' }, className: "bg-white border border-gray-200 p-2", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col justify-between", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[24px] font-bold mb-2", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-key mr-1", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }), " ", vehicle.key_number), /*#__PURE__*/ React.createElement("div", { className: "text-[16px] font-semibold", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, vehicle.registration || '')), /*#__PURE__*/ React.createElement("div", { className: "text-[20px] font-bold text-right", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, getStatusDisplay()))), /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm mt-4", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4 w-32", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, "Key Number:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, vehicle.key_number)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, "Vehicle:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, vehicle.make, " ", vehicle.model, " (", vehicle.year, ")")), vehicle.registration && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Registration:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, vehicle.registration)), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "Status:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, getStatusDisplay())), vehicle.status === 'sold' && vehicle.salesperson && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "Salesperson:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, vehicle.salesperson)), vehicle.status === 'sold' && vehicle.handover_date && /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-semibold pr-4", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "Delivery Date:"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, formatDate(vehicle.handover_date)))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, disabled: downloading || !html2canvasLoaded, className: "inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${downloading ? 'fa-spinner fa-spin' : 'fa-download'}`, __source: { fileName: "", lineNumber: 193, columnNumber: 11 }, __self: this }), "Download Label Image"), /*#__PURE__*/ React.createElement("button", { onClick: handleExcelExport, disabled: exportingCsv, className: "inline-flex items-center justify-center gap-2 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-green-400", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${exportingCsv ? 'fa-spinner fa-spin' : 'fa-file-excel'}`, __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }), "Export for Niimbot Printer (CSV)")), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 207, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, "1. Export the CSV file"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, "2. Open with Excel"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, "3. Import to your Niimbot printer software"))); } function KeyLabelStory() { const mockVehicles = { inStock: { id: 1, key_number: "A123", make: "Toyota", model: "Corolla", year: 2023, registration: "AB12 CDE", chassis_number: "JTDDH3FE30J006789", status: "in_stock" }, sold: { id: 2, key_number: "B456", make: "Honda", model: "Civic", year: 2023, registration: "XY12 ZAB", chassis_number: "SHHFK2750JU006789", status: "sold", salesperson: "John Smith", handover_date: "2025-02-15" }, delivered: { id: 3, key_number: "C789", make: "BMW", model: "3 Series", year: 2023, registration: "CD12 EFG", chassis_number: "WBA8Z9C55J006789", status: "delivered", salesperson: "Jane Doe", handover_date: "2025-01-20" }, noReg: { id: 4, key_number: "D012", make: "Mercedes", model: "A-Class", year: 2023, chassis_number: "WDD1770421J006789", status: "in_stock" } }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-8 bg-gray-100", __source: { fileName: "", lineNumber: 264, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 9 }, __self: this }, "In Stock Vehicle"), /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: mockVehicles.inStock, __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, "Sold Vehicle"), /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: mockVehicles.sold, __source: { fileName: "", lineNumber: 272, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 275, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 276, columnNumber: 9 }, __self: this }, "Delivered Vehicle"), /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: mockVehicles.delivered, __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this }, "Vehicle without Registration"), /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: mockVehicles.noReg, __source: { fileName: "", lineNumber: 282, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 286, columnNumber: 9 }, __self: this }, "No Vehicle (Empty State)"), /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: null, __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }))); } function VehicleDetailView({ vehicle, vehicleId }) { const [showKeyLabel, setShowKeyLabel] = React.useState(false); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [vehicleData, setVehicleData] = React.useState(vehicle); const formatDateShort = (date)=>{ if (!date) return 'N/A'; return new Date(date).toLocaleDateString(); }; const calculateDaysInStock = (dateAdded)=>{ if (!dateAdded) return 'N/A'; const added = new Date(dateAdded); const today = new Date(); const diffTime = Math.abs(today - added); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); return diffDays; }; const getStatusBadge = (status)=>{ const statusConfig = { in_stock: { color: 'green', icon: 'check-circle', text: 'In Stock' }, sold: { color: 'blue', icon: 'tag', text: 'Sold' }, delivered: { color: 'purple', icon: 'truck', text: 'Delivered' } }; const config = statusConfig[status] || { color: 'gray', icon: 'question-circle', text: status }; return /*#__PURE__*/ React.createElement("span", { className: `bg-${config.color}-100 dark:bg-${config.color}-800/30 text-${config.color}-700 dark:text-${config.color}-300 text-xs font-medium px-2.5 py-0.5 rounded-full border border-${config.color}-200 dark:border-${config.color}-700`, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${config.icon} mr-1`, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), config.text); }; const getTypeBadge = (type)=>{ const typeConfig = { new: { color: 'blue', icon: 'star' }, used: { color: 'purple', icon: 'car' } }; const config = typeConfig[type] || { color: 'gray', icon: 'question-circle' }; return /*#__PURE__*/ React.createElement("span", { className: `bg-${config.color}-100 dark:bg-${config.color}-800/30 text-${config.color}-700 dark:text-${config.color}-300 text-xs font-medium px-2.5 py-0.5 rounded-full border border-${config.color}-200 dark:border-${config.color}-700`, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${config.icon} mr-1`, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), type === 'new' ? 'New Vehicle' : 'Used Vehicle'); }; const fetchVehicleData = async ()=>{ if (!vehicleId) return; setLoading(true); setError(null); try { const response = await fetch('/api/get-vehicle-details', { method: 'POST', body: JSON.stringify({ id: vehicleId }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (!data.success) { throw new Error(data.error || 'Failed to fetch vehicle details'); } setVehicleData(data.vehicle); } catch (err) { setError(err.message); console.error('Error fetching vehicle details:', err); } finally{ setLoading(false); } }; React.useEffect(()=>{ if (vehicleId) { fetchVehicleData(); } }, [ vehicleId ]); if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center p-8 space-y-4", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Loading vehicle details...")); } if (error) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Error: ", error), /*#__PURE__*/ React.createElement("button", { onClick: fetchVehicleData, className: "mt-2 px-4 py-2 bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-200 rounded hover:bg-red-200 dark:hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Retry")); } if (!vehicleData) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-50 dark:bg-red-800/30 text-red-600 dark:text-red-300 border border-red-200 dark:border-red-700 rounded-md mb-3", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "No vehicle data available. Please try again."))); } return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between md:items-center mb-6", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, vehicleData.year, " ", vehicleData.make, " ", vehicleData.model), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, getStatusBadge(vehicleData.status), getTypeBadge(vehicleData.vehicle_type), /*#__PURE__*/ React.createElement("span", { className: "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-medium px-2.5 py-0.5 rounded-full border border-gray-200 dark:border-gray-600", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, vehicleData.registration || "No Registration"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowKeyLabel(true), className: "mt-4 md:mt-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-lg transition-colors", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-key mr-2", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }), "Generate Key Label")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-700/50 p-4 rounded-lg border border-gray-200 dark:border-gray-600", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "Vehicle Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, Object.entries({ "Stock Number": vehicleData.stock_number, "Registration": vehicleData.registration, "Make": vehicleData.make, "Model": vehicleData.model, "Year": vehicleData.year, "Color": vehicleData.color, "Mileage": vehicleData.mileage ? `${vehicleData.mileage.toLocaleString()} miles` : null, "Price": vehicleData.price ? `£${vehicleData.price.toLocaleString()}` : null, "Chassis Number": vehicleData.chassis_number, "Key Number": vehicleData.key_number }).map(([label, value])=>/*#__PURE__*/ React.createElement("div", { key: label, className: "flex justify-between", __source: { fileName: "

prepflo Login