Inmoworking Pro — CRM Reformista

Categoría	Descripción	Ud.	Cant.	€/ud	Total
Subtotal	${subtotal.toLocaleString('es-ES',{minimumFractionDigits:2})}€
IVA ${budget.iva_pct}%	${iva.toLocaleString('es-ES',{minimumFractionDigits:2})}€
TOTAL	${total.toLocaleString('es-ES',{minimumFractionDigits:2})}€

Seguimiento de Obras

Gestiona el estado de tus obras en curso

{loading ? : obras.length === 0 ? + Nueva obra} /> : (

{obras.map((o, i) => { const col = OBRA_STATUS_COLORS[o.status] || '#9BA5B8'; return (

{o.title} {OBRA_STATUS_LABELS[o.status]}

{o.client_name && 👤 {o.client_name}} {o.address && 📍 {o.address}} {o.start_date && ▶ {fmtDate(o.start_date)}} {o.end_date && ⏹ {fmtDate(o.end_date)}} {o.total_budget > 0 && {Number(o.total_budget).toLocaleString('es-ES')}€}

); })}

) } {showModal && (

{editing ? 'Editar obra' : 'Nueva obra'}

Título * setForm(f=>({...f,title:e.target.value}))} placeholder="Ej: Reforma cocina C/ Mayor 5" />

Cliente setForm(f=>({...f,client_name:e.target.value}))} />

Presupuesto (€) setForm(f=>({...f,total_budget:e.target.value}))} />

Dirección setForm(f=>({...f,address:e.target.value}))} />

Fecha inicio setForm(f=>({...f,start_date:e.target.value}))} />

Fecha fin setForm(f=>({...f,end_date:e.target.value}))} />

Estado

Notas

setForm(f=>({...f,notes:e.target.value}))} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn btn-ghost" onClick={() => { setShowModal(false); setEditing(null); }}>Cancelar</button>
              <button className="btn btn-primary" onClick={save} disabled={saving}>
                {saving ? <Spinner /> : (editing ? '💾 Guardar' : '✓ Crear obra')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
const CLIENT_SOURCES = ['referido','web','redes','portal','otro'];

function ClientesPage() {
  const [clients, setClients]   = useState([]);
  const [loading, setLoading]   = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing]   = useState(null);
  const [saving, setSaving]     = useState(false);
  const [q, setQ]               = useState('');
  const [form, setForm]         = useState({ name:'', phone:'', email:'', address:'', dni:'', source:'', notes:'' });

const load = useCallback((search = '') => {
    setLoading(true);
    api(`/api/reformist-clients?limit=100${search ? '&q=' + encodeURIComponent(search) : ''}`)
      .then(d => setClients(d.items || []))
      .catch(e => toast(e.message, 'error'))
      .finally(() => setLoading(false));
  }, []);

useEffect(() => { load(); }, [load]);

return (
    <div className="page">
      <div className="sec-head">
        <div>
          <h2>Mis Clientes</h2>
          <p className="sec-sub">Directorio de clientes del reformista</p>
        </div>
        <button className="btn btn-primary" onClick={openNew}>+ Nuevo cliente</button>
      </div>

<div style={{ marginBottom:20 }}>
        <input className="inp" type="search" placeholder="🔍  Buscar por nombre, email o teléfono..."
          value={q} onChange={e => { setQ(e.target.value); load(e.target.value); }}
          style={{ maxWidth:360 }} />
      </div>

{loading ? <SkeletonGrid n={6} /> : clients.length === 0
        ? <EmptyState icon="👤" title="Sin clientes" sub="Añade tu primer cliente al directorio"
            action={<button className="btn btn-primary" onClick={openNew}>+ Nuevo cliente</button>} />
        : (
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))', gap:14 }}>
            {clients.map((c, i) => (
              <div key={c.id} className="card stagger-item" style={{ animationDelay:`${i*45}ms`, padding:18 }}>
                <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:12 }}>
                  <div style={{ width:42, height:42, borderRadius:'50%', background:'var(--gold-lo)', border:'1px solid rgba(201,153,58,.3)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--font-head)', fontSize:16, fontWeight:800, color:'var(--gold)', flexShrink:0 }}>
                    {c.name.charAt(0).toUpperCase()}
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--cream)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</div>
                    {c.source && <span className="badge" style={{ background:'rgba(20,184,166,.12)', color:'var(--teal)', border:'1px solid rgba(20,184,166,.2)', marginTop:2 }}>{c.source}</span>}
                  </div>
                </div>
                <div style={{ display:'flex', flexDirection:'column', gap:4, fontSize:12, color:'var(--text-2)', marginBottom:12 }}>
                  {c.phone   && <span>📞 {c.phone}</span>}
                  {c.email   && <span>✉️ {c.email}</span>}
                  {c.address && <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>📍 {c.address}</span>}
                </div>
                <div style={{ display:'flex', gap:6 }}>
                  <button className="btn btn-sm btn-ghost" style={{ flex:1 }} onClick={() => openEdit(c)}>✏️ Editar</button>
                  <button className="btn btn-sm btn-danger" onClick={() => del(c.id)}>🗑️</button>
                </div>
              </div>
            ))}
          </div>
        )
      }

{showModal && (
        <div className="modal-overlay">
          <div className="modal-box">
            <div className="modal-head">
              <h3>{editing ? 'Editar cliente' : 'Nuevo cliente'}</h3>
              <button style={{ color:'var(--text-3)', fontSize:20 }} onClick={() => { setShowModal(false); setEditing(null); }}>✕</button>
            </div>
            <div className="modal-body">
              <div className="grid-2" style={{ gap:12 }}>
                <div className="field" style={{ gridColumn:'1/-1' }}>
                  <label>Nombre *</label>
                  <input className="inp" value={form.name} onChange={e => setForm(f=>({...f,name:e.target.value}))} placeholder="Nombre completo" />
                </div>
                <div className="field">
                  <label>Teléfono</label>
                  <input className="inp" type="tel" value={form.phone} onChange={e => setForm(f=>({...f,phone:e.target.value}))} />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input className="inp" type="email" value={form.email} onChange={e => setForm(f=>({...f,email:e.target.value}))} />
                </div>
                <div className="field" style={{ gridColumn:'1/-1' }}>
                  <label>Dirección</label>
                  <input className="inp" value={form.address} onChange={e => setForm(f=>({...f,address:e.target.value}))} />
                </div>
                <div className="field">
                  <label>DNI/NIE</label>
                  <input className="inp" value={form.dni} onChange={e => setForm(f=>({...f,dni:e.target.value}))} />
                </div>
                <div className="field">
                  <label>Fuente</label>
                  <select className="inp" value={form.source} onChange={e => setForm(f=>({...f,source:e.target.value}))}>
                    <option value="">— Seleccionar —</option>
                    {CLIENT_SOURCES.map(s => <option key={s} value={s}>{s.charAt(0).toUpperCase()+s.slice(1)}</option>)}
                  </select>
                </div>
                <div className="field" style={{ gridColumn:'1/-1' }}>
                  <label>Notas</label>
                  <textarea className="inp" rows={2} value={form.notes} onChange={e => setForm(f=>({...f,notes:e.target.value}))} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn btn-ghost" onClick={() => { setShowModal(false); setEditing(null); }}>Cancelar</button>
              <button className="btn btn-primary" onClick={save} disabled={saving}>
                {saving ? <Spinner /> : (editing ? '💾 Guardar' : '✓ Crear cliente')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
// ════════════════════════════════════════════════════════════════
// ASISTENTE IA — Reformista
// ════════════════════════════════════════════════════════════════
const N8N_REF_HOOK = 'https://inmoworkingpro.app.n8n.cloud/webhook/reformista-agent';
const REF_ACCENT   = '#E8762A';

// ════════════════════════════════════════════════════════════════
// APP SHELL
// ════════════════════════════════════════════════════════════════
const NAV = [
  { id:'dashboard',      icon:'📊', label:'Dashboard' },
  { divider: 'Negocio' },
  { id:'colaboraciones', icon:'🤝', label:'Colaboraciones' },
  { id:'presupuestos',   icon:'📋', label:'Presupuestos' },
  { id:'obras',          icon:'🏗️', label:'Obras' },
  { divider: 'Clientes' },
  { id:'clientes',       icon:'👥', label:'Mis clientes' },
  { id:'documentos',     icon:'📂', label:'Documentos' },
  { divider: 'Cuenta' },
  { id:'cuenta',         icon:'⚙️', label:'Mi cuenta' },
  { divider: 'IA' },
  { id:'asistente',      icon:'🤖', label:'Asistente IA' },
];

function App() {
  const user = getUser();

// Auth check
  if (!user || isExpired(getToken())) {
    window.location.href = '../auth.html';
    return null;
  }

const [page, setPage]       = useState('dashboard');
  const [collapsed, setCollapsed] = useState(()=>localStorage.getItem('iwp_sidebar_collapsed')==='1');
  const [budgetCollab, setBudgetCollab] = useState(null); // when creating budget from colaboraciones

const initials = (user.full_name || user.email || 'R').slice(0,2).toUpperCase();

const handleNewBudget = (collab) => {
    setBudgetCollab(collab);
    setPage('presupuestos');
  };

// Reset budgetCollab after navigation
  useEffect(() => {
    if (page !== 'presupuestos') setBudgetCollab(null);
  }, [page]);

return (
    <>
      {/* Sidebar */}
      <div className={`sidebar${collapsed?' collapsed':''}`}>
        <div className="sidebar-logo">
          <div dangerouslySetInnerHTML={{__html:'<svg width="36" height="36" viewBox="0 0 40 40" fill="none"><defs><linearGradient id="slG" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E8B84B"/><stop offset="100%" stop-color="#A07828"/></linearGradient></defs><path d="M20 2 L35 11 L35 29 L20 38 L5 29 L5 11 Z" fill="#0F1420" stroke="url(#slG)" stroke-width="1.5"/><path d="M14 26 L22 18" stroke="#C9993A" stroke-width="2" stroke-linecap="round"/><path d="M22 18 L24 16 C25 15 27 15 28 16 C29 17 29 19 28 20 L26 22" stroke="#C9993A" stroke-width="1.5" fill="none"/><path d="M26 14 L18 22" stroke="#9BA5B8" stroke-width="2" stroke-linecap="round"/></svg>'}} style={{flexShrink:0}} />
          <div><div className="brand"><span className="pr">PROP</span><span className="im">IUM</span></div>
          <div className="sub">Reformista</div></div>
          <button className="sidebar-collapse-btn" onClick={()=>setCollapsed(c=>{const n=!c;localStorage.setItem('iwp_sidebar_collapsed',n?'1':'0');return n;})}>‹</button>
        </div>
        <div className="sidebar-nav">
          {NAV.map((n, i) => n.divider
            ? (!collapsed ? <div key={`d${i}`} className="nav-section-label">{n.divider}</div> : null)
            : (
              <div key={n.id} className={`nav-item${page===n.id?' active':''}`} data-label={n.label} onClick={() => setPage(n.id)}>
                <span className="icon">{n.icon}</span>
                <span>{n.label}</span>
              </div>
            )
          )}
        </div>
        <div className="sidebar-footer">
          <div className="user-chip">
            <div className="user-avatar">{initials}</div>
            <div className="user-info">
              <div className="name">{user.full_name || user.email}</div>
              <div className="role">Reformista</div>
            </div>
          </div>
          <button onClick={() => { localStorage.removeItem('iwp_token'); window.location.href='../auth.html'; }}
            style={{ width:'100%',marginTop:8,padding:'6px',borderRadius:'var(--r-sm)',fontSize:11,color:'var(--text-3)',background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.06)',cursor:'pointer',transition:'all .2s' }}>
            Cerrar sesión
          </button>
        </div>
      </div>

{/* Main */}
      <div className="main">
        <div className="topbar">
          <span className="topbar-title">{NAV.find(n=>n.id===page)?.label || 'Dashboard'}</span>
          <div className="topbar-right">
            <span style={{ fontSize:11,color:'var(--text-3)',background:'var(--raised)',padding:'4px 10px',borderRadius:99,border:'1px solid rgba(255,255,255,.07)' }}>
              🔨 Reformista
            </span>
            <a href="../auth.html" style={{ fontSize:11,color:'var(--text-3)' }}>
              ↩ Inmoworking
            </a>
          </div>
        </div>
        {renderPage()}
      </div>
      <ChatWidget user={user}/>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>