Spaces:

Jaouadart
/

test1

Running

App Files Files Community

Jaouadart commited on Feb 4

Commit

7ff46be

verified ·

1 Parent(s): e5a9c7f

Update index.html

Browse files

Files changed (1) hide show

index.html +243 -142

index.html CHANGED Viewed

@@ -3,11 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>إدارة مالية النادي - المزامنة السحابية</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
-    <!-- إضافة Babel لتحويل JSX -->
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap');
         body { font-family: 'Cairo', sans-serif; font-size: 13px; }
@@ -21,204 +20,305 @@
 <body class="bg-slate-50 text-right text-slate-700">
     <div id="root"></div>
-    <!-- Firebase SDKs -->
-    <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
-        import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
-        import { getFirestore, collection, doc, onSnapshot, addDoc, deleteDoc, updateDoc } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js";
-        // جعل Firebase متاحاً لسكربت Babel
-        window.firebaseDocs = { collection, doc, onSnapshot, addDoc, deleteDoc, updateDoc, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, initializeApp };
-    </script>
     <script type="text/babel">
         const { useState, useEffect } = React;
-        const { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, collection, doc, onSnapshot, addDoc, deleteDoc, updateDoc } = window.firebaseDocs;
-        // Firebase Configuration
-        const firebaseConfig = JSON.parse(__firebase_config);
-        const app = initializeApp(firebaseConfig);
-        const auth = getAuth(app);
-        const db = getFirestore(app);
-        const appId = typeof __app_id !== 'undefined' ? __app_id : 'club-finance-prod';
         const App = () => {
-            const [user, setUser] = useState(null);
             const [isAdmin, setIsAdmin] = useState(false);
             const [showLoginModal, setShowLoginModal] = useState(false);
             const [passwordInput, setPasswordInput] = useState('');
             const [loginError, setLoginError] = useState(false);
             const [activeTab, setActiveTab] = useState('dashboard');
-            const [members, setMembers] = useState([]);
-            const [trips, setTrips] = useState([]);
-            const [activities, setActivities] = useState([]);
-            const [tripOne, setTripOne] = useState([]);
-            const [memberForm, setMemberForm] = useState({ name: '', amount: '' });
-            const [tripForm, setTripForm] = useState({ destination: '', cost: '', income: '' });
-            const [activityForm, setActivityForm] = useState({ title: '', expenses: '' });
             const [tripOneForm, setTripOneForm] = useState({ name: '', fee: '', paid: false });
             const CORRECT_PASSWORD = "CLUB@2976";
-            useEffect(() => {
-                const initAuth = async () => {
-                    if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
-                        await signInWithCustomToken(auth, __initial_auth_token);
-                    } else {
-                        await signInAnonymously(auth);
-                    }
-                };
-                initAuth();
-                return onAuthStateChanged(auth, setUser);
-            }, []);
-            useEffect(() => {
-                if (!user) return;
-                const getPath = (name) => collection(db, 'artifacts', appId, 'public', 'data', name);
-                const unsubers = [
-                    onSnapshot(getPath('members'), (s) => setMembers(s.docs.map(d => ({id: d.id, ...d.data()})))),
-                    onSnapshot(getPath('trips'), (s) => setTrips(s.docs.map(d => ({id: d.id, ...d.data()})))),
-                    onSnapshot(getPath('activities'), (s) => setActivities(s.docs.map(d => ({id: d.id, ...d.data()})))),
-                    onSnapshot(getPath('tripOne'), (s) => setTripOne(s.docs.map(d => ({id: d.id, ...d.data()})))),
-                ];
-                return () => unsubers.forEach(un => un());
-            }, [user]);
-            useEffect(() => { if(window.lucide) window.lucide.createIcons(); }, [activeTab, isAdmin, showLoginModal, members, tripOne]);
             const handleLogin = (e) => {
                 e.preventDefault();
                 if (passwordInput === CORRECT_PASSWORD) {
-                    setIsAdmin(true); setShowLoginModal(false); setLoginError(false); setPasswordInput('');
-                } else { setLoginError(true); }
             };
-            const cloudAdd = async (coll, data) => { if(isAdmin) await addDoc(collection(db, 'artifacts', appId, 'public', 'data', coll), data); };
-            const cloudDel = async (coll, id) => { if(isAdmin) await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', coll, id)); };
-            const cloudToggle = async (id, current) => { if(isAdmin) await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'tripOne', id), { paid: !current }); };
-            const totalMembers = members.reduce((a, c) => a + (Number(c.amount) || 0), 0);
-            const totalTripOne = tripOne.reduce((a, c) => c.paid ? a + (Number(c.fee) || 0) : a, 0);
-            const totalTripsNet = trips.reduce((a, c) => a + ((Number(c.income) || 0) - (Number(c.cost) || 0)), 0);
-            const totalExpenses = activities.reduce((a, c) => a + (Number(c.expenses) || 0), 0);
-            const grandTotal = totalMembers + totalTripOne + totalTripsNet - totalExpenses;
-            const SidebarItem = ({ id, icon, label, color = "blue" }) => (
-                <button onClick={() => setActiveTab(id)} className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all text-xs font-bold mb-1 ${activeTab === id ? `bg-${color}-600 text-white shadow-lg` : `text-slate-500 hover:bg-slate-100`}`}>
-                    <i data-lucide={icon} className="w-4 h-4"></i>
-                    <span>{label}</span>
-                </button>
-            );
             return (
-                <div className="min-h-screen bg-slate-50 flex flex-col md:flex-row-reverse">
                     {showLoginModal && (
-                        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 text-center">
-                            <div className="bg-white rounded-[2rem] p-8 shadow-2xl w-full max-w-xs animate-fade-in">
-                                <div className="bg-blue-600 w-14 h-14 rounded-2xl flex items-center justify-center text-white mx-auto mb-4"><i data-lucide="shield-check"></i></div>
-                                <h2 className="text-xl font-extrabold text-slate-800 mb-2">دخول المكلف</h2>
-                                <form onSubmit={handleLogin} className="space-y-4">
-                                    <input type="password" placeholder="كلمة السر" value={passwordInput} onChange={(e) => setPasswordInput(e.target.value)} className="w-full p-4 bg-slate-50 rounded-2xl border-none text-center font-bold outline-blue-600 shadow-inner" autoFocus />
-                                    <button type="submit" className="w-full bg-blue-600 text-white py-4 rounded-2xl font-extrabold shadow-xl hover:bg-blue-700">تأكيد الرمز</button>
                                 </form>
-                                {loginError && <p className="text-rose-500 text-[11px] mt-3 font-bold">الرمز غير صحيح</p>}
-                                <button onClick={() => setShowLoginModal(false)} className="mt-4 text-slate-400 text-[11px] font-bold">إغلاق</button>
                             </div>
                         </div>
                     )}
-                    <aside className="w-full md:w-64 bg-white border-l border-slate-200 p-6 flex flex-col shrink-0">
-                        <div className="flex items-center gap-3 mb-10">
-                            <div className="bg-blue-600 p-2 rounded-xl text-white shadow-lg"><i data-lucide="wallet"></i></div>
-                            <span className="text-lg font-extrabold text-slate-800">مالية النادي</span>
                         </div>
-                        <nav className="flex-1">
-                            <SidebarItem id="dashboard" icon="layout-dashboard" label="نظرة عامة" />
-                            <SidebarItem id="members" icon="users" label="المنخرطون" color="emerald" />
-                            <SidebarItem id="trip_one" icon="map-pin" label="الرحلة 1" color="blue" />
-                            <SidebarItem id="trips" icon="navigation" label="الرحلات الأخرى" color="purple" />
-                            <SidebarItem id="activities" icon="calendar" label="الأنشطة" color="rose" />
                         </nav>
-                        <div className="mt-6 pt-6 border-t border-slate-100">
                             {isAdmin ? (
-                                <button onClick={() => setIsAdmin(false)} className="w-full flex items-center justify-center gap-2 bg-rose-50 text-rose-600 p-3 rounded-xl font-bold text-[11px]"><i data-lucide="log-out" className="w-4 h-4"></i> خروج المكلف</button>
                             ) : (
-                                <button onClick={() => setShowLoginModal(true)} className="w-full flex items-center justify-center gap-2 bg-blue-50 text-blue-600 p-3 rounded-xl font-bold text-[11px]"><i data-lucide="user-cog" className="w-4 h-4"></i> دخول المكلف</button>
                             )}
                         </div>
                     </aside>
-                    <main className="flex-1 p-6 md:p-10 overflow-y-auto">
                         {activeTab === 'dashboard' && (
-                            <div className="space-y-8 animate-fade-in">
-                                <header>
-                                    <h2 className="text-2xl font-extrabold text-slate-800">لوحة التحكم</h2>
-                                    <p className="text-slate-400 font-bold text-xs mt-1">تزامن فوري سحابي</p>
-                                </header>
-                                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                                    <div className="bg-emerald-50 p-5 rounded-[2rem] border border-white shadow-sm">
-                                        <p className="text-[11px] font-extrabold mb-1 text-emerald-700 uppercase">انخراطات</p>
-                                        <h3 className="text-xl font-extrabold text-emerald-700">{totalMembers} MAD</h3>
-                                    </div>
-                                    <div className="bg-blue-50 p-5 rounded-[2rem] border border-white shadow-sm">
-                                        <p className="text-[11px] font-extrabold mb-1 text-blue-700 uppercase">الرحلة 1</p>
-                                        <h3 className="text-xl font-extrabold text-blue-700">{totalTripOne} MAD</h3>
-                                    </div>
-                                    <div className="bg-purple-50 p-5 rounded-[2rem] border border-white shadow-sm">
-                                        <p className="text-[11px] font-extrabold mb-1 text-purple-700 uppercase">أربا�� الرحلات</p>
-                                        <h3 className="text-xl font-extrabold text-purple-700">{totalTripsNet} MAD</h3>
-                                    </div>
-                                    <div className="bg-rose-50 p-5 rounded-[2rem] border border-white shadow-sm">
-                                        <p className="text-[11px] font-extrabold mb-1 text-rose-700 uppercase">المصاريف</p>
-                                        <h3 className="text-xl font-extrabold text-rose-700">{totalExpenses} MAD</h3>
                                     </div>
                                 </div>
-                                <div className="bg-slate-900 text-white p-10 rounded-[2.5rem] shadow-2xl text-right">
-                                    <p className="text-blue-400 text-xs font-extrabold mb-2 uppercase">الرصيد الصافي المتوفر</p>
-                                    <h2 className="text-5xl font-black tracking-tighter">{grandTotal} <span className="text-xl text-slate-500 font-bold ml-2">MAD</span></h2>
                                 </div>
                             </div>
                         )}
                         {activeTab === 'members' && (
-                            <div className="space-y-6 animate-fade-in">
-                                <h2 className="text-xl font-extrabold text-slate-800">سجل المنخرطين</h2>
                                 {isAdmin && (
-                                    <div className="bg-white p-5 rounded-[2rem] shadow-sm grid grid-cols-1 md:grid-cols-3 gap-3 border">
-                                        <input type="text" placeholder="الاسم" value={memberForm.name} onChange={e=>setMemberForm({...memberForm, name: e.target.value})} className="p-3 bg-slate-50 rounded-xl outline-none text-xs font-bold" />
-                                        <input type="number" placeholder="المبلغ" value={memberForm.amount} onChange={e=>setMemberForm({...memberForm, amount: e.target.value})} className="p-3 bg-slate-50 rounded-xl outline-none text-xs font-bold" />
-                                        <button onClick={()=>{if(!memberForm.name)return; cloudAdd('members', memberForm); setMemberForm({name:'',amount:''})}} className="bg-emerald-600 text-white rounded-xl font-black text-xs hover:bg-emerald-700">إضافة</button>
                                     </div>
                                 )}
-                                <div className="bg-white rounded-[2rem] shadow-sm border overflow-hidden">
-                                    <table className="w-full text-right"><thead className="bg-slate-50 text-[11px] text-slate-400 font-black"><tr><th className="px-6 py-4">الاسم</th><th className="px-6 py-4 text-center">المبلغ</th>{isAdmin && <th className="px-6 py-4 text-center">حذف</th>}</tr></thead><tbody className="divide-y text-xs font-bold">{members.map(m => (<tr key={m.id}><td className="px-6 py-4">{m.name}</td><td className="px-6 py-4 text-emerald-600 text-center">{m.amount} MAD</td>{isAdmin && <td className="px-6 py-4 text-center"><button onClick={()=>cloudDel('members', m.id)} className="text-rose-300 hover:text-rose-500"><i data-lucide="trash-2" className="w-4 h-4"></i></button></td>}</tr>))}</tbody></table>
                                 </div>
                             </div>
                         )}
                         {activeTab === 'trip_one' && (
-                            <div className="space-y-6 animate-fade-in">
-                                <h2 className="text-xl font-extrabold text-blue-800">لائحة الرحلة الأولى</h2>
                                 {isAdmin && (
-                                    <div className="bg-white p-5 rounded-[2rem] shadow-sm grid grid-cols-1 md:grid-cols-4 gap-3 border">
-                                        <input type="text" placeholder="الاسم" value={tripOneForm.name} onChange={e=>setTripOneForm({...tripOneForm, name: e.target.value})} className="p-3 bg-blue-50/50 rounded-xl outline-none text-xs font-bold" />
-                                        <input type="number" placeholder="المبلغ" value={tripOneForm.fee} onChange={e=>setTripOneForm({...tripOneForm, fee: e.target.value})} className="p-3 bg-blue-50/50 rounded-xl outline-none text-xs font-bold" />
-                                        <div className="flex items-center gap-2 px-2"><input type="checkbox" checked={tripOneForm.paid} onChange={e=>setTripOneForm({...tripOneForm, paid: e.target.checked})} /> <span className="text-[11px] font-bold">تم الدفع</span></div>
-                                        <button onClick={()=>{if(!tripOneForm.name)return; cloudAdd('tripOne', tripOneForm); setTripOneForm({name:'',fee:'',paid:false})}} className="bg-blue-700 text-white rounded-xl font-black text-xs">تسجيل</button>
                                     </div>
                                 )}
-                                <div className="bg-white rounded-[2rem] shadow-sm border overflow-hidden">
-                                    <table className="w-full text-right"><thead className="bg-blue-700 text-white text-[11px] font-black"><tr><th className="px-6 py-4">المشارك</th><th className="px-6 py-4 text-center">الواجب</th><th className="px-6 py-4 text-center">الحالة</th>{isAdmin && <th className="px-6 py-4 text-center">حذف</th>}</tr></thead><tbody className="divide-y text-xs font-bold">{tripOne.map(t => (<tr key={t.id}><td className="px-6 py-4">{t.name}</td><td className="px-6 py-4 text-center">{t.fee} MAD</td><td className="px-6 py-4 text-center"><span onClick={() => isAdmin && cloudToggle(t.id, t.paid)} className={`px-3 py-1 rounded-full text-[10px] font-black border ${isAdmin ? 'cursor-pointer' : ''} ${t.paid ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-amber-50 text-amber-600 border-amber-100'}`}>{t.paid ? 'تم الاستخلاص' : 'في الانتظار'}</span></td>{isAdmin && <td className="px-6 py-4 text-center"><button onClick={()=>cloudDel('tripOne', t.id)} className="text-slate-300"><i data-lucide="trash-2" className="w-4 h-4"></i></button></td>}</tr>))}</tbody></table>
                                 </div>
                             </div>
                         )}
-                        {/* باقي الأقسام تتبع نفس المنطق */}
-                        {activeTab === 'trips' && <div className="p-10 text-center text-slate-400 font-bold italic">قسم الرحلات - يرجى إضافة البيانات سحابياً</div>}
-                        {activeTab === 'activities' && <div className="p-10 text-center text-slate-400 font-bold italic">قسم الأنشطة - يرجى إضافة البيانات سحابياً</div>}
                     </main>
                 </div>
             );
@@ -230,5 +330,6 @@
     <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>إدارة مالية النادي - الواجهة الذكية</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap');
         body { font-family: 'Cairo', sans-serif; font-size: 13px; }
 <body class="bg-slate-50 text-right text-slate-700">
     <div id="root"></div>
     <script type="text/babel">
         const { useState, useEffect } = React;
         const App = () => {
+            const STORAGE_KEYS = {
+                MEMBERS: 'club_members_data',
+                TRIPS: 'club_trips_data',
+                ACTIVITIES: 'club_activities_data',
+                TRIP_ONE: 'club_trip_one_data'
+            };
             const [isAdmin, setIsAdmin] = useState(false);
             const [showLoginModal, setShowLoginModal] = useState(false);
             const [passwordInput, setPasswordInput] = useState('');
             const [loginError, setLoginError] = useState(false);
             const [activeTab, setActiveTab] = useState('dashboard');
+            const [members, setMembers] = useState(() => {
+                const saved = localStorage.getItem(STORAGE_KEYS.MEMBERS);
+                return saved ? JSON.parse(saved) : [];
+            });
+            const [trips, setTrips] = useState(() => {
+                const saved = localStorage.getItem(STORAGE_KEYS.TRIPS);
+                return saved ? JSON.parse(saved) : [];
+            });
+            const [activities, setActivities] = useState(() => {
+                const saved = localStorage.getItem(STORAGE_KEYS.ACTIVITIES);
+                return saved ? JSON.parse(saved) : [];
+            });
+            const [tripOneRegistrations, setTripOneRegistrations] = useState(() => {
+                const saved = localStorage.getItem(STORAGE_KEYS.TRIP_ONE);
+                return saved ? JSON.parse(saved) : [];
+            });
+            useEffect(() => localStorage.setItem(STORAGE_KEYS.MEMBERS, JSON.stringify(members)), [members]);
+            useEffect(() => localStorage.setItem(STORAGE_KEYS.TRIPS, JSON.stringify(trips)), [trips]);
+            useEffect(() => localStorage.setItem(STORAGE_KEYS.ACTIVITIES, JSON.stringify(activities)), [activities]);
+            useEffect(() => localStorage.setItem(STORAGE_KEYS.TRIP_ONE, JSON.stringify(tripOneRegistrations)), [tripOneRegistrations]);
+            const [memberForm, setMemberForm] = useState({ name: '', amount: '', date: '' });
+            const [tripForm, setTripForm] = useState({ destination: '', cost: '', income: '', date: '' });
+            const [activityForm, setActivityForm] = useState({ title: '', expenses: '', date: '' });
             const [tripOneForm, setTripOneForm] = useState({ name: '', fee: '', paid: false });
             const CORRECT_PASSWORD = "CLUB@2976";
+            const WHATSAPP_LINK = "https://wa.me/message/P3DXRV6NTZ63L1";
             const handleLogin = (e) => {
                 e.preventDefault();
                 if (passwordInput === CORRECT_PASSWORD) {
+                    setIsAdmin(true);
+                    setShowLoginModal(false);
+                    setLoginError(false);
+                    setPasswordInput('');
+                } else {
+                    setLoginError(true);
+                }
             };
+            const totalMemberIncome = members.reduce((acc, curr) => acc + (parseFloat(curr.amount) || 0), 0);
+            const tripOneIncome = tripOneRegistrations.reduce((acc, curr) => curr.paid ? acc + (parseFloat(curr.fee) || 0) : acc, 0);
+            const totalTripBalance = trips.reduce((acc, curr) => acc + ((parseFloat(curr.income) || 0) - (parseFloat(curr.cost) || 0)), 0);
+            const totalActivityExpenses = activities.reduce((acc, curr) => acc + (parseFloat(curr.expenses) || 0), 0);
+            const netBalance = totalMemberIncome + tripOneIncome + totalTripBalance - totalActivityExpenses;
+            useEffect(() => { lucide.createIcons(); }, [activeTab, isAdmin, showLoginModal]);
+            const SidebarItem = ({ id, iconName, label, color = "blue", isExternal = false, href = "" }) => {
+                const baseClass = `w-full flex items-center space-x-reverse space-x-2 px-3 py-2 rounded-lg transition-all text-xs font-semibold`;
+                if (isExternal) {
+                    return (
+                        <a href={href} target="_blank" rel="noopener noreferrer" className={`${baseClass} text-emerald-600 hover:bg-emerald-50`}>
+                            <i data-lucide={iconName} className="w-4 h-4"></i>
+                            <span>{label}</span>
+                        </a>
+                    );
+                }
+                return (
+                    <button onClick={() => setActiveTab(id)} className={`${baseClass} ${activeTab === id ? `bg-${color}-600 text-white shadow-md` : `text-slate-500 hover:bg-slate-100`}`}>
+                        <i data-lucide={iconName} className="w-4 h-4"></i>
+                        <span>{label}</span>
+                    </button>
+                );
+            };
             return (
+                <div className="min-h-screen bg-slate-50 flex flex-col md:flex-row-reverse" dir="rtl">
+                    {/* Login Modal */}
                     {showLoginModal && (
+                        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+                            <div className="bg-white rounded-3xl p-8 shadow-2xl animate-fade-in text-center max-w-xs w-full relative">
+                                <button onClick={() => {setShowLoginModal(false); setLoginError(false);}} className="absolute top-4 left-4 text-slate-400 hover:text-slate-600">
+                                    <i data-lucide="x" className="w-5 h-5"></i>
+                                </button>
+                                <div className="bg-blue-600 w-12 h-12 rounded-xl flex items-center justify-center text-white mx-auto mb-4">
+                                    <i data-lucide="shield-check" className="w-6 h-6"></i>
+                                </div>
+                                <h2 className="text-lg font-extrabold text-slate-800 mb-1">دخول المكلف</h2>
+                                <p className="text-[10px] text-slate-400 mb-4 font-bold">يرجى إدخال رمز الوصول للإدارة</p>
+                                <form onSubmit={handleLogin} className="space-y-3">
+                                    <input type="password" placeholder="كلمة السر" value={passwordInput} onChange={(e) => setPasswordInput(e.target.value)}
+                                        className="w-full p-3 bg-slate-50 rounded-xl border border-slate-100 outline-none text-center font-bold text-sm" autoFocus />
+                                    <button type="submit" className="w-full bg-blue-600 text-white py-3 rounded-xl font-bold text-sm shadow-lg hover:bg-blue-700">تأكيد الدخول</button>
                                 </form>
+                                {loginError && <p className="text-rose-500 text-[10px] mt-2 font-bold">الرمز غير صحيح!</p>}
                             </div>
                         </div>
                     )}
+                    {/* Sidebar */}
+                    <aside className="w-full md:w-56 bg-white border-l border-slate-200 p-4 flex flex-col gap-1 shrink-0 z-10">
+                        <div className="flex items-center gap-2 mb-6 px-2">
+                            <div className="bg-blue-600 p-1.5 rounded-lg text-white shadow-sm">
+                                <i data-lucide="wallet" className="w-4 h-4"></i>
+                            </div>
+                            <h1 className="text-base font-extrabold text-slate-800">المالية الذكية</h1>
                         </div>
+                        <nav className="space-y-1">
+                            <SidebarItem id="dashboard" iconName="layout-dashboard" label="لوحة التحكم" />
+                            <SidebarItem id="members" iconName="users" label="المنخرطون" />
+                            <SidebarItem id="trip_one" iconName="map" label="الرحلة 1" />
+                            <SidebarItem id="trips" iconName="navigation" label="رحلات أخرى" color="purple" />
+                            <SidebarItem id="activities" iconName="calendar" label="الأنشطة" color="rose" />
+                            <SidebarItem isExternal={true} href={WHATSAPP_LINK} iconName="message-circle" label="تواصل معنا" />
                         </nav>
+                        <div className="mt-auto pt-4 border-t border-slate-100 space-y-2">
                             {isAdmin ? (
+                                <button onClick={() => setIsAdmin(false)} className="w-full text-rose-500 text-[11px] font-bold flex items-center gap-2 hover:bg-rose-50 p-2 rounded-lg">
+                                    <i data-lucide="log-out" className="w-3.5 h-3.5"></i> خروج من الإدارة
+                                </button>
                             ) : (
+                                <button onClick={() => setShowLoginModal(true)} className="w-full text-blue-600 text-[11px] font-bold flex items-center gap-2 hover:bg-blue-50 p-2 rounded-lg">
+                                    <i data-lucide="user-check" className="w-3.5 h-3.5"></i> دخول المكلف
+                                </button>
                             )}
+                            <div className={`text-[9px] text-center font-bold px-2 py-1 rounded ${isAdmin ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500'}`}>
+                                {isAdmin ? 'وضع التعديل نشط' : 'وضع العرض فقط'}
+                            </div>
                         </div>
                     </aside>
+                    {/* Main Content */}
+                    <main className="flex-1 p-4 md:p-6 overflow-y-auto animate-fade-in">
                         {activeTab === 'dashboard' && (
+                            <div className="space-y-6">
+                                <header className="flex justify-between items-center">
+                                    <div>
+                                        <h2 className="text-xl font-extrabold text-slate-800 leading-tight">ملخص النادي</h2>
+                                        <p className="text-[11px] text-slate-400 font-bold uppercase tracking-wider">البيانات المالية المحدثة</p>
                                     </div>
+                                </header>
+                                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                                    {[
+                                        { label: "انخراطات", val: totalMemberIncome, bg: "bg-emerald-50", text: "text-emerald-700" },
+                                        { label: "الرحلة 1", val: tripOneIncome, bg: "bg-blue-50", text: "text-blue-700" },
+                                        { label: "أرباح الرحلات", val: totalTripBalance, bg: "bg-purple-50", text: "text-purple-700" },
+                                        { label: "المصاريف", val: totalActivityExpenses, bg: "bg-rose-50", text: "text-rose-700" }
+                                    ].map((card, i) => (
+                                        <div key={i} className={`p-3 rounded-2xl ${card.bg} border border-white shadow-sm`}>
+                                            <p className={`text-[10px] font-bold mb-0.5 ${card.text}`}>{card.label}</p>
+                                            <h3 className={`text-lg font-extrabold ${card.text}`}>{card.val} <span className="text-[10px]">MAD</span></h3>
+                                        </div>
+                                    ))}
                                 </div>
+                                <div className="bg-slate-900 text-white p-6 rounded-3xl shadow-xl relative overflow-hidden">
+                                    <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl"></div>
+                                    <p className="text-slate-400 text-xs font-bold mb-1">صافي الرصيد المتوفر</p>
+                                    <h2 className="text-4xl font-extrabold tracking-tight">{netBalance} <span className="text-sm text-slate-500 font-bold">درهم مغربي</span></h2>
                                 </div>
                             </div>
                         )}
                         {activeTab === 'members' && (
+                            <div className="space-y-4">
+                                <h2 className="text-lg font-extrabold text-slate-800">سجل المنخرطين</h2>
                                 {isAdmin && (
+                                    <div className="bg-white p-4 rounded-2xl shadow-sm grid grid-cols-1 md:grid-cols-4 gap-2 border">
+                                        <input type="text" placeholder="الاسم" value={memberForm.name} onChange={(e)=>setMemberForm({...memberForm, name: e.target.value})} className="p-2 bg-slate-50 rounded-lg outline-none border border-slate-100 text-xs font-semibold" />
+                                        <input type="number" placeholder="المبلغ" value={memberForm.amount} onChange={(e)=>setMemberForm({...memberForm, amount: e.target.value})} className="p-2 bg-slate-50 rounded-lg outline-none border border-slate-100 text-xs font-semibold" />
+                                        <input type="date" value={memberForm.date} onChange={(e)=>setMemberForm({...memberForm, date: e.target.value})} className="p-2 bg-slate-50 rounded-lg outline-none border border-slate-100 text-xs font-semibold" />
+                                        <button onClick={()=>{if(!memberForm.name) return; setMembers([...members, {...memberForm, id: Date.now()}]); setMemberForm({name:'',amount:'',date:''})}} className="bg-blue-600 text-white p-2 rounded-lg font-bold text-xs">إضافة</button>
                                     </div>
                                 )}
+                                <div className="bg-white rounded-2xl shadow-sm border overflow-hidden">
+                                    <table className="w-full text-right">
+                                        <thead className="bg-slate-50 border-b text-[11px] text-slate-400 uppercase font-extrabold">
+                                            <tr><th className="px-4 py-3">الاسم</th><th className="px-4 py-3 text-center">المبلغ</th>{isAdmin && <th className="px-4 py-3 text-center w-16">إجراء</th>}</tr>
+                                        </thead>
+                                        <tbody className="divide-y divide-slate-50 text-xs font-semibold">
+                                            {members.map(m => (
+                                                <tr key={m.id} className="hover:bg-slate-50">
+                                                    <td className="px-4 py-2 text-slate-700">{m.name}</td>
+                                                    <td className="px-4 py-2 text-emerald-600 text-center font-bold">{m.amount} MAD</td>
+                                                    {isAdmin && <td className="px-4 py-2 text-center"><button onClick={()=>setMembers(members.filter(x=>x.id!==m.id))} className="text-rose-300 hover:text-rose-500 p-1"><i data-lucide="trash-2" className="w-3.5 h-3.5"></i></button></td>}
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         )}
                         {activeTab === 'trip_one' && (
+                            <div className="space-y-4">
+                                <h2 className="text-lg font-extrabold text-blue-800 text-center md:text-right">لائحة المشاركين في الرحلة 1</h2>
                                 {isAdmin && (
+                                    <div className="bg-white p-4 rounded-2xl shadow-sm grid grid-cols-1 md:grid-cols-4 gap-2 border border-blue-50">
+                                        <input type="text" placeholder="الاسم الكامل" value={tripOneForm.name} onChange={(e)=>setTripOneForm({...tripOneForm, name: e.target.value})} className="p-2 bg-blue-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <input type="number" placeholder="المبلغ" value={tripOneForm.fee} onChange={(e)=>setTripOneForm({...tripOneForm, fee: e.target.value})} className="p-2 bg-blue-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <div className="flex items-center gap-2 px-1">
+                                            <input type="checkbox" checked={tripOneForm.paid} onChange={(e)=>setTripOneForm({...tripOneForm, paid: e.target.checked})} className="w-4 h-4 accent-blue-600" />
+                                            <span className="text-[11px] font-bold">مدفوع</span>
+                                        </div>
+                                        <button onClick={()=>{if(!tripOneForm.name) return; setTripOneRegistrations([...tripOneRegistrations, {...tripOneForm, id: Date.now()}]); setTripOneForm({name:'',fee:'',paid:false})}} className="bg-blue-700 text-white p-2 rounded-lg font-bold text-xs shadow-sm">تسجيل مشارك</button>
                                     </div>
                                 )}
+                                <div className="bg-white rounded-2xl shadow-sm border overflow-hidden">
+                                    <table className="w-full text-right">
+                                        <thead className="bg-blue-700 text-white text-[11px] font-bold">
+                                            <tr><th className="px-4 py-2.5">المشارك</th><th className="px-4 py-2.5 text-center">الواجب</th><th className="px-4 py-2.5 text-center">الحالة</th>{isAdmin && <th className="px-4 py-2.5 text-center w-16">إجراء</th>}</tr>
+                                        </thead>
+                                        <tbody className="text-xs font-semibold divide-y divide-blue-50">
+                                            {tripOneRegistrations.map(reg => (
+                                                <tr key={reg.id} className="hover:bg-blue-50/30">
+                                                    <td className="px-4 py-2">{reg.name}</td>
+                                                    <td className="px-4 py-2 text-center font-bold">{reg.fee} MAD</td>
+                                                    <td className="px-4 py-2 text-center">
+                                                        <span onClick={() => isAdmin && setTripOneRegistrations(tripOneRegistrations.map(r => r.id === reg.id ? {...r, paid: !r.paid} : r))}
+                                                              className={`px-2 py-0.5 rounded-full text-[9px] font-extrabold border ${isAdmin ? 'cursor-pointer' : ''} ${reg.paid ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-amber-50 text-amber-600 border-amber-100'}`}>
+                                                            {reg.paid ? 'تم الدفع' : 'في الانتظار'}
+                                                        </span>
+                                                    </td>
+                                                    {isAdmin && <td className="px-4 py-2 text-center"><button onClick={()=>setTripOneRegistrations(tripOneRegistrations.filter(x=>x.id!==reg.id))} className="text-blue-200 hover:text-rose-500"><i data-lucide="trash-2" className="w-3.5 h-3.5"></i></button></td>}
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         )}
+                        {activeTab === 'trips' && (
+                             <div className="space-y-4">
+                                <h2 className="text-lg font-extrabold text-purple-800">بيانات الرحلات</h2>
+                                {isAdmin && (
+                                    <div className="bg-white p-4 rounded-2xl shadow-sm grid grid-cols-1 md:grid-cols-4 gap-2 border border-purple-50">
+                                        <input type="text" placeholder="الوجهة" value={tripForm.destination} onChange={(e)=>setTripForm({...tripForm, destination: e.target.value})} className="p-2 bg-purple-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <input type="number" placeholder="المصاريف" value={tripForm.cost} onChange={(e)=>setTripForm({...tripForm, cost: e.target.value})} className="p-2 bg-purple-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <input type="number" placeholder="المداخيل" value={tripForm.income} onChange={(e)=>setTripForm({...tripForm, income: e.target.value})} className="p-2 bg-purple-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <button onClick={()=>{if(!tripForm.destination) return; setTrips([...trips, {...tripForm, id: Date.now()}]); setTripForm({destination:'',cost:'',income:'',date:''})}} className="bg-purple-600 text-white p-2 rounded-lg font-bold text-xs shadow-sm">حفظ الرحلة</button>
+                                    </div>
+                                )}
+                                <div className="bg-white rounded-2xl shadow-sm border overflow-hidden">
+                                    <table className="w-full text-right text-xs">
+                                        <thead className="bg-purple-50 text-purple-900 border-b text-[11px] font-bold">
+                                            <tr><th className="px-4 py-3">الوجهة</th><th className="px-4 py-3 text-center">مصاريف</th><th className="px-4 py-3 text-center">مداخيل</th><th className="px-4 py-3 text-center">الصافي</th>{isAdmin && <th className="px-4 py-3 text-center">حذف</th>}</tr>
+                                        </thead>
+                                        <tbody className="divide-y divide-purple-50 font-semibold">
+                                            {trips.map(t => (
+                                                <tr key={t.id} className="hover:bg-purple-50/30">
+                                                    <td className="px-4 py-2">{t.destination}</td>
+                                                    <td className="px-4 py-2 text-rose-500 text-center">{t.cost}</td>
+                                                    <td className="px-4 py-2 text-emerald-600 text-center">{t.income}</td>
+                                                    <td className="px-4 py-2 text-center font-extrabold text-slate-800">{(t.income - t.cost)} MAD</td>
+                                                    {isAdmin && <td className="px-4 py-2 text-center"><button onClick={()=>setTrips(trips.filter(x=>x.id!==t.id))} className="text-purple-200 hover:text-rose-500"><i data-lucide="trash-2" className="w-3.5 h-3.5"></i></button></td>}
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                             </div>
+                        )}
+                        {activeTab === 'activities' && (
+                             <div className="space-y-4">
+                                <h2 className="text-lg font-extrabold text-rose-800">سجل الأنشطة</h2>
+                                {isAdmin && (
+                                    <div className="bg-white p-4 rounded-2xl shadow-sm grid grid-cols-1 md:grid-cols-3 gap-2 border border-rose-50">
+                                        <input type="text" placeholder="اسم النشاط" value={activityForm.title} onChange={(e)=>setActivityForm({...activityForm, title: e.target.value})} className="p-2 bg-rose-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <input type="number" placeholder="الميزانية المستهلكة" value={activityForm.expenses} onChange={(e)=>setActivityForm({...activityForm, expenses: e.target.value})} className="p-2 bg-rose-50/50 rounded-lg outline-none text-xs font-semibold" />
+                                        <button onClick={()=>{if(!activityForm.title) return; setActivities([...activities, {...activityForm, id: Date.now()}]); setActivityForm({title:'',expenses:'',date:''})}} className="bg-rose-600 text-white p-2 rounded-lg font-bold text-xs shadow-sm">إضافة نشاط</button>
+                                    </div>
+                                )}
+                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                                    {activities.map(a => (
+                                        <div key={a.id} className="p-3 bg-white border border-rose-50 rounded-xl flex justify-between items-center shadow-sm">
+                                            <div>
+                                                <h4 className="font-extrabold text-xs text-slate-800 leading-tight">{a.title}</h4>
+                                                <p className="text-rose-600 font-bold text-[11px]">{a.expenses} MAD</p>
+                                            </div>
+                                            {isAdmin && <button onClick={()=>setActivities(activities.filter(x=>x.id!==a.id))} className="text-slate-200 hover:text-rose-500"><i data-lucide="trash-2" className="w-3.5 h-3.5"></i></button>}
+                                        </div>
+                                    ))}
+                                    {activities.length === 0 && <p className="text-slate-400 text-center col-span-full py-10 text-[11px] font-bold italic">لا توجد أنشطة مسجلة بعد</p>}
+                                </div>
+                             </div>
+                        )}
                     </main>
                 </div>
             );
     <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 </body>
 </html>