<!-- Résumé -->
<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="card border-l-4 border-green-500">
<h3 class="text-xs font-bold text-slate-400 uppercase">Revenu Jr Villeneuve</h3>
<p id="incomeJr" class="text-xl font-bold text-green-400">0.00 $</p>
</div>
<div class="card border-l-4 border-emerald-500">
<h3 class="text-xs font-bold text-slate-400 uppercase">Revenu Chômage</h3>
<p id="incomeChomage" class="text-xl font-bold text-emerald-400">0.00 $</p>
</div>
<div class="card border-l-4 border-red-500">
<h3 class="text-xs font-bold text-slate-400 uppercase">Total Dépenses</h3>
<p id="totalExpenses" class="text-xl font-bold text-red-400">0.00 $</p>
</div>
<div id="balanceCard" class="card border-2 border-yellow-500 bg-slate-800">
<h3 class="text-xs font-bold text-yellow-500 uppercase">Argent Restant</h3>
<p id="balance" class="text-2xl font-black">0.00 $</p>
</div>
</section>
<div class="grid lg:grid-cols-3 gap-6">
<!-- Colonne de Gauche -->
<div class="lg:col-span-2 space-y-6">
<!-- Factures Mensuelles -->
<div class="card border-t-4 border-blue-500">
<h2 class="text-lg font-bold flex items-center gap-2 mb-4"><i class="fas fa-calendar-check text-blue-400"></i> Mes Factures du Mois</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-2 mb-6 p-3 bg-slate-900/50 rounded-xl border border-slate-700">
<select id="billCategory" class="input-field text-sm">
<option value="Loyer">Loyer 🏠</option>
<option value="Assurance">Assurance 🛡️</option>
<option value="Proposition">Prop. Consommateur 📄</option>
<option value="Internet">Internet/Cell 📱</option>
<option value="Hydro">Hydro/Énergie ⚡</option>
<option value="Autre">Autre 💡</option>
</select>
<input type="number" id="billDay" placeholder="Jour (1-31)" class="input-field text-sm">
<input type="number" id="billAmount" placeholder="Montant" class="input-field text-sm">
<button onclick="addBillTemplate()" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 rounded-lg text-sm btn-action">Prévoir</button>
</div>
<div id="billsList" class="space-y-3"></div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- Entrées d'argent -->
<div class="card">
<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><i class="fas fa-wallet text-green-400"></i> Entrées</h2>
<div class="flex flex-col gap-2 mb-4">
<select id="incomeType" class="input-field text-sm">
<option value="Jr Villeneuve">Jr Villeneuve</option>
<option value="Chômage">Chômage</option>
<option value="Autre">Autre</option>
</select>
<input type="number" id="incomeAmount" placeholder="Montant" class="input-field text-sm">
<button onclick="addItem('income')" class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 rounded-lg btn-action">Ajouter</button>
</div>
<div id="incomeList" class="space-y-1 max-h-40 overflow-y-auto pr-1"></div>
</div>
<!-- Dépenses Ponctuelles -->
<div class="card">
<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><i class="fas fa-shopping-bag text-red-400"></i> Dépenses</h2>
<div class="flex flex-col gap-2 mb-4">
<input type="text" id="expenseSource" placeholder="C'est pour quoi ?" class="input-field text-sm">
<input type="number" id="expenseAmount" placeholder="Montant" class="input-field text-sm">
<button onclick="addItem('expense')" class="bg-red-600 hover:bg-red-500 text-white font-bold py-2 rounded-lg btn-action">Retirer</button>
</div>
<div id="expenseList" class="space-y-1 max-h-40 overflow-y-auto pr-1"></div>
</div>
</div>
</div>
<!-- Coach IA -->
<div class="lg:col-span-1">
<div class="card ai-box h-full sticky top-6 flex flex-col">
<h2 class="text-xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-4 flex items-center gap-2">
<i class="fas fa-sparkles"></i> Coach Gémi
</h2>
<p class="text-xs text-slate-300 mb-6 leading-relaxed italic">
"Jéri-one, ton budget est sauvegardé et prêt. On lâche rien ! ✨"
</p>
<button onclick="askGemini()" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-4 rounded-xl shadow-lg flex items-center justify-center gap-2 btn-action">
<span id="aiLoader" class="loader hidden"></span>
<span>Analyser mon mois ✨</span>
</button>
<div id="aiOutput" class="mt-6 text-sm text-slate-200 leading-relaxed overflow-y-auto flex-1"></div>
</div>
</div>
</div>
</div>
<!-- Modal Instructions Priorité -->
<div id="installModal">
<div class="bg-slate-800 p-6 rounded-2xl max-w-sm w-full border border-slate-700 shadow-2xl">
<h2 class="text-xl font-bold text-white mb-4">Garder en priorité ⭐</h2>
<div class="space-y-4 text-sm text-slate-300">
<div class="flex items-start gap-3">
<div class="bg-purple-600 text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0">1</div>
<p>Sur ton **Pixel 9**, clique sur les <i class="fas fa-ellipsis-v"></i> en haut à droite de Chrome et choisis **"Ajouter à l'écran d'accueil"**.</p>
</div>
<div class="flex items-start gap-3">
<div class="bg-purple-600 text-white w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0">2</div>
<p>Sur **ordinateur**, fais un clic-droit sur l'onglet en haut et choisis **"Épingler"**.</p>
</div>
<p class="text-xs text-slate-500 pt-2 italic">Comme ça, ton budget ne disparaîtra jamais de tes yeux, Jéri-one !</p>
</div>
<button onclick="toggleModal(false)" class="w-full mt-6 bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg">Compris !</button>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
import { getFirestore, doc, setDoc, onSnapshot, collection } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
const firebaseConfig = JSON.parse(__firebase_config);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
let user = null;
let bills = [];
let transactions = [];
const initAuth = async () => {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(auth, __initial_auth_token);
} else {
await signInAnonymously(auth);
}
};
initAuth();
onAuthStateChanged(auth, (u) => {
user = u;
if (user) {
document.getElementById('syncStatus').innerHTML = '<i class="fas fa-cloud text-green-400"></i> Sauvegardé';
setupSync();
}
});
function setupSync() {
if (!user) return;
const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'budget_state');
onSnapshot(docRef, (docSnap) => {
if (docSnap.exists()) {
const data = docSnap.data();
bills = data.bills || [];
transactions = data.transactions || [];
updateUI();
}
});
}
async function saveToCloud() {
if (!user) return;
document.getElementById('syncStatus').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sync...';
const docRef = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'budget_state');
await setDoc(docRef, { bills, transactions });
document.getElementById('syncStatus').innerHTML = '<i class="fas fa-cloud text-green-400"></i> Sauvegardé';
}
window.toggleModal = function(show) {
document.getElementById('installModal').style.display = show ? 'flex' : 'none';
}
window.addItem = function(category) {
const typeInput = document.getElementById(category === 'income' ? 'incomeType' : 'expenseSource');
const amountInput = document.getElementById(category === 'income' ? 'incomeAmount' : 'expenseAmount');
const type = typeInput.value.trim() || (category === 'income' ? 'Autre' : 'Dépense');
const amount = parseFloat(amountInput.value);
if (amount > 0) {
transactions.push({ id: Date.now(), category, type, amount });
amountInput.value = '';
saveToCloud();
}
};
window.removeTransaction = function(id) {
const trans = transactions.find(t => t.id === id);
if (trans?.originBillId) {
const bill = bills.find(b => b.id === trans.originBillId);
if (bill) bill.paid = false;
}
transactions = transactions.filter(t => t.id !== id);
saveToCloud();
};
window.addBillTemplate = function() {
const cat = document.getElementById('billCategory').value;
const day = parseInt(document.getElementById('billDay').value);
const amount = parseFloat(document.getElementById('billAmount').value);
if (amount > 0 && day >= 1 && day <= 31) {
bills.push({ id: 'bill-' + Date.now(), category: cat, day, amount, paid: false });
document.getElementById('billDay').value = '';
document.getElementById('billAmount').value = '';
saveToCloud();
}
};
window.toggleBill = function(id) {
const bill = bills.find(b => b.id === id);
if (bill) {
bill.paid = !bill.paid;
if (bill.paid) {
transactions.push({ id: 't-' + id, category: 'expense', type: `${bill.category} (le ${bill.day})`, amount: bill.amount, originBillId: id });
} else {
transactions = transactions.filter(t => t.originBillId !== id);
}
saveToCloud();
}
};
window.removeBill = function(id) {
bills = bills.filter(b => b.id !== id);
transactions = transactions.filter(t => t.originBillId !== id);
saveToCloud();
};
window.updateUI = function() {
const incList = document.getElementById('incomeList');
const expList = document.getElementById('expenseList');
const bList = document.getElementById('billsList');
incList.innerHTML = ''; expList.innerHTML = ''; bList.innerHTML = '';
let totalJr = 0, totalChom = 0, totalAutre = 0, totalExp = 0;
bills.sort((a,b) => a.day - b.day).forEach(b => {
const div = document.createElement('div');
div.className = `flex items-center justify-between p-3 rounded-xl border ${b.paid ? 'bg-green-500/10 border-green-500/30' : 'bg-slate-800 border-slate-700'}`;
div.innerHTML = `<div class="flex items-center gap-3"><label class="check-container"><input type="checkbox" ${b.paid ? 'checked' : ''} onchange="toggleBill('${b.id}')"><span class="checkmark"></span></label><div><p class="text-sm font-bold ${b.paid ? 'text-green-400 line-through' : 'text-slate-100'}">${b.category}</p><p class="text-[10px] text-slate-400 font-bold">Le ${b.day}</p></div></div><div class="flex items-center gap-4"><span class="font-black ${b.paid ? 'text-green-400' : 'text-white'}">${b.amount.toFixed(2)} $</span><button onclick="removeBill('${b.id}')" class="text-slate-600 hover:text-red-400 text-xs"><i class="fas fa-trash"></i></button></div>`;
bList.appendChild(div);
});
transactions.forEach(t => {
const div = document.createElement('div');
div.className = 'flex justify-between items-center bg-slate-800/40 p-2 rounded-lg text-sm mb-1 border border-slate-700/50';
div.innerHTML = `<span>${t.type}</span><div class="flex items-center gap-2"><span class="font-bold">${t.amount.toFixed(2)} $</span><button onclick="removeTransaction(${t.id})" class="text-red-500/50 hover:text-red-500"><i class="fas fa-times"></i></button></div>`;
if (t.category === 'income') {
incList.appendChild(div);
if (t.type === 'Jr Villeneuve') totalJr += t.amount;
else if (t.type === 'Chômage') totalChom += t.amount;
else totalAutre += t.amount;
} else {
expList.appendChild(div);
totalExp += t.amount;
}
});
const totalInc = totalJr + totalChom + totalAutre;
const balance = totalInc - totalExp;
document.getElementById('incomeJr').textContent = `${totalJr.toFixed(2)} $`;
document.getElementById('incomeChomage').
Mon Budget ✨
Priorité 1Organisation zen pour Jéri-one
Connexion...