Create app.js

app.js

@@ -0,0 +1,364 @@
+/* =========
+   Storage
+========= */
+const STORAGE_KEY = "eq_receipts_v1";
+
+function loadRows() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRows(rows) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(rows));
+}
+
+/* =========
+   Helpers
+========= */
+function uid() {
+  return Math.random().toString(16).slice(2) + Date.now().toString(16);
+}
+
+function nowLabel() {
+  const d = new Date();
+  return d.toLocaleString("ar-SA");
+}
+
+function setDefaultDate() {
+  const d = new Date();
+  const yyyy = d.getFullYear();
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  document.getElementById("date").value = `${yyyy}-${mm}-${dd}`;
+}
+
+function sanitizePhone(v) {
+  return (v || "").replace(/[^\d+]/g, "").trim();
+}
+
+/* =========
+   Signature Canvas (draw)
+========= */
+const canvas = document.getElementById("sigCanvas");
+const ctx = canvas.getContext("2d");
+
+let drawing = false;
+let last = { x: 0, y: 0 };
+
+function getCanvasPoint(e) {
+  const rect = canvas.getBoundingClientRect();
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+  return {
+    x: (clientX - rect.left) * (canvas.width / rect.width),
+    y: (clientY - rect.top) * (canvas.height / rect.height),
+  };
+}
+
+function startDraw(e) {
+  drawing = true;
+  last = getCanvasPoint(e);
+  e.preventDefault();
+}
+
+function moveDraw(e) {
+  if (!drawing) return;
+  const p = getCanvasPoint(e);
+
+  ctx.lineWidth = 3;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = "#0f172a";
+
+  ctx.beginPath();
+  ctx.moveTo(last.x, last.y);
+  ctx.lineTo(p.x, p.y);
+  ctx.stroke();
+
+  last = p;
+  e.preventDefault();
+}
+
+function endDraw() {
+  drawing = false;
+}
+
+function clearSignature() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function signatureDataURL() {
+  // if empty => return ""
+  const blank = document.createElement("canvas");
+  blank.width = canvas.width;
+  blank.height = canvas.height;
+  if (canvas.toDataURL() === blank.toDataURL()) return "";
+  return canvas.toDataURL("image/png");
+}
+
+canvas.addEventListener("mousedown", startDraw);
+canvas.addEventListener("mousemove", moveDraw);
+window.addEventListener("mouseup", endDraw);
+
+canvas.addEventListener("touchstart", startDraw, { passive: false });
+canvas.addEventListener("touchmove", moveDraw, { passive: false });
+canvas.addEventListener("touchend", endDraw);
+
+document.getElementById("clearSigBtn").addEventListener("click", clearSignature);
+
+/* =========
+   UI Elements
+========= */
+const form = document.getElementById("entryForm");
+const editIdEl = document.getElementById("editId");
+const rowsCountEl = document.getElementById("rowsCount");
+const lastSavedEl = document.getElementById("lastSaved");
+const tableBody = document.getElementById("tableBody");
+const searchEl = document.getElementById("search");
+
+const inputs = {
+  companyName: document.getElementById("companyName"),
+  crNumber: document.getElementById("crNumber"),
+  receiverName: document.getElementById("receiverName"),
+  mobile: document.getElementById("mobile"),
+  email: document.getElementById("email"),
+  date: document.getElementById("date"),
+  signatureText: document.getElementById("signatureText"),
+};
+
+let rows = loadRows();
+
+/* =========
+   Render
+========= */
+function matchesSearch(row, q) {
+  if (!q) return true;
+  const hay = [
+    row.companyName,
+    row.crNumber,
+    row.receiverName,
+    row.mobile,
+    row.email,
+    row.date,
+  ].join(" ").toLowerCase();
+  return hay.includes(q.toLowerCase());
+}
+
+function render() {
+  const q = (searchEl.value || "").trim();
+  const filtered = rows.filter(r => matchesSearch(r, q));
+
+  tableBody.innerHTML = "";
+
+  filtered.forEach((r, idx) => {
+    const tr = document.createElement("tr");
+
+    const sigCell = (() => {
+      if (r.signatureText) return escapeHtml(r.signatureText);
+      if (r.signaturePng) return `<img src="${r.signaturePng}" alt="توقيع" style="height:36px; max-width:120px; object-fit:contain;"/>`;
+      return `<span style="color:#94a3b8">—</span>`;
+    })();
+
+    tr.innerHTML = `
+      <td class="col-n">${idx + 1}</td>
+      <td>${escapeHtml(r.companyName)}</td>
+      <td>${escapeHtml(r.crNumber)}</td>
+      <td>${escapeHtml(r.receiverName)}</td>
+      <td>${escapeHtml(r.mobile)}</td>
+      <td>${escapeHtml(r.email || "")}</td>
+      <td>${escapeHtml(r.date)}</td>
+      <td>${sigCell}</td>
+      <td class="col-actions">
+        <div class="row-actions">
+          <button class="btn btn-ghost" data-act="edit" data-id="${r.id}">تعديل</button>
+          <button class="btn btn-danger" data-act="delete" data-id="${r.id}">حذف</button>
+        </div>
+      </td>
+    `;
+    tableBody.appendChild(tr);
+  });
+
+  rowsCountEl.textContent = rows.length.toString();
+}
+
+function escapeHtml(str) {
+  return (str || "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+/* =========
+   Form Actions
+========= */
+function resetForm() {
+  editIdEl.value = "";
+  inputs.companyName.value = "";
+  inputs.crNumber.value = "";
+  inputs.receiverName.value = "";
+  inputs.mobile.value = "";
+  inputs.email.value = "";
+  setDefaultDate();
+  inputs.signatureText.value = "";
+  clearSignature();
+  document.getElementById("saveBtn").textContent = "حفظ";
+}
+
+document.getElementById("resetBtn").addEventListener("click", resetForm);
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  const payload = {
+    companyName: inputs.companyName.value.trim(),
+    crNumber: inputs.crNumber.value.trim(),
+    receiverName: inputs.receiverName.value.trim(),
+    mobile: sanitizePhone(inputs.mobile.value),
+    email: inputs.email.value.trim(),
+    date: inputs.date.value,
+    signatureText: inputs.signatureText.value.trim(),
+    signaturePng: "",
+  };
+
+  // if no signatureText, use canvas signature if any
+  if (!payload.signatureText) {
+    payload.signaturePng = signatureDataURL();
+  }
+
+  // Basic validation
+  if (!payload.companyName || !payload.crNumber || !payload.receiverName || !payload.mobile || !payload.date) {
+    alert("فضلاً أكمل الحقول المطلوبة.");
+    return;
+  }
+
+  const editingId = editIdEl.value;
+  if (editingId) {
+    const i = rows.findIndex(r => r.id === editingId);
+    if (i >= 0) {
+      rows[i] = { ...rows[i], ...payload };
+    }
+  } else {
+    rows.unshift({ id: uid(), createdAt: Date.now(), ...payload });
+  }
+
+  saveRows(rows);
+  lastSavedEl.textContent = nowLabel();
+  render();
+  resetForm();
+});
+
+/* =========
+   Row Buttons
+========= */
+tableBody.addEventListener("click", (e) => {
+  const btn = e.target.closest("button");
+  if (!btn) return;
+
+  const act = btn.getAttribute("data-act");
+  const id = btn.getAttribute("data-id");
+
+  if (act === "delete") {
+    const ok = confirm("هل تريد حذف هذا السجل؟");
+    if (!ok) return;
+    rows = rows.filter(r => r.id !== id);
+    saveRows(rows);
+    lastSavedEl.textContent = nowLabel();
+    render();
+  }
+
+  if (act === "edit") {
+    const r = rows.find(x => x.id === id);
+    if (!r) return;
+
+    editIdEl.value = r.id;
+    inputs.companyName.value = r.companyName || "";
+    inputs.crNumber.value = r.crNumber || "";
+    inputs.receiverName.value = r.receiverName || "";
+    inputs.mobile.value = r.mobile || "";
+    inputs.email.value = r.email || "";
+    inputs.date.value = r.date || "";
+    inputs.signatureText.value = r.signatureText || "";
+
+    clearSignature();
+    if (r.signaturePng && !r.signatureText) {
+      const img = new Image();
+      img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      img.src = r.signaturePng;
+    }
+
+    document.getElementById("saveBtn").textContent = "تحديث";
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+});
+
+/* =========
+   Search
+========= */
+searchEl.addEventListener("input", render);
+
+/* =========
+   Delete All
+========= */
+document.getElementById("deleteAllBtn").addEventListener("click", () => {
+  if (!rows.length) return alert("لا توجد سجلات للحذف.");
+  const ok = confirm("سيتم حذف جميع السجلات نهائيًا من هذا الجهاز. هل أنت متأكد؟");
+  if (!ok) return;
+  rows = [];
+  saveRows(rows);
+  lastSavedEl.textContent = nowLabel();
+  render();
+  resetForm();
+});
+
+/* =========
+   Export Excel
+========= */
+document.getElementById("exportBtn").addEventListener("click", () => {
+  if (!rows.length) return alert("لا توجد بيانات لتصديرها.");
+
+  // Prepare Excel rows (match your statement columns)
+  const data = rows.slice().reverse().map((r, idx) => ({
+    "م": idx + 1,
+    "اسم الشركة": r.companyName,
+    "السجل التجاري": r.crNumber,
+    "اسم المستلم": r.receiverName,
+    "رقم الجوال": r.mobile,
+    "البريد الإلكتروني": r.email || "",
+    "التاريخ": r.date,
+    "التوقيع": r.signatureText ? r.signatureText : (r.signaturePng ? "توقيع مرسوم" : ""),
+  }));
+
+  const ws = XLSX.utils.json_to_sheet(data);
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, "بيان الاستلام");
+
+  // Auto column widths
+  const colWidths = [
+    { wch: 4 }, { wch: 28 }, { wch: 18 }, { wch: 18 },
+    { wch: 14 }, { wch: 24 }, { wch: 12 }, { wch: 14 }
+  ];
+  ws["!cols"] = colWidths;
+
+  const d = new Date();
+  const yyyy = d.getFullYear();
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const filename = `بيان_استلام_${yyyy}-${mm}-${dd}.xlsx`;
+
+  XLSX.writeFile(wb, filename);
+});
+
+/* =========
+   Init
+========= */
+(function init() {
+  setDefaultDate();
+  lastSavedEl.textContent = "—";
+  render();
+})();