refactor: Streamline project configuration and styling

This commit simplifies the Vite configuration by removing unnecessary options like `base`, `sourcemap`, and custom `rollupOptions`. It also removes the explicit server port definition, allowing Vite to manage it.

Additionally, minor styling adjustments are made to the scrollbar in `index.html` and default values for select inputs in `AccountsPayableView` are updated for clarity. The `engines` property was removed from `package.json` as it's not strictly necessary for typical development workflows.

components/AccountsPayableView.tsx

@@ -282,7 +282,7 @@ export const AccountsPayableView: React.FC<AccountsPayableViewProps> = ({ expens
                 <div>
                   <label className="block text-sm font-bold text-slate-800 mb-1">Categoria</label>
                   <CustomSelect 
-                    value={newExpense.category ?? 'Operacional'}
+                    value={newExpense.category || 'Operacional'}
                     onChange={(val) => setNewExpense({...newExpense, category: val})}
                     options={[
                         { value: 'Operacional', label: 'Operacional' },
@@ -296,7 +296,7 @@ export const AccountsPayableView: React.FC<AccountsPayableViewProps> = ({ expens
                 <div>
                   <label className="block text-sm font-bold text-slate-800 mb-1">Tipo</label>
                   <CustomSelect 
-                    value={newExpense.type ?? 'fixed'}
+                    value={newExpense.type || 'fixed'}
                     onChange={(val) => setNewExpense({...newExpense, type: val})}
                     options={[
                         { value: 'fixed', label: 'Fixa' },

components/AccountsReceivableView.tsx

@@ -13,7 +13,7 @@ interface AccountsReceivableViewProps {
 
 export const AccountsReceivableView: React.FC<AccountsReceivableViewProps> = ({ receivables, setReceivables }) => {
   const { addToast } = useToast();
-  const { companies } = useComFi();
+  const { companies } = useComFi(); // Acesso ao CRM para gerar recorrência
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [filterStatus, setFilterStatus] = useState<'all' | 'paid' | 'pending'>('all');
   
@@ -25,27 +25,33 @@ export const AccountsReceivableView: React.FC<AccountsReceivableViewProps> = ({
 
   const [editingId, setEditingId] = useState<string | null>(null);
 
+  // KPI Calculations
   const totalReceivable = receivables.reduce((acc, curr) => acc + curr.value, 0);
   const totalReceived = receivables.filter(r => r.status === 'paid').reduce((acc, curr) => acc + curr.value, 0);
   const totalPending = receivables.filter(r => r.status === 'pending' || r.status === 'overdue').reduce((acc, curr) => acc + curr.value, 0);
 
   const filteredList = receivables.filter(r => filterStatus === 'all' ? true : r.status === (filterStatus === 'paid' ? 'paid' : 'pending'));
 
+  // --- ACTIONS ---
+
   const handleGenerateRecurring = () => {
-    const currentMonth = new Date().toISOString().slice(0, 7);
+    const currentMonth = new Date().toISOString().slice(0, 7); // YYYY-MM
     const today = new Date().toISOString().split('T')[0];
     let generatedCount = 0;
     const newReceivables: Receivable[] = [];
 
     companies.forEach(company => {
       if (company.status !== 'active') return;
+
       company.activeServices.forEach(service => {
         if (service.billingType === 'recurring') {
+          // Check duplicates for this month
           const exists = receivables.find(r => 
             r.companyName === (company.fantasyName || company.name) && 
             r.description === service.name &&
             r.dueDate.startsWith(currentMonth)
           );
+
           if (!exists) {
             newReceivables.push({
               id: Math.random().toString(36).substr(2, 9),
@@ -53,7 +59,7 @@ export const AccountsReceivableView: React.FC<AccountsReceivableViewProps> = ({
               companyName: company.fantasyName || company.name,
               category: service.category,
               value: service.price,
-              dueDate: today,
+              dueDate: today, // Simplificação: gera para hoje ou data padrão de vencimento
               status: 'pending',
               type: 'recurring'
             });
@@ -65,15 +71,15 @@ export const AccountsReceivableView: React.FC<AccountsReceivableViewProps> = ({
 
     if (generatedCount > 0) {
       setReceivables(prev => [...prev, ...newReceivables]);
-      addToast({ type: 'success', title: 'Processamento Concluído', message: `${generatedCount} faturas recorrentes geradas.` });
+      addToast({ type: 'success', title: 'Processamento Concluído', message: `${generatedCount} faturas recorrentes foram geradas.` });
     } else {
-      addToast({ type: 'info', title: 'Tudo em dia', message: 'Cobranças mensais já processadas.' });
+      addToast({ type: 'info', title: 'Tudo em dia', message: 'Todas as cobranças recorrentes deste mês já foram geradas.' });
     }
   };
 
   const handleSave = () => {
     if (!newReceivable.description || !newReceivable.value) {
-       addToast({ type: 'warning', title: 'Dados Incompletos' });
+       addToast({ type: 'warning', title: 'Dados Incompletos', message: 'Preencha a descrição e o valor.' });
        return;
     }
 
@@ -82,105 +88,302 @@ export const AccountsReceivableView: React.FC<AccountsReceivableViewProps> = ({
              ...newReceivable, 
              id: editingId,
              value: Number(newReceivable.value),
-             category: newReceivable.category ?? 'Outros',
-             companyName: newReceivable.companyName ?? 'Avulso'
+             category: newReceivable.category || 'Outros',
+             companyName: newReceivable.companyName || 'Avulso'
         } as Receivable : r));
+        addToast({ type: 'success', title: 'Atualizado', message: 'Recebimento atualizado com sucesso.' });
     } else {
         const item: Receivable = {
           ...newReceivable,
           id: Math.random().toString(36).substr(2, 9),
           value: Number(newReceivable.value),
-          category: newReceivable.category ?? 'Outros',
-          companyName: newReceivable.companyName ?? 'Avulso'
+          category: newReceivable.category || 'Outros',
+          companyName: newReceivable.companyName || 'Avulso'
         } as Receivable;
         setReceivables([...receivables, item]);
+        addToast({ type: 'success', title: 'Criado', message: 'Novo recebimento registrado.' });
     }
     
     setIsModalOpen(false);
     setEditingId(null);
+    setNewReceivable({ type: 'one-time', status: 'pending', dueDate: new Date().toISOString().split('T')[0] });
   };
 
+  const handleDelete = (id: string) => {
+    if(window.confirm("Excluir recebimento?")) {
+      setReceivables(receivables.filter(r => r.id !== id));
+      addToast({ type: 'info', title: 'Excluído', message: 'Registro removido.' });
+    }
+  }
+
   const toggleStatus = (id: string) => {
-    setReceivables(receivables.map(r => r.id === id ? { ...r, status: r.status === 'paid' ? 'pending' : 'paid' } : r));
+    setReceivables(receivables.map(r => {
+        if(r.id === id) {
+            const newStatus = r.status === 'paid' ? 'pending' : 'paid';
+            if (newStatus === 'paid') addToast({ type: 'success', title: 'Recebido!', message: `Valor de R$ ${r.value} confirmado.` });
+            return { ...r, status: newStatus };
+        }
+        return r;
+    }));
+  }
+
+  const openEditModal = (item: Receivable) => {
+    setNewReceivable(item);
+    setEditingId(item.id);
+    setIsModalOpen(true);
   };
 
-  const inputClass = "w-full p-3 bg-white border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-primary-500 text-slate-800";
+  const openCreateModal = () => {
+    setNewReceivable({
+      type: 'one-time',
+      status: 'pending',
+      dueDate: new Date().toISOString().split('T')[0]
+    });
+    setEditingId(null);
+    setIsModalOpen(true);
+  }
+
+  const inputClass = "w-full p-3 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-slate-800";
 
   return (
     <div className="space-y-6 animate-fade-in">
+      
+      {/* KPI Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div className="bg-white p-6 rounded-[2rem] border border-slate-50 shadow-sm flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-500"><DollarSign size={24} /></div>
-          <div><p className="text-slate-400 text-xs font-bold uppercase">Previsto</p><h3 className="text-2xl font-bold text-slate-800">R$ {totalReceivable.toLocaleString('pt-BR')}</h3></div>
+          <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-500">
+            <DollarSign size={24} />
+          </div>
+          <div>
+            <p className="text-slate-400 text-xs font-bold uppercase">Receita Total Prevista</p>
+            <h3 className="text-2xl font-bold text-slate-800">R$ {totalReceivable.toLocaleString('pt-BR')}</h3>
+          </div>
         </div>
         <div className="bg-white p-6 rounded-[2rem] border border-slate-50 shadow-sm flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center text-green-600"><CheckCircle2 size={24} /></div>
-          <div><p className="text-slate-400 text-xs font-bold uppercase">Recebido</p><h3 className="text-2xl font-bold text-green-600">R$ {totalReceived.toLocaleString('pt-BR')}</h3></div>
+          <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center text-green-600">
+            <CheckCircle2 size={24} />
+          </div>
+          <div>
+            <p className="text-slate-400 text-xs font-bold uppercase">Recebido</p>
+            <h3 className="text-2xl font-bold text-green-600">R$ {totalReceived.toLocaleString('pt-BR')}</h3>
+          </div>
         </div>
         <div className="bg-white p-6 rounded-[2rem] border border-slate-50 shadow-sm flex items-center gap-4">
-          <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600"><TrendingUp size={24} /></div>
-          <div><p className="text-slate-400 text-xs font-bold uppercase">A Receber</p><h3 className="text-2xl font-bold text-amber-600">R$ {totalPending.toLocaleString('pt-BR')}</h3></div>
+          <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600">
+            <TrendingUp size={24} />
+          </div>
+          <div>
+            <p className="text-slate-400 text-xs font-bold uppercase">A Receber</p>
+            <h3 className="text-2xl font-bold text-amber-600">R$ {totalPending.toLocaleString('pt-BR')}</h3>
+          </div>
         </div>
       </div>
 
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-slate-800">Contas a Receber</h1>
+      <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Contas a Receber</h1>
+          <p className="text-slate-500">Gestão de faturas, contratos e recebimentos avulsos.</p>
+        </div>
         <div className="flex gap-3">
-          <button onClick={handleGenerateRecurring} className="flex items-center gap-2 px-5 py-3 bg-indigo-500 text-white rounded-xl font-bold"><RefreshCw size={18} /> Gerar Mensalidades</button>
-          <button onClick={() => { setEditingId(null); setIsModalOpen(true); }} className="flex items-center gap-2 px-5 py-3 bg-green-500 text-white rounded-xl font-bold"><Plus size={18} /> Novo</button>
+            <button 
+                onClick={handleGenerateRecurring}
+                className="flex items-center gap-2 px-5 py-3 bg-indigo-500 text-white rounded-xl shadow-lg shadow-indigo-200/50 hover:bg-indigo-600 font-bold transition-all"
+                title="Gera cobranças baseadas nos serviços ativos do CRM"
+            >
+                <RefreshCw size={20} /> <span className="hidden sm:inline">Gerar Mensalidades</span>
+            </button>
+            <button onClick={openCreateModal} className="flex items-center gap-2 px-5 py-3 bg-green-500 text-white rounded-xl shadow-lg shadow-green-200/50 hover:bg-green-600 font-bold transition-all">
+                <Plus size={20} /> <span className="hidden sm:inline">Novo Recebimento</span>
+            </button>
         </div>
       </div>
 
       <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-        <table className="w-full text-left">
-          <thead className="bg-slate-50">
-            <tr>
-              <th className="p-4 text-xs font-bold uppercase text-slate-500">Descrição</th>
-              <th className="p-4 text-xs font-bold uppercase text-slate-500">Valor</th>
-              <th className="p-4 text-xs font-bold uppercase text-slate-500 text-center">Status</th>
-              <th className="p-4"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredList.map(item => (
-              <tr key={item.id} className="border-b border-slate-50">
-                <td className="p-4 font-bold text-slate-800">{item.description}<div className="text-xs text-slate-400">{item.companyName}</div></td>
-                <td className="p-4 font-bold">R$ {item.value.toLocaleString('pt-BR')}</td>
-                <td className="p-4 text-center">
-                  <button onClick={() => toggleStatus(item.id)} className={`px-3 py-1 rounded-full text-xs font-bold border ${item.status === 'paid' ? 'bg-green-50 text-green-600 border-green-100' : 'bg-amber-50 text-amber-600 border-amber-100'}`}>
-                    {item.status === 'paid' ? 'PAGO' : 'PENDENTE'}
-                  </button>
-                </td>
-                <td className="p-4 text-right">
-                  <button onClick={() => { setNewReceivable(item); setEditingId(item.id); setIsModalOpen(true); }} className="p-2 text-slate-400 hover:text-primary-500"><Pencil size={18} /></button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        {/* Toolbar */}
+        <div className="p-4 border-b border-slate-100 flex flex-wrap gap-4 items-center">
+          <div className="relative flex-1 min-w-[200px]">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
+            <input 
+              type="text" 
+              placeholder="Buscar cliente ou descrição..." 
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border-none rounded-xl focus:ring-2 focus:ring-primary-500 outline-none text-slate-600"
+            />
+          </div>
+          <div className="flex gap-2 bg-slate-50 p-1 rounded-xl">
+             <button 
+               onClick={() => setFilterStatus('all')}
+               className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${filterStatus === 'all' ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700'}`}
+             >
+               Todos
+             </button>
+             <button 
+               onClick={() => setFilterStatus('paid')}
+               className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${filterStatus === 'paid' ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700'}`}
+             >
+               Recebidos
+             </button>
+             <button 
+               onClick={() => setFilterStatus('pending')}
+               className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${filterStatus === 'pending' ? 'bg-white shadow text-slate-800' : 'text-slate-500 hover:text-slate-700'}`}
+             >
+               Pendentes
+             </button>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+             <thead className="bg-slate-50/50">
+               <tr>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500">Descrição / Cliente</th>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500">Categoria</th>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500">Vencimento</th>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500">Valor</th>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500 text-center">Tipo</th>
+                 <th className="p-4 text-xs font-bold uppercase text-slate-500 text-center">Status</th>
+                 <th className="p-4"></th>
+               </tr>
+             </thead>
+             <tbody className="divide-y divide-slate-50">
+                {filteredList.map(item => (
+                  <tr key={item.id} className="hover:bg-slate-50 transition-colors group">
+                    <td className="p-4">
+                        <div className="font-bold text-slate-800">{item.description}</div>
+                        <div className="text-xs text-slate-400">{item.companyName}</div>
+                    </td>
+                    <td className="p-4">
+                      <span className="px-2 py-1 bg-slate-100 rounded text-xs text-slate-600">{item.category}</span>
+                    </td>
+                    <td className="p-4 text-sm text-slate-600">
+                      <div className="flex items-center gap-2">
+                        <Calendar size={14} className="text-slate-400"/>
+                        {new Date(item.dueDate).toLocaleDateString('pt-BR')}
+                      </div>
+                    </td>
+                    <td className="p-4 font-bold text-slate-800">R$ {item.value.toLocaleString('pt-BR')}</td>
+                    <td className="p-4 text-center">
+                       <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded ${item.type === 'recurring' ? 'bg-indigo-50 text-indigo-600' : 'bg-slate-100 text-slate-600'}`}>
+                         {item.type === 'recurring' ? 'Mensal' : 'Avulso'}
+                       </span>
+                    </td>
+                    <td className="p-4 text-center">
+                      <button onClick={() => toggleStatus(item.id)} className={`px-3 py-1 rounded-full text-xs font-bold border transition-all ${
+                        item.status === 'paid' ? 'bg-green-50 text-green-600 border-green-200 hover:bg-green-100' :
+                        item.status === 'overdue' ? 'bg-red-50 text-red-600 border-red-200 hover:bg-red-100' :
+                        'bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100'
+                      }`}>
+                        {item.status === 'paid' ? 'RECEBIDO' : item.status === 'overdue' ? 'ATRASADO' : 'PENDENTE'}
+                      </button>
+                    </td>
+                    <td className="p-4 text-right">
+                       <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                           <button onClick={() => openEditModal(item)} className="p-2 text-slate-400 hover:text-primary-500 hover:bg-primary-50 rounded-lg transition-colors">
+                            <Pencil size={18} />
+                           </button>
+                           <button onClick={() => handleDelete(item.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors">
+                            <Trash2 size={18} />
+                          </button>
+                       </div>
+                    </td>
+                  </tr>
+                ))}
+             </tbody>
+          </table>
+          {filteredList.length === 0 && (
+              <div className="p-10 text-center text-slate-400">
+                  <Sparkles size={32} className="mx-auto mb-2 opacity-20"/>
+                  <p>Nenhum lançamento encontrado.</p>
+              </div>
+          )}
+        </div>
       </div>
 
+      {/* Modal */}
       {isModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setIsModalOpen(false)}></div>
-          <div className="relative bg-white rounded-2xl p-6 w-full max-w-md animate-scale-up">
-            <h3 className="font-bold text-slate-800 text-lg mb-4">Lançamento de Receita</h3>
-            <div className="space-y-4">
-              <input type="text" className={inputClass} placeholder="Descrição" value={newReceivable.description ?? ''} onChange={e => setNewReceivable({...newReceivable, description: e.target.value})} />
-              <input type="number" className={inputClass} placeholder="Valor" value={newReceivable.value ?? ''} onChange={e => setNewReceivable({...newReceivable, value: Number(e.target.value)})} />
-              <div className="grid grid-cols-2 gap-4">
-                <CustomSelect 
-                  value={newReceivable.category ?? 'Serviços'} 
-                  onChange={val => setNewReceivable({...newReceivable, category: val})} 
-                  options={[{value:'Serviços', label:'Serviços'}, {value:'Produtos', label:'Produtos'}, {value:'Outros', label:'Outros'}]} 
-                />
-                <CustomSelect 
-                  value={newReceivable.type ?? 'one-time'} 
-                  onChange={val => setNewReceivable({...newReceivable, type: val})} 
-                  options={[{value:'one-time', label:'Avulso'}, {value:'recurring', label:'Mensal'}]} 
+          <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-md animate-scale-up flex flex-col max-h-[90vh]">
+            <div className="flex justify-between items-center px-6 py-4 border-b border-slate-100 flex-shrink-0">
+              <h3 className="font-bold text-slate-800 text-lg">{editingId ? 'Editar Recebimento' : 'Novo Recebimento'}</h3>
+              <button onClick={() => setIsModalOpen(false)}><X size={20} className="text-slate-400 hover:text-slate-600"/></button>
+            </div>
+            
+            <div className="p-6 space-y-4 overflow-y-auto">
+              <div>
+                <label className="block text-sm font-bold text-slate-800 mb-1">Descrição</label>
+                <input 
+                  type="text" 
+                  className={inputClass} 
+                  placeholder="Ex: Consultoria Extra"
+                  value={newReceivable.description || ''}
+                  onChange={e => setNewReceivable({...newReceivable, description: e.target.value})}
                 />
               </div>
-              <button onClick={handleSave} className="w-full py-3 bg-primary-500 text-white font-bold rounded-xl shadow-lg">Salvar</button>
+
+               <div>
+                <label className="block text-sm font-bold text-slate-800 mb-1">Cliente / Empresa</label>
+                <input 
+                  type="text" 
+                  className={inputClass} 
+                  placeholder="Nome do cliente"
+                  value={newReceivable.companyName || ''}
+                  onChange={e => setNewReceivable({...newReceivable, companyName: e.target.value})}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                   <label className="block text-sm font-bold text-slate-800 mb-1">Valor (R$)</label>
+                   <input 
+                    type="number" 
+                    className={inputClass} 
+                    placeholder="0,00"
+                    value={newReceivable.value || ''}
+                    onChange={e => setNewReceivable({...newReceivable, value: Number(e.target.value)})}
+                  />
+                </div>
+                <div>
+                   <label className="block text-sm font-bold text-slate-800 mb-1">Vencimento</label>
+                   <input 
+                    type="date" 
+                    className={inputClass} 
+                    value={newReceivable.dueDate}
+                    onChange={e => setNewReceivable({...newReceivable, dueDate: e.target.value})}
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-bold text-slate-800 mb-1">Categoria</label>
+                  <CustomSelect 
+                    value={newReceivable.category || 'Serviços'}
+                    onChange={(val) => setNewReceivable({...newReceivable, category: val})}
+                    options={[
+                        { value: 'Serviços', label: 'Serviços' },
+                        { value: 'Produtos', label: 'Produtos' },
+                        { value: 'Reembolso', label: 'Reembolso' },
+                        { value: 'Outros', label: 'Outros' }
+                    ]}
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-bold text-slate-800 mb-1">Tipo</label>
+                  <CustomSelect 
+                    value={newReceivable.type}
+                    onChange={(val) => setNewReceivable({...newReceivable, type: val})}
+                    options={[
+                        { value: 'one-time', label: 'Avulso' },
+                        { value: 'recurring', label: 'Recorrente' }
+                    ]}
+                  />
+                </div>
+              </div>
+              
+              <button onClick={handleSave} className="w-full py-3 bg-green-500 text-white font-bold rounded-xl mt-4 hover:bg-green-600 shadow-lg shadow-green-200">
+                {editingId ? 'Salvar Alterações' : 'Salvar Recebimento'}
+              </button>
             </div>
           </div>
         </div>