Upload App.tsx

App.tsx

@@ -0,0 +1,249 @@
+
+import React, { useState, useEffect } from 'react';
+import Navigation from './components/Navigation';
+import Dashboard from './components/Dashboard';
+import AssistantChat from './components/AssistantChat';
+import { Transaction, CalendarEvent, FamilyMember } from './types';
+import { CATEGORIES } from './constants';
+
+const App: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [showExpenseForm, setShowExpenseForm] = useState(false);
+  
+  // Mock Initial Data
+  const [transactions, setTransactions] = useState<Transaction[]>([
+    {
+      id: '1',
+      date: '2026-03-01',
+      amount: 2500,
+      category: 'Lavoro',
+      payer: FamilyMember.PAPA,
+      description: 'Stipendio base',
+      type: 'INCOME'
+    },
+    {
+      id: '2',
+      date: '2026-03-05',
+      amount: 450,
+      category: 'Alimentari',
+      payer: FamilyMember.MAMMA,
+      description: 'Spesa settimanale Gourmet',
+      type: 'EXPENSE'
+    },
+    {
+      id: '3',
+      date: '2026-03-10',
+      amount: 120,
+      category: 'Salute',
+      payer: FamilyMember.NONNI,
+      description: 'Visita oculistica',
+      type: 'EXPENSE'
+    }
+  ]);
+
+  const [newExpense, setNewExpense] = useState({
+    amount: '',
+    description: '',
+    category: CATEGORIES.EXPENSE[0],
+    payer: FamilyMember.PAPA
+  });
+
+  const [events, setEvents] = useState<CalendarEvent[]>([
+    {
+      id: 'e1',
+      title: 'Cena di Pasqua',
+      start: '2026-04-05T20:00:00',
+      end: '2026-04-05T23:00:00',
+      participants: [FamilyMember.TUTTI, FamilyMember.NONNI]
+    },
+    {
+      id: 'e2',
+      title: 'Allenamento Calcio',
+      start: '2026-03-25T17:00:00',
+      end: '2026-03-25T19:00:00',
+      participants: [FamilyMember.FIGLIO_GRANDE]
+    }
+  ]);
+
+  const handleAddExpense = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newExpense.amount || !newExpense.description) return;
+
+    const transaction: Transaction = {
+      id: Date.now().toString(),
+      date: new Date().toISOString().split('T')[0],
+      amount: parseFloat(newExpense.amount),
+      category: newExpense.category,
+      payer: newExpense.payer,
+      description: newExpense.description,
+      type: 'EXPENSE'
+    };
+
+    setTransactions([transaction, ...transactions]);
+    setShowExpenseForm(false);
+    setNewExpense({
+      amount: '',
+      description: '',
+      category: CATEGORIES.EXPENSE[0],
+      payer: FamilyMember.PAPA
+    });
+  };
+
+  const contextData = {
+    transactions,
+    events,
+    familyMembers: Object.keys(FamilyMember),
+    currentDate: '2026-03-15'
+  };
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'dashboard':
+        return <Dashboard transactions={transactions} events={events} />;
+      case 'finance':
+        return (
+          <div className="p-4 md:p-8 max-w-5xl mx-auto pb-32">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+              <div>
+                <h2 className="text-3xl font-bold text-slate-900">Gestione Finanze</h2>
+                <p className="text-slate-500">Monitoraggio entrate e uscite della famiglia.</p>
+              </div>
+              <button 
+                onClick={() => setShowExpenseForm(true)}
+                className="bg-slate-900 text-white px-6 py-3 rounded-2xl font-bold shadow-xl hover:bg-slate-800 transition-all active:scale-95 flex items-center justify-center gap-2"
+              >
+                <span className="text-xl">+</span> Aggiungi Nuova Spesa
+              </button>
+            </div>
+
+            {showExpenseForm && (
+              <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
+                <div className="bg-white rounded-3xl p-8 max-w-md w-full shadow-2xl">
+                  <h3 className="text-xl font-bold mb-6 text-slate-800">Registra Uscita</h3>
+                  <form onSubmit={handleAddExpense} className="space-y-4">
+                    <div>
+                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Importo (€)</label>
+                      <input 
+                        type="number" 
+                        required
+                        value={newExpense.amount}
+                        onChange={e => setNewExpense({...newExpense, amount: e.target.value})}
+                        className="w-full bg-slate-50 border-none rounded-xl p-3 focus:ring-2 focus:ring-slate-200 outline-none"
+                        placeholder="0.00"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Descrizione</label>
+                      <input 
+                        type="text" 
+                        required
+                        value={newExpense.description}
+                        onChange={e => setNewExpense({...newExpense, description: e.target.value})}
+                        className="w-full bg-slate-50 border-none rounded-xl p-3 focus:ring-2 focus:ring-slate-200 outline-none"
+                        placeholder="es. Cena ristorante"
+                      />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Categoria</label>
+                        <select 
+                          value={newExpense.category}
+                          onChange={e => setNewExpense({...newExpense, category: e.target.value})}
+                          className="w-full bg-slate-50 border-none rounded-xl p-3 focus:ring-2 focus:ring-slate-200 outline-none"
+                        >
+                          {CATEGORIES.EXPENSE.map(cat => <option key={cat} value={cat}>{cat}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Pagato da</label>
+                        <select 
+                          value={newExpense.payer}
+                          onChange={e => setNewExpense({...newExpense, payer: e.target.value as FamilyMember})}
+                          className="w-full bg-slate-50 border-none rounded-xl p-3 focus:ring-2 focus:ring-slate-200 outline-none"
+                        >
+                          {Object.values(FamilyMember).map(m => <option key={m} value={m}>{m}</option>)}
+                        </select>
+                      </div>
+                    </div>
+                    <div className="flex gap-3 pt-4">
+                      <button 
+                        type="button" 
+                        onClick={() => setShowExpenseForm(false)}
+                        className="flex-1 px-4 py-3 rounded-xl font-bold text-slate-500 hover:bg-slate-100 transition-all"
+                      >
+                        Annulla
+                      </button>
+                      <button 
+                        type="submit" 
+                        className="flex-1 bg-slate-900 text-white px-4 py-3 rounded-xl font-bold shadow-lg hover:bg-slate-800 transition-all"
+                      >
+                        Conferma
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-4">
+              {transactions.map(t => (
+                <div key={t.id} className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex justify-between items-center group hover:border-slate-300 transition-all">
+                  <div className="flex items-center gap-4">
+                    <div className={`w-12 h-12 rounded-2xl flex items-center justify-center text-xl ${t.type === 'INCOME' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'}`}>
+                      {t.type === 'INCOME' ? '↓' : '↑'}
+                    </div>
+                    <div>
+                      <p className="font-bold text-slate-800">{t.description}</p>
+                      <p className="text-xs text-slate-400 font-medium">{t.payer} • {t.category} • {new Date(t.date).toLocaleDateString('it-IT')}</p>
+                    </div>
+                  </div>
+                  <p className={`text-lg font-bold ${t.type === 'INCOME' ? 'text-emerald-600' : 'text-slate-900'}`}>
+                    {t.type === 'INCOME' ? '+' : '-'} € {t.amount.toLocaleString('it-IT')}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      case 'calendar':
+        return (
+          <div className="p-8 max-w-5xl mx-auto">
+            <h2 className="text-3xl font-bold text-slate-900 mb-8">Calendario 2026</h2>
+            <div className="grid grid-cols-1 gap-4">
+               {events.map(e => (
+                 <div key={e.id} className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-start justify-between">
+                    <div>
+                      <p className="text-sm font-bold text-slate-400 uppercase mb-1">{new Date(e.start).toLocaleDateString('it-IT', { weekday: 'long', day: 'numeric', month: 'long' })}</p>
+                      <h3 className="text-xl font-bold text-slate-800">{e.title}</h3>
+                      <p className="text-sm text-slate-500 mt-1">{new Date(e.start).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' })}</p>
+                    </div>
+                    <div className="flex -space-x-2">
+                      {e.participants.map(p => (
+                        <div key={p} className="w-8 h-8 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center text-[8px] font-bold" title={p}>
+                          {p.substring(0, 1)}
+                        </div>
+                      ))}
+                    </div>
+                 </div>
+               ))}
+            </div>
+          </div>
+        );
+      case 'assistant':
+        return <AssistantChat context={contextData} />;
+      default:
+        return <Dashboard transactions={transactions} events={events} />;
+    }
+  };
+
+  return (
+    <div className="flex flex-col md:flex-row h-screen overflow-hidden">
+      <Navigation activeTab={activeTab} setActiveTab={setActiveTab} />
+      <main className="flex-1 overflow-y-auto bg-slate-50/50">
+        {renderContent()}
+      </main>
+    </div>
+  );
+};
+
+export default App;