Caricamento Contabile<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n \/* Reset di base per garantire che l'app si comporti bene se embeddata *\/\r\n :root {\r\n color-scheme: dark;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #000000;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #333333;\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #444444;\r\n }\r\n\r\n \/* Animation Utilities *\/\r\n @keyframes fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @keyframes slide-up {\r\n from {\r\n transform: translateY(10px);\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .animate-fade-in {\r\n animation: fade-in 0.5s ease-out;\r\n }\r\n\r\n .animate-slide-up {\r\n animation: slide-up 0.5s ease-out;\r\n }\r\n <\/style>\r\n <script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"react\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\",\r\n \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\r\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\",\r\n \"lucide-react\": \"https:\/\/aistudiocdn.com\/lucide-react@^0.555.0\"\r\n }\r\n}\r\n<\/script>\r\n<\/head>\r\n\r\n<body class=\"antialiased bg-transparent\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useCallback } = React;\r\n\r\n \/\/ ==========================================\r\n \/\/ CONFIGURATION\r\n \/\/ ==========================================\r\n const CONFIG = {\r\n SCRIPT_URL: \"https:\/\/script.google.com\/macros\/s\/AKfycbzZ_cb6U_RTZIJnzE1v4UlK-0UAs_EtZ0F4Xb-bhqg9I3K0TjHuCJnnddVPBjHHeVkK1A\/exec\",\r\n MAX_FILE_SIZE: 5 * 1024 * 1024 \/\/ 5MB\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ ICONS\r\n \/\/ ==========================================\r\n const Icons = {\r\n Database: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\" \/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\" \/><path d=\"M3 5v14c0 1.66 4 3 9 3s 9-1.34 9-3V5\" \/><\/svg>,\r\n Shield: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\" \/><path d=\"m9 12 2 2 4-4\" \/><\/svg>,\r\n Upload: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\" \/><path d=\"M12 12v9\" \/><path d=\"m16 16-4-4-4 4\" \/><\/svg>,\r\n File: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" \/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\" \/><\/svg>,\r\n X: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M18 6 6 18\" \/><path d=\"m6 6 12 12\" \/><\/svg>,\r\n Loader: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\" \/><\/svg>,\r\n Send: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"m22 2-7 20-4-9-9-4Z\" \/><path d=\"M22 2 11 13\" \/><\/svg>,\r\n Check: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" \/><polyline points=\"22 4 12 14.01 9 11.01\" \/><\/svg>,\r\n Alert: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\" \/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" \/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" \/><\/svg>,\r\n Info: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\" \/><path d=\"M12 16v-4\" \/><path d=\"M12 8h.01\" \/><\/svg>\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ HELPERS\r\n \/\/ ==========================================\r\n const fileToBase64 = (file) => {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result.split(',')[1]);\r\n reader.onerror = (error) => reject(error);\r\n });\r\n };\r\n\r\n const formatSize = (bytes) => {\r\n if (bytes === 0) return '0 B';\r\n const k = 1024;\r\n const sizes = ['B', 'KB', 'MB', 'GB'];\r\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ MODAL COMPONENT\r\n \/\/ ==========================================\r\n const Modal = ({ type, message, onClose }) => {\r\n if (!message) return null;\r\n\r\n const isSuccess = type === 'SUCCESS';\r\n\r\n return (\r\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/80 backdrop-blur-sm animate-fade-in\">\r\n <div className=\"bg-zinc-900 border border-zinc-700 rounded-2xl shadow-2xl max-w-sm w-full p-6 relative animate-slide-up transform transition-all\">\r\n <button onClick={onClose} className=\"absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors\">\r\n <Icons.X className=\"w-6 h-6\" \/>\r\n <\/button>\r\n\r\n <div className=\"flex flex-col items-center text-center space-y-4\">\r\n <div className={`p-4 rounded-full ${isSuccess ? 'bg-green-500\/10 text-green-400' : 'bg-red-500\/10 text-red-400'}`}>\r\n {isSuccess ? <Icons.Check className=\"w-8 h-8\" \/> : <Icons.Alert className=\"w-8 h-8\" \/>}\r\n <\/div>\r\n\r\n <h3 className=\"text-xl font-bold text-white\">\r\n {isSuccess ? 'Operazione Compiuta!' : 'Attenzione'}\r\n <\/h3>\r\n\r\n <p className=\"text-zinc-300\">\r\n {message}\r\n <\/p>\r\n\r\n <button\r\n onClick={onClose}\r\n className={`w-full py-3 px-4 rounded-xl font-semibold text-white transition-all shadow-lg ${isSuccess\r\n ? 'bg-green-600 hover:bg-green-500 shadow-green-900\/20'\r\n : 'bg-red-600 hover:bg-red-500 shadow-red-900\/20'\r\n }`}\r\n >\r\n {isSuccess ? 'OK, Chiudi' : 'Riprova'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ MAIN APP COMPONENT\r\n \/\/ ==========================================\r\n const App = () => {\r\n const [formData, setFormData] = useState({\r\n cognome: '',\r\n nome: '',\r\n ordine: '',\r\n file: null\r\n });\r\n const [status, setStatus] = useState('IDLE'); \/\/ IDLE, LOADING, SUCCESS, ERROR\r\n const [modal, setModal] = useState({ show: false, type: '', message: '' });\r\n const [isDragging, setIsDragging] = useState(false);\r\n\r\n const handleDrag = useCallback((e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (e.type === 'dragenter' || e.type === 'dragover') {\r\n setIsDragging(true);\r\n } else if (e.type === 'dragleave') {\r\n setIsDragging(false);\r\n }\r\n }, []);\r\n\r\n const handleDrop = useCallback((e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setIsDragging(false);\r\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\r\n handleFile(e.dataTransfer.files[0]);\r\n }\r\n }, []);\r\n\r\n const handleFile = (file) => {\r\n if (file.size > CONFIG.MAX_FILE_SIZE) {\r\n setModal({ show: true, type: 'ERROR', message: `Il file \u00e8 troppo grande. Massimo ${formatSize(CONFIG.MAX_FILE_SIZE)}` });\r\n return;\r\n }\r\n setFormData(prev => ({ ...prev, file }));\r\n setStatus('IDLE');\r\n };\r\n\r\n const closeModal = () => {\r\n setModal({ show: false, type: '', message: '' });\r\n if (status === 'SUCCESS') {\r\n \/\/ Reset form solo se successo\r\n setFormData({ cognome: '', nome: '', ordine: '', file: null });\r\n setStatus('IDLE');\r\n }\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (!formData.file) {\r\n setModal({ show: true, type: 'ERROR', message: '\u00c8 necessario caricare un file per procedere.' });\r\n return;\r\n }\r\n\r\n setStatus('LOADING');\r\n\r\n try {\r\n const timestamp = new Date().toLocaleString('it-IT');\r\n const fileData = await fileToBase64(formData.file);\r\n\r\n \/\/ Mapping to GAS expected parameters\r\n const params = new URLSearchParams();\r\n params.append('timestamp', timestamp);\r\n params.append('Cognome', formData.cognome);\r\n params.append('Nome', formData.nome);\r\n params.append('Numero ORDINE', formData.ordine);\r\n params.append('fileUpload', 'true');\r\n params.append('filename', formData.file.name);\r\n params.append('mimeType', formData.file.type);\r\n params.append('fileData', fileData);\r\n\r\n const response = await fetch(CONFIG.SCRIPT_URL, {\r\n method: 'POST',\r\n body: params\r\n });\r\n\r\n const result = await response.json();\r\n\r\n if (result.result === 'SUCCESS' || result.result === 'DIAGNOSTICA_OK') {\r\n setStatus('SUCCESS');\r\n setModal({\r\n show: true,\r\n type: 'SUCCESS',\r\n message: 'CONTABILE CARICATA CORRETTAMENTE. Riceverai a breve una mail di conferma.'\r\n });\r\n } else {\r\n throw new Error(result.error || 'Errore sconosciuto dal server');\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n setStatus('ERROR');\r\n setModal({ show: true, type: 'ERROR', message: error.message || 'Errore di connessione. Riprova pi\u00f9 tardi.' });\r\n }\r\n };\r\n\r\n return (\r\n \/\/ MODIFICHE STILE: bg-black, testi in colori neutri\/zinc, accenti in verde\r\n <div className=\"w-full flex flex-col items-center justify-start p-4 md:p-8 bg-black text-zinc-100 selection:bg-green-500 selection:text-black relative z-0 min-h-screen\">\r\n\r\n {modal.show && <Modal type={modal.type} message={modal.message} onClose={closeModal} \/>}\r\n\r\n {\/* Header *\/}\r\n <div className=\"w-full max-w-xl mb-8 text-center animate-slide-up mt-4\">\r\n <div className=\"inline-flex items-center justify-center p-4 mb-4 bg-green-500\/10 rounded-2xl border border-green-500\/20 shadow-[0_0_15px_rgba(34,197,94,0.3)]\">\r\n <Icons.Database className=\"w-10 h-10 text-green-400\" \/>\r\n <\/div>\r\n <h1 className=\"text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 via-emerald-500 to-teal-500 bg-clip-text text-transparent tracking-tight pb-1\">\r\n CARICAMENTO CONTABILE\r\n <\/h1>\r\n <p className=\"text-zinc-400 text-lg\">\r\n Allega contabile bancaria riferita all'ordine\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Main Card *\/}\r\n <div className=\"w-full max-w-xl bg-zinc-900\/80 backdrop-blur-xl rounded-3xl border border-zinc-800 p-8 shadow-2xl shadow-black\/80 animate-fade-in relative overflow-hidden\">\r\n\r\n {\/* Background gradient effect *\/}\r\n <div className=\"absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-green-600\/20 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div className=\"absolute bottom-0 left-0 -ml-20 -mb-20 w-64 h-64 bg-emerald-600\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <form onSubmit={handleSubmit} className=\"relative z-10 space-y-6\">\r\n\r\n {\/* Personal Info Row *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Cognome<\/label>\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"Es. Rossi\"\r\n value={formData.cognome}\r\n onChange={e => setFormData({ ...formData, cognome: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Nome<\/label>\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"Es. Mario\"\r\n value={formData.nome}\r\n onChange={e => setFormData({ ...formData, nome: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Order ID *\/}\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Numero ORDINE<\/label>\r\n <div className=\"relative\">\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"AB-25-XXXX\"\r\n value={formData.ordine}\r\n onChange={e => setFormData({ ...formData, ordine: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 pl-11 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <div className=\"absolute left-4 top-3.5 text-zinc-500\">\r\n <span className=\"text-xs font-bold\">#<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* File Upload Area *\/}\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Carica il file <span className=\"text-green-400\">*<\/span><\/label>\r\n\r\n {!formData.file ? (\r\n <div\r\n onDragEnter={handleDrag} onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrop}\r\n className={`\r\n relative group cursor-pointer flex flex-col items-center justify-center w-full h-40 \r\n rounded-2xl border-2 border-dashed transition-all duration-300\r\n ${isDragging ? 'border-green-500 bg-green-500\/10' : 'border-zinc-700 bg-zinc-800\/30 hover:bg-zinc-800\/60 hover:border-zinc-500'}\r\n `}\r\n >\r\n <input\r\n type=\"file\"\r\n onChange={e => e.target.files[0] && handleFile(e.target.files[0])}\r\n className=\"absolute inset-0 opacity-0 cursor-pointer z-20\"\r\n disabled={status === 'LOADING'}\r\n \/>\r\n <div className=\"flex flex-col items-center gap-3 text-zinc-400 group-hover:text-zinc-300 transition-colors\">\r\n <div className=\"p-3 bg-zinc-800 rounded-full ring-1 ring-zinc-700 group-hover:ring-green-500\/50 transition-all\">\r\n <Icons.Upload className=\"w-6 h-6 text-green-400\" \/>\r\n <\/div>\r\n <div className=\"text-center\">\r\n <p className=\"text-sm font-medium\"><span className=\"text-green-400\">Clicca<\/span> o trascina qui<\/p>\r\n <p className=\"text-xs text-zinc-500 mt-1\">PDF, JPG, PNG (Max 5MB)<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"flex items-center justify-between p-3 bg-green-900\/20 border border-green-500\/30 rounded-xl animate-fade-in\">\r\n <div className=\"flex items-center gap-3 overflow-hidden\">\r\n <div className=\"w-10 h-10 rounded-lg bg-green-500\/20 flex items-center justify-center flex-shrink-0 text-green-400\">\r\n <Icons.File className=\"w-5 h-5\" \/>\r\n <\/div>\r\n <div className=\"flex flex-col min-w-0\">\r\n <span className=\"text-sm font-medium text-white truncate\">{formData.file.name}<\/span>\r\n <span className=\"text-xs text-green-300\/70\">{formatSize(formData.file.size)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <button\r\n type=\"button\"\r\n onClick={() => setFormData(prev => ({ ...prev, file: null }))}\r\n disabled={status === 'LOADING'}\r\n className=\"p-2 text-zinc-400 hover:text-white hover:bg-zinc-700\/50 rounded-full transition-colors\"\r\n >\r\n <Icons.X className=\"w-5 h-5\" \/>\r\n <\/button>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n {\/* Submit Button *\/}\r\n <button\r\n type=\"submit\"\r\n disabled={status === 'LOADING'}\r\n className=\"w-full relative group overflow-hidden rounded-xl bg-green-800 p-4 font-semibold text-white shadow-lg shadow-green-900\/30 transition-all hover:bg-green-700 hover:shadow-green-900\/50 disabled:bg-zinc-700 disabled:cursor-not-allowed disabled:shadow-none\"\r\n >\r\n <div className=\"flex items-center justify-center gap-2 relative z-10\">\r\n {status === 'LOADING' ? (\r\n <>\r\n <Icons.Loader className=\"w-5 h-5 animate-spin\" \/>\r\n <span>Elaborazione in corso...<\/span>\r\n <\/>\r\n ) : (\r\n <>\r\n <Icons.Send className=\"w-5 h-5 group-hover:translate-x-1 transition-transform\" \/>\r\n <span>Invia Contabile<\/span>\r\n <\/>\r\n )}\r\n <\/div>\r\n <\/button>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <div className=\"mt-8 flex items-center gap-2 text-xs text-zinc-600 font-medium\">\r\n <Icons.Shield className=\"w-3 h-3\" \/>\r\n <span>Connessione Protetta TLS 1.3<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f0387d6 e-grid e-con-boxed e-con e-parent\" data-id=\"f0387d6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5efe38 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"f5efe38\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.aviglianabasket.it\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">TORNA A HOME PAGE<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4acb194 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4acb194\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.aviglianabasket.it\/?page_id=1573\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">TORNA A MERCHANDISING<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Caricamento Contabile TORNA A HOME PAGE TORNA A MERCHANDISING<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":398,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5239","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5239"}],"version-history":[{"count":26,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239\/revisions"}],"predecessor-version":[{"id":5720,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239\/revisions\/5720"}],"up":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/398"}],"wp:attachment":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Caricamento Contabile<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n \/* Reset di base per garantire che l'app si comporti bene se embeddata *\/\r\n :root {\r\n color-scheme: dark;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #000000;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #333333;\r\n border-radius: 4px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #444444;\r\n }\r\n\r\n \/* Animation Utilities *\/\r\n @keyframes fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @keyframes slide-up {\r\n from {\r\n transform: translateY(10px);\r\n opacity: 0;\r\n }\r\n\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .animate-fade-in {\r\n animation: fade-in 0.5s ease-out;\r\n }\r\n\r\n .animate-slide-up {\r\n animation: slide-up 0.5s ease-out;\r\n }\r\n <\/style>\r\n <script type=\"importmap\">\r\n{\r\n \"imports\": {\r\n \"react\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\",\r\n \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\r\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\",\r\n \"lucide-react\": \"https:\/\/aistudiocdn.com\/lucide-react@^0.555.0\"\r\n }\r\n}\r\n<\/script>\r\n<\/head>\r\n\r\n<body class=\"antialiased bg-transparent\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useCallback } = React;\r\n\r\n \/\/ ==========================================\r\n \/\/ CONFIGURATION\r\n \/\/ ==========================================\r\n const CONFIG = {\r\n SCRIPT_URL: \"https:\/\/script.google.com\/macros\/s\/AKfycbzZ_cb6U_RTZIJnzE1v4UlK-0UAs_EtZ0F4Xb-bhqg9I3K0TjHuCJnnddVPBjHHeVkK1A\/exec\",\r\n MAX_FILE_SIZE: 5 * 1024 * 1024 \/\/ 5MB\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ ICONS\r\n \/\/ ==========================================\r\n const Icons = {\r\n Database: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\" \/><path d=\"M21 12c0 1.66-4 3-9 3s-9-1.34-9-3\" \/><path d=\"M3 5v14c0 1.66 4 3 9 3s 9-1.34 9-3V5\" \/><\/svg>,\r\n Shield: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\" \/><path d=\"m9 12 2 2 4-4\" \/><\/svg>,\r\n Upload: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\" \/><path d=\"M12 12v9\" \/><path d=\"m16 16-4-4-4 4\" \/><\/svg>,\r\n File: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" \/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\" \/><\/svg>,\r\n X: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M18 6 6 18\" \/><path d=\"m6 6 12 12\" \/><\/svg>,\r\n Loader: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\" \/><\/svg>,\r\n Send: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"m22 2-7 20-4-9-9-4Z\" \/><path d=\"M22 2 11 13\" \/><\/svg>,\r\n Check: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" \/><polyline points=\"22 4 12 14.01 9 11.01\" \/><\/svg>,\r\n Alert: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\" \/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" \/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" \/><\/svg>,\r\n Info: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\" \/><path d=\"M12 16v-4\" \/><path d=\"M12 8h.01\" \/><\/svg>\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ HELPERS\r\n \/\/ ==========================================\r\n const fileToBase64 = (file) => {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result.split(',')[1]);\r\n reader.onerror = (error) => reject(error);\r\n });\r\n };\r\n\r\n const formatSize = (bytes) => {\r\n if (bytes === 0) return '0 B';\r\n const k = 1024;\r\n const sizes = ['B', 'KB', 'MB', 'GB'];\r\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\r\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ MODAL COMPONENT\r\n \/\/ ==========================================\r\n const Modal = ({ type, message, onClose }) => {\r\n if (!message) return null;\r\n\r\n const isSuccess = type === 'SUCCESS';\r\n\r\n return (\r\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black\/80 backdrop-blur-sm animate-fade-in\">\r\n <div className=\"bg-zinc-900 border border-zinc-700 rounded-2xl shadow-2xl max-w-sm w-full p-6 relative animate-slide-up transform transition-all\">\r\n <button onClick={onClose} className=\"absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors\">\r\n <Icons.X className=\"w-6 h-6\" \/>\r\n <\/button>\r\n\r\n <div className=\"flex flex-col items-center text-center space-y-4\">\r\n <div className={`p-4 rounded-full ${isSuccess ? 'bg-green-500\/10 text-green-400' : 'bg-red-500\/10 text-red-400'}`}>\r\n {isSuccess ? <Icons.Check className=\"w-8 h-8\" \/> : <Icons.Alert className=\"w-8 h-8\" \/>}\r\n <\/div>\r\n\r\n <h3 className=\"text-xl font-bold text-white\">\r\n {isSuccess ? 'Operazione Compiuta!' : 'Attenzione'}\r\n <\/h3>\r\n\r\n <p className=\"text-zinc-300\">\r\n {message}\r\n <\/p>\r\n\r\n <button\r\n onClick={onClose}\r\n className={`w-full py-3 px-4 rounded-xl font-semibold text-white transition-all shadow-lg ${isSuccess\r\n ? 'bg-green-600 hover:bg-green-500 shadow-green-900\/20'\r\n : 'bg-red-600 hover:bg-red-500 shadow-red-900\/20'\r\n }`}\r\n >\r\n {isSuccess ? 'OK, Chiudi' : 'Riprova'}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n \/\/ ==========================================\r\n \/\/ MAIN APP COMPONENT\r\n \/\/ ==========================================\r\n const App = () => {\r\n const [formData, setFormData] = useState({\r\n cognome: '',\r\n nome: '',\r\n ordine: '',\r\n file: null\r\n });\r\n const [status, setStatus] = useState('IDLE'); \/\/ IDLE, LOADING, SUCCESS, ERROR\r\n const [modal, setModal] = useState({ show: false, type: '', message: '' });\r\n const [isDragging, setIsDragging] = useState(false);\r\n\r\n const handleDrag = useCallback((e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (e.type === 'dragenter' || e.type === 'dragover') {\r\n setIsDragging(true);\r\n } else if (e.type === 'dragleave') {\r\n setIsDragging(false);\r\n }\r\n }, []);\r\n\r\n const handleDrop = useCallback((e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setIsDragging(false);\r\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\r\n handleFile(e.dataTransfer.files[0]);\r\n }\r\n }, []);\r\n\r\n const handleFile = (file) => {\r\n if (file.size > CONFIG.MAX_FILE_SIZE) {\r\n setModal({ show: true, type: 'ERROR', message: `Il file \u00e8 troppo grande. Massimo ${formatSize(CONFIG.MAX_FILE_SIZE)}` });\r\n return;\r\n }\r\n setFormData(prev => ({ ...prev, file }));\r\n setStatus('IDLE');\r\n };\r\n\r\n const closeModal = () => {\r\n setModal({ show: false, type: '', message: '' });\r\n if (status === 'SUCCESS') {\r\n \/\/ Reset form solo se successo\r\n setFormData({ cognome: '', nome: '', ordine: '', file: null });\r\n setStatus('IDLE');\r\n }\r\n };\r\n\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n\r\n if (!formData.file) {\r\n setModal({ show: true, type: 'ERROR', message: '\u00c8 necessario caricare un file per procedere.' });\r\n return;\r\n }\r\n\r\n setStatus('LOADING');\r\n\r\n try {\r\n const timestamp = new Date().toLocaleString('it-IT');\r\n const fileData = await fileToBase64(formData.file);\r\n\r\n \/\/ Mapping to GAS expected parameters\r\n const params = new URLSearchParams();\r\n params.append('timestamp', timestamp);\r\n params.append('Cognome', formData.cognome);\r\n params.append('Nome', formData.nome);\r\n params.append('Numero ORDINE', formData.ordine);\r\n params.append('fileUpload', 'true');\r\n params.append('filename', formData.file.name);\r\n params.append('mimeType', formData.file.type);\r\n params.append('fileData', fileData);\r\n\r\n const response = await fetch(CONFIG.SCRIPT_URL, {\r\n method: 'POST',\r\n body: params\r\n });\r\n\r\n const result = await response.json();\r\n\r\n if (result.result === 'SUCCESS' || result.result === 'DIAGNOSTICA_OK') {\r\n setStatus('SUCCESS');\r\n setModal({\r\n show: true,\r\n type: 'SUCCESS',\r\n message: 'CONTABILE CARICATA CORRETTAMENTE. Riceverai a breve una mail di conferma.'\r\n });\r\n } else {\r\n throw new Error(result.error || 'Errore sconosciuto dal server');\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n setStatus('ERROR');\r\n setModal({ show: true, type: 'ERROR', message: error.message || 'Errore di connessione. Riprova pi\u00f9 tardi.' });\r\n }\r\n };\r\n\r\n return (\r\n \/\/ MODIFICHE STILE: bg-black, testi in colori neutri\/zinc, accenti in verde\r\n <div className=\"w-full flex flex-col items-center justify-start p-4 md:p-8 bg-black text-zinc-100 selection:bg-green-500 selection:text-black relative z-0 min-h-screen\">\r\n\r\n {modal.show && <Modal type={modal.type} message={modal.message} onClose={closeModal} \/>}\r\n\r\n {\/* Header *\/}\r\n <div className=\"w-full max-w-xl mb-8 text-center animate-slide-up mt-4\">\r\n <div className=\"inline-flex items-center justify-center p-4 mb-4 bg-green-500\/10 rounded-2xl border border-green-500\/20 shadow-[0_0_15px_rgba(34,197,94,0.3)]\">\r\n <Icons.Database className=\"w-10 h-10 text-green-400\" \/>\r\n <\/div>\r\n <h1 className=\"text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 via-emerald-500 to-teal-500 bg-clip-text text-transparent tracking-tight pb-1\">\r\n CARICAMENTO CONTABILE\r\n <\/h1>\r\n <p className=\"text-zinc-400 text-lg\">\r\n Allega contabile bancaria riferita all'ordine\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Main Card *\/}\r\n <div className=\"w-full max-w-xl bg-zinc-900\/80 backdrop-blur-xl rounded-3xl border border-zinc-800 p-8 shadow-2xl shadow-black\/80 animate-fade-in relative overflow-hidden\">\r\n\r\n {\/* Background gradient effect *\/}\r\n <div className=\"absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-green-600\/20 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div className=\"absolute bottom-0 left-0 -ml-20 -mb-20 w-64 h-64 bg-emerald-600\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <form onSubmit={handleSubmit} className=\"relative z-10 space-y-6\">\r\n\r\n {\/* Personal Info Row *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Cognome<\/label>\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"Es. Rossi\"\r\n value={formData.cognome}\r\n onChange={e => setFormData({ ...formData, cognome: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Nome<\/label>\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"Es. Mario\"\r\n value={formData.nome}\r\n onChange={e => setFormData({ ...formData, nome: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Order ID *\/}\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Numero ORDINE<\/label>\r\n <div className=\"relative\">\r\n <input\r\n type=\"text\"\r\n required\r\n placeholder=\"AB-25-XXXX\"\r\n value={formData.ordine}\r\n onChange={e => setFormData({ ...formData, ordine: e.target.value })}\r\n disabled={status === 'LOADING'}\r\n className=\"w-full bg-zinc-950\/50 border border-zinc-700 rounded-xl px-4 py-3 pl-11 text-white placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-green-500\/50 focus:border-green-500 transition-all\"\r\n \/>\r\n <div className=\"absolute left-4 top-3.5 text-zinc-500\">\r\n <span className=\"text-xs font-bold\">#<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* File Upload Area *\/}\r\n <div className=\"space-y-2\">\r\n <label className=\"text-sm font-semibold text-zinc-300 ml-1\">Carica il file <span className=\"text-green-400\">*<\/span><\/label>\r\n\r\n {!formData.file ? (\r\n <div\r\n onDragEnter={handleDrag} onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrop}\r\n className={`\r\n relative group cursor-pointer flex flex-col items-center justify-center w-full h-40 \r\n rounded-2xl border-2 border-dashed transition-all duration-300\r\n ${isDragging ? 'border-green-500 bg-green-500\/10' : 'border-zinc-700 bg-zinc-800\/30 hover:bg-zinc-800\/60 hover:border-zinc-500'}\r\n `}\r\n >\r\n <input\r\n type=\"file\"\r\n onChange={e => e.target.files[0] && handleFile(e.target.files[0])}\r\n className=\"absolute inset-0 opacity-0 cursor-pointer z-20\"\r\n disabled={status === 'LOADING'}\r\n \/>\r\n <div className=\"flex flex-col items-center gap-3 text-zinc-400 group-hover:text-zinc-300 transition-colors\">\r\n <div className=\"p-3 bg-zinc-800 rounded-full ring-1 ring-zinc-700 group-hover:ring-green-500\/50 transition-all\">\r\n <Icons.Upload className=\"w-6 h-6 text-green-400\" \/>\r\n <\/div>\r\n <div className=\"text-center\">\r\n <p className=\"text-sm font-medium\"><span className=\"text-green-400\">Clicca<\/span> o trascina qui<\/p>\r\n <p className=\"text-xs text-zinc-500 mt-1\">PDF, JPG, PNG (Max 5MB)<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"flex items-center justify-between p-3 bg-green-900\/20 border border-green-500\/30 rounded-xl animate-fade-in\">\r\n <div className=\"flex items-center gap-3 overflow-hidden\">\r\n <div className=\"w-10 h-10 rounded-lg bg-green-500\/20 flex items-center justify-center flex-shrink-0 text-green-400\">\r\n <Icons.File className=\"w-5 h-5\" \/>\r\n <\/div>\r\n <div className=\"flex flex-col min-w-0\">\r\n <span className=\"text-sm font-medium text-white truncate\">{formData.file.name}<\/span>\r\n <span className=\"text-xs text-green-300\/70\">{formatSize(formData.file.size)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <button\r\n type=\"button\"\r\n onClick={() => setFormData(prev => ({ ...prev, file: null }))}\r\n disabled={status === 'LOADING'}\r\n className=\"p-2 text-zinc-400 hover:text-white hover:bg-zinc-700\/50 rounded-full transition-colors\"\r\n >\r\n <Icons.X className=\"w-5 h-5\" \/>\r\n <\/button>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n {\/* Submit Button *\/}\r\n <button\r\n type=\"submit\"\r\n disabled={status === 'LOADING'}\r\n className=\"w-full relative group overflow-hidden rounded-xl bg-green-800 p-4 font-semibold text-white shadow-lg shadow-green-900\/30 transition-all hover:bg-green-700 hover:shadow-green-900\/50 disabled:bg-zinc-700 disabled:cursor-not-allowed disabled:shadow-none\"\r\n >\r\n <div className=\"flex items-center justify-center gap-2 relative z-10\">\r\n {status === 'LOADING' ? (\r\n <>\r\n <Icons.Loader className=\"w-5 h-5 animate-spin\" \/>\r\n <span>Elaborazione in corso...<\/span>\r\n <\/>\r\n ) : (\r\n <>\r\n <Icons.Send className=\"w-5 h-5 group-hover:translate-x-1 transition-transform\" \/>\r\n <span>Invia Contabile<\/span>\r\n <\/>\r\n )}\r\n <\/div>\r\n <\/button>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <div className=\"mt-8 flex items-center gap-2 text-xs text-zinc-600 font-medium\">\r\n <Icons.Shield className=\"w-3 h-3\" \/>\r\n <span>Connessione Protetta TLS 1.3<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f0387d6 e-grid e-con-boxed e-con e-parent\" data-id=\"f0387d6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5efe38 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"f5efe38\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.aviglianabasket.it\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">TORNA A HOME PAGE<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4acb194 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"4acb194\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.aviglianabasket.it\/?page_id=1573\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">TORNA A MERCHANDISING<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Caricamento Contabile TORNA A HOME PAGE TORNA A MERCHANDISING<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":398,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5239","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5239"}],"version-history":[{"count":26,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239\/revisions"}],"predecessor-version":[{"id":5720,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5239\/revisions\/5720"}],"up":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/398"}],"wp:attachment":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}