function MarkAsSoldModal({ vehicleId, onSave, onCancel }) { const { useState } = React; const [formData, setFormData] = useState({ salesperson: "", payment_method: "cash", sale_date: new Date().toISOString().split("T")[0], handover_date: "" }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const validateForm = ()=>{ const newErrors = {}; if (!formData.salesperson.trim()) { newErrors.salesperson = "Salesperson is required"; } if (!formData.sale_date) { newErrors.sale_date = "Sale date is required"; } if (formData.handover_date && formData.sale_date && new Date(formData.handover_date) < new Date(formData.sale_date)) { newErrors.handover_date = "Delivery date cannot be before sale date"; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); if (errors[name]) { setErrors((prev)=>({ ...prev, [name]: "" })); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!validateForm()) { return; } setIsSubmitting(true); try { if (onSave) { await onSave(formData); } } catch (error) { console.error("Error saving sale details:", error); } finally{ setIsSubmitting(false); } }; const handleClose = ()=>{ if (!isSubmitting && onCancel) { setFormData({ salesperson: "", payment_method: "cash", sale_date: new Date().toISOString().split("T")[0], handover_date: "" }); setErrors({}); onCancel(); } }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Salesperson *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "salesperson", value: formData.salesperson, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder: "Enter salesperson name", disabled: isSubmitting, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), errors.salesperson && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, errors.salesperson)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "Payment Method *"), /*#__PURE__*/ React.createElement("select", { name: "payment_method", value: formData.payment_method, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", disabled: isSubmitting, __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "cash", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Cash"), /*#__PURE__*/ React.createElement("option", { value: "finance", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Finance"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "Sale Date *"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "sale_date", value: formData.sale_date, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", disabled: isSubmitting, __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }), errors.sale_date && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, errors.sale_date)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Delivery Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "handover_date", value: formData.handover_date, onChange: handleInputChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", disabled: isSubmitting, __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }), errors.handover_date && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, errors.handover_date), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, "Optional - Leave blank if delivery date is not yet scheduled")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3 pt-4", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleClose, disabled: isSubmitting, className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }), "Processing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check mr-2", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }), "Mark as Sold")))); } function MarkAsSoldModalStory() { const { useState } = React; const [isModalOpen, setIsModalOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const [savedData, setSavedData] = useState(null); const mockVehicle = { id: 1, year: 2023, make: "BMW", model: "3 Series", stock_number: "ST12345", registration: "AB12 CDE" }; const handleSave = async (formData)=>{ setIsLoading(true); await new Promise((resolve)=>setTimeout(resolve, 2000)); setSavedData(formData); setIsLoading(false); setIsModalOpen(false); console.log("Sale details saved:", formData); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 dark:bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 220, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }, "Mark as Sold Modal Component"), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow", __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, "Interactive Demo"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsModalOpen(true), className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag mr-2", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }), "Mark Vehicle as Sold"), savedData && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-green-800 dark:text-green-200 mb-2", __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, "Last Saved Data:"), /*#__PURE__*/ React.createElement("pre", { className: "text-sm text-green-700 dark:text-green-300", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, JSON.stringify(savedData, null, 2))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow", __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 255, columnNumber: 13 }, __self: this }, "Modal with Vehicle Info"), /*#__PURE__*/ React.createElement(MarkAsSoldModal, { vehicleId: 1, onSave: (data)=>console.log("Save called with:", data), onCancel: ()=>console.log("Modal closed"), __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(MarkAsSoldModal, { vehicleId: 1, onSave: (data)=>console.log("Save called with:", data), onCancel: ()=>console.log("Modal closed"), __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement(MarkAsSoldModal, { vehicleId: 1, onSave: handleSave, onCancel: ()=>setIsModalOpen(false), __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }))); } function VehicleDetailView({ vehicle, vehicleId, dealershipId }) { 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 [actionLoading, setActionLoading] = React.useState(false); const [actionMessage, setActionMessage] = React.useState(null); const fetchVehicleData = async ()=>{ if (!vehicleId || !dealershipId) { setError("Vehicle ID and Dealership ID are required"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/get-vehicle-details", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: vehicleId, dealershipId: dealershipId }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); console.log("Vehicle details response:", JSON.stringify(data)); if (!data.success) { throw new Error(data.error || "Failed to fetch vehicle details"); } const vehicleData = data.vehicle; if (!vehicleData) { throw new Error("Vehicle data is missing in the response"); } setVehicleData(vehicleData); } catch (err) { setError(err.message); console.error("Error fetching vehicle details:", err); } finally{ setLoading(false); } }; const handleReturnToStock = async ()=>{ if (!vehicleData || !vehicleData.id || !dealershipId) return; setActionLoading(true); setActionMessage(null); try { const response = await fetch("/api/return-vehicle-to-stock", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: vehicleData.id, dealershipId: dealershipId }) }); const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to return vehicle to stock"); } setVehicleData(data.vehicle); setActionMessage({ type: "success", text: data.message || "Vehicle returned to stock successfully" }); } catch (err) { console.error("Error returning vehicle to stock:", err); setActionMessage({ type: "error", text: err.message || "Failed to return vehicle to stock" }); } finally{ setActionLoading(false); } }; const handleMarkAsSold = async (formData)=>{ if (!vehicleData || !vehicleData.id || !dealershipId) return; setActionLoading(true); setActionMessage(null); try { const response = await fetch("/api/mark-vehicle-as-sold", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: vehicleData.id, dealership_id: dealershipId, salesperson: formData.salesperson, payment_method: formData.paymentMethod, handover_date: formData.handoverDate, schedule_finance_docs: formData.paymentMethod === "finance" }) }); const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to mark vehicle as sold"); } setVehicleData(data.vehicle); setActionMessage({ type: "success", text: data.message || "Vehicle marked as sold successfully" }); } catch (err) { console.error("Error marking vehicle as sold:", err); setActionMessage({ type: "error", text: err.message || "Failed to mark vehicle as sold" }); } finally{ setActionLoading(false); } }; React.useEffect(()=>{ if (vehicleId && dealershipId) { fetchVehicleData(); } }, [ vehicleId, dealershipId ]); if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center p-8 space-y-4", __source: { fileName: "", lineNumber: 143, 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: 144, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 145, 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: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 155, 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: 156, 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: 168, 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: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "No vehicle data available. Please try again."))); } const VehicleDetailContent = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between mb-6", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, vehicleData.make, " ", vehicleData.model, " (", vehicleData.year, ")"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, vehicleData.registration || vehicleData.stock_number)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-0", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(StatusBadge, { status: vehicleData.status, __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "Vehicle Details"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(DetailRow, { label: "Stock Number", value: vehicleData.stock_number, __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Registration", value: vehicleData.registration, __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Type", value: vehicleData.vehicle_type === "new" ? "New" : "Used", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Color", value: vehicleData.color, __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Mileage", value: vehicleData.mileage ? `${vehicleData.mileage.toLocaleString()} miles` : "N/A", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Key Number", value: vehicleData.key_number, __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Chassis Number", value: vehicleData.chassis_number, __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "Sale Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 234, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(DetailRow, { label: "Status", value: formatStatus(vehicleData.status), __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Price", value: vehicleData.price ? `£${vehicleData.price.toLocaleString()}` : "N/A", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }), vehicleData.status === "sold" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DetailRow, { label: "Salesperson", value: vehicleData.salesperson, __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Payment Method", value: formatPaymentMethod(vehicleData.payment_method), __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Sale Date", value: formatDate(vehicleData.sale_date), __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Handover Date", value: formatDate(vehicleData.handover_date), __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-6", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 273, columnNumber: 13 }, __self: this }, "Dealership Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(DetailRow, { label: "Dealership", value: vehicleData.dealership_name || "Not specified", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Group", value: vehicleData.group_name || "Not specified", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "City", value: vehicleData.dealership_city || "Not specified", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Phone", value: vehicleData.dealership_phone || "Not specified", __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Email", value: vehicleData.dealership_email || "Not specified", __source: { fileName: "", lineNumber: 293, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, "Dates & Timeline"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(DetailRow, { label: "Date Added", value: formatDate(vehicleData.date_added), __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Target Completion", value: formatDate(vehicleData.target_completion_date), __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }), vehicleData.status === "sold" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DetailRow, { label: "Sale Date", value: formatDate(vehicleData.sale_date), __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(DetailRow, { label: "Handover Date", value: formatDate(vehicleData.handover_date), __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, "Alloy Wheel Refurbishment"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 334, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-700 p-4 rounded-md", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 dark:text-gray-300 font-medium", __source: { fileName: "", lineNumber: 337, columnNumber: 17 }, __self: this }, "Diamond Cut Alloy"), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-blue-600 dark:text-blue-400", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }, vehicleData.diamond_cut_alloy_count || 0)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }, "Number of diamond cut alloy wheels requiring refurbishment")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-700 p-4 rounded-md", __source: { fileName: "", lineNumber: 348, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 dark:text-gray-300 font-medium", __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this }, "Painted Alloy"), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-purple-600 dark:text-purple-400", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, vehicleData.painted_alloy_count || 0)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }, "Number of painted alloy wheels requiring refurbishment")))), vehicleData.notes && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 365, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 366, columnNumber: 13 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 dark:bg-gray-700 rounded-md", __source: { fileName: "", lineNumber: 369, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line", __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, vehicleData.notes))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3 mt-6", __source: { fileName: "", lineNumber: 377, columnNumber: 9 }, __self: this }, vehicleData.status === "in_stock" && /*#__PURE__*/ React.createElement(SellVehicleForm, { onSubmit: handleMarkAsSold, isLoading: actionLoading, __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }), (vehicleData.status === "sold" || vehicleData.status === "delivered") && /*#__PURE__*/ React.createElement("button", { onClick: handleReturnToStock, disabled: actionLoading, className: "inline-flex items-center px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 disabled:bg-yellow-400", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }, actionLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }), "Processing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 399, columnNumber: 19 }, __self: this }), "Return to Stock")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowKeyLabel(!showKeyLabel), className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 406, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${showKeyLabel ? "fa-eye-slash" : "fa-key"} mr-2`, __source: { fileName: "", lineNumber: 410, columnNumber: 13 }, __self: this }), showKeyLabel ? "Hide Key Label" : "Show Key Label")), actionMessage && /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-3 rounded ${actionMessage.type === "success" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300" : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300"}`, __source: { fileName: "", lineNumber: 418, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 421, columnNumber: 13 }, __self: this }, actionMessage.text)), showKeyLabel && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 426, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(KeyLabel, { vehicle: vehicleData, __source: { fileName: "", lineNumber: 427, columnNumber: 13 }, __self: this }))); }; return /*#__PURE__*/ React.createElement(VehicleDetailContent, { __source: { fileName: "", lineNumber: 434, columnNumber: 10 }, __self: this }); } function DetailRow({ label, value }) { return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 439, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-700 dark:text-gray-300 w-1/3", __source: { fileName: "", lineNumber: 440, columnNumber: 7 }, __self: this }, label, ":"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 443, columnNumber: 7 }, __self: this }, value || "N/A")); } function StatusBadge({ status }) { let bgColor, textColor, icon, label; switch(status){ case "in_stock": bgColor = "bg-blue-100 dark:bg-blue-900/30"; textColor = "text-blue-800 dark:text-blue-300"; icon = "fa-warehouse"; label = "In Stock"; break; case "sold": bgColor = "bg-green-100 dark:bg-green-900/30"; textColor = "text-green-800 dark:text-green-300"; icon = "fa-tags"; label = "Sold"; break; case "delivered": bgColor = "bg-purple-100 dark:bg-purple-900/30"; textColor = "text-purple-800 dark:text-purple-300"; icon = "fa-truck"; label = "Delivered"; break; default: bgColor = "bg-gray-100 dark:bg-gray-700"; textColor = "text-gray-800 dark:text-gray-300"; icon = "fa-question-circle"; label = status ? status.replace(/_/g, " ").replace(/\b\w/g, (l)=>l.toUpperCase()) : "Unknown"; } return /*#__PURE__*/ React.createElement("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${bgColor} ${textColor}`, __source: { fileName: "", lineNumber: 480, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-1`, __source: { fileName: "", lineNumber: 483, columnNumber: 7 }, __self: this }), label); } function SellVehicleForm({ onSubmit, isLoading }) { const [isOpen, setIsOpen] = React.useState(false); const [formData, setFormData] = React.useState({ salesperson: "", paymentMethod: "cash", handoverDate: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(formData); setIsOpen(false); }; if (!isOpen) { return /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "inline-flex items-center px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 510, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag mr-2", __source: { fileName: "", lineNumber: 514, columnNumber: 9 }, __self: this }), "Mark as Sold"); } return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4", __source: { fileName: "", lineNumber: 521, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 522, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 523, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 524, columnNumber: 11 }, __self: this }, "Mark Vehicle as Sold"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(false), className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", __source: { fileName: "", lineNumber: 527, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 531, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 535, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 536, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 mb-2", htmlFor: "salesperson", __source: { fileName: "", lineNumber: 537, columnNumber: 13 }, __self: this }, "Salesperson*"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "salesperson", name: "salesperson", value: formData.salesperson, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white", placeholder: "Enter salesperson name", __source: { fileName: "", lineNumber: 543, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 555, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 mb-2", htmlFor: "paymentMethod", __source: { fileName: "", lineNumber: 556, columnNumber: 13 }, __self: this }, "Payment Method*"), /*#__PURE__*/ React.createElement("select", { id: "paymentMethod", name: "paymentMethod", value: formData.paymentMethod, onChange: handleChange, required: true, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 562, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "cash", __source: { fileName: "", lineNumber: 570, columnNumber: 15 }, __self: this }, "Cash"), /*#__PURE__*/ React.createElement("option", { value: "finance", __source: { fileName: "", lineNumber: 571, columnNumber: 15 }, __self: this }, "Finance"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 575, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 mb-2", htmlFor: "handoverDate", __source: { fileName: "", lineNumber: 576, columnNumber: 13 }, __self: this }, "Handover Date"), /*#__PURE__*/ React.createElement("input", { type: "date", id: "handoverDate", name: "handoverDate", value: formData.handoverDate, onChange: handleChange, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 582, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3", __source: { fileName: "", lineNumber: 592, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setIsOpen(false), className: "px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", __source: { fileName: "", lineNumber: 593, columnNumber: 13 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading || !formData.salesperson, className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-green-400", __source: { fileName: "", lineNumber: 600, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 607, columnNumber: 19 }, __self: this }), "Processing...") : "Mark as Sold"))))); } function formatStatus(status) { if (!status) return "Unknown"; return status.replace(/_/g, " ").replace(/\b\w/g, (l)=>l.toUpperCase()); } function formatPaymentMethod(method) { if (!method) return "N/A"; return method === "finance" ? "Finance" : "Cash"; } function formatDate(dateString) { if (!dateString) return "N/A"; const date = new Date(dateString); return date.toLocaleDateString("en-GB"); } function VehicleDetailViewStory() { const mockVehicles = { inStock: { id: 1, stock_number: "ST12345", vehicle_type: "used", make: "BMW", model: "3 Series", year: 2022, registration: "AB12 CDE", chassis_number: "WBA12345", color: "Black", mileage: 15000, price: 25000, status: "in_stock", date_added: "2025-01-01", key_number: "K123", notes: "Vehicle has been fully valeted and is ready for sale. Minor scratch on rear bumper has been repaired.", tasks: [ { task_name: "Valet", status: "completed" }, { task_name: "Service", status: "in_progress" }, { task_name: "MOT", status: "not_started" } ], diamond_cut_alloy_count: 2, painted_alloy_count: 1 }, sold: { id: 2, stock_number: "ST67890", vehicle_type: "new", make: "Mercedes", model: "A-Class", year: 2025, registration: "XY34 ZAB", chassis_number: "WDD12345", color: "Silver", price: 35000, status: "sold", date_added: "2025-02-01", sale_date: "2025-02-15", handover_date: "2025-02-20", key_number: "K456", salesperson: "John Smith", payment_method: "finance", notes: "Customer has requested tinted windows to be installed before delivery.", tasks: [ { task_name: "PDI", status: "completed" }, { task_name: "Valet", status: "completed" } ] }, delivered: { id: 3, stock_number: "ST54321", vehicle_type: "used", make: "Audi", model: "Q5", year: 2023, registration: "CD45 EFG", chassis_number: "WAUZZZ8R5DA123456", color: "Blue", price: 42000, status: "delivered", date_added: "2025-01-15", sale_date: "2025-01-25", handover_date: "2025-02-01", key_number: "K789", salesperson: "Jane Doe", payment_method: "cash", tasks: [ { task_name: "Valet", status: "completed" }, { task_name: "PDI", status: "completed" } ] } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 715, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 716, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 717, columnNumber: 9 }, __self: this }, "Vehicle In Stock"), /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: mockVehicles.inStock, dealershipId: "123", __source: { fileName: "", lineNumber: 720, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 723, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 724, columnNumber: 9 }, __self: this }, "Vehicle Sold"), /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: mockVehicles.sold, dealershipId: "123", __source: { fileName: "", lineNumber: 727, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 730, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 731, columnNumber: 9 }, __self: this }, "Vehicle Delivered"), /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: mockVehicles.delivered, dealershipId: "123", __source: { fileName: "", lineNumber: 734, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 737, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 738, columnNumber: 9 }, __self: this }, "Loading State"), /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicleId: "123", dealershipId: "456", __source: { fileName: "", lineNumber: 741, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 744, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 745, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: null, __source: { fileName: "", lineNumber: 748, 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: "", dealership_id: "", is_approved: false }); 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, dealership_id: vehicle.dealership_id, is_approved: vehicle.is_approved || false }); } }, [ vehicle ]); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prev)=>({ ...prev, [name]: type === "checkbox" ? checked : value })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setSuccess(false); try { if (!formData.dealership_id) { try { const storedDealershipId = localStorage.getItem("dealershipId"); if (storedDealershipId) { formData.dealership_id = parseInt(storedDealershipId, 10); } else { throw new Error("No dealership ID found. Please log in again."); } } catch (err) { console.error("Error accessing localStorage:", err); throw new Error("Unable to access dealership information. Please log in again."); } } const submitData = { ...formData, registration: formData.registration || null, color: formData.color || null, price: formData.price || null, mileage: formData.mileage || null, salesperson: formData.salesperson || null, handover_date: formData.handover_date || null, target_completion_date: formData.target_completion_date || null, notes: formData.notes || null, chassis_number: formData.chassis_number || null, payment_method: formData.payment_method || null, sale_date: formData.sale_date || null, is_approved: formData.is_approved || false }; const response = await fetch("/api/update-vehicle", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(submitData) }); if (!response.ok) { throw new Error(`Error updating vehicle: ${response.status}`); } const result = await response.json(); if (!result.success) { throw new Error(result.error || "Failed to update vehicle"); } setSuccess(true); if (onSave) { await onSave(submitData); } setTimeout(()=>setSuccess(false), 3000); } catch (err) { console.error("Save vehicle error:", 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: 148, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 149, 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: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "Error!"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 156, 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: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-bold", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Success!"), /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 166, 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: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, 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: 175, 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: 178, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 188, 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: 189, 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: 192, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "used", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Used"), /*#__PURE__*/ React.createElement("option", { value: "new", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, "New"))), formData.vehicle_type === "used" && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 205, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "is_approved", name: "is_approved", checked: formData.is_approved, onChange: handleChange, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "is_approved", className: "ml-2 block text-sm text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, "Approved Used Vehicle")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 223, 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: 224, 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: 227, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, 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: 238, 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: 241, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, 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: 252, 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: 255, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, 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: 266, 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: 269, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 278, 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: 279, 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: 282, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 291, 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: 292, 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: 295, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 305, 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: 306, 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: 309, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 318, 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: 319, 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: 322, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "in_stock", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, "In Stock"), /*#__PURE__*/ React.createElement("option", { value: "sold", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, "Sold"), /*#__PURE__*/ React.createElement("option", { value: "delivered", __source: { fileName: "", lineNumber: 331, columnNumber: 15 }, __self: this }, "Delivered"))), formData.status === "sold" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 336, 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: 337, 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: 340, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, "Select Payment Method"), /*#__PURE__*/ React.createElement("option", { value: "cash", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, "Cash"), /*#__PURE__*/ React.createElement("option", { value: "finance", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }, "Finance"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 354, 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: 355, 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: 358, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 367, 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: 368, 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: 371, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 380, 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: 381, 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: 384, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 393, 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: 394, 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: 397, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 406, 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: 407, 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: 410, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 420, 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: 421, 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: 424, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 434, 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: 435, 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: 438, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-3", __source: { fileName: "", lineNumber: 447, 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: 448, 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: 455, 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 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: 628, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 629, columnNumber: 7 }, __self: this }, "Vehicle Edit Form"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 633, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 634, 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: 635, 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: 645, 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: 655, 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: 668, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 669, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 670, columnNumber: 15 }, __self: this }, "Edit Vehicle: ", mockVehicle.make, " ", mockVehicle.model)), /*#__PURE__*/ React.createElement(VehicleEditForm, { vehicle: mockVehicle, onSave: handleSave, onCancel: handleCancel, __source: { fileName: "", lineNumber: 674, columnNumber: 13 }, __self: this })), activeTab === "new" && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow", __source: { fileName: "", lineNumber: 683, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 684, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 685, columnNumber: 15 }, __self: this }, "Create New Vehicle")), /*#__PURE__*/ React.createElement(VehicleEditForm, { vehicle: newVehicle, onSave: handleSave, onCancel: handleCancel, __source: { fileName: "", lineNumber: 689, 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: 698, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 699, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VehicleDetailView, { vehicle: mockVehicle, dealershipId: "123", __source: { fileName: "", lineNumber: 700, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(VehicleTaskList, { vehicle: mockVehicle, onTaskStatusChange: handleTaskStatusChange, onRefresh: handleRefresh, __source: { fileName: "", lineNumber: 701, columnNumber: 15 }, __self: this }))))); } 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 NavigationMenu({ brandName = "prepflo", dealershipName = null, currentPath = "/" }) { const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const [isDesktopMenuOpen, setIsDesktopMenuOpen] = React.useState(false); const [dealershipInfo, setDealershipInfo] = React.useState(null); const desktopMenuRef = React.useRef(null); React.useEffect(()=>{ if (typeof window !== "undefined") { const storedDealershipId = localStorage.getItem("dealershipId"); const storedDealershipName = localStorage.getItem("dealershipName"); const storedGroupName = localStorage.getItem("dealershipGroupName"); if (storedDealershipId && storedDealershipName) { setDealershipInfo({ id: storedDealershipId, name: storedDealershipName, groupName: storedGroupName }); } } }, []); React.useEffect(()=>{ function handleClickOutside(event) { if (desktopMenuRef.current && !desktopMenuRef.current.contains(event.target)) { setIsDesktopMenuOpen(false); } } if (isDesktopMenuOpen) { document.addEventListener("mousedown", handleClickOutside); } return ()=>{ document.removeEventListener("mousedown", handleClickOutside); }; }, [ isDesktopMenuOpen ]); const toggleMobileMenu = ()=>{ setIsMobileMenuOpen(!isMobileMenuOpen); }; const toggleDesktopMenu = ()=>{ setIsDesktopMenuOpen(!isDesktopMenuOpen); }; const handleSignOut = ()=>{ if (typeof window !== "undefined") { localStorage.removeItem("dealershipId"); localStorage.removeItem("dealershipName"); localStorage.removeItem("dealershipGroupName"); window.location.href = "/login"; } }; const navItems = [ { path: "/dashboard", label: "Dashboard", icon: "fa-tachometer-alt" }, { path: "/vehicle-list", label: "Vehicles", icon: "fa-car" }, { path: "/vehicle-management-form", label: "Add Vehicle", icon: "fa-plus" }, { path: "/prep-list", label: "Prep List", icon: "fa-tasks" }, { path: "/handover-diary", label: "Handover Diary", icon: "fa-calendar-alt" }, { path: "/key-locator", label: "Key Locator", icon: "fa-key" } ]; const displayDealershipName = dealershipName || dealershipInfo?.name; return /*#__PURE__*/ React.createElement("nav", { className: "bg-white dark:bg-gray-800 shadow-sm", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 flex items-center", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-blue-600 dark:text-blue-400 text-xl font-bold", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, brandName), displayDealershipName && /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-600 dark:text-gray-400 text-sm", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, "| ", displayDealershipName)), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:ml-6 lg:flex lg:space-x-8", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.path, href: item.path, className: `${currentPath === item.path ? "border-blue-500 text-gray-900 dark:text-white" : "border-transparent text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600"} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`, __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} mr-2`, __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }), item.label)))), /*#__PURE__*/ React.createElement("div", { className: "hidden lg:ml-6 lg:flex lg:items-center", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-3 relative", ref: desktopMenuRef, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-white dark:bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", id: "dealership-menu-button", "aria-expanded": isDesktopMenuOpen, "aria-haspopup": "true", onClick: toggleDesktopMenu, __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, "Open dealership menu"), /*#__PURE__*/ React.createElement("div", { className: "h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building text-gray-500 dark:text-gray-300", __source: { fileName: "", lineNumber: 123, columnNumber: 21 }, __self: this })))), isDesktopMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none", role: "menu", "aria-orientation": "vertical", "aria-labelledby": "dealership-menu-button", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-600", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 136, columnNumber: 21 }, __self: this }, dealershipInfo?.name || displayDealershipName || "Dealership"), dealershipInfo?.groupName && /*#__PURE__*/ React.createElement("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 142, columnNumber: 23 }, __self: this }, dealershipInfo.groupName)), /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600", role: "menuitem", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt mr-2", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }), "Dashboard"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignOut, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600", role: "menuitem", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }), "Sign Out")))), /*#__PURE__*/ React.createElement("div", { className: "lg:hidden -mr-2 flex items-center", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMobileMenu, type: "button", className: "inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500", "aria-expanded": "false", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "Open main menu"), /*#__PURE__*/ React.createElement("i", { className: `fas ${isMobileMenuOpen ? "fa-times" : "fa-bars"}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }))))), isMobileMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "lg:hidden", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pt-2 pb-3 space-y-1", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, navItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.path, href: item.path, className: `${currentPath === item.path ? "bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-700 dark:text-blue-300" : "border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-800 dark:hover:text-gray-200"} block pl-3 pr-4 py-2 border-l-4 text-base font-medium`, __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} mr-2`, __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }), item.label))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 pb-3 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center px-4", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-10 w-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building text-gray-500 dark:text-gray-300", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-base font-medium text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, dealershipInfo?.name || displayDealershipName || "Dealership"), dealershipInfo?.groupName && /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, dealershipInfo.groupName))), /*#__PURE__*/ React.createElement("div", { className: "mt-3 space-y-1", __source: { fileName: "", lineNumber: 221, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "block px-4 py-2 text-base font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700", __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt mr-2", __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }), "Dashboard"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignOut, className: "block w-full text-left px-4 py-2 text-base font-medium text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }), "Sign Out"))))); } function NavigationMenuStory() { const [currentPath, setCurrentPath] = React.useState("/prep-list"); const handlePathChange = (path)=>{ setCurrentPath(path); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 252, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 253, columnNumber: 7 }, __self: this }, "Navigation Menu Component"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, "Navigation Preview"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3", __source: { fileName: "", lineNumber: 257, columnNumber: 9 }, __self: this }, [ "/dealership-statistics-dashboard", "/vehicle-list", "/prep-list", "/handover-diary", "/key-locator" ].map((path)=>/*#__PURE__*/ React.createElement("button", { key: path, onClick: ()=>handlePathChange(path), className: `px-3 py-1 rounded ${currentPath === path ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}`, __source: { fileName: "", lineNumber: 265, columnNumber: 13 }, __self: this }, path.replace("/", "").replace(/-/g, " ").replace(/\b\w/g, (c)=>c.toUpperCase()))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this }, "Default Navigation"), /*#__PURE__*/ React.createElement(NavigationMenu, { currentPath: currentPath, brandName: "prepflo", __source: { fileName: "", lineNumber: 285, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 288, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }, "With Dealership Name"), /*#__PURE__*/ React.createElement(NavigationMenu, { currentPath: currentPath, brandName: "prepflo", dealershipName: "Example Dealership", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 9 }, __self: this }, "Custom Brand"), /*#__PURE__*/ React.createElement(NavigationMenu, { currentPath: currentPath, brandName: "Vehicle Manager", __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this }))); } function KeyNumberLocator({ dealershipId }) { 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(), dealership_id: dealershipId }) }); 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: 58, 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: 59, columnNumber: 7 }, __self: this }, "Key Number Locator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, 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: 66, 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: 69, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, 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: 80, 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: 83, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 94, 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: 95, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center", __source: { fileName: "", lineNumber: 101, 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: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __source: { fileName: "", lineNumber: 108, 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: 116, 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: 129, 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: 140, columnNumber: 9 }, __self: this }, error), results && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 146, 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: 147, columnNumber: 11 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "