update: Major Overhaul to all subsystems

frontend/src/crm/quotations/QuotationList.jsx

@@ -0,0 +1,438 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import api from "../../api/client";
+
+const STATUS_STYLES = {
+  draft:    { bg: "var(--bg-card-hover)", color: "var(--text-secondary)" },
+  sent:     { bg: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" },
+  accepted: { bg: "var(--success-bg)",   color: "var(--success-text)" },
+  rejected: { bg: "var(--danger-bg)",    color: "var(--danger-text)" },
+};
+
+function fmt(n) {
+  const f = parseFloat(n) || 0;
+  return f.toLocaleString("el-GR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
+}
+
+function fmtDate(iso) {
+  if (!iso) return "—";
+  return iso.slice(0, 10);
+}
+
+// ── PDF thumbnail via PDF.js ──────────────────────────────────────────────────
+function loadPdfJs() {
+  return new Promise((res, rej) => {
+    if (window.pdfjsLib) { res(); return; }
+    if (document.getElementById("__pdfjs2__")) {
+      // Script already injected — wait for it
+      const check = setInterval(() => {
+        if (window.pdfjsLib) { clearInterval(check); res(); }
+      }, 50);
+      return;
+    }
+    const s = document.createElement("script");
+    s.id = "__pdfjs2__";
+    s.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
+    s.onload = () => {
+      window.pdfjsLib.GlobalWorkerOptions.workerSrc =
+        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
+      res();
+    };
+    s.onerror = rej;
+    document.head.appendChild(s);
+  });
+}
+
+function PdfThumbnail({ quotationId, onClick }) {
+  const canvasRef = useRef(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        await loadPdfJs();
+        const token = localStorage.getItem("access_token");
+        const url = `/api/crm/quotations/${quotationId}/pdf`;
+        const loadingTask = window.pdfjsLib.getDocument({
+          url,
+          httpHeaders: token ? { Authorization: `Bearer ${token}` } : {},
+        });
+        const pdf = await loadingTask.promise;
+        if (cancelled) return;
+        const page = await pdf.getPage(1);
+        if (cancelled) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const viewport = page.getViewport({ scale: 1 });
+        const scale = Math.min(72 / viewport.width, 96 / viewport.height);
+        const scaled = page.getViewport({ scale });
+        canvas.width = scaled.width;
+        canvas.height = scaled.height;
+        await page.render({ canvasContext: canvas.getContext("2d"), viewport: scaled }).promise;
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [quotationId]);
+
+  const style = {
+    width: 72,
+    height: 96,
+    borderRadius: 4,
+    overflow: "hidden",
+    flexShrink: 0,
+    cursor: "pointer",
+    border: "1px solid var(--border-primary)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--bg-primary)",
+  };
+
+  if (failed) {
+    return (
+      <div style={style} onClick={onClick} title="Open PDF">
+        <span style={{ fontSize: 28 }}>📑</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={style} onClick={onClick} title="Open PDF">
+      <canvas ref={canvasRef} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
+    </div>
+  );
+}
+
+function DraftThumbnail() {
+  return (
+    <div style={{
+      width: 72, height: 96, borderRadius: 4, flexShrink: 0,
+      border: "1px dashed var(--border-primary)",
+      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+      backgroundColor: "var(--bg-primary)", gap: 4,
+    }}>
+      <span style={{ fontSize: 18 }}>📄</span>
+      <span style={{ fontSize: 9, fontWeight: 700, color: "var(--text-muted)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
+        DRAFT
+      </span>
+    </div>
+  );
+}
+
+function PdfViewModal({ quotationId, quotationNumber, onClose }) {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const [loadingPdf, setLoadingPdf] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let objectUrl = null;
+    const token = localStorage.getItem("access_token");
+    fetch(`/api/crm/quotations/${quotationId}/pdf`, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+      .then(r => {
+        if (!r.ok) throw new Error("Failed to load PDF");
+        return r.blob();
+      })
+      .then(blob => {
+        objectUrl = URL.createObjectURL(blob);
+        setBlobUrl(objectUrl);
+      })
+      .catch(() => setError(true))
+      .finally(() => setLoadingPdf(false));
+    return () => { if (objectUrl) URL.revokeObjectURL(objectUrl); };
+  }, [quotationId]);
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed", inset: 0, zIndex: 1000,
+        backgroundColor: "rgba(0,0,0,0.88)",
+        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          backgroundColor: "var(--bg-card)", borderRadius: 10, overflow: "hidden",
+          width: "80vw", height: "88vh", display: "flex", flexDirection: "column",
+          boxShadow: "0 24px 64px rgba(0,0,0,0.5)",
+        }}
+      >
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "10px 16px", borderBottom: "1px solid var(--border-primary)", flexShrink: 0,
+        }}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text-heading)" }}>{quotationNumber}</span>
+          <div style={{ display: "flex", gap: 8 }}>
+            {blobUrl && (
+              <a
+                href={blobUrl}
+                download={`${quotationNumber}.pdf`}
+                style={{ padding: "4px 12px", fontSize: 12, borderRadius: 6, textDecoration: "none", backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+              >
+                Download
+              </a>
+            )}
+            <button
+              onClick={onClose}
+              style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: 22, cursor: "pointer", lineHeight: 1, padding: "0 4px" }}
+            >×</button>
+          </div>
+        </div>
+        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
+          {loadingPdf && <span style={{ color: "var(--text-muted)", fontSize: 13 }}>Loading PDF...</span>}
+          {error && <span style={{ color: "var(--danger-text)", fontSize: 13 }}>Failed to load PDF.</span>}
+          {blobUrl && (
+            <iframe
+              src={blobUrl}
+              style={{ width: "100%", height: "100%", border: "none" }}
+              title={quotationNumber}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function QuotationList({ customerId, onSend }) {
+  const navigate = useNavigate();
+  const [quotations, setQuotations] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [deleting, setDeleting] = useState(null);
+  const [regenerating, setRegenerating] = useState(null);
+  const [pdfPreview, setPdfPreview] = useState(null); // { id, number }
+
+  const load = useCallback(async () => {
+    if (!customerId) return;
+    setLoading(true);
+    try {
+      const res = await api.get(`/crm/quotations/customer/${customerId}`);
+      setQuotations(res.quotations || []);
+    } catch {
+      setQuotations([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [customerId]);
+
+  useEffect(() => { load(); }, [load]);
+
+  async function handleDelete(q) {
+    if (!window.confirm(`Delete quotation ${q.quotation_number}? This cannot be undone.`)) return;
+    setDeleting(q.id);
+    try {
+      await api.delete(`/crm/quotations/${q.id}`);
+      setQuotations(prev => prev.filter(x => x.id !== q.id));
+    } catch {
+      alert("Failed to delete quotation");
+    } finally {
+      setDeleting(null);
+    }
+  }
+
+  async function handleRegenerate(q) {
+    setRegenerating(q.id);
+    try {
+      const updated = await api.post(`/crm/quotations/${q.id}/regenerate-pdf`);
+      setQuotations(prev => prev.map(x => x.id === updated.id ? {
+        ...x,
+        nextcloud_pdf_url: updated.nextcloud_pdf_url,
+      } : x));
+    } catch {
+      alert("PDF regeneration failed");
+    } finally {
+      setRegenerating(null);
+    }
+  }
+
+  function openPdfModal(q) {
+    setPdfPreview({ id: q.id, number: q.quotation_number });
+  }
+
+  // Grid columns: thumbnail | number | title | date | status | total | actions
+  const GRID = "90px 120px minmax(0,1fr) 130px 130px 130px 120px";
+
+  return (
+    <div>
+      {/* PDF Preview Modal */}
+      {pdfPreview && (
+        <PdfViewModal
+          quotationId={pdfPreview.id}
+          quotationNumber={pdfPreview.number}
+          onClose={() => setPdfPreview(null)}
+        />
+      )}
+
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
+        <h2 style={{ fontSize: 15, fontWeight: 600, color: "var(--text-heading)" }}>Quotations</h2>
+        <button
+          onClick={() => navigate(`/crm/quotations/new?customer_id=${customerId}`)}
+          style={{
+            padding: "7px 16px", fontSize: 13, fontWeight: 600, borderRadius: 6,
+            border: "none", cursor: "pointer", backgroundColor: "var(--accent)", color: "#fff",
+          }}
+        >
+          + New Quotation
+        </button>
+      </div>
+
+      {loading && (
+        <div style={{ textAlign: "center", padding: 40, color: "var(--text-muted)", fontSize: 13 }}>Loading...</div>
+      )}
+
+      {!loading && quotations.length === 0 && (
+        <div style={{ textAlign: "center", padding: "40px 20px", backgroundColor: "var(--bg-card)", border: "1px solid var(--border-primary)", borderRadius: 8 }}>
+          <div style={{ fontSize: 32, marginBottom: 10 }}>📄</div>
+          <div style={{ fontSize: 14, fontWeight: 500, color: "var(--text-heading)", marginBottom: 6 }}>No quotations yet</div>
+          <div style={{ fontSize: 13, color: "var(--text-muted)", marginBottom: 16 }}>
+            Create a quotation to generate a professional PDF offer for this customer.
+          </div>
+          <button
+            onClick={() => navigate(`/crm/quotations/new?customer_id=${customerId}`)}
+            style={{ padding: "8px 20px", fontSize: 13, fontWeight: 600, borderRadius: 6, border: "none", cursor: "pointer", backgroundColor: "var(--accent)", color: "#fff" }}
+          >
+            + New Quotation
+          </button>
+        </div>
+      )}
+
+      {!loading && quotations.length > 0 && (
+        <div style={{ borderRadius: 8, border: "1px solid var(--border-primary)", overflow: "hidden" }}>
+          {/* Table header */}
+          <div style={{
+            display: "grid",
+            gridTemplateColumns: GRID,
+            backgroundColor: "var(--bg-card)",
+            borderBottom: "1px solid var(--border-primary)",
+            padding: "8px 16px",
+            alignItems: "center",
+            gap: 12,
+          }}>
+            <div />
+            {[
+              { label: "Number",  align: "left"   },
+              { label: "Title",   align: "left"   },
+              { label: "Date",    align: "center" },
+              { label: "Status",  align: "center" },
+              { label: "Total",   align: "right",  paddingRight: 16 },
+              { label: "Actions", align: "center" },
+            ].map(({ label, align, paddingRight }) => (
+              <div key={label} style={{ fontSize: 11, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.04em", textAlign: align, paddingRight }}>
+                {label}
+              </div>
+            ))}
+          </div>
+
+          {/* Rows */}
+          {quotations.map(q => (
+            <div
+              key={q.id}
+              style={{
+                display: "grid",
+                gridTemplateColumns: GRID,
+                gap: 12,
+                padding: "12px 16px",
+                borderBottom: "1px solid var(--border-secondary)",
+                alignItems: "center",
+                minHeight: 110,
+                backgroundColor: "var(--bg-card)",
+              }}
+              onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--bg-card-hover)"}
+              onMouseLeave={e => e.currentTarget.style.backgroundColor = "var(--bg-card)"}
+            >
+              {/* Thumbnail — click opens modal if PDF exists */}
+              <div>
+                {q.nextcloud_pdf_url ? (
+                  <PdfThumbnail quotationId={q.id} onClick={() => openPdfModal(q)} />
+                ) : (
+                  <DraftThumbnail />
+                )}
+              </div>
+
+              {/* Number */}
+              <div style={{ fontFamily: "monospace", fontSize: 13, fontWeight: 600, color: "var(--text-primary)" }}>
+                {q.quotation_number}
+              </div>
+
+              {/* Title + subtitle */}
+              <div style={{ overflow: "hidden", paddingRight: 8 }}>
+                <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {q.title || <span style={{ color: "var(--text-muted)", fontStyle: "italic", fontWeight: 400 }}>Untitled</span>}
+                </div>
+                {q.subtitle && (
+                  <div style={{ fontSize: 12, color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }}>
+                    {q.subtitle}
+                  </div>
+                )}
+              </div>
+
+              {/* Date */}
+              <div style={{ fontSize: 12, color: "var(--text-secondary)", textAlign: "center" }}>
+                {fmtDate(q.created_at)}
+              </div>
+
+              {/* Status badge */}
+              <div style={{ textAlign: "center" }}>
+                <span style={{
+                  display: "inline-block", padding: "2px 10px", borderRadius: 20,
+                  fontSize: 11, fontWeight: 600,
+                  backgroundColor: STATUS_STYLES[q.status]?.bg || "var(--bg-card-hover)",
+                  color: STATUS_STYLES[q.status]?.color || "var(--text-secondary)",
+                }}>
+                  {q.status}
+                </span>
+              </div>
+
+              {/* Total */}
+              <div style={{ fontSize: 16, fontWeight: 600, color: "var(--success-text)", textAlign: "right", paddingRight: 16 }}>
+                {fmt(q.final_total)}
+              </div>
+
+              {/* Actions — Edit + Delete same width; Gen PDF if no PDF yet */}
+              <div style={{ display: "flex", flexDirection: "column", gap: 5, alignItems: "stretch", paddingLeft: 25, paddingRight: 25 }}>
+                {!q.nextcloud_pdf_url && (
+                  <button
+                    onClick={() => handleRegenerate(q)}
+                    disabled={regenerating === q.id}
+                    style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-muted)", whiteSpace: "nowrap", textAlign: "center" }}
+                  >
+                    {regenerating === q.id ? "..." : "Gen PDF"}
+                  </button>
+                )}
+
+                <button
+                  onClick={() => navigate(`/crm/quotations/${q.id}`)}
+                  style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--text-secondary)", whiteSpace: "nowrap", textAlign: "center" }}
+                >
+                  Edit
+                </button>
+
+                <button
+                  onClick={() => onSend && onSend(q)}
+                  style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--accent)", whiteSpace: "nowrap", textAlign: "center" }}
+                >
+                  Send
+                </button>
+
+                <button
+                  onClick={() => handleDelete(q)}
+                  disabled={deleting === q.id}
+                  style={{ padding: "4px 10px", fontSize: 11, fontWeight: 500, borderRadius: 5, border: "1px solid var(--border-primary)", cursor: "pointer", backgroundColor: "transparent", color: "var(--danger-text)", whiteSpace: "nowrap", textAlign: "center" }}
+                >
+                  {deleting === q.id ? "..." : "Delete"}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}