+
+ );
+
+};
\ No newline at end of file
diff --git a/src/front/components/CustomerForm.jsx b/src/front/components/CustomerForm.jsx
new file mode 100644
index 0000000000..eda3098edb
--- /dev/null
+++ b/src/front/components/CustomerForm.jsx
@@ -0,0 +1,218 @@
+function ButtonSpinner({ text }) {
+ return (
+ <>
+
+ {text}
+
+ );
+}
+
+export function CustomerForm({
+ customers,
+ selectedCustomer,
+ customerForm,
+ showCustomerForm,
+ isBusy,
+ isSavingCustomer,
+ onSelectCustomer,
+ onCustomerFormChange,
+ onCreateCustomer,
+ onToggleCustomerForm,
+ onContinue,
+ getCustomerLabel
+}) {
+ return (
+
+ Propietario del vehículo
+
+
+
+
+
+ cambiarModo("existente")}
+ />
+
+
+ cambiarModo("nuevo")}
+ />
+
+
+ cambiarModo("sin")}
+ />
+
+
+
+
+ {modo === "existente" && (
+ <>
+ {cargando && Cargando clientes...
} + {errorCarga && ( +Error al cargar: {errorCarga}
+ )} + {!cargando && !errorCarga && ( + + )} + {error && ( +{error}
+ )}
+
+ )}
+
+
+ {modo === "nuevo" && (
+
+
+ )}
+
+
+
+ handleNuevoChange("nombre", e.target.value)}
+ />
+
+
+
+
+ handleNuevoChange("apellidos", e.target.value)
+ }
+ />
+
+
+
+
+ handleNuevoChange("dni", e.target.value.toUpperCase())
+ }
+ />
+
+
+
+
+ handleNuevoChange("telefono", e.target.value)
+ }
+ />
+
+
+
+ handleNuevoChange("email", e.target.value)}
+ />
+
+
+
+
+ handleNuevoChange("direccion", e.target.value)
+ }
+ />
+
+ {error && (
+
+
+ )}
+ {error}
+ Customer
+ + {customers.length === 0 && !showCustomerForm && ( +
+ No customers found. Create the first customer before creating the service ticket.
+
+ )}
+
+
+
+
+
+
+
+
+
+ {showCustomerForm && (
+
+ )}
+
+
+
+
+ Service ticket
+ +
+
+
+ {mechanics.length === 0 && (
+ + Customer:{" "} + {selectedCustomer ? getCustomerLabel(selectedCustomer) : "No customer selected"} +
+ ++ Vehicle:{" "} + {selectedVehicle ? getVehicleName(selectedVehicle) : "No vehicle selected"} +
+
+ No mechanics found. You can create the ticket unassigned, or create a mechanic account later.
+
+ )}
+
+
+
+
+ );
+}
+
+export function ServiceDetailsModal({
+ serviceId,
+ role = "admin",
+ onClose,
+ onServiceUpdated,
+}) {
+ const [service, setService] = useState(null);
+ const [comments, setComments] = useState([]);
+
+ const [commentText, setCommentText] = useState("");
+ const [commentType, setCommentType] = useState("note");
+ const [commentImage, setCommentImage] = useState(null);
+ const [commentImagePreview, setCommentImagePreview] = useState("");
+ const fileInputRef = useRef(null);
+
+ const [loading, setLoading] = useState(true);
+ const [savingComment, setSavingComment] = useState(false);
+ const [error, setError] = useState("");
+
+ const isMechanic = role === "mechanic";
+
+ async function loadDetails() {
+ try {
+ setLoading(true);
+ setError("");
+
+ const [serviceData, commentsData] = await Promise.all([
+ apiFetch(`/services/${serviceId}`),
+ apiFetch(`/services/${serviceId}/comments`),
+ ]);
+
+ setService(serviceData.service || serviceData);
+ setComments(commentsData.comments || []);
+ } catch (error) {
+ setError(error.message || "Could not load service details.");
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ useEffect(() => {
+ loadDetails();
+ }, [serviceId]);
+
+ useEffect(() => {
+ const originalOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+
+ return () => {
+ document.body.style.overflow = originalOverflow;
+ };
+ }, []);
+
+ function handleCommentImageChange(event) {
+ const selectedImage = event.target.files[0];
+
+ if (!selectedImage) {
+ setCommentImage(null);
+ setCommentImagePreview("");
+ return;
+ }
+
+ setCommentImage(selectedImage);
+ setCommentImagePreview(URL.createObjectURL(selectedImage));
+ }
+
+ async function handleSubmitComment(event) {
+ event.preventDefault();
+
+ if (!commentText.trim()) {
+ setError("Please write a comment before saving.");
+ return;
+ }
+
+ try {
+ setSavingComment(true);
+ setError("");
+
+ const token = localStorage.getItem("token");
+
+ const formData = new FormData();
+ formData.append("comment", commentText.trim());
+ formData.append("comment_type", commentType);
+
+ if (commentImage) {
+ formData.append("image", commentImage);
+ }
+
+ const response = await fetch(
+ `${import.meta.env.VITE_BACKEND_URL}/api/services/${serviceId}/comments`,
+ {
+ method: "POST",
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ body: formData,
+ }
+ );
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(
+ data.message || data.error || "Could not save comment."
+ );
+ }
+
+ setCommentText("");
+ setCommentType("note");
+ setCommentImage(null);
+ setCommentImagePreview("");
+
+ if (fileInputRef.current) {
+ fileInputRef.current.value = "";
+ }
+
+ await loadDetails();
+
+ if (onServiceUpdated) {
+ onServiceUpdated();
+ }
+ } catch (error) {
+ setError(error.message || "Could not save comment.");
+ } finally {
+ setSavingComment(false);
+ }
+ }
+
+ function handleBackdropClick(event) {
+ if (event.target === event.currentTarget) {
+ onClose();
+ }
+ }
+
+ return (
+ <>
+ {label}
+{value || "-"}
+
+
+
+
+
+
+
+
+
+
+ + {isMechanic ? "My Task" : "Service Details"} +
+ ++ {service?.title || "Service"} +
+
+ {error && (
+
+ +
+ +
+ +
+ {error}
+
+ )}
+
+ {loading ? (
+
+
+
+ ) : !service ? (
+ Loading service details...
+Service not found.
+ ) : (
+ <>
+
+
+
+
+
+ {STATUS_LABELS[service.status] || service.status}
+
+
+
+ {PRIORITY_LABELS[service.priority] ||
+ service.priority ||
+ "Normal"}
+
+
+
+ + {service.description || "No description provided."} +
++ +
+
+
+ {service.observations && (
+ <>
+ + +
+
+
+ )}
+
+ Observations
+{service.observations}
++ +
+
+
+ Comments ({comments.length})
+ + {comments.length === 0 ? ( +No comments yet.
+ ) : ( +
+ {comments.map((comment) => (
+
+ )}
+
+ 
+ )}
+
+ ))}
+
+
+ {comment.author_name || "Unknown author"}
+
+
+
+
+ + {formatDateTime(comment.created_at)} +
++ {COMMENT_TYPE_LABELS[comment.comment_type] || + comment.comment_type || + "Note"} +
+ +{comment.comment}
+ + {comment.image_url && ( +