Skip to content

feat: Invoice document-style card layout #310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
melvincarvalho merged 1 commit into from
Jun 11, 2026
Merged

feat: Invoice document-style card layout #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4057,3 +4057,145 @@ footer a:hover { color: var(--accent-2); }
.order-conf-label { font-size: 1.15rem; }
.order-summary-box { padding: .8rem; }
}

/* ── INVOICE (real invoice document) ── */
.card.invoice-doc {
background: var(--card);
border-radius: var(--radius);
font-family: var(--font);
}
.card.invoice-doc .hd.hidden { display: none; }

.inv-header {
padding: 1.8rem 1.5rem 1rem;
}
.inv-label {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: .18em;
color: var(--ink);
text-transform: uppercase;
}
.inv-number {
font-family: var(--mono);
font-size: .85rem;
color: var(--muted);
margin-top: .3rem;
letter-spacing: .02em;
}

.inv-parties {
display: flex;
gap: 1rem;
padding: 0 1.5rem;
margin-bottom: 1.2rem;
}
.inv-party {
flex: 1;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: .8rem 1rem;
}
.inv-party-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted-2);
font-weight: 600;
margin-bottom: .25rem;
}
.inv-party-name {
font-size: .92rem;
font-weight: 600;
color: var(--ink);
}

.inv-amount-block {
text-align: center;
padding: 1.4rem 1.5rem;
margin: 0 1.5rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.inv-amount-label {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted-2);
font-weight: 600;
margin-bottom: .3rem;
}
.inv-amount-val {
font-size: 2.4rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -.02em;
line-height: 1.1;
}
.inv-due-date {
font-size: .82rem;
color: var(--muted);
margin-top: .35rem;
}

/* Stamped-look status pill */
.inv-status-stamp {
display: inline-block;
margin: 1.2rem auto 0;
padding: .4rem 1.3rem;
font-size: .78rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
border: 2.5px solid;
border-radius: 6px;
transform: rotate(-3deg);
opacity: .85;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.inv-status-paid {
color: #166534;
border-color: #166534;
background: rgba(22,101,52,.06);
}
.inv-status-due {
color: #92400e;
border-color: #92400e;
background: rgba(146,64,14,.06);
}
.inv-status-overdue {
color: #991b1b;
border-color: #991b1b;
background: rgba(153,27,27,.06);
}

.inv-notes {
padding: 1rem 1.5rem;
margin-top: .8rem;
}
.inv-notes-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted-2);
font-weight: 600;
margin-bottom: .3rem;
}
.inv-notes-body {
font-size: .84rem;
color: var(--muted);
line-height: 1.55;
}

@media (max-width: 480px) {
.inv-header { padding: 1.2rem 1rem .6rem; }
.inv-label { font-size: 1.3rem; }
.inv-parties { flex-direction: column; padding: 0 1rem; }
.inv-amount-block { margin: 0 1rem; }
.inv-amount-val { font-size: 1.9rem; }
.inv-notes { padding: 1rem; }
}
101 changes: 101 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2426,6 +2426,107 @@
handled.add("expectedArrivalUntil"); handled.add("itemShipped"); handled.add("deliveryAddress");
}

// ── INVOICE (real invoice document) ──
if (cfg.type === "Invoice") {
const card = document.querySelector(".card");
if (card) card.classList.add("invoice-doc");

// Hide normal header
const hd = document.querySelector(".hd");
if (hd) hd.classList.add("hidden");

// Remove generic hero if present
const heroMount = document.getElementById("hero-mount");
if (heroMount) heroMount.querySelector('.hero')?.remove();

// ── INVOICE header: big spaced caps + invoice number ──
const invHeader = document.createElement("div"); invHeader.className = "inv-header";
const invLabel = document.createElement("div"); invLabel.className = "inv-label";
invLabel.textContent = "INVOICE";
invHeader.appendChild(invLabel);

const invNum = data["name"];
if (invNum) {
const numEl = document.createElement("div"); numEl.className = "inv-number";
numEl.textContent = invNum;
invHeader.appendChild(numEl);
}
view.appendChild(invHeader);

// ── From / To two-column block ──
const partiesRow = document.createElement("div"); partiesRow.className = "inv-parties";

const provider = data["provider"];
if (provider) {
const from = document.createElement("div"); from.className = "inv-party";
from.innerHTML = "<div class=\"inv-party-label\">From</div><div class=\"inv-party-name\">" + provider + "</div>";
partiesRow.appendChild(from);
}

const customer = data["customer"];
if (customer) {
const to = document.createElement("div"); to.className = "inv-party";
to.innerHTML = "<div class=\"inv-party-label\">To</div><div class=\"inv-party-name\">" + customer + "</div>";
partiesRow.appendChild(to);
}

if (partiesRow.children.length) view.appendChild(partiesRow);

// ── Amount due — HUGE ──
const totalDue = data["totalPaymentDue"];
if (totalDue) {
const amountBlock = document.createElement("div"); amountBlock.className = "inv-amount-block";
const amountLabel = document.createElement("div"); amountLabel.className = "inv-amount-label";
amountLabel.textContent = "Amount Due";
const amountVal = document.createElement("div"); amountVal.className = "inv-amount-val";
amountVal.textContent = totalDue;
amountBlock.appendChild(amountLabel);
amountBlock.appendChild(amountVal);

// Due date underneath
const dueDate = data["paymentDueDate"];
if (dueDate) {
const d = formatDate(dueDate);
const dueEl = document.createElement("div"); dueEl.className = "inv-due-date";
dueEl.textContent = "Due " + (d || dueDate);
amountBlock.appendChild(dueEl);
}

view.appendChild(amountBlock);
}

// ── Payment status — stamped pill ──
const status = data["paymentStatus"];
if (status) {
const pill = document.createElement("div"); pill.className = "inv-status-stamp";
const shortStatus = status.split("/").pop().replace("Payment", "");
pill.textContent = shortStatus.toUpperCase();
if (status.includes("Paid") || status.includes("Complete")) pill.classList.add("inv-status-paid");
else if (status.includes("Due") || status.includes("Pending")) pill.classList.add("inv-status-due");
else if (status.includes("Overdue") || status.includes("Cancelled")) pill.classList.add("inv-status-overdue");
else pill.classList.add("inv-status-due");
view.appendChild(pill);
}

// ── Description as notes ──
const desc = data["description"];
if (desc) {
const notes = document.createElement("div"); notes.className = "inv-notes";
const notesLabel = document.createElement("div"); notesLabel.className = "inv-notes-label";
notesLabel.textContent = "Notes";
const notesBody = document.createElement("div"); notesBody.className = "inv-notes-body";
notesBody.textContent = desc;
notes.appendChild(notesLabel);
notes.appendChild(notesBody);
view.appendChild(notes);
}

handled.add("name"); handled.add("image"); handled.add("description");
handled.add("totalPaymentDue"); handled.add("paymentDueDate");
handled.add("paymentStatus");
handled.add("provider"); handled.add("customer");
}

// ── ORDER (confirmation email card) ──
if (cfg.type === "Order") {
const card = document.querySelector(".card");
Expand Down
Loading