| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>الإقرارات</title> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet"> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script> |
|
|
| <style> |
| :root{ |
| --gastat-green:#53CD3F; |
| --gastat-blue:#00B2DF; |
| --gastat-purple:#4137A8; |
| --gastat-gray:#8492A2; |
| |
| --bg:#071321; |
| --card:#0b1d34; |
| --card2:#081a2f; |
| --text:#eef6ff; |
| --muted:#c3d1ea; |
| --line:rgba(255,255,255,.12); |
| --shadow: 0 18px 60px rgba(0,0,0,.35); |
| --radius:18px; |
| |
| --warn:#f59e0b; |
| --bad:#ef4444; |
| } |
| |
| *{ box-sizing:border-box; } |
| body{ |
| margin:0; |
| font-family:"Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif; |
| background: |
| radial-gradient(900px 520px at 15% 15%, rgba(0,178,223,.22), transparent 60%), |
| radial-gradient(900px 520px at 85% 10%, rgba(83,205,63,.18), transparent 60%), |
| radial-gradient(1000px 650px at 60% 70%, rgba(65,55,168,.18), transparent 60%), |
| var(--bg); |
| color:var(--text); |
| } |
| |
| .wrap{ max-width:1200px; margin:18px auto 60px; padding:0 14px; } |
| |
| .hero{ |
| border:1px solid rgba(255,255,255,.12); |
| box-shadow: var(--shadow); |
| border-radius: var(--radius); |
| padding:18px 18px 14px; |
| background: linear-gradient(135deg, rgba(0,178,223,.20), rgba(65,55,168,.18)); |
| position:relative; overflow:hidden; |
| } |
| .hero:before{ |
| content:""; |
| position:absolute; inset:-60px -80px auto auto; |
| width:260px; height:260px; |
| background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); |
| transform: rotate(12deg); |
| pointer-events:none; |
| } |
| |
| .creditLine{ |
| margin:0 0 6px; |
| text-align:center; |
| font-size:12px; |
| color: rgba(238,246,255,.9); |
| letter-spacing:.2px; |
| opacity:.92; |
| } |
| |
| .titleTop{ text-align:center; margin:0 0 8px; color:rgba(255,255,255,.9); font-size:16px; } |
| .titleBar{ |
| margin:0; text-align:center; font-size:18px; font-weight:800; |
| background: rgba(255,255,255,.06); |
| border:1px solid rgba(255,255,255,.12); |
| padding:12px 10px; border-radius:14px; |
| } |
| .subNote{ margin:10px 0 0; text-align:center; color:rgba(195,209,234,.92); font-size:13px; line-height:1.7; } |
| |
| .grid{ |
| display:grid; grid-template-columns: 1.2fr 1fr; gap:14px; margin-top:14px; |
| } |
| @media (max-width: 980px){ .grid{ grid-template-columns:1fr; } } |
| |
| .card{ |
| background: linear-gradient(180deg, rgba(11,29,52,.92), rgba(8,26,47,.92)); |
| border:1px solid rgba(255,255,255,.12); |
| box-shadow: var(--shadow); |
| border-radius: var(--radius); |
| padding:14px; |
| } |
| |
| .card h3{ margin:0 0 10px; font-size:15px; display:flex; gap:10px; align-items:center; } |
| .badge{ |
| font-size:12px; padding:4px 10px; border-radius:999px; |
| border:1px solid rgba(255,255,255,.16); |
| background: rgba(255,255,255,.06); |
| color: var(--muted); |
| } |
| |
| .formGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } |
| @media (max-width: 680px){ .formGrid{ grid-template-columns:1fr; } } |
| |
| label{ display:block; font-size:12px; color: var(--muted); margin:0 0 6px; } |
| input, select{ |
| width:100%; |
| padding:12px 12px; |
| border-radius:14px; |
| border:1px solid rgba(255,255,255,.14); |
| background: rgba(255,255,255,.06); |
| color: var(--text); |
| outline:none; |
| transition:.15s; |
| font-size:14px; |
| } |
| input:focus, select:focus{ |
| border-color: rgba(0,178,223,.55); |
| box-shadow: 0 0 0 4px rgba(0,178,223,.16); |
| } |
| input::placeholder{ color: rgba(195,209,234,.7); } |
| |
| .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } |
| .btn{ |
| border:0; border-radius:14px; padding:11px 14px; |
| font-family:inherit; font-weight:800; cursor:pointer; |
| display:inline-flex; align-items:center; gap:8px; |
| border:1px solid rgba(255,255,255,.14); |
| background: rgba(255,255,255,.08); |
| color: var(--text); |
| transition:.15s; |
| } |
| .btn:hover{ transform: translateY(-1px); } |
| .btn:active{ transform: translateY(0px); } |
| |
| .btn.primary{ |
| background: linear-gradient(135deg, rgba(83,205,63,.92), rgba(34,197,94,.78)); |
| border-color: rgba(83,205,63,.35); |
| } |
| .btn.export{ |
| background: linear-gradient(135deg, rgba(0,178,223,.92), rgba(65,55,168,.72)); |
| border-color: rgba(0,178,223,.35); |
| } |
| .btn.warn{ |
| background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(217,119,6,.82)); |
| border-color: rgba(245,158,11,.35); |
| } |
| .btn.danger{ |
| background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(220,38,38,.82)); |
| border-color: rgba(239,68,68,.35); |
| } |
| |
| .noteBox{ |
| margin-top:10px; |
| border-radius:14px; |
| border:1px solid rgba(255,255,255,.14); |
| background: rgba(0,178,223,.10); |
| padding:10px 12px; |
| color: rgba(238,246,255,.95); |
| font-size:13px; |
| line-height:1.7; |
| } |
| .noteBox.warn{ |
| background: rgba(245,158,11,.12); |
| border-color: rgba(245,158,11,.28); |
| } |
| |
| .signatureBox{ |
| width:100%; |
| height:180px; |
| background:#ffffff; |
| border-radius:14px; |
| border:2px dashed rgba(0,178,223,.6); |
| overflow:hidden; |
| position:relative; |
| } |
| .signatureBox canvas{ |
| width:100%; |
| height:100%; |
| display:block; |
| touch-action:none; |
| } |
| .sigActions{ |
| margin-top:8px; |
| text-align:left; |
| } |
| |
| .tableWrap{ |
| overflow:auto; |
| border-radius: var(--radius); |
| border:1px solid rgba(255,255,255,.12); |
| background: rgba(255,255,255,.04); |
| } |
| table{ width:100%; border-collapse:collapse; min-width:1100px; } |
| thead th{ |
| position:sticky; top:0; |
| background: rgba(255,255,255,.08); |
| backdrop-filter: blur(8px); |
| font-size:12px; color: rgba(238,246,255,.95); |
| text-align:center; |
| padding:10px 8px; |
| border-bottom:1px solid rgba(255,255,255,.12); |
| white-space:nowrap; |
| } |
| tbody td{ |
| font-size:13px; color: rgba(238,246,255,.92); |
| padding:10px 8px; |
| border-bottom:1px solid rgba(255,255,255,.08); |
| text-align:center; |
| vertical-align:middle; |
| white-space:nowrap; |
| } |
| tbody tr:hover{ background: rgba(255,255,255,.05); } |
| |
| .tinyBtn{ |
| padding:7px 10px; border-radius:12px; font-weight:800; font-size:12px; |
| border:1px solid rgba(255,255,255,.14); |
| background: rgba(255,255,255,.07); |
| color: var(--text); |
| cursor:pointer; |
| } |
| .tinyBtn.danger{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35); } |
| .tinyBtn.edit{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); } |
| |
| .statusRow{ |
| display:flex; align-items:center; justify-content:space-between; |
| gap:10px; flex-wrap:wrap; margin-bottom:10px; |
| } |
| .pill{ |
| font-size:12px; padding:6px 10px; border-radius:999px; |
| border:1px solid rgba(255,255,255,.14); |
| background: rgba(255,255,255,.06); |
| color: rgba(195,209,234,.95); |
| } |
| .searchBox input{ |
| width:320px; max-width:70vw; |
| padding:10px 12px; border-radius:999px; |
| } |
| |
| @media (max-width: 480px){ |
| .wrap{ padding:0 10px; } |
| .titleBar{ font-size:16px; } |
| .btn{ width:100%; justify-content:center; } |
| .searchBox input{ width:100%; } |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="wrap"> |
| <div class="hero"> |
| <p class="titleTop">"بيان استلام"</p> |
| <h1 class="titleBar">إدارة حالات الإقرارات وتوثيق الاستلام</h1> |
| <p class="creditLine">تصميم وإعداد: نوف الناصر</p> |
| <p class="subNote"> |
| أدخل البيانات ثم اختر الحالة. يتم الحفظ تلقائيًا ولا تختفي السجلات عند إغلاق الصفحة إلا بالحذف. |
| </p> |
| </div> |
|
|
| <div class="grid"> |
| |
| <div class="card"> |
| <h3>إدخال بيانات <span class="badge">يدوي + حفظ</span></h3> |
|
|
| <div class="formGrid"> |
| <div> |
| <label>اسم الشركة (مطلوب)</label> |
| <input id="company" type="text" placeholder="مثال: شركة ...." /> |
| </div> |
|
|
| <div> |
| <label>رقم السجل التجاري</label> |
| <input id="cr" type="text" inputmode="numeric" placeholder="مثال: 1010xxxxxx" /> |
| </div> |
|
|
| <div style="grid-column:1/-1"> |
| <label>الحالة</label> |
| <select id="status"> |
| <option value="RESPONDED">استجاب</option> |
| <option value="BRANCH_NO_SEPARATE">فرع ليس له حسابات مستقلة</option> |
| <option value="TEMP_CLOSED">مغلقة مؤقتًا</option> |
| <option value="PERM_CLOSED">مغلقة نهائيًا</option> |
| </select> |
| </div> |
|
|
| <div id="respondedBlock" style="grid-column:1/-1; display:none;"> |
| <div class="formGrid"> |
| <div style="grid-column:1/-1"> |
| <label>نوع الكيان عند الاستجابة</label> |
| <select id="respondedType"> |
| <option value="">— اختر —</option> |
| <option value="MAIN_CENTER">مركز رئيسي</option> |
| <option value="BRANCH_SEPARATE">فرع له حسابات مستقلة</option> |
| <option value="SINGLE">مفردة</option> |
| </select> |
| </div> |
|
|
| <div> |
| <label>اسم المستلم</label> |
| <input id="receiver" type="text" placeholder="الاسم الثلاثي" /> |
| </div> |
|
|
| <div> |
| <label>رقم الجوال</label> |
| <input id="mobile" type="tel" inputmode="numeric" placeholder="05xxxxxxxx أو 9665xxxxxxxx" /> |
| </div> |
|
|
| <div> |
| <label>البريد الإلكتروني</label> |
| <input id="email" type="email" placeholder="name@example.com" /> |
| </div> |
|
|
| <div> |
| <label>التاريخ</label> |
| <input id="date" type="date" /> |
| </div> |
|
|
| <div style="grid-column:1/-1"> |
| <label>التوقيع اليدوي</label> |
| <div class="signatureBox"> |
| <canvas id="signaturePad"></canvas> |
| </div> |
| <div class="sigActions"> |
| <button type="button" class="tinyBtn" id="clearSignature">مسح التوقيع</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="noteBox" id="respondedHelp"> |
| عند اختيار <b>استجاب</b> يُفضّل تحديد (مركز/فرع مستقل/مفردة)، ثم تُكمل بيانات الاستلام إن توفرت. |
| </div> |
| </div> |
|
|
| <div id="photoNote" style="grid-column:1/-1; display:none;"> |
| <div class="noteBox warn"> |
| 📸 <b>ملاحظة:</b> التقط صورة وسترفق لاحقًا بالنظام من قبلك. |
| </div> |
| </div> |
|
|
| <div style="grid-column:1/-1"> |
| <label>ملاحظة إضافية (اختياري)</label> |
| <input id="extraNote" type="text" placeholder="أي تعليق أو توضيح..." /> |
| </div> |
| </div> |
|
|
| <div class="actions"> |
| <button class="btn primary" id="saveBtn">💾 حفظ</button> |
| <button class="btn warn" id="clearFormBtn">🧹 تفريغ الحقول</button> |
| <button class="btn export" id="exportBtn">📤 تصدير Excel</button> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <h3>إدارة السجلات <span class="badge">بحث + حذف</span></h3> |
|
|
| <div class="statusRow"> |
| <div class="pill" id="countPill">عدد السجلات: 0</div> |
| <div class="searchBox"> |
| <input id="search" type="text" placeholder="🔎 بحث: شركة / سجل / حالة / جوال / بريد" /> |
| </div> |
| </div> |
|
|
| <div class="actions"> |
| <button class="btn danger" id="deleteSelectedBtn">🗑️ حذف المحدد</button> |
| <button class="btn danger" id="deleteAllBtn">⚠️ حذف الكل</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="card" style="margin-top:14px;"> |
| <h3>الجدول</h3> |
|
|
| <div class="tableWrap"> |
| <table> |
| <thead> |
| <tr> |
| <th>تحديد</th> |
| <th>م</th> |
| <th>اسم الشركة</th> |
| <th>رقم السجل التجاري</th> |
| <th>الحالة</th> |
| <th>تفصيل الاستجابة</th> |
| <th>اسم المستلم</th> |
| <th>رقم الجوال</th> |
| <th>البريد الإلكتروني</th> |
| <th>التاريخ</th> |
| <th>التوقيع</th> |
| <th>ملاحظة</th> |
| <th>إجراءات</th> |
| </tr> |
| </thead> |
| <tbody id="tbody"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const STORAGE_KEY = "eq_records_v3"; |
| |
| const el = { |
| company: document.getElementById("company"), |
| cr: document.getElementById("cr"), |
| status: document.getElementById("status"), |
| respondedBlock: document.getElementById("respondedBlock"), |
| respondedType: document.getElementById("respondedType"), |
| receiver: document.getElementById("receiver"), |
| mobile: document.getElementById("mobile"), |
| email: document.getElementById("email"), |
| date: document.getElementById("date"), |
| extraNote: document.getElementById("extraNote"), |
| photoNote: document.getElementById("photoNote"), |
| |
| saveBtn: document.getElementById("saveBtn"), |
| clearFormBtn: document.getElementById("clearFormBtn"), |
| exportBtn: document.getElementById("exportBtn"), |
| |
| tbody: document.getElementById("tbody"), |
| countPill: document.getElementById("countPill"), |
| search: document.getElementById("search"), |
| |
| deleteSelectedBtn: document.getElementById("deleteSelectedBtn"), |
| deleteAllBtn: document.getElementById("deleteAllBtn"), |
| }; |
| |
| const canvas = document.getElementById("signaturePad"); |
| const ctx = canvas.getContext("2d"); |
| let drawing = false; |
| let signatureData = null; |
| let scaledOnce = false; |
| |
| let records = []; |
| let editId = null; |
| |
| function todayISO(){ |
| const d = new Date(); |
| const y = d.getFullYear(); |
| const m = String(d.getMonth()+1).padStart(2,"0"); |
| const day = String(d.getDate()).padStart(2,"0"); |
| return `${y}-${m}-${day}`; |
| } |
| |
| function escapeHtml(str){ |
| return String(str ?? "") |
| .replaceAll("&","&") |
| .replaceAll("<","<") |
| .replaceAll(">",">") |
| .replaceAll('"',""") |
| .replaceAll("'","'"); |
| } |
| |
| function sanitize(s){ return String(s ?? "").trim(); } |
| |
| function load(){ |
| try{ |
| const raw = localStorage.getItem(STORAGE_KEY); |
| records = raw ? JSON.parse(raw) : []; |
| }catch(e){ |
| records = []; |
| } |
| } |
| function persist(){ |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(records)); |
| } |
| |
| function isValidEmail(v){ |
| if(!v) return true; |
| return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); |
| } |
| |
| function normalizeMobile(v){ |
| return sanitize(v).replace(/\s+/g,"").replace(/[^\d+]/g,""); |
| } |
| |
| function isValidMobile(v){ |
| if(!v) return true; |
| const x = normalizeMobile(v); |
| return /^(05\d{8}|9665\d{8}|\+9665\d{8})$/.test(x); |
| } |
| |
| function statusLabel(code){ |
| switch(code){ |
| case "RESPONDED": return "استجاب"; |
| case "BRANCH_NO_SEPARATE": return "فرع ليس له حسابات مستقلة"; |
| case "TEMP_CLOSED": return "مغلقة مؤقتًا"; |
| case "PERM_CLOSED": return "مغلقة نهائيًا"; |
| default: return code || ""; |
| } |
| } |
| |
| function respondedTypeLabel(code){ |
| switch(code){ |
| case "MAIN_CENTER": return "مركز رئيسي"; |
| case "BRANCH_SEPARATE": return "فرع له حسابات مستقلة"; |
| case "SINGLE": return "مفردة"; |
| default: return ""; |
| } |
| } |
| |
| function updateConditionalUI(){ |
| const s = el.status.value; |
| const isResponded = (s === "RESPONDED"); |
| const needsPhoto = (s === "TEMP_CLOSED" || s === "PERM_CLOSED"); |
| |
| el.respondedBlock.style.display = isResponded ? "block" : "none"; |
| el.photoNote.style.display = needsPhoto ? "block" : "none"; |
| |
| if(!isResponded){ |
| el.respondedType.value = ""; |
| if(el.receiver) el.receiver.value = ""; |
| if(el.mobile) el.mobile.value = ""; |
| if(el.email) el.email.value = ""; |
| clearSignaturePad(); |
| } |
| } |
| |
| function resetForm(){ |
| el.company.value = ""; |
| el.cr.value = ""; |
| el.status.value = "RESPONDED"; |
| el.respondedType.value = ""; |
| if(el.receiver) el.receiver.value = ""; |
| if(el.mobile) el.mobile.value = ""; |
| if(el.email) el.email.value = ""; |
| el.date.value = todayISO(); |
| el.extraNote.value = ""; |
| editId = null; |
| el.saveBtn.textContent = "💾 حفظ"; |
| clearSignaturePad(); |
| updateConditionalUI(); |
| } |
| |
| function fillForm(rec){ |
| el.company.value = rec.company || ""; |
| el.cr.value = rec.cr || ""; |
| el.status.value = rec.status || "RESPONDED"; |
| el.respondedType.value = rec.respondedType || ""; |
| if(el.receiver) el.receiver.value = rec.receiver || ""; |
| if(el.mobile) el.mobile.value = rec.mobile || ""; |
| if(el.email) el.email.value = rec.email || ""; |
| el.date.value = rec.date || todayISO(); |
| el.extraNote.value = rec.extraNote || ""; |
| editId = rec.id; |
| el.saveBtn.textContent = "✅ حفظ التعديل"; |
| updateConditionalUI(); |
| |
| clearSignaturePad(); |
| if(rec.signature){ |
| const img = new Image(); |
| img.onload = () => { |
| const rect = canvas.getBoundingClientRect(); |
| ctx.drawImage(img, 0, 0, rect.width, rect.height); |
| signatureData = rec.signature; |
| }; |
| img.src = rec.signature; |
| } |
| |
| window.scrollTo({ top: 0, behavior: "smooth" }); |
| } |
| |
| function filteredRecords(){ |
| const q = sanitize(el.search.value).toLowerCase(); |
| if(!q) return records; |
| return records.filter(r => { |
| const hay = [ |
| r.company, r.cr, statusLabel(r.status), respondedTypeLabel(r.respondedType), |
| r.receiver, r.mobile, r.email, r.date, r.note, r.extraNote |
| ].join(" ").toLowerCase(); |
| return hay.includes(q); |
| }); |
| } |
| |
| function render(){ |
| const list = filteredRecords(); |
| el.tbody.innerHTML = ""; |
| |
| list.forEach((r, idx) => { |
| const tr = document.createElement("tr"); |
| tr.innerHTML = ` |
| <td><input type="checkbox" data-id="${r.id}" class="rowCheck"></td> |
| <td>${idx + 1}</td> |
| <td>${escapeHtml(r.company)}</td> |
| <td>${escapeHtml(r.cr)}</td> |
| <td>${escapeHtml(statusLabel(r.status))}</td> |
| <td>${escapeHtml(respondedTypeLabel(r.respondedType))}</td> |
| <td>${escapeHtml(r.receiver)}</td> |
| <td>${escapeHtml(r.mobile)}</td> |
| <td>${escapeHtml(r.email)}</td> |
| <td>${escapeHtml(r.date)}</td> |
| <td>${r.signature ? `<img src="${r.signature}" style="height:50px; background:#fff; border-radius:8px; padding:2px;">` : ""}</td> |
| <td>${escapeHtml(r.note || "")}${r.extraNote ? " | " + escapeHtml(r.extraNote) : ""}</td> |
| <td> |
| <button class="tinyBtn edit" data-action="edit" data-id="${r.id}">تعديل</button> |
| <button class="tinyBtn danger" data-action="delete" data-id="${r.id}">حذف</button> |
| </td> |
| `; |
| el.tbody.appendChild(tr); |
| }); |
| |
| el.countPill.textContent = `عدد السجلات: ${records.length}`; |
| } |
| |
| function buildAutoNote(status){ |
| if(status === "BRANCH_NO_SEPARATE"){ |
| return "فرع ليس له حسابات مستقلة"; |
| } |
| if(status === "TEMP_CLOSED"){ |
| return "مغلقة مؤقتًا - التقط صورة وسترفق لاحقًا بالنظام من قبلك"; |
| } |
| if(status === "PERM_CLOSED"){ |
| return "مغلقة نهائيًا - التقط صورة وسترفق لاحقًا بالنظام من قبلك"; |
| } |
| return ""; |
| } |
| |
| function resizeCanvas(){ |
| const ratio = window.devicePixelRatio || 1; |
| const rect = canvas.getBoundingClientRect(); |
| |
| const oldData = signatureData; |
| |
| canvas.width = Math.max(1, Math.floor(rect.width * ratio)); |
| canvas.height = Math.max(1, Math.floor(rect.height * ratio)); |
| |
| ctx.setTransform(ratio, 0, 0, ratio, 0, 0); |
| ctx.lineWidth = 2; |
| ctx.lineCap = "round"; |
| ctx.strokeStyle = "#000"; |
| |
| if(oldData){ |
| const img = new Image(); |
| img.onload = () => { |
| ctx.drawImage(img, 0, 0, rect.width, rect.height); |
| signatureData = oldData; |
| }; |
| img.src = oldData; |
| } |
| } |
| |
| function clearSignaturePad(){ |
| const rect = canvas.getBoundingClientRect(); |
| ctx.clearRect(0, 0, rect.width, rect.height); |
| signatureData = null; |
| } |
| |
| function getPos(e){ |
| const rect = canvas.getBoundingClientRect(); |
| if(e.touches && e.touches[0]){ |
| return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top }; |
| } |
| return { x: e.clientX - rect.left, y: e.clientY - rect.top }; |
| } |
| |
| function startDraw(e){ |
| drawing = true; |
| const p = getPos(e); |
| ctx.beginPath(); |
| ctx.moveTo(p.x, p.y); |
| } |
| |
| function draw(e){ |
| if(!drawing) return; |
| e.preventDefault(); |
| const p = getPos(e); |
| ctx.lineTo(p.x, p.y); |
| ctx.stroke(); |
| } |
| |
| function endDraw(){ |
| if(!drawing) return; |
| drawing = false; |
| signatureData = canvas.toDataURL("image/png"); |
| } |
| |
| canvas.addEventListener("mousedown", startDraw); |
| canvas.addEventListener("mousemove", draw); |
| canvas.addEventListener("mouseup", endDraw); |
| canvas.addEventListener("mouseleave", endDraw); |
| |
| canvas.addEventListener("touchstart", startDraw, { passive:false }); |
| canvas.addEventListener("touchmove", draw, { passive:false }); |
| canvas.addEventListener("touchend", endDraw); |
| |
| document.getElementById("clearSignature").addEventListener("click", clearSignaturePad); |
| |
| function save(){ |
| const company = sanitize(el.company.value); |
| if(!company){ |
| alert("فضلاً أدخل اسم الشركة (مطلوب)."); |
| return; |
| } |
| |
| const status = el.status.value; |
| const cr = sanitize(el.cr.value); |
| |
| const respondedType = sanitize(el.respondedType.value); |
| const receiver = el.receiver ? sanitize(el.receiver.value) : ""; |
| const mobileRaw = el.mobile ? sanitize(el.mobile.value) : ""; |
| const mobile = normalizeMobile(mobileRaw); |
| const email = el.email ? sanitize(el.email.value) : ""; |
| const date = el.date.value || todayISO(); |
| const extraNote = sanitize(el.extraNote.value); |
| |
| if(email && !isValidEmail(email)){ |
| alert("البريد الإلكتروني غير صحيح."); |
| return; |
| } |
| if(mobileRaw && !isValidMobile(mobileRaw)){ |
| alert("رقم الجوال غير صحيح. مثال: 05xxxxxxxx أو 9665xxxxxxxx أو +9665xxxxxxxx"); |
| return; |
| } |
| |
| let note = buildAutoNote(status); |
| |
| const rec = { |
| id: editId ?? crypto.randomUUID(), |
| company, |
| cr, |
| status, |
| respondedType: status === "RESPONDED" ? respondedType : "", |
| receiver: status === "RESPONDED" ? receiver : "", |
| mobile: status === "RESPONDED" ? mobile : "", |
| email: status === "RESPONDED" ? email : "", |
| date: status === "RESPONDED" ? date : (date || todayISO()), |
| signature: (status === "RESPONDED") ? (signatureData || "") : "", |
| note, |
| extraNote, |
| updatedAt: new Date().toISOString() |
| }; |
| |
| if(editId){ |
| const i = records.findIndex(x => x.id === editId); |
| if(i !== -1) records[i] = { ...records[i], ...rec }; |
| }else{ |
| records.push(rec); |
| } |
| |
| persist(); |
| render(); |
| resetForm(); |
| } |
| |
| function deleteOne(id){ |
| const r = records.find(x => x.id === id); |
| if(!r) return; |
| if(!confirm(`تأكيد حذف سجل الشركة: ${r.company} ؟`)) return; |
| records = records.filter(x => x.id !== id); |
| persist(); |
| render(); |
| if(editId === id) resetForm(); |
| } |
| |
| function deleteSelected(){ |
| const checks = [...document.querySelectorAll(".rowCheck:checked")]; |
| if(checks.length === 0){ alert("لم يتم تحديد أي سجلات."); return; } |
| if(!confirm(`تأكيد حذف (${checks.length}) سجل/سجلات؟`)) return; |
| const ids = new Set(checks.map(c => c.getAttribute("data-id"))); |
| records = records.filter(r => !ids.has(r.id)); |
| persist(); |
| render(); |
| if(editId && ids.has(editId)) resetForm(); |
| } |
| |
| function deleteAll(){ |
| if(records.length === 0){ alert("لا توجد سجلات للحذف."); return; } |
| if(!confirm("تحذير: سيتم حذف جميع السجلات نهائيًا من هذه الصفحة. هل أنت متأكد؟")) return; |
| records = []; |
| persist(); |
| render(); |
| resetForm(); |
| } |
| |
| function exportExcel(){ |
| const list = filteredRecords(); |
| if(list.length === 0){ alert("لا توجد بيانات للتصدير."); return; } |
| |
| const rows = list.map((r, idx) => ({ |
| "م": idx + 1, |
| "اسم الشركة": r.company, |
| "رقم السجل التجاري": r.cr, |
| "الحالة": statusLabel(r.status), |
| "تفصيل الاستجابة": respondedTypeLabel(r.respondedType), |
| "اسم المستلم": r.receiver, |
| "رقم الجوال": r.mobile, |
| "البريد الإلكتروني": r.email, |
| "التاريخ": r.date, |
| "التوقيع": r.signature ? "مرفق (صورة)" : "", |
| "ملاحظة": (r.note || "") + (r.extraNote ? " | " + r.extraNote : "") |
| })); |
| |
| const ws = XLSX.utils.json_to_sheet(rows, { cellDates: true }); |
| |
| ws["!cols"] = [ |
| { wch: 5 }, |
| { wch: 32 }, |
| { wch: 18 }, |
| { wch: 18 }, |
| { wch: 20 }, |
| { wch: 22 }, |
| { wch: 18 }, |
| { wch: 28 }, |
| { wch: 14 }, |
| { wch: 14 }, |
| { wch: 42 }, |
| ]; |
| |
| const wb = XLSX.utils.book_new(); |
| XLSX.utils.book_append_sheet(wb, ws, "الإقرارات"); |
| XLSX.writeFile(wb, `EQ_${todayISO()}.xlsx`); |
| } |
| |
| |
| el.status.addEventListener("change", updateConditionalUI); |
| el.saveBtn.addEventListener("click", save); |
| el.clearFormBtn.addEventListener("click", resetForm); |
| el.exportBtn.addEventListener("click", exportExcel); |
| el.search.addEventListener("input", render); |
| el.deleteSelectedBtn.addEventListener("click", deleteSelected); |
| el.deleteAllBtn.addEventListener("click", deleteAll); |
| |
| el.tbody.addEventListener("click", (e) => { |
| const btn = e.target.closest("button"); |
| if(!btn) return; |
| const action = btn.getAttribute("data-action"); |
| const id = btn.getAttribute("data-id"); |
| if(action === "delete") deleteOne(id); |
| if(action === "edit"){ |
| const rec = records.find(x => x.id === id); |
| if(rec) fillForm(rec); |
| } |
| }); |
| |
| |
| el.date.value = todayISO(); |
| load(); |
| updateConditionalUI(); |
| render(); |
| |
| setTimeout(() => { resizeCanvas(); }, 0); |
| window.addEventListener("resize", () => { resizeCanvas(); }); |
| </script> |
| </body> |
| </html> |
