function EquipmentCard({ title, description, status, onViewCheckpoints }) { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-[300px] hover:shadow-xl transition-shadow duration-300", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mt-2", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, description)), /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-full text-sm ${status === "actif" ? "bg-green-100 text-green-800" : status === "inactif" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, status)), /*#__PURE__*/ React.createElement("button", { onClick: onViewCheckpoints, className: `w-full py-2 px-4 rounded-md font-roboto text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-300`, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Voir les points de contrôle")); } function EquipmentCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EquipmentCard, { title: "Pompe hydraulique", description: "Équipement principal du système hydraulique", status: "actif", onViewCheckpoints: ()=>alert("Afficher les points de contrôle"), __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EquipmentCard, { title: "Compresseur", description: "Unité de compression d'air", status: "inactif", onViewCheckpoints: ()=>alert("Afficher les points de contrôle"), __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EquipmentCard, { title: "Moteur électrique", description: "Moteur de transmission principale", status: "en maintenance", onViewCheckpoints: ()=>alert("Afficher les points de contrôle"), __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function ClientCard({ nom, email, telephone, adresse, equipements, onVoirEquipements }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg shadow-lg bg-white p-6", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-blue-500", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, nom)), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope w-5", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, email)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone w-5", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, telephone)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt w-5", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, adresse))), /*#__PURE__*/ React.createElement("button", { onClick: onVoirEquipements, className: "w-full mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Voir les équipements")))); } function ClientCardStory() { const clientExemple = { nom: "Jean Dupont", email: "jean.dupont@email.com", telephone: "01 23 45 67 89", adresse: "123 Rue de Paris, 75001 Paris", equipements: [ "Ordinateur portable", "Imprimante", "Scanner" ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClientCard, { ...clientExemple, onVoirEquipements: ()=>alert("Liste des équipements: " + clientExemple.equipements.join(", ")), __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function ChecklistItem({ label, status, onStatusChange }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, label), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onStatusChange("OK"), className: `px-4 py-2 rounded ${status === "OK" ? "bg-green-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "OK"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onStatusChange("Réalisé"), className: `px-4 py-2 rounded ${status === "Réalisé" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Réalisé"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onStatusChange("À réparer"), className: `px-4 py-2 rounded ${status === "À réparer" ? "bg-red-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "À réparer")))); } function ChecklistItemStory() { const [status1, setStatus1] = useState(""); const [status2, setStatus2] = useState(""); const [status3, setStatus3] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-4xl mx-auto space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChecklistItem, { label: "Vérification des niveaux", status: status1, onStatusChange: setStatus1, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChecklistItem, { label: "Test des freins", status: status2, onStatusChange: setStatus2, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChecklistItem, { label: "État des pneus", status: status3, onStatusChange: setStatus3, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function MainComponent() { const [clients, setClients] = useState([ { id: 1, name: "Sophie Martin", email: "sophie@email.com", company: "Tech Solutions" }, { id: 2, name: "Jean Dupont", email: "jean@email.com", company: "Marketing Pro" }, { id: 3, name: "Marie Dubois", email: "marie@email.com", company: "Design Studio" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Liste des Clients"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), "Ajouter un Client")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, clients.map((client)=>/*#__PURE__*/ React.createElement("div", { key: client.id, className: "bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow duration-200", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-blue-600 text-xl", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, client.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, client.company))), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }), client.email)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-end space-x-2", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-red-600 hover:text-red-800", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this })))))))); }