{"ast":null,"code":"import React,{useState}from'react';import{FiX,FiPlus}from'react-icons/fi';import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";const AddDeviceModal=_ref=>{let{isOpen,onClose,onDeviceAdded}=_ref;const[formData,setFormData]=useState({id:'',name:'',description:'',model:'SIM7000E',firmware_version:''});const[errors,setErrors]=useState({});const[loading,setLoading]=useState(false);const handleChange=e=>{const{name,value}=e.target;setFormData(prev=>({...prev,[name]:value}));// Clear error when user types\nif(errors[name]){setErrors(prev=>({...prev,[name]:''}));}};const validateForm=()=>{const newErrors={};if(!formData.id.trim()){newErrors.id='Device ID is required';}else if(!/^[a-zA-Z0-9-_]+$/.test(formData.id)){newErrors.id='Device ID can only contain letters, numbers, hyphens, and underscores';}if(!formData.name.trim()){newErrors.name='Device name is required';}if(!formData.model.trim()){newErrors.model='Device model is required';}setErrors(newErrors);return Object.keys(newErrors).length===0;};const handleSubmit=async e=>{e.preventDefault();if(!validateForm()){return;}setLoading(true);try{const response=await fetch('/api/devices/',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${localStorage.getItem('token')}`},body:JSON.stringify(formData)});if(response.ok){const newDevice=await response.json();onDeviceAdded(newDevice);handleClose();}else{const errorData=await response.json();if(response.status===400&&errorData.detail){if(typeof errorData.detail==='string'){setErrors({general:errorData.detail});}else{// Handle validation errors\nconst newErrors={};errorData.detail.forEach(error=>{if(error.loc&&error.loc.length>1){newErrors[error.loc[1]]=error.msg;}});setErrors(newErrors);}}else{setErrors({general:'Failed to create device. Please try again.'});}}}catch(error){console.error('Error creating device:',error);setErrors({general:'Network error. Please check your connection.'});}finally{setLoading(false);}};const handleClose=()=>{setFormData({id:'',name:'',description:'',model:'SIM7000E',firmware_version:''});setErrors({});onClose();};if(!isOpen)return null;return/*#__PURE__*/_jsx(\"div\",{className:\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"bg-white rounded-lg shadow-xl w-full max-w-md mx-4\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex items-center justify-between p-6 border-b\",children:[/*#__PURE__*/_jsx(\"h2\",{className:\"text-xl font-semibold text-gray-800\",children:\"Add New Device\"}),/*#__PURE__*/_jsx(\"button\",{onClick:handleClose,className:\"text-gray-400 hover:text-gray-600 transition-colors\",children:/*#__PURE__*/_jsx(FiX,{size:24})})]}),/*#__PURE__*/_jsxs(\"form\",{onSubmit:handleSubmit,className:\"p-6 space-y-4\",children:[errors.general&&/*#__PURE__*/_jsx(\"div\",{className:\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded\",children:errors.general}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"label\",{htmlFor:\"id\",className:\"block text-sm font-medium text-gray-700 mb-1\",children:\"Device ID *\"}),/*#__PURE__*/_jsx(\"input\",{type:\"text\",id:\"id\",name:\"id\",value:formData.id,onChange:handleChange,className:`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 ${errors.id?'border-red-300 focus:ring-red-500':'border-gray-300'}`,placeholder:\"e.g., SIM7000E-001\"}),errors.id&&/*#__PURE__*/_jsx(\"p\",{className:\"mt-1 text-sm text-red-600\",children:errors.id})]}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"label\",{htmlFor:\"name\",className:\"block text-sm font-medium text-gray-700 mb-1\",children:\"Device Name *\"}),/*#__PURE__*/_jsx(\"input\",{type:\"text\",id:\"name\",name:\"name\",value:formData.name,onChange:handleChange,className:`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 ${errors.name?'border-red-300 focus:ring-red-500':'border-gray-300'}`,placeholder:\"e.g., Solar Panel Monitor\"}),errors.name&&/*#__PURE__*/_jsx(\"p\",{className:\"mt-1 text-sm text-red-600\",children:errors.name})]}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"label\",{htmlFor:\"description\",className:\"block text-sm font-medium text-gray-700 mb-1\",children:\"Description\"}),/*#__PURE__*/_jsx(\"textarea\",{id:\"description\",name:\"description\",value:formData.description,onChange:handleChange,rows:3,className:\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500\",placeholder:\"Optional description of the device\"})]}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"label\",{htmlFor:\"model\",className:\"block text-sm font-medium text-gray-700 mb-1\",children:\"Model *\"}),/*#__PURE__*/_jsxs(\"select\",{id:\"model\",name:\"model\",value:formData.model,onChange:handleChange,className:`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 ${errors.model?'border-red-300 focus:ring-red-500':'border-gray-300'}`,children:[/*#__PURE__*/_jsx(\"option\",{value:\"SIM7000E\",children:\"SIM7000E\"}),/*#__PURE__*/_jsx(\"option\",{value:\"SIM7000A\",children:\"SIM7000A\"}),/*#__PURE__*/_jsx(\"option\",{value:\"SIM7000G\",children:\"SIM7000G\"}),/*#__PURE__*/_jsx(\"option\",{value:\"Custom\",children:\"Custom\"})]}),errors.model&&/*#__PURE__*/_jsx(\"p\",{className:\"mt-1 text-sm text-red-600\",children:errors.model})]}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"label\",{htmlFor:\"firmware_version\",className:\"block text-sm font-medium text-gray-700 mb-1\",children:\"Firmware Version\"}),/*#__PURE__*/_jsx(\"input\",{type:\"text\",id:\"firmware_version\",name:\"firmware_version\",value:formData.firmware_version,onChange:handleChange,className:\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500\",placeholder:\"e.g., 1.2.3\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"flex justify-end space-x-3 pt-4\",children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:handleClose,className:\"px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors\",children:\"Cancel\"}),/*#__PURE__*/_jsxs(\"button\",{type:\"submit\",disabled:loading,className:`flex items-center gap-2 px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors ${loading?'opacity-50 cursor-not-allowed':''}`,children:[loading?/*#__PURE__*/_jsx(\"div\",{className:\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin\"}):/*#__PURE__*/_jsx(FiPlus,{size:16}),loading?'Creating...':'Add Device']})]})]})]})});};export default AddDeviceModal;","map":{"version":3,"names":["React","useState","FiX","FiPlus","jsx","_jsx","jsxs","_jsxs","AddDeviceModal","_ref","isOpen","onClose","onDeviceAdded","formData","setFormData","id","name","description","model","firmware_version","errors","setErrors","loading","setLoading","handleChange","e","value","target","prev","validateForm","newErrors","trim","test","Object","keys","length","handleSubmit","preventDefault","response","fetch","method","headers","localStorage","getItem","body","JSON","stringify","ok","newDevice","json","handleClose","errorData","status","detail","general","forEach","error","loc","msg","console","className","children","onClick","size","onSubmit","htmlFor","type","onChange","placeholder","rows","disabled"],"sources":["/home/m3mo/Desktop/temparea/solarbank/frontend/src/components/AddDeviceModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { FiX, FiPlus } from 'react-icons/fi';\n\nconst AddDeviceModal = ({ isOpen, onClose, onDeviceAdded }) => {\n const [formData, setFormData] = useState({\n id: '',\n name: '',\n description: '',\n model: 'SIM7000E',\n firmware_version: '',\n });\n const [errors, setErrors] = useState({});\n const [loading, setLoading] = useState(false);\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value\n }));\n // Clear error when user types\n if (errors[name]) {\n setErrors(prev => ({\n ...prev,\n [name]: ''\n }));\n }\n };\n\n const validateForm = () => {\n const newErrors = {};\n \n if (!formData.id.trim()) {\n newErrors.id = 'Device ID is required';\n } else if (!/^[a-zA-Z0-9-_]+$/.test(formData.id)) {\n newErrors.id = 'Device ID can only contain letters, numbers, hyphens, and underscores';\n }\n \n if (!formData.name.trim()) {\n newErrors.name = 'Device name is required';\n }\n \n if (!formData.model.trim()) {\n newErrors.model = 'Device model is required';\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n \n if (!validateForm()) {\n return;\n }\n\n setLoading(true);\n \n try {\n const response = await fetch('/api/devices/', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${localStorage.getItem('token')}`,\n },\n body: JSON.stringify(formData),\n });\n\n if (response.ok) {\n const newDevice = await response.json();\n onDeviceAdded(newDevice);\n handleClose();\n } else {\n const errorData = await response.json();\n if (response.status === 400 && errorData.detail) {\n if (typeof errorData.detail === 'string') {\n setErrors({ general: errorData.detail });\n } else {\n // Handle validation errors\n const newErrors = {};\n errorData.detail.forEach(error => {\n if (error.loc && error.loc.length > 1) {\n newErrors[error.loc[1]] = error.msg;\n }\n });\n setErrors(newErrors);\n }\n } else {\n setErrors({ general: 'Failed to create device. Please try again.' });\n }\n }\n } catch (error) {\n console.error('Error creating device:', error);\n setErrors({ general: 'Network error. Please check your connection.' });\n } finally {\n setLoading(false);\n }\n };\n\n const handleClose = () => {\n setFormData({\n id: '',\n name: '',\n description: '',\n model: 'SIM7000E',\n firmware_version: '',\n });\n setErrors({});\n onClose();\n };\n\n if (!isOpen) return null;\n\n return (\n