\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<style>\n :root {\n --bg: #0f1117;\n --surface: #1a1d27;\n --surface2: #22263a;\n --border: rgba(255,255,255,0.07);\n --text: #f0f2ff;\n --muted: #8b90a8;\n --accent: #4f7cff;\n --accent2: #38d9a9;\n --danger: #ff6b6b;\n --warning: #ffd43b;\n --purple: #9775fa;\n --coral: #ff8787;\n }\n * { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'Cairo', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n direction: rtl;\n }\n\n \/* Header *\/\n .header {\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n padding: 1rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 100;\n }\n .header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .header-title .icon {\n width: 36px; height: 36px;\n background: linear-gradient(135deg, var(--accent), var(--purple));\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px;\n }\n .header-title h1 { font-size: 16px; font-weight: 600; }\n .last-update { font-size: 12px; color: var(--muted); }\n\n \/* Filter tabs *\/\n .filter-bar {\n padding: 1rem 1.5rem 0;\n display: flex;\n gap: 8px;\n }\n .filter-btn {\n padding: 6px 18px;\n border-radius: 20px;\n border: 1px solid var(--border);\n background: transparent;\n color: var(--muted);\n font-family: 'Cairo', sans-serif;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.2s;\n }\n .filter-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #fff;\n font-weight: 600;\n }\n .filter-btn:hover:not(.active) {\n border-color: var(--accent);\n color: var(--text);\n }\n\n \/* Main content *\/\n .main { padding: 1.25rem 1.5rem; max-width: 960px; margin: 0 auto; }\n\n \/* Metric cards *\/\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0,1fr));\n gap: 12px;\n margin-bottom: 1.25rem;\n }\n @media(max-width: 700px) {\n .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }\n }\n .metric-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1rem 1.1rem;\n position: relative;\n overflow: hidden;\n transition: transform 0.2s;\n }\n .metric-card:hover { transform: translateY(-2px); }\n .metric-card::before {\n content: '';\n position: absolute;\n top: 0; right: 0;\n width: 60px; height: 60px;\n border-radius: 50%;\n opacity: 0.08;\n transform: translate(20px, -20px);\n }\n .metric-card.blue::before { background: var(--accent); }\n .metric-card.green::before { background: var(--accent2); }\n .metric-card.purple::before { background: var(--purple); }\n .metric-card.coral::before { background: var(--coral); }\n .metric-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }\n .metric-value { font-size: 24px; font-weight: 700; }\n .metric-value.blue { color: var(--accent); }\n .metric-value.green { color: var(--accent2); }\n .metric-value.purple { color: var(--purple); }\n .metric-value.coral { color: var(--coral); }\n .metric-change {\n font-size: 11px;\n margin-top: 6px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .metric-change.up { color: var(--danger); }\n .metric-change.down { color: var(--accent2); }\n .metric-change.neutral { color: var(--muted); }\n\n \/* Charts row *\/\n .charts-row {\n display: grid;\n grid-template-columns: minmax(0,1fr) minmax(0,1.7fr);\n gap: 12px;\n margin-bottom: 1.25rem;\n }\n @media(max-width: 700px) {\n .charts-row { grid-template-columns: 1fr; }\n }\n .chart-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1.1rem 1.25rem;\n }\n .chart-card h3 {\n font-size: 13px;\n font-weight: 600;\n color: var(--muted);\n margin-bottom: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .chart-wrap { position: relative; }\n\n \/* Category legend *\/\n .cat-legend {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 1rem;\n }\n .cat-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n .cat-left { display: flex; align-items: center; gap: 8px; }\n .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n .cat-name { font-size: 12px; color: var(--muted); }\n .cat-pct { font-size: 12px; font-weight: 600; color: var(--text); }\n\n \/* Table *\/\n .table-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1.1rem 1.25rem;\n margin-bottom: 1.25rem;\n }\n .table-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n }\n .table-header h3 {\n font-size: 13px;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .table-count {\n font-size: 12px;\n color: var(--muted);\n background: var(--surface2);\n padding: 3px 10px;\n border-radius: 20px;\n }\n .expense-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid var(--border);\n transition: background 0.15s;\n }\n .expense-row:last-child { border-bottom: none; }\n .expense-row:hover { background: rgba(255,255,255,0.02); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }\n .cat-badge {\n font-size: 11px;\n padding: 3px 10px;\n border-radius: 20px;\n font-weight: 600;\n white-space: nowrap;\n flex-shrink: 0;\n }\n .expense-desc { flex: 1; font-size: 13px; color: var(--text); }\n .expense-msg { font-size: 11px; color: var(--muted); margin-top: 2px; }\n .expense-amount { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }\n .expense-time { font-size: 11px; color: var(--muted); white-space: nowrap; }\n\n \/* Loading & error *\/\n .loading {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--muted);\n font-size: 14px;\n gap: 10px;\n }\n .spinner {\n width: 20px; height: 20px;\n border: 2px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n .empty-state {\n text-align: center;\n padding: 2rem;\n color: var(--muted);\n font-size: 14px;\n }\n\n \/* Password screen *\/\n .auth-screen {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg);\n }\n .auth-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 2rem;\n width: 320px;\n text-align: center;\n }\n .auth-icon { font-size: 40px; margin-bottom: 1rem; }\n .auth-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 0.5rem; }\n .auth-card p { font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }\n .auth-input {\n width: 100%;\n padding: 10px 14px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 10px;\n color: var(--text);\n font-family: 'Cairo', sans-serif;\n font-size: 14px;\n text-align: center;\n margin-bottom: 12px;\n outline: none;\n }\n .auth-input:focus { border-color: var(--accent); }\n .auth-btn {\n width: 100%;\n padding: 10px;\n background: var(--accent);\n border: none;\n border-radius: 10px;\n color: #fff;\n font-family: 'Cairo', sans-serif;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n }\n .auth-error { font-size: 12px; color: var(--danger); margin-top: 8px; }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"auth-screen\" id=\"authScreen\">\n <div class=\"auth-card\">\n <div class=\"auth-icon\">\ud83d\udcb0<\/div>\n <h2>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h2>\n <p>\u0627\u062f\u062e\u0644 \u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u0644\u0644\u062f\u062e\u0648\u0644<\/p>\n <input class=\"auth-input\" type=\"password\" id=\"passInput\" placeholder=\"\u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631\" onkeydown=\"if(event.key==='Enter')checkPass()\">\n <button class=\"auth-btn\" onclick=\"checkPass()\">\u062f\u062e\u0648\u0644<\/button>\n <div class=\"auth-error\" id=\"authError\"><\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"dashboard\" style=\"display:none\">\n <div class=\"header\">\n <div class=\"header-title\">\n <div class=\"icon\">\ud83d\udcb0<\/div>\n <h1>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h1>\n <\/div>\n <div class=\"last-update\" id=\"lastUpdate\">\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644...<\/div>\n <\/div>\n\n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"setFilter('day',this)\">\u0627\u0644\u064a\u0648\u0645<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('week',this)\">\u0627\u0644\u0623\u0633\u0628\u0648\u0639<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('month',this)\">\u0627\u0644\u0634\u0647\u0631<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('all',this)\">\u0643\u0644 \u0627\u0644\u0648\u0642\u062a<\/button>\n <\/div>\n\n <div class=\"main\">\n <div id=\"mainContent\">\n <div class=\"loading\"><div class=\"spinner\"><\/div> \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a...<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ ==================== CONFIG ====================\nconst SHEET_ID = '1D_PG8qlcPBgnsNCxPi8UiMxdn8vEU-VadLy1OgV1qdU';\nconst SHEET_NAME = '\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a';\nconst API_KEY = 'AIzaSyAtcD20lqUBiWI39NGH4VHIvn0mgfElcNA';\nconst PASSWORD = 'Mamo1234';\n\n\/\/ ==================== AUTH ====================\nfunction checkPass() {\n const val = document.getElementById('passInput').value;\n if (val === PASSWORD) {\n document.getElementById('authScreen').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n loadData();\n } else {\n document.getElementById('authError').textContent = '\u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u063a\u0644\u0637!';\n }\n}\n\n\/\/ ==================== DATA ====================\nlet allData = [];\nlet currentFilter = 'day';\nlet pieChart = null;\nlet barChart = null;\n\nconst CAT_COLORS = {\n '\u0623\u0643\u0644': '#4f7cff', '\u0637\u0639\u0627\u0645': '#4f7cff',\n '\u0645\u0648\u0627\u0635\u0644\u0627\u062a': '#38d9a9',\n '\u0641\u0648\u0627\u062a\u064a\u0631': '#ffd43b',\n '\u062a\u0633\u0648\u0642': '#ff8787',\n '\u062a\u0631\u0641\u064a\u0647': '#9775fa',\n '\u0635\u062d\u0629': '#74c0fc',\n '\u062a\u0639\u0644\u064a\u0645': '#63e6be',\n '\u0623\u062e\u0631\u0649': '#868e96'\n};\n\nfunction getCatColor(cat) {\n for (const key of Object.keys(CAT_COLORS)) {\n if (cat && cat.includes(key)) return CAT_COLORS[key];\n }\n return CAT_COLORS['\u0623\u062e\u0631\u0649'];\n}\n\nasync function loadData() {\n try {\n const range = encodeURIComponent(`${SHEET_NAME}!A3:G1000`);\n const url = `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${SHEET_ID}\/values\/${range}?key=${API_KEY}`;\n const res = await fetch(url);\n const json = await res.json();\n const rows = json.values || [];\n\n allData = rows.filter(r => r && r[2]).map(r => ({\n date: r[0] || '',\n time: r[1] || '',\n amount: parseFloat((r[2]||'0').replace(\/[^\\d.]\/g,'')) || 0,\n currency: r[3] || '\u062c\u0646\u064a\u0647',\n category: r[4] || '\u0623\u062e\u0631\u0649',\n description: r[5] || '',\n message: r[6] || ''\n }));\n\n document.getElementById('lastUpdate').textContent = '\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ' + new Date().toLocaleTimeString('ar-EG');\n renderAll();\n } catch(e) {\n document.getElementById('mainContent').innerHTML = '<div class=\"empty-state\">\u274c \u062e\u0637\u0623 \u0641\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u2014 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0640 API Key<\/div>';\n }\n}\n\nfunction setFilter(f, btn) {\n currentFilter = f;\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderAll();\n}\n\nfunction filterData() {\n const now = new Date();\n return allData.filter(r => {\n if (!r.date) return false;\n const parts = r.date.split('\/');\n if (parts.length < 3) return true;\n let d;\n if (parts[0].length === 4) d = new Date(parts[0], parts[1]-1, parts[2]);\n else d = new Date(parts[2], parts[1]-1, parts[0]);\n if (isNaN(d)) return true;\n if (currentFilter === 'day') return d.toDateString() === now.toDateString();\n if (currentFilter === 'week') {\n const start = new Date(now); start.setDate(now.getDate() - 7);\n return d >= start;\n }\n if (currentFilter === 'month') return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();\n return true;\n });\n}\n\nfunction renderAll() {\n const data = filterData();\n const total = data.reduce((s,r) => s+r.amount, 0);\n\n \/\/ Category totals\n const catTotals = {};\n data.forEach(r => { catTotals[r.category] = (catTotals[r.category]||0) + r.amount; });\n const topCat = Object.entries(catTotals).sort((a,b)=>b[1]-a[1])[0];\n\n \/\/ Last period comparison\n const prevData = getPrevData();\n const prevTotal = prevData.reduce((s,r)=>s+r.amount,0);\n const diff = total - prevTotal;\n const diffPct = prevTotal > 0 ? Math.round(Math.abs(diff)\/prevTotal*100) : 0;\n\n \/\/ Daily for bar chart (last 7 days)\n const dailyMap = {};\n const last7 = [];\n for (let i=6; i>=0; i--) {\n const d = new Date(); d.setDate(d.getDate()-i);\n const key = d.toLocaleDateString('en-GB');\n const label = d.toLocaleDateString('ar-EG',{weekday:'short'});\n dailyMap[key] = { label, total: 0 };\n last7.push(key);\n }\n allData.forEach(r => {\n if (dailyMap[r.date]) dailyMap[r.date].total += r.amount;\n });\n\n const periodLabel = { day: '\u0627\u0644\u064a\u0648\u0645', week: '\u0627\u0644\u0623\u0633\u0628\u0648\u0639', month: '\u0627\u0644\u0634\u0647\u0631', all: '\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a' }[currentFilter];\n\n document.getElementById('mainContent').innerHTML = `\n <div class=\"cards-grid\">\n <div class=\"metric-card blue\">\n <div class=\"metric-label\">${periodLabel}<\/div>\n <div class=\"metric-value blue\">${total.toLocaleString('ar-EG')} \u062c<\/div>\n <div class=\"metric-change ${diff>0?'up':diff<0?'down':'neutral'}\">\n ${diff>0?'\u2191':'\u2193'} ${diffPct}% \u0639\u0646 \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629\n <\/div>\n <\/div>\n <div class=\"metric-card green\">\n <div class=\"metric-label\">\u0639\u062f\u062f \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/div>\n <div class=\"metric-value green\">${data.length}<\/div>\n <div class=\"metric-change neutral\">\u0645\u0639\u0627\u0645\u0644\u0629<\/div>\n <\/div>\n <div class=\"metric-card purple\">\n <div class=\"metric-label\">\u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0645\u0635\u0631\u0648\u0641<\/div>\n <div class=\"metric-value purple\">${data.length>0?Math.round(total\/data.length).toLocaleString('ar-EG'):0} \u062c<\/div>\n <div class=\"metric-change neutral\">\u0644\u0643\u0644 \u0645\u0639\u0627\u0645\u0644\u0629<\/div>\n <\/div>\n <div class=\"metric-card coral\">\n <div class=\"metric-label\">\u0623\u0639\u0644\u0649 \u062a\u0635\u0646\u064a\u0641<\/div>\n <div class=\"metric-value coral\" style=\"font-size:18px\">${topCat?topCat[0]:'\u2014'}<\/div>\n <div class=\"metric-change neutral\">${topCat?topCat[1].toLocaleString('ar-EG')+' \u062c':''}<\/div>\n <\/div>\n <\/div>\n\n <div class=\"charts-row\">\n <div class=\"chart-card\">\n <h3>\u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h3>\n <div class=\"chart-wrap\" style=\"height:180px\">\n <canvas id=\"pieChart\"><\/canvas>\n <\/div>\n <div class=\"cat-legend\" id=\"catLegend\"><\/div>\n <\/div>\n <div class=\"chart-card\">\n <h3>\u0622\u062e\u0631 7 \u0623\u064a\u0627\u0645<\/h3>\n <div class=\"chart-wrap\" style=\"height:220px\">\n <canvas id=\"barChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\">\n <h3>\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h3>\n <span class=\"table-count\">${data.length} \u0645\u0639\u0627\u0645\u0644\u0629<\/span>\n <\/div>\n <div id=\"expenseList\"><\/div>\n <\/div>\n `;\n\n \/\/ Pie chart\n const cats = Object.entries(catTotals).sort((a,b)=>b[1]-a[1]);\n const legendEl = document.getElementById('catLegend');\n cats.forEach(([cat, val]) => {\n const pct = total > 0 ? Math.round(val\/total*100) : 0;\n legendEl.innerHTML += `\n <div class=\"cat-item\">\n <div class=\"cat-left\">\n <div class=\"cat-dot\" style=\"background:${getCatColor(cat)}\"><\/div>\n <span class=\"cat-name\">${cat}<\/span>\n <\/div>\n <span class=\"cat-pct\">${pct}%<\/span>\n <\/div>`;\n });\n\n if (pieChart) pieChart.destroy();\n pieChart = new Chart(document.getElementById('pieChart'), {\n type: 'doughnut',\n data: {\n labels: cats.map(c=>c[0]),\n datasets: [{ data: cats.map(c=>c[1]), backgroundColor: cats.map(c=>getCatColor(c[0])), borderWidth: 0, hoverOffset: 4 }]\n },\n options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false } }, cutout: '65%' }\n });\n\n \/\/ Bar chart\n if (barChart) barChart.destroy();\n barChart = new Chart(document.getElementById('barChart'), {\n type: 'bar',\n data: {\n labels: last7.map(k => dailyMap[k].label),\n datasets: [{ data: last7.map(k => dailyMap[k].total), backgroundColor: '#4f7cff', borderRadius: 6, borderSkipped: false }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false } },\n scales: {\n x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8b90a8', font: { family: 'Cairo' } } },\n y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8b90a8', font: { family: 'Cairo' } } }\n }\n }\n });\n\n \/\/ Table\n const listEl = document.getElementById('expenseList');\n const sorted = [...data].sort((a,b) => b.date.localeCompare(a.date) || b.time.localeCompare(a.time));\n if (sorted.length === 0) {\n listEl.innerHTML = '<div class=\"empty-state\">\u0645\u0641\u064a\u0634 \u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u062f\u064a<\/div>';\n } else {\n sorted.slice(0,20).forEach(r => {\n listEl.innerHTML += `\n <div class=\"expense-row\">\n <span class=\"cat-badge\" style=\"background:${getCatColor(r.category)}22;color:${getCatColor(r.category)}\">${r.category}<\/span>\n <div style=\"flex:1;min-width:0\">\n <div class=\"expense-desc\">${r.description || r.message || '\u2014'}<\/div>\n <\/div>\n <div style=\"text-align:left\">\n <div class=\"expense-amount\">${r.amount.toLocaleString('ar-EG')} ${r.currency}<\/div>\n <div class=\"expense-time\">${r.time}<\/div>\n <\/div>\n <\/div>`;\n });\n }\n}\n\nfunction getPrevData() {\n const now = new Date();\n return allData.filter(r => {\n if (!r.date) return false;\n const parts = r.date.split('\/');\n if (parts.length < 3) return false;\n let d;\n if (parts[0].length === 4) d = new Date(parts[0], parts[1]-1, parts[2]);\n else d = new Date(parts[2], parts[1]-1, parts[0]);\n if (isNaN(d)) return false;\n if (currentFilter === 'day') {\n const yesterday = new Date(now); yesterday.setDate(now.getDate()-1);\n return d.toDateString() === yesterday.toDateString();\n }\n if (currentFilter === 'week') {\n const s = new Date(now); s.setDate(now.getDate()-14);\n const e = new Date(now); e.setDate(now.getDate()-7);\n return d >= s && d < e;\n }\n if (currentFilter === 'month') {\n const prevMonth = now.getMonth() === 0 ? 11 : now.getMonth()-1;\n const prevYear = now.getMonth() === 0 ? now.getFullYear()-1 : now.getFullYear();\n return d.getMonth() === prevMonth && d.getFullYear() === prevYear;\n }\n return false;\n });\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \ud83d\udcb0 \u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0627\u062f\u062e\u0644 \u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u0644\u0644\u062f\u062e\u0648\u0644 \u062f\u062e\u0648\u0644 \ud83d\udcb0 \u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644… \u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u0634\u0647\u0631 \u0643\u0644 \u0627\u0644\u0648\u0642\u062a \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4452","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/comments?post=4452"}],"version-history":[{"count":0,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4452\/revisions"}],"wp:attachment":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/media?parent=4452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<style>\n :root {\n --bg: #0f1117;\n --surface: #1a1d27;\n --surface2: #22263a;\n --border: rgba(255,255,255,0.07);\n --text: #f0f2ff;\n --muted: #8b90a8;\n --accent: #4f7cff;\n --accent2: #38d9a9;\n --danger: #ff6b6b;\n --warning: #ffd43b;\n --purple: #9775fa;\n --coral: #ff8787;\n }\n * { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'Cairo', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n direction: rtl;\n }\n\n \/* Header *\/\n .header {\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n padding: 1rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 100;\n }\n .header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .header-title .icon {\n width: 36px; height: 36px;\n background: linear-gradient(135deg, var(--accent), var(--purple));\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px;\n }\n .header-title h1 { font-size: 16px; font-weight: 600; }\n .last-update { font-size: 12px; color: var(--muted); }\n\n \/* Filter tabs *\/\n .filter-bar {\n padding: 1rem 1.5rem 0;\n display: flex;\n gap: 8px;\n }\n .filter-btn {\n padding: 6px 18px;\n border-radius: 20px;\n border: 1px solid var(--border);\n background: transparent;\n color: var(--muted);\n font-family: 'Cairo', sans-serif;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.2s;\n }\n .filter-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #fff;\n font-weight: 600;\n }\n .filter-btn:hover:not(.active) {\n border-color: var(--accent);\n color: var(--text);\n }\n\n \/* Main content *\/\n .main { padding: 1.25rem 1.5rem; max-width: 960px; margin: 0 auto; }\n\n \/* Metric cards *\/\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0,1fr));\n gap: 12px;\n margin-bottom: 1.25rem;\n }\n @media(max-width: 700px) {\n .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }\n }\n .metric-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1rem 1.1rem;\n position: relative;\n overflow: hidden;\n transition: transform 0.2s;\n }\n .metric-card:hover { transform: translateY(-2px); }\n .metric-card::before {\n content: '';\n position: absolute;\n top: 0; right: 0;\n width: 60px; height: 60px;\n border-radius: 50%;\n opacity: 0.08;\n transform: translate(20px, -20px);\n }\n .metric-card.blue::before { background: var(--accent); }\n .metric-card.green::before { background: var(--accent2); }\n .metric-card.purple::before { background: var(--purple); }\n .metric-card.coral::before { background: var(--coral); }\n .metric-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }\n .metric-value { font-size: 24px; font-weight: 700; }\n .metric-value.blue { color: var(--accent); }\n .metric-value.green { color: var(--accent2); }\n .metric-value.purple { color: var(--purple); }\n .metric-value.coral { color: var(--coral); }\n .metric-change {\n font-size: 11px;\n margin-top: 6px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .metric-change.up { color: var(--danger); }\n .metric-change.down { color: var(--accent2); }\n .metric-change.neutral { color: var(--muted); }\n\n \/* Charts row *\/\n .charts-row {\n display: grid;\n grid-template-columns: minmax(0,1fr) minmax(0,1.7fr);\n gap: 12px;\n margin-bottom: 1.25rem;\n }\n @media(max-width: 700px) {\n .charts-row { grid-template-columns: 1fr; }\n }\n .chart-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1.1rem 1.25rem;\n }\n .chart-card h3 {\n font-size: 13px;\n font-weight: 600;\n color: var(--muted);\n margin-bottom: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .chart-wrap { position: relative; }\n\n \/* Category legend *\/\n .cat-legend {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 1rem;\n }\n .cat-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n .cat-left { display: flex; align-items: center; gap: 8px; }\n .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n .cat-name { font-size: 12px; color: var(--muted); }\n .cat-pct { font-size: 12px; font-weight: 600; color: var(--text); }\n\n \/* Table *\/\n .table-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 14px;\n padding: 1.1rem 1.25rem;\n margin-bottom: 1.25rem;\n }\n .table-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n }\n .table-header h3 {\n font-size: 13px;\n font-weight: 600;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .table-count {\n font-size: 12px;\n color: var(--muted);\n background: var(--surface2);\n padding: 3px 10px;\n border-radius: 20px;\n }\n .expense-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid var(--border);\n transition: background 0.15s;\n }\n .expense-row:last-child { border-bottom: none; }\n .expense-row:hover { background: rgba(255,255,255,0.02); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }\n .cat-badge {\n font-size: 11px;\n padding: 3px 10px;\n border-radius: 20px;\n font-weight: 600;\n white-space: nowrap;\n flex-shrink: 0;\n }\n .expense-desc { flex: 1; font-size: 13px; color: var(--text); }\n .expense-msg { font-size: 11px; color: var(--muted); margin-top: 2px; }\n .expense-amount { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }\n .expense-time { font-size: 11px; color: var(--muted); white-space: nowrap; }\n\n \/* Loading & error *\/\n .loading {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--muted);\n font-size: 14px;\n gap: 10px;\n }\n .spinner {\n width: 20px; height: 20px;\n border: 2px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n .empty-state {\n text-align: center;\n padding: 2rem;\n color: var(--muted);\n font-size: 14px;\n }\n\n \/* Password screen *\/\n .auth-screen {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg);\n }\n .auth-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 2rem;\n width: 320px;\n text-align: center;\n }\n .auth-icon { font-size: 40px; margin-bottom: 1rem; }\n .auth-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 0.5rem; }\n .auth-card p { font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }\n .auth-input {\n width: 100%;\n padding: 10px 14px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 10px;\n color: var(--text);\n font-family: 'Cairo', sans-serif;\n font-size: 14px;\n text-align: center;\n margin-bottom: 12px;\n outline: none;\n }\n .auth-input:focus { border-color: var(--accent); }\n .auth-btn {\n width: 100%;\n padding: 10px;\n background: var(--accent);\n border: none;\n border-radius: 10px;\n color: #fff;\n font-family: 'Cairo', sans-serif;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n }\n .auth-error { font-size: 12px; color: var(--danger); margin-top: 8px; }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"auth-screen\" id=\"authScreen\">\n <div class=\"auth-card\">\n <div class=\"auth-icon\">\ud83d\udcb0<\/div>\n <h2>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h2>\n <p>\u0627\u062f\u062e\u0644 \u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u0644\u0644\u062f\u062e\u0648\u0644<\/p>\n <input class=\"auth-input\" type=\"password\" id=\"passInput\" placeholder=\"\u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631\" onkeydown=\"if(event.key==='Enter')checkPass()\">\n <button class=\"auth-btn\" onclick=\"checkPass()\">\u062f\u062e\u0648\u0644<\/button>\n <div class=\"auth-error\" id=\"authError\"><\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"dashboard\" style=\"display:none\">\n <div class=\"header\">\n <div class=\"header-title\">\n <div class=\"icon\">\ud83d\udcb0<\/div>\n <h1>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h1>\n <\/div>\n <div class=\"last-update\" id=\"lastUpdate\">\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644...<\/div>\n <\/div>\n\n <div class=\"filter-bar\">\n <button class=\"filter-btn active\" onclick=\"setFilter('day',this)\">\u0627\u0644\u064a\u0648\u0645<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('week',this)\">\u0627\u0644\u0623\u0633\u0628\u0648\u0639<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('month',this)\">\u0627\u0644\u0634\u0647\u0631<\/button>\n <button class=\"filter-btn\" onclick=\"setFilter('all',this)\">\u0643\u0644 \u0627\u0644\u0648\u0642\u062a<\/button>\n <\/div>\n\n <div class=\"main\">\n <div id=\"mainContent\">\n <div class=\"loading\"><div class=\"spinner\"><\/div> \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a...<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ ==================== CONFIG ====================\nconst SHEET_ID = '1D_PG8qlcPBgnsNCxPi8UiMxdn8vEU-VadLy1OgV1qdU';\nconst SHEET_NAME = '\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a';\nconst API_KEY = 'AIzaSyAtcD20lqUBiWI39NGH4VHIvn0mgfElcNA';\nconst PASSWORD = 'Mamo1234';\n\n\/\/ ==================== AUTH ====================\nfunction checkPass() {\n const val = document.getElementById('passInput').value;\n if (val === PASSWORD) {\n document.getElementById('authScreen').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n loadData();\n } else {\n document.getElementById('authError').textContent = '\u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u063a\u0644\u0637!';\n }\n}\n\n\/\/ ==================== DATA ====================\nlet allData = [];\nlet currentFilter = 'day';\nlet pieChart = null;\nlet barChart = null;\n\nconst CAT_COLORS = {\n '\u0623\u0643\u0644': '#4f7cff', '\u0637\u0639\u0627\u0645': '#4f7cff',\n '\u0645\u0648\u0627\u0635\u0644\u0627\u062a': '#38d9a9',\n '\u0641\u0648\u0627\u062a\u064a\u0631': '#ffd43b',\n '\u062a\u0633\u0648\u0642': '#ff8787',\n '\u062a\u0631\u0641\u064a\u0647': '#9775fa',\n '\u0635\u062d\u0629': '#74c0fc',\n '\u062a\u0639\u0644\u064a\u0645': '#63e6be',\n '\u0623\u062e\u0631\u0649': '#868e96'\n};\n\nfunction getCatColor(cat) {\n for (const key of Object.keys(CAT_COLORS)) {\n if (cat && cat.includes(key)) return CAT_COLORS[key];\n }\n return CAT_COLORS['\u0623\u062e\u0631\u0649'];\n}\n\nasync function loadData() {\n try {\n const range = encodeURIComponent(`${SHEET_NAME}!A3:G1000`);\n const url = `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${SHEET_ID}\/values\/${range}?key=${API_KEY}`;\n const res = await fetch(url);\n const json = await res.json();\n const rows = json.values || [];\n\n allData = rows.filter(r => r && r[2]).map(r => ({\n date: r[0] || '',\n time: r[1] || '',\n amount: parseFloat((r[2]||'0').replace(\/[^\\d.]\/g,'')) || 0,\n currency: r[3] || '\u062c\u0646\u064a\u0647',\n category: r[4] || '\u0623\u062e\u0631\u0649',\n description: r[5] || '',\n message: r[6] || ''\n }));\n\n document.getElementById('lastUpdate').textContent = '\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ' + new Date().toLocaleTimeString('ar-EG');\n renderAll();\n } catch(e) {\n document.getElementById('mainContent').innerHTML = '<div class=\"empty-state\">\u274c \u062e\u0637\u0623 \u0641\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u2014 \u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0640 API Key<\/div>';\n }\n}\n\nfunction setFilter(f, btn) {\n currentFilter = f;\n document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n renderAll();\n}\n\nfunction filterData() {\n const now = new Date();\n return allData.filter(r => {\n if (!r.date) return false;\n const parts = r.date.split('\/');\n if (parts.length < 3) return true;\n let d;\n if (parts[0].length === 4) d = new Date(parts[0], parts[1]-1, parts[2]);\n else d = new Date(parts[2], parts[1]-1, parts[0]);\n if (isNaN(d)) return true;\n if (currentFilter === 'day') return d.toDateString() === now.toDateString();\n if (currentFilter === 'week') {\n const start = new Date(now); start.setDate(now.getDate() - 7);\n return d >= start;\n }\n if (currentFilter === 'month') return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();\n return true;\n });\n}\n\nfunction renderAll() {\n const data = filterData();\n const total = data.reduce((s,r) => s+r.amount, 0);\n\n \/\/ Category totals\n const catTotals = {};\n data.forEach(r => { catTotals[r.category] = (catTotals[r.category]||0) + r.amount; });\n const topCat = Object.entries(catTotals).sort((a,b)=>b[1]-a[1])[0];\n\n \/\/ Last period comparison\n const prevData = getPrevData();\n const prevTotal = prevData.reduce((s,r)=>s+r.amount,0);\n const diff = total - prevTotal;\n const diffPct = prevTotal > 0 ? Math.round(Math.abs(diff)\/prevTotal*100) : 0;\n\n \/\/ Daily for bar chart (last 7 days)\n const dailyMap = {};\n const last7 = [];\n for (let i=6; i>=0; i--) {\n const d = new Date(); d.setDate(d.getDate()-i);\n const key = d.toLocaleDateString('en-GB');\n const label = d.toLocaleDateString('ar-EG',{weekday:'short'});\n dailyMap[key] = { label, total: 0 };\n last7.push(key);\n }\n allData.forEach(r => {\n if (dailyMap[r.date]) dailyMap[r.date].total += r.amount;\n });\n\n const periodLabel = { day: '\u0627\u0644\u064a\u0648\u0645', week: '\u0627\u0644\u0623\u0633\u0628\u0648\u0639', month: '\u0627\u0644\u0634\u0647\u0631', all: '\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a' }[currentFilter];\n\n document.getElementById('mainContent').innerHTML = `\n <div class=\"cards-grid\">\n <div class=\"metric-card blue\">\n <div class=\"metric-label\">${periodLabel}<\/div>\n <div class=\"metric-value blue\">${total.toLocaleString('ar-EG')} \u062c<\/div>\n <div class=\"metric-change ${diff>0?'up':diff<0?'down':'neutral'}\">\n ${diff>0?'\u2191':'\u2193'} ${diffPct}% \u0639\u0646 \u0627\u0644\u0641\u062a\u0631\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629\n <\/div>\n <\/div>\n <div class=\"metric-card green\">\n <div class=\"metric-label\">\u0639\u062f\u062f \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/div>\n <div class=\"metric-value green\">${data.length}<\/div>\n <div class=\"metric-change neutral\">\u0645\u0639\u0627\u0645\u0644\u0629<\/div>\n <\/div>\n <div class=\"metric-card purple\">\n <div class=\"metric-label\">\u0645\u062a\u0648\u0633\u0637 \u0627\u0644\u0645\u0635\u0631\u0648\u0641<\/div>\n <div class=\"metric-value purple\">${data.length>0?Math.round(total\/data.length).toLocaleString('ar-EG'):0} \u062c<\/div>\n <div class=\"metric-change neutral\">\u0644\u0643\u0644 \u0645\u0639\u0627\u0645\u0644\u0629<\/div>\n <\/div>\n <div class=\"metric-card coral\">\n <div class=\"metric-label\">\u0623\u0639\u0644\u0649 \u062a\u0635\u0646\u064a\u0641<\/div>\n <div class=\"metric-value coral\" style=\"font-size:18px\">${topCat?topCat[0]:'\u2014'}<\/div>\n <div class=\"metric-change neutral\">${topCat?topCat[1].toLocaleString('ar-EG')+' \u062c':''}<\/div>\n <\/div>\n <\/div>\n\n <div class=\"charts-row\">\n <div class=\"chart-card\">\n <h3>\u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h3>\n <div class=\"chart-wrap\" style=\"height:180px\">\n <canvas id=\"pieChart\"><\/canvas>\n <\/div>\n <div class=\"cat-legend\" id=\"catLegend\"><\/div>\n <\/div>\n <div class=\"chart-card\">\n <h3>\u0622\u062e\u0631 7 \u0623\u064a\u0627\u0645<\/h3>\n <div class=\"chart-wrap\" style=\"height:220px\">\n <canvas id=\"barChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\">\n <h3>\u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a<\/h3>\n <span class=\"table-count\">${data.length} \u0645\u0639\u0627\u0645\u0644\u0629<\/span>\n <\/div>\n <div id=\"expenseList\"><\/div>\n <\/div>\n `;\n\n \/\/ Pie chart\n const cats = Object.entries(catTotals).sort((a,b)=>b[1]-a[1]);\n const legendEl = document.getElementById('catLegend');\n cats.forEach(([cat, val]) => {\n const pct = total > 0 ? Math.round(val\/total*100) : 0;\n legendEl.innerHTML += `\n <div class=\"cat-item\">\n <div class=\"cat-left\">\n <div class=\"cat-dot\" style=\"background:${getCatColor(cat)}\"><\/div>\n <span class=\"cat-name\">${cat}<\/span>\n <\/div>\n <span class=\"cat-pct\">${pct}%<\/span>\n <\/div>`;\n });\n\n if (pieChart) pieChart.destroy();\n pieChart = new Chart(document.getElementById('pieChart'), {\n type: 'doughnut',\n data: {\n labels: cats.map(c=>c[0]),\n datasets: [{ data: cats.map(c=>c[1]), backgroundColor: cats.map(c=>getCatColor(c[0])), borderWidth: 0, hoverOffset: 4 }]\n },\n options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false } }, cutout: '65%' }\n });\n\n \/\/ Bar chart\n if (barChart) barChart.destroy();\n barChart = new Chart(document.getElementById('barChart'), {\n type: 'bar',\n data: {\n labels: last7.map(k => dailyMap[k].label),\n datasets: [{ data: last7.map(k => dailyMap[k].total), backgroundColor: '#4f7cff', borderRadius: 6, borderSkipped: false }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false } },\n scales: {\n x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8b90a8', font: { family: 'Cairo' } } },\n y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8b90a8', font: { family: 'Cairo' } } }\n }\n }\n });\n\n \/\/ Table\n const listEl = document.getElementById('expenseList');\n const sorted = [...data].sort((a,b) => b.date.localeCompare(a.date) || b.time.localeCompare(a.time));\n if (sorted.length === 0) {\n listEl.innerHTML = '<div class=\"empty-state\">\u0645\u0641\u064a\u0634 \u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0641\u064a \u0627\u0644\u0641\u062a\u0631\u0629 \u062f\u064a<\/div>';\n } else {\n sorted.slice(0,20).forEach(r => {\n listEl.innerHTML += `\n <div class=\"expense-row\">\n <span class=\"cat-badge\" style=\"background:${getCatColor(r.category)}22;color:${getCatColor(r.category)}\">${r.category}<\/span>\n <div style=\"flex:1;min-width:0\">\n <div class=\"expense-desc\">${r.description || r.message || '\u2014'}<\/div>\n <\/div>\n <div style=\"text-align:left\">\n <div class=\"expense-amount\">${r.amount.toLocaleString('ar-EG')} ${r.currency}<\/div>\n <div class=\"expense-time\">${r.time}<\/div>\n <\/div>\n <\/div>`;\n });\n }\n}\n\nfunction getPrevData() {\n const now = new Date();\n return allData.filter(r => {\n if (!r.date) return false;\n const parts = r.date.split('\/');\n if (parts.length < 3) return false;\n let d;\n if (parts[0].length === 4) d = new Date(parts[0], parts[1]-1, parts[2]);\n else d = new Date(parts[2], parts[1]-1, parts[0]);\n if (isNaN(d)) return false;\n if (currentFilter === 'day') {\n const yesterday = new Date(now); yesterday.setDate(now.getDate()-1);\n return d.toDateString() === yesterday.toDateString();\n }\n if (currentFilter === 'week') {\n const s = new Date(now); s.setDate(now.getDate()-14);\n const e = new Date(now); e.setDate(now.getDate()-7);\n return d >= s && d < e;\n }\n if (currentFilter === 'month') {\n const prevMonth = now.getMonth() === 0 ? 11 : now.getMonth()-1;\n const prevYear = now.getMonth() === 0 ? now.getFullYear()-1 : now.getFullYear();\n return d.getMonth() === prevMonth && d.getFullYear() === prevYear;\n }\n return false;\n });\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \ud83d\udcb0 \u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u0627\u062f\u062e\u0644 \u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u0644\u0644\u062f\u062e\u0648\u0644 \u062f\u062e\u0648\u0644 \ud83d\udcb0 \u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0635\u0631\u0648\u0641\u0627\u062a \u062c\u0627\u0631\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644… \u0627\u0644\u064a\u0648\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639 \u0627\u0644\u0634\u0647\u0631 \u0643\u0644 \u0627\u0644\u0648\u0642\u062a \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4452","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/comments?post=4452"}],"version-history":[{"count":0,"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/pages\/4452\/revisions"}],"wp:attachment":[{"href":"https:\/\/stuff-x.net\/ar\/wp-json\/wp\/v2\/media?parent=4452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}