feat: add invoice creation logic with SQLAlchemy

Dockerfile

@@ -1,32 +1,21 @@
 FROM python:3.10-slim
 
 USER root
-# Install system dependencies for Postgres and building extensions
 RUN apt-get update && apt-get install -y libpq-dev gcc && rm -rf /var/lib/apt/lists/*
 
-# Setup user
 RUN useradd -m -u 1000 user
 USER user
 ENV HOME=/home/user \
     PATH=/home/user/.local/bin:$PATH
 
-# We set the app root
 WORKDIR $HOME/app
 
-# 1. Copy requirements from the backend folder
+# 1. Copy requirements and install
 COPY --chown=user:user requirements.txt .
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
-# 2. Copy everything from the backend folder into the 'backend' subfolder
-COPY --chown=user:user . ./backend
+# 2. Copy everything (including the moved frontend folder)
+COPY --chown=user:user . .
 
-# 3. IMPORTANT: Hugging Face builds from the root of your repo.
-# If 'frontend' is next to 'backend', we ensure both are accessible.
-# If you are pushing from the root, use:
-COPY --chown=user:user ../frontend ./frontend
-
-# 4. Set the working directory to where main.py lives
-WORKDIR $HOME/app/backend
-
-# 5. Run the app
+# 3. Run the app
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

frontend/css/style.css

@@ -0,0 +1,262 @@
+/* ─────────────────────────────────────────
+   css/style.css  —  SmiloCAD Invoice System
+   ───────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --blue-deep:   #1B3A6B;
+  --blue-mid:    #2563B0;
+  --blue-light:  #EBF3FF;
+  --blue-accent: #3B82F6;
+  --teal:        #0891B2;
+  --teal-light:  #E0F7FA;
+  --gray-50:     #F8FAFC;
+  --gray-100:    #F1F5F9;
+  --gray-200:    #E2E8F0;
+  --gray-300:    #CBD5E1;
+  --gray-400:    #94A3B8;
+  --gray-500:    #64748B;
+  --gray-700:    #334155;
+  --gray-900:    #0F172A;
+  --white:       #FFFFFF;
+  --green:       #10B981;
+  --green-light: #D1FAE5;
+  --red:         #EF4444;
+  --red-light:   #FEE2E2;
+  --amber:       #F59E0B;
+  --amber-light: #FEF3C7;
+  --shadow-sm:   0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
+  --shadow:      0 4px 16px rgba(27,58,107,0.10);
+  --shadow-lg:   0 8px 40px rgba(27,58,107,0.14);
+  --radius:      10px;
+  --radius-lg:   16px;
+}
+
+body {
+  font-family: 'Nunito', sans-serif;
+  background: var(--gray-100);
+  color: var(--gray-900);
+  min-height: 100vh;
+}
+
+/* ─── TOP BAR ─── */
+.topbar {
+  background: linear-gradient(135deg, var(--blue-deep) 0%, #1e4d8c 60%, var(--teal) 100%);
+  padding: 0 2rem;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 2px 20px rgba(27,58,107,0.35);
+  position: sticky;
+  top: 0;
+  z-index: 200;
+}
+.topbar-brand    { display: flex; align-items: center; gap: 12px; }
+.topbar-icon     { width: 38px; height: 38px; background: rgba(255,255,255,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid rgba(255,255,255,0.25); }
+.topbar-name     { font-family: 'Lora', serif; font-size: 1.12rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
+.topbar-sub      { font-size: 0.7rem; color: rgba(255,255,255,0.65); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1px; }
+.topbar-tabs     { display: flex; gap: 4px; }
+.topbar-tab      { padding: 7px 18px; border-radius: 7px; border: none; background: transparent; color: rgba(255,255,255,0.7); font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.18s; letter-spacing: 0.02em; }
+.topbar-tab:hover { background: rgba(255,255,255,0.12); color: #fff; }
+.topbar-tab.active { background: rgba(255,255,255,0.22); color: #fff; }
+.topbar-info     { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(255,255,255,0.65); }
+.topbar-dot      { width: 4px; height: 4px; background: rgba(255,255,255,0.35); border-radius: 50%; }
+
+/* ─── LAYOUT ─── */
+.app-body { padding: 2rem; max-width: 1080px; margin: 0 auto; }
+
+/* ─── INVOICE CARD ─── */
+.inv-card {
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  animation: fadeUp 0.35s ease;
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── INVOICE HEADER BAND ─── */
+.inv-header-band {
+  background: linear-gradient(135deg, var(--blue-deep) 0%, #1e4d8c 60%, var(--teal) 100%);
+  padding: 2rem 2.5rem;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 2rem;
+  align-items: center;
+}
+.lab-title       { font-family: 'Lora', serif; font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; line-height: 1.2; }
+.lab-meta        { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
+.lab-meta-item   { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: rgba(255,255,255,0.8); }
+.inv-badge-block { text-align: right; }
+.inv-badge-label { font-family: 'Lora', serif; font-size: 2.2rem; font-weight: 700; color: rgba(255,255,255,0.95); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; }
+.inv-number-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-top: 6px; font-family: monospace; letter-spacing: 0.05em; }
+
+/* ─── STATUS BADGES ─── */
+.status-badge    { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
+.status-pending  { background: var(--amber-light); color: #92400E; }
+.status-paid     { background: var(--green-light);  color: #065F46; }
+.status-partial  { background: var(--teal-light);   color: #155E75; }
+.status-cancelled{ background: var(--red-light);    color: #991B1B; }
+
+/* ─── SECTIONS ─── */
+.inv-section       { padding: 1.4rem 2.5rem; border-bottom: 1px solid var(--gray-200); }
+.section-title     { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-mid); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; }
+.section-title::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(to right, var(--blue-light), transparent); }
+
+/* ─── FORM ─── */
+.form-grid        { display: grid; gap: 12px; }
+.form-grid-3      { grid-template-columns: repeat(3, 1fr); }
+.form-grid-2      { grid-template-columns: repeat(2, 1fr); }
+.form-grid-4      { grid-template-columns: repeat(4, 1fr); }
+.form-group       { display: flex; flex-direction: column; gap: 4px; }
+.form-group label { font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); }
+.form-control     { padding: 9px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-family: 'Nunito', sans-serif; font-size: 0.88rem; color: var(--gray-900); background: var(--white); outline: none; transition: border-color 0.18s, box-shadow 0.18s; width: 100%; }
+.form-control:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
+.form-control::placeholder { color: var(--gray-400); }
+
+/* ─── SERVICES TABLE ─── */
+.table-wrap { overflow-x: auto; }
+table.svc-table   { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
+.svc-table thead tr { background: var(--blue-deep); }
+.svc-table thead th { padding: 11px 10px; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,0.85); white-space: nowrap; }
+.svc-table thead th.center { text-align: center; }
+.svc-table thead th.right  { text-align: right; }
+.svc-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background 0.12s; }
+.svc-table tbody tr:nth-child(even) { background: var(--gray-50); }
+.svc-table tbody tr:hover { background: var(--blue-light); }
+.svc-table td  { padding: 6px 6px; vertical-align: middle; }
+.svc-table td.sno { text-align: center; font-weight: 700; color: var(--gray-400); font-size: 0.8rem; width: 42px; }
+.svc-table td.total-cell { text-align: right; font-weight: 700; color: var(--blue-deep); font-size: 0.9rem; padding-right: 10px; white-space: nowrap; }
+.svc-table td.action-cell { text-align: center; width: 40px; }
+
+.tbl-input  { width: 100%; border: 1.5px solid transparent; border-radius: 6px; padding: 7px 9px; font-family: 'Nunito', sans-serif; font-size: 0.84rem; background: transparent; color: var(--gray-900); outline: none; transition: border-color 0.15s, background 0.15s; }
+.tbl-input:focus  { border-color: var(--blue-accent); background: var(--white); }
+.tbl-input.right  { text-align: right; }
+.tbl-select { width: 100%; border: 1.5px solid transparent; border-radius: 6px; padding: 7px 9px; font-family: 'Nunito', sans-serif; font-size: 0.84rem; background: transparent; color: var(--gray-900); outline: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
+.tbl-select:focus { border-color: var(--blue-accent); background: var(--white); }
+
+.btn-del    { width: 28px; height: 28px; border: none; border-radius: 7px; background: var(--red-light); color: var(--red); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: auto; transition: all 0.15s; font-weight: 700; }
+.btn-del:hover { background: var(--red); color: #fff; transform: scale(1.1); }
+
+.add-row-btn { margin-top: 10px; padding: 9px 22px; border: 2px dashed var(--blue-accent); border-radius: 8px; background: transparent; color: var(--blue-mid); font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.18s; letter-spacing: 0.03em; }
+.add-row-btn:hover { background: var(--blue-light); border-color: var(--blue-deep); color: var(--blue-deep); }
+
+/* ─── SUMMARY ─── */
+.summary-row          { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 0.9rem; }
+.summary-row:last-child { border-bottom: none; }
+.summary-row .label   { color: var(--gray-500); font-weight: 600; }
+.summary-row .value   { font-weight: 700; color: var(--gray-900); font-size: 0.95rem; }
+.summary-row.net      { background: var(--blue-deep); margin: 8px -2.5rem -1.4rem; padding: 16px 2.5rem; border-bottom: none; }
+.summary-row.net .label { color: rgba(255,255,255,0.8); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+.summary-row.net .value { color: #fff; font-family: 'Lora', serif; font-size: 1.5rem; }
+.summary-row.received .value { color: var(--green); }
+.summary-row.remaining .value { color: var(--red); }
+
+.received-input { width: 160px; text-align: right; padding: 7px 10px; border: 1.5px solid var(--gray-200); border-radius: 7px; font-family: 'Nunito', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--green); outline: none; transition: border-color 0.18s; }
+.received-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
+
+/* ─── FOOTER / SIGNATURE ─── */
+.inv-footer { padding: 1.2rem 2.5rem; background: var(--gray-50); border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--gray-500); }
+.sig-block  { text-align: right; }
+.sig-line   { border-top: 1.5px solid var(--gray-400); width: 180px; margin-top: 28px; padding-top: 6px; font-weight: 700; color: var(--gray-700); }
+
+/* ─── ACTION BAR ─── */
+.action-bar { padding: 1.2rem 2.5rem; background: var(--white); border-top: 1px solid var(--gray-200); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.btn        { padding: 10px 22px; border-radius: 9px; border: none; font-family: 'Nunito', sans-serif; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: all 0.18s; display: flex; align-items: center; gap: 7px; letter-spacing: 0.02em; white-space: nowrap; }
+.btn-save   { background: var(--blue-deep); color: #fff; }
+.btn-save:hover  { background: #162f5a; transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-pdf    { background: var(--teal); color: #fff; }
+.btn-pdf:hover   { background: #0e7490; transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-print  { background: var(--gray-700); color: #fff; }
+.btn-print:hover { background: var(--gray-900); transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-excel  { background: var(--green); color: #fff; }
+.btn-excel:hover { background: #059669; transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-clear  { background: var(--amber-light); color: #92400E; border: 1.5px solid #FDE68A; }
+.btn-clear:hover { background: #FDE68A; }
+.btn-new    { background: var(--blue-light); color: var(--blue-deep); border: 1.5px solid #BFDBFE; }
+.btn-new:hover   { background: #BFDBFE; }
+.btn-spacer { flex: 1; }
+
+/* ─── HISTORY PAGE ─── */
+.page-heading     { display: flex; align-items: baseline; gap: 12px; margin-bottom: 1.5rem; }
+.page-heading h2  { font-family: 'Lora', serif; font-size: 1.5rem; font-weight: 700; color: var(--blue-deep); }
+.count-pill       { background: var(--blue-light); color: var(--blue-mid); padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; border: 1px solid #BFDBFE; }
+.search-wrap      { margin-bottom: 1.2rem; position: relative; }
+.search-wrap input { width: 100%; padding: 10px 14px 10px 40px; border: 1.5px solid var(--gray-200); border-radius: 9px; font-family: 'Nunito', sans-serif; font-size: 0.9rem; outline: none; background: var(--white); transition: border-color 0.18s; }
+.search-wrap input:focus { border-color: var(--blue-accent); }
+.search-icon      { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 16px; }
+
+.hist-list { display: flex; flex-direction: column; gap: 10px; }
+.hist-item { background: var(--white); border-radius: var(--radius); padding: 1rem 1.4rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr 1fr auto auto; gap: 1rem; align-items: center; border-left: 4px solid transparent; transition: box-shadow 0.18s, border-color 0.18s; }
+.hist-item:hover { box-shadow: var(--shadow); border-left-color: var(--blue-accent); }
+.hist-inv-no     { font-size: 0.78rem; font-weight: 800; font-family: monospace; color: var(--blue-mid); background: var(--blue-light); padding: 4px 10px; border-radius: 6px; border: 1px solid #BFDBFE; white-space: nowrap; }
+.hist-client-name { font-weight: 700; font-size: 0.95rem; }
+.hist-date       { font-size: 0.78rem; color: var(--gray-400); }
+.hist-detail     { font-size: 0.82rem; color: var(--gray-500); }
+.hist-detail span { font-weight: 600; color: var(--gray-700); }
+.hist-amount     { font-family: 'Lora', serif; font-size: 1.05rem; font-weight: 700; color: var(--blue-deep); text-align: right; }
+.hist-actions    { display: flex; gap: 6px; }
+.btn-xs          { padding: 6px 14px; border-radius: 6px; border: none; font-family: 'Nunito', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
+.btn-xs-blue     { background: var(--blue-deep); color: #fff; }
+.btn-xs-blue:hover { background: #162f5a; }
+.btn-xs-red      { background: var(--red-light); color: var(--red); }
+.btn-xs-red:hover  { background: var(--red); color: #fff; }
+
+.empty-state     { text-align: center; padding: 5rem 2rem; color: var(--gray-400); }
+.empty-state .ico { font-size: 3.5rem; margin-bottom: 1rem; }
+.empty-state h3  { font-family: 'Lora', serif; color: var(--gray-700); font-size: 1.3rem; margin-bottom: 6px; }
+
+/* ─── TOAST ─── */
+#toast {
+  position: fixed;
+  bottom: 2rem; right: 2rem;
+  background: var(--blue-deep);
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 10px;
+  font-size: 0.87rem;
+  font-weight: 600;
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  opacity: 0;
+  transform: translateY(16px);
+  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
+  z-index: 9999;
+  pointer-events: none;
+}
+#toast.show    { opacity: 1; transform: translateY(0); }
+#toast.success { border-left: 4px solid var(--green); }
+#toast.error   { border-left: 4px solid var(--red); }
+#toast.info    { border-left: 4px solid var(--teal); }
+
+/* ─── PRINT ─── */
+@media print {
+  body { background: #fff !important; }
+  .topbar, .action-bar, .btn-del, .add-row-btn, #toast, #page-history { display: none !important; }
+  #page-invoice { display: block !important; }
+  .app-body { padding: 0 !important; max-width: none !important; }
+  .inv-card { box-shadow: none !important; border: 1px solid #ddd; }
+  .inv-header-band, .svc-table thead tr, .summary-row.net { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+  .tbl-input, .tbl-select, .form-control, .received-input { border: none !important; background: transparent !important; }
+}
+
+/* ─── RESPONSIVE ─── */
+@media (max-width: 768px) {
+  .app-body { padding: 1rem; }
+  .inv-header-band { grid-template-columns: 1fr; }
+  .inv-badge-block { text-align: left; }
+  .form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; }
+  .form-grid-2 { grid-template-columns: 1fr; }
+  .topbar-info { display: none; }
+  .hist-item { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
+  .inv-section { padding: 1.2rem 1.2rem; }
+  .inv-header-band { padding: 1.5rem 1.2rem; }
+  .action-bar { padding: 1rem 1.2rem; }
+}

frontend/index.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SmiloCAD Dental Laboratory — Invoice System</title>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="css/style.css"/>
+</head>
+<body>
+
+  <!-- TOP NAV BAR -->
+  <div class="topbar">
+    <div class="topbar-brand">
+      <div class="topbar-icon">🦷</div>
+      <div>
+        <div class="topbar-name">SmiloCAD Dental Laboratory</div>
+        <div class="topbar-sub">Invoice Management System</div>
+      </div>
+    </div>
+    <div class="topbar-tabs">
+      <button class="topbar-tab active" id="tab-invoice" onclick="App.showPage('invoice')">➕ New Invoice</button>
+      <button class="topbar-tab"        id="tab-history" onclick="App.showPage('history')">📋 History</button>
+    </div>
+    <div class="topbar-info">
+      <span>📞 0328-9577771</span>
+      <span class="topbar-dot"></span>
+      <span>Al Anayat Plaza, G11 Markaz Islamabad</span>
+    </div>
+  </div>
+
+  <!-- ═══ INVOICE PAGE ═══ -->
+  <div class="app-body" id="page-invoice">
+    <div class="inv-card">
+
+      <!-- Header Band -->
+      <div class="inv-header-band">
+        <div>
+          <div class="lab-title">SmiloCAD Dental Laboratory</div>
+          <div class="lab-meta">
+            <div class="lab-meta-item">📞 0328-9577771</div>
+            <div class="lab-meta-item">📍 Al Anayat Plaza, G11 Markaz Islamabad</div>
+          </div>
+        </div>
+        <div class="inv-badge-block">
+          <div class="inv-badge-label">Invoice</div>
+          <div class="inv-number-pill" id="display-inv-number">#INV-0001</div>
+          <div><span class="status-badge status-pending" id="display-status">Pending</span></div>
+        </div>
+      </div>
+
+      <!-- Invoice Details -->
+      <div class="inv-section">
+        <div class="section-title">Invoice Details</div>
+        <div class="form-grid form-grid-3">
+          <div class="form-group">
+            <label>Invoice No.</label>
+            <input class="form-control" id="inv-number" placeholder="INV-0001"/>
+          </div>
+          <div class="form-group">
+            <label>Date</label>
+            <input type="date" class="form-control" id="inv-date"/>
+          </div>
+          <div class="form-group">
+            <label>Status</label>
+            <select class="form-control" id="inv-status">
+              <option>Pending</option>
+              <option>Paid</option>
+              <option>Partial</option>
+              <option>Cancelled</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Doctor & Patient -->
+      <div class="inv-section">
+        <div class="section-title">Doctor &amp; Patient Information</div>
+        <div class="form-grid form-grid-2" style="margin-bottom:12px">
+          <div class="form-group">
+            <label>Doctor Name</label>
+            <input class="form-control" id="doctor-name" placeholder="Enter doctor name"/>
+          </div>
+          <div class="form-group">
+            <label>Clinic Name</label>
+            <input class="form-control" id="clinic" placeholder="e.g. Fit Dental Care"/>
+          </div>
+        </div>
+        <div class="form-grid form-grid-2">
+          <div class="form-group">
+            <label>Patient Name</label>
+            <input class="form-control" id="patient" placeholder="Patient full name"/>
+          </div>
+          <div class="form-group">
+            <label>Shade</label>
+            <input class="form-control" id="shade" placeholder="Enter shade"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- Services Table -->
+      <div class="inv-section">
+        <div class="section-title">Services / Work Items</div>
+        <div class="table-wrap">
+          <table class="svc-table">
+            <thead>
+              <tr>
+                <th class="center">#</th>
+                <th style="min-width:220px">Description</th>
+                <th style="min-width:90px" class="center">Quantity</th>
+                <th style="min-width:110px" class="right">Price/Unit (PKR)</th>
+                <th style="min-width:120px" class="right">Total (PKR)</th>
+                <th class="center">✕</th>
+              </tr>
+            </thead>
+            <tbody id="rows-body">
+              <!-- Rows injected by JS -->
+            </tbody>
+          </table>
+        </div>
+        <button class="add-row-btn" onclick="Rows.add()">+ Add Row</button>
+      </div>
+
+      <!-- Summary -->
+      <div class="inv-section">
+        <div class="section-title">Summary</div>
+        <div style="max-width:380px;margin-left:auto">
+          <div class="summary-row">
+            <span class="label">Subtotal</span>
+            <span class="value" id="summary-subtotal">PKR 0</span>
+          </div>
+          <div class="summary-row received">
+            <span class="label">Received Amount</span>
+            <input class="received-input" type="number" min="0" placeholder="0" id="received-input"/>
+          </div>
+          <div class="summary-row remaining">
+            <span class="label">Remaining Balance</span>
+            <span class="value" id="summary-remaining">PKR 0</span>
+          </div>
+          <div class="summary-row net">
+            <span class="label">Total Amount</span>
+            <span class="value" id="summary-total">PKR 0</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="inv-section" style="border-bottom:none">
+        <div class="section-title">Notes / Terms</div>
+        <textarea class="form-control" id="notes" rows="2"
+          style="resize:vertical;min-height:60px"
+          placeholder="Payment terms, delivery schedule, special instructions…"></textarea>
+      </div>
+
+      <!-- Footer -->
+      <div class="inv-footer">
+        <div>Thank you for your trust in <strong>SmiloCAD Dental Laboratory</strong></div>
+        <div class="sig-block">
+          <div class="sig-line">Lab Technician: Dt. Sajid</div>
+        </div>
+      </div>
+
+      <!-- Action Bar -->
+      <div class="action-bar">
+        <button class="btn btn-save"  onclick="App.save()">💾 Save</button>
+        <button class="btn btn-pdf"   onclick="App.downloadPDF()">⬇️ Download PDF</button>
+        <button class="btn btn-print" onclick="App.print()">🖨️ Print</button>
+        <button class="btn btn-excel" onclick="App.exportExcel()">📊 Export Excel</button>
+        <div class="btn-spacer"></div>
+        <button class="btn btn-new"   onclick="App.newInvoice()">📄 New Invoice</button>
+        <button class="btn btn-clear" onclick="App.clear()">🗑️ Clear</button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ═══ HISTORY PAGE ═══ -->
+  <div class="app-body" id="page-history" style="display:none">
+    <div class="page-heading">
+      <h2>Invoice History</h2>
+      <span class="count-pill" id="history-count">0 invoices</span>
+    </div>
+    <div class="search-wrap">
+      <span class="search-icon">🔍</span>
+      <input id="search-input" placeholder="Search by doctor, clinic, patient, invoice no., or status…"
+        oninput="History.filter()"/>
+    </div>
+    <div class="hist-list" id="hist-list">
+      <!-- Injected by JS -->
+    </div>
+  </div>
+
+  <!-- Toast -->
+  <div id="toast"></div>
+
+  <!-- JS Files (load in order) -->
+  <script src="js/data.js"></script>
+  <script src="js/db.js"></script>
+  <script src="js/ui.js"></script>
+  <script src="js/rows.js"></script>
+  <script src="js/history.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>

frontend/js/app.js

@@ -0,0 +1,206 @@
+/* ─────────────────────────────────────────
+   js/app.js  —  Main application controller
+   ───────────────────────────────────────── */
+
+var App = (function() {
+
+  var _currentId = null;   // id of the invoice being edited (null = new)
+
+  /* ── Collect all form values into one plain object ── */
+  function _collect() {
+    var subtotal  = Rows.subtotal();
+    var received  = parseFloat(document.getElementById("received-input").value) || 0;
+
+    return {
+      invNumber: document.getElementById("inv-number").value,
+      invDate:   document.getElementById("inv-date").value,
+      doctor:    document.getElementById("doctor-name").value,
+      clinic:    document.getElementById("clinic").value,
+      patient:   document.getElementById("patient").value,
+      shade:     document.getElementById("shade").value,
+      status:    document.getElementById("inv-status").value,
+      rows:      Rows.collect(),
+      subtotal:  subtotal,
+      received:  received,
+      remaining: subtotal - received,
+      notes:     document.getElementById("notes").value,
+      savedAt:   new Date().toISOString(),
+    };
+  }
+
+  /* ── Populate all form fields from a saved invoice object ── */
+  function _populate(inv) {
+    document.getElementById("inv-number").value  = inv.invNumber || "";
+    document.getElementById("inv-date").value    = inv.invDate   || "";
+    document.getElementById("inv-status").value  = inv.status    || "Pending";
+    document.getElementById("doctor-name").value = inv.doctor    || "";
+    document.getElementById("clinic").value      = inv.clinic    || "";
+    document.getElementById("patient").value     = inv.patient   || "";
+    document.getElementById("shade").value       = inv.shade     || "";
+    document.getElementById("notes").value       = inv.notes     || "";
+    document.getElementById("received-input").value = inv.received != null ? inv.received : "";
+
+    Rows.load(inv.rows || []);
+    updateHeaderBadge();
+  }
+
+  /* ── Generate the next invoice number from DB count ── */
+  async function _nextInvNumber() {
+    var all  = await dbAll();
+    var next = String(all.length + 1).padStart(4, "0");
+    return "INV-" + next;
+  }
+
+  /* ── Reset form to a blank new invoice ── */
+  async function _resetForm() {
+    _currentId = null;
+    var num = await _nextInvNumber();
+    document.getElementById("inv-number").value  = num;
+    document.getElementById("inv-date").value    = todayStr();
+    document.getElementById("inv-status").value  = "Pending";
+    document.getElementById("doctor-name").value = "";
+    document.getElementById("clinic").value   = "";
+    document.getElementById("patient").value  = "";
+    document.getElementById("shade").value    = "";
+    document.getElementById("notes").value    = "";
+    document.getElementById("received-input").value = "";
+    Rows.reset();
+    updateHeaderBadge();
+  }
+
+  /* ────────────────────────────────────────
+     PUBLIC METHODS
+     ──────────────────────────────────────── */
+
+  /* Switch visible page */
+  function showPage(page) {
+    switchPage(page);
+    if (page === "history") History.load();
+  }
+
+  /* Save current invoice */
+  async function save() {
+    var data = _collect();
+    if (_currentId) data.id = _currentId;
+    var id = await dbSave(data);
+    _currentId = data.id || id;
+    showToast("✅ Invoice saved successfully!", "success");
+  }
+
+  /* New blank invoice */
+  async function newInvoice() {
+    await _resetForm();
+    showPage("invoice");
+    showToast("📄 New invoice ready", "info");
+  }
+
+  /* Clear the current form fields (keep invoice number & date) */
+  function clear() {
+    if (!confirm("Clear the current form?")) return;
+    document.getElementById("doctor-name").value = "";
+    document.getElementById("clinic").value   = "";
+    document.getElementById("patient").value  = "";
+    document.getElementById("shade").value    = "";
+    document.getElementById("inv-status").value = "Pending";
+    document.getElementById("notes").value    = "";
+    document.getElementById("received-input").value = "";
+    Rows.reset();
+    updateHeaderBadge();
+    showToast("🗑️ Form cleared", "info");
+  }
+
+  /* Print the invoice */
+  function print() {
+    showPage("invoice");
+    setTimeout(function() { window.print(); }, 200);
+  }
+
+  /* Download as PDF (uses browser print dialog) */
+  function downloadPDF() {
+    showToast("📄 Choose 'Save as PDF' in the print dialog", "info");
+    setTimeout(function() { window.print(); }, 400);
+  }
+
+  /* Export as CSV (opens in Excel) */
+  function exportExcel() {
+    var data = _collect();
+    var lines = [
+      ["SmiloCAD Dental Laboratory"],
+      [LAB.address],
+      ["Phone:", LAB.phone],
+      [],
+      ["Invoice No.", data.invNumber, "Date:", data.invDate],
+      ["Doctor:", data.doctor, "Clinic:", data.clinic],
+      ["Patient:", data.patient, "Shade:", data.shade],
+      ["Status:", data.status],
+      [],
+      ["S.No", "Description", "Quantity", "Price/Unit", "Total"],
+    ];
+
+    data.rows.filter(function(r) { return r.desc || r.qty || r.price; })
+             .forEach(function(r, i) {
+               lines.push([i + 1, r.desc, r.qty, r.price, r.total]);
+             });
+
+    lines = lines.concat([
+      [],
+      ["", "", "", "Total:",     data.subtotal],
+      ["", "", "", "Received:",  data.received],
+      ["", "", "", "Remaining:", data.remaining],
+      [],
+      ["Notes:", data.notes],
+      ["Lab Technician:", LAB.tech],
+    ]);
+
+    var csv = lines.map(function(row) {
+      return row.map(function(cell) {
+        return '"' + String(cell != null ? cell : "").replace(/"/g, '""') + '"';
+      }).join(",");
+    }).join("\n");
+
+    var a = document.createElement("a");
+    a.href     = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
+    a.download = data.invNumber + ".csv";
+    a.click();
+    showToast("📊 Exported as CSV (open in Excel)", "success");
+  }
+
+  /* Load a saved invoice into the form for editing */
+  async function loadEdit(id) {
+    /* Try the History cache first, then fall back to a fresh DB read */
+    var inv = History.getById(id);
+    if (!inv) {
+      var all = await dbAll();
+      inv = all.find(function(r) { return r.id === id; });
+    }
+    if (!inv) { showToast("❌ Invoice not found", "error"); return; }
+
+    _currentId = inv.id;
+    _populate(inv);
+    showPage("invoice");
+    showToast("✏️ Invoice loaded for editing", "info");
+  }
+
+  /* ── Boot: open DB, set defaults, render two blank rows ── */
+  document.addEventListener("DOMContentLoaded", async function() {
+    await dbOpen();
+    var num = await _nextInvNumber();
+    document.getElementById("inv-number").value = num;
+    document.getElementById("inv-date").value   = todayStr();
+    updateHeaderBadge();
+    Rows.reset();
+  });
+
+  /* Public API */
+  return {
+    showPage:    showPage,
+    save:        save,
+    newInvoice:  newInvoice,
+    clear:       clear,
+    print:       print,
+    downloadPDF: downloadPDF,
+    exportExcel: exportExcel,
+    loadEdit:    loadEdit,
+  };
+
+})();

frontend/js/data.js

@@ -0,0 +1,56 @@
+/* ─────────────────────────────────────────
+   js/data.js  —  All static data constants
+   ───────────────────────────────────────── */
+
+const LAB = {
+  name:    "SmiloCAD Dental Laboratory",
+  phone:   "0328-9577771",
+  address: "Al Anayat Plaza, G11 Markaz Islamabad",
+  tech:    "Dt. Sajid",
+};
+
+const SERVICES = [
+  "Zirconium Crown",
+  "Veneers",
+  "PFM Crown",
+  "PFM Design",
+  "PFM 3D",
+  "Zirconium Bridge + I Bar",
+  "Zirconium Bridge",
+  "Full Zirconium",
+  "E-Max Crown",
+  "E-Max Veneer",
+  "Metal Crown",
+  "Acrylic Crown",
+  "Implant Crown",
+  "Implant Abutment",
+  "Complete Denture",
+  "Partial Denture (RPD)",
+  "Immediate Denture",
+  "Night Guard",
+  "Retainer",
+  "Maryland Bridge",
+  "Inlay",
+  "Onlay",
+  "Post & Core",
+  "Study Model",
+  "Occlusal Splint",
+  "Other",
+];
+
+const DOCTORS = [
+  "Dr. Haroon Shah",
+  "Dr. Ahmad Raza",
+  "Dr. Sara Khan",
+  "Dr. Imran Ali",
+  "Dr. Fatima Malik",
+  "Other",
+];
+
+const SHADES = [
+  "—","A1","A2","A3","A3.5","A4",
+  "B1","B2","B3","B4",
+  "C1","C2","C3","C4",
+  "D2","D3","D4",
+  "BL1","BL2","BL3","BL4","Custom",
+];

frontend/js/db.js

@@ -0,0 +1,68 @@
+/* ─────────────────────────────────────────
+   js/db.js  —  IndexedDB database helpers
+   ───────────────────────────────────────── */
+
+const DB_NAME  = "SmiloCAD_DB";
+const DB_STORE = "invoices";
+const DB_VER   = 1;
+
+let _db = null;   // holds the open IDBDatabase instance
+
+/* Open (or create) the database */
+function dbOpen() {
+  return new Promise(function(resolve, reject) {
+    const request = indexedDB.open(DB_NAME, DB_VER);
+
+    request.onupgradeneeded = function(e) {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains(DB_STORE)) {
+        db.createObjectStore(DB_STORE, { keyPath: "id", autoIncrement: true });
+      }
+    };
+
+    request.onsuccess = function(e) {
+      _db = e.target.result;
+      resolve(_db);
+    };
+
+    request.onerror = function(e) {
+      reject(e);
+    };
+  });
+}
+
+/* Save (insert or update) one invoice record */
+function dbSave(data) {
+  return new Promise(function(resolve, reject) {
+    const tx      = _db.transaction(DB_STORE, "readwrite");
+    const store   = tx.objectStore(DB_STORE);
+    const request = data.id ? store.put(data) : store.add(data);
+
+    request.onsuccess = function(e) { resolve(e.target.result); };
+    request.onerror   = reject;
+  });
+}
+
+/* Load all invoice records */
+function dbAll() {
+  return new Promise(function(resolve, reject) {
+    const request = _db.transaction(DB_STORE, "readonly")
+                       .objectStore(DB_STORE)
+                       .getAll();
+
+    request.onsuccess = function(e) { resolve(e.target.result); };
+    request.onerror   = reject;
+  });
+}
+
+/* Delete one invoice by id */
+function dbDelete(id) {
+  return new Promise(function(resolve, reject) {
+    const request = _db.transaction(DB_STORE, "readwrite")
+                       .objectStore(DB_STORE)
+                       .delete(id);
+
+    request.onsuccess = resolve;
+    request.onerror   = reject;
+  });
+}

frontend/js/history.js

@@ -0,0 +1,100 @@
+/* ─────────────────────────────────────────
+   js/history.js  —  Invoice history page
+   ───────────────────────────────────────── */
+
+var History = (function() {
+
+  var _allInvoices = [];   // cache of loaded invoices
+
+  /* Format PKR */
+  function _fmt(n) { return fmt(n); }
+
+  /* Build HTML for a single history card */
+  function _buildCard(inv) {
+    var itemCount = (inv.rows || []).filter(function(r) { return r.desc; }).length;
+    return [
+      '<div class="hist-item">',
+        '<div class="hist-inv-no">' + (inv.invNumber || "—") + '</div>',
+        '<div>',
+          '<div class="hist-client-name">' + (inv.doctor || "Unknown Doctor") + '</div>',
+          '<div class="hist-date">📅 ' + (inv.invDate || "—") + ' &nbsp;·&nbsp; ' + (inv.clinic || "—") + '</div>',
+        '</div>',
+        '<div>',
+          '<div class="hist-detail">Patient: <span>' + (inv.patient || "—") + '</span></div>',
+          '<div class="hist-detail">Items: <span>' + itemCount + '</span> &nbsp;·&nbsp; Status: <span>' + (inv.status || "—") + '</span></div>',
+        '</div>',
+        '<div>',
+          '<div class="hist-amount">' + _fmt(inv.subtotal || 0) + '</div>',
+          '<div style="font-size:0.75rem;color:var(--green);text-align:right;margin-top:2px">Rcvd: ' + _fmt(inv.received || 0) + '</div>',
+        '</div>',
+        '<div class="hist-actions">',
+          '<button class="btn-xs btn-xs-blue" onclick="App.loadEdit(' + inv.id + ')">✏️ Load</button>',
+          '<button class="btn-xs btn-xs-red"  onclick="History.deleteInvoice(' + inv.id + ')">🗑️</button>',
+        '</div>',
+      '</div>',
+    ].join("");
+  }
+
+  /* Render the list — optionally filtered by a search term */
+  function _render(list) {
+    var container = document.getElementById("hist-list");
+    var count     = document.getElementById("history-count");
+
+    count.textContent = list.length + " invoice" + (list.length !== 1 ? "s" : "");
+
+    if (list.length === 0) {
+      var q = document.getElementById("search-input").value;
+      container.innerHTML = [
+        '<div class="empty-state">',
+          '<div class="ico">📋</div>',
+          '<h3>' + (q ? "No matching invoices" : "No invoices yet") + '</h3>',
+          '<p>' + (q ? "Try a different search term." : "Create your first invoice to see it here.") + '</p>',
+        '</div>',
+      ].join("");
+    } else {
+      container.innerHTML = list.map(_buildCard).join("");
+    }
+  }
+
+  /* Load all invoices from DB and render */
+  function load() {
+    dbAll().then(function(all) {
+      _allInvoices = all.reverse();   // newest first
+      filter();
+    });
+  }
+
+  /* Filter the cached list by search term and re-render */
+  function filter() {
+    var q = (document.getElementById("search-input").value || "").toLowerCase();
+    var filtered = _allInvoices.filter(function(inv) {
+      if (!q) return true;
+      return (
+        (inv.invNumber || "").toLowerCase().includes(q) ||
+        (inv.doctor    || "").toLowerCase().includes(q) ||
+        (inv.clinic    || "").toLowerCase().includes(q) ||
+        (inv.patient   || "").toLowerCase().includes(q) ||
+        (inv.status    || "").toLowerCase().includes(q)
+      );
+    });
+    _render(filtered);
+  }
+
+  /* Delete an invoice after confirmation */
+  function deleteInvoice(id) {
+    if (!confirm("Delete this invoice permanently?")) return;
+    dbDelete(id).then(function() {
+      showToast("🗑️ Invoice deleted", "error");
+      load();   // refresh the list
+    });
+  }
+
+  /* Get a single invoice by id from cache */
+  function getById(id) {
+    return _allInvoices.find(function(inv) { return inv.id === id; }) || null;
+  }
+
+  /* Public API */
+  return { load: load, filter: filter, deleteInvoice: deleteInvoice, getById: getById };
+
+})();

frontend/js/rows.js

@@ -0,0 +1,151 @@
+/* ─────────────────────────────────────────
+   js/rows.js  —  Service row management
+   ───────────────────────────────────────── */
+
+var Rows = (function() {
+
+  var _rowCounter = 0;   // unique key for each row
+
+  /* Build the <select> options HTML for the services list */
+  function _serviceOptions(selected) {
+    var html = '<option value="">— Select Service —</option>';
+    SERVICES.forEach(function(s) {
+      html += '<option' + (s === selected ? ' selected' : '') + '>' + s + '</option>';
+    });
+    return html;
+  }
+
+  /* Create one table row of HTML */
+  function _buildRow(id, desc, qty, price, total) {
+    desc  = desc  || "";
+    qty   = qty   !== undefined ? qty   : 1;
+    price = price !== undefined ? price : "";
+    total = total || 0;
+
+    return [
+      '<tr id="row-' + id + '">',
+        '<td class="sno row-index"></td>',
+        '<td>',
+          '<select class="tbl-select" onchange="Rows.update(' + id + ')">' + _serviceOptions(desc) + '</select>',
+        '</td>',
+        '<td>',
+          '<input type="number" class="tbl-input" min="1" value="' + qty + '"',
+          ' style="text-align:center" oninput="Rows.update(' + id + ')"/>',
+        '</td>',
+        '<td>',
+          '<input type="number" class="tbl-input right" min="0" value="' + price + '" placeholder="0"',
+          ' oninput="Rows.update(' + id + ')"/>',
+        '</td>',
+        '<td class="total-cell row-total">' + fmtNum(total) + '</td>',
+        '<td class="action-cell">',
+          '<button class="btn-del" onclick="Rows.remove(' + id + ')">×</button>',
+        '</td>',
+      '</tr>',
+    ].join("");
+  }
+
+  /* Renumber the # column sequentially */
+  function _renumber() {
+    var cells = document.querySelectorAll("#rows-body .row-index");
+    cells.forEach(function(cell, i) { cell.textContent = i + 1; });
+  }
+
+  /* Recalculate a single row's total and update the summary */
+  function update(id) {
+    var row   = document.getElementById("row-" + id);
+    if (!row) return;
+
+    var inputs = row.querySelectorAll("input[type=number]");
+    var qty    = parseFloat(inputs[0].value) || 0;
+    var price  = parseFloat(inputs[1].value) || 0;
+    var total  = qty * price;
+
+    row.querySelector(".row-total").textContent = fmtNum(total);
+    _recalcSummary();
+  }
+
+  /* Recalculate subtotal / remaining and refresh the summary panel */
+  function _recalcSummary() {
+    var subtotal = 0;
+    document.querySelectorAll("#rows-body tr").forEach(function(row) {
+      var inputs = row.querySelectorAll("input[type=number]");
+      var qty    = parseFloat(inputs[0] ? inputs[0].value : 0) || 0;
+      var price  = parseFloat(inputs[1] ? inputs[1].value : 0) || 0;
+      subtotal  += qty * price;
+    });
+
+    var received  = parseFloat(document.getElementById("received-input").value) || 0;
+    var remaining = subtotal - received;
+
+    document.getElementById("summary-subtotal").textContent  = fmt(subtotal);
+    document.getElementById("summary-total").textContent     = fmt(subtotal);
+    document.getElementById("summary-remaining").textContent = fmt(remaining);
+    document.getElementById("summary-remaining").style.color =
+      remaining > 0 ? "var(--red)" : "var(--green)";
+  }
+
+  /* Add a blank row */
+  function add() {
+    var id   = ++_rowCounter;
+    var tbody = document.getElementById("rows-body");
+    tbody.insertAdjacentHTML("beforeend", _buildRow(id));
+    _renumber();
+  }
+
+  /* Remove a row by id */
+  function remove(id) {
+    var row = document.getElementById("row-" + id);
+    if (row) { row.remove(); _renumber(); _recalcSummary(); }
+  }
+
+  /* Clear all rows and add two blank ones */
+  function reset() {
+    document.getElementById("rows-body").innerHTML = "";
+    add();
+    add();
+  }
+
+  /* Load rows from saved data (array of row objects) */
+  function load(savedRows) {
+    document.getElementById("rows-body").innerHTML = "";
+    (savedRows || []).forEach(function(r) {
+      var id = ++_rowCounter;
+      document.getElementById("rows-body")
+              .insertAdjacentHTML("beforeend", _buildRow(id, r.desc, r.qty, r.price, r.total));
+    });
+    _renumber();
+    _recalcSummary();
+  }
+
+  /* Collect current row data into an array of plain objects */
+  function collect() {
+    var result = [];
+    document.querySelectorAll("#rows-body tr").forEach(function(row) {
+      var sel    = row.querySelector("select");
+      var inputs = row.querySelectorAll("input[type=number]");
+      var qty    = parseFloat(inputs[0] ? inputs[0].value : 1)  || 1;
+      var price  = parseFloat(inputs[1] ? inputs[1].value : 0)  || 0;
+      result.push({
+        desc:  sel   ? sel.value : "",
+        qty:   qty,
+        price: price,
+        total: qty * price,
+      });
+    });
+    return result;
+  }
+
+  /* Get the current subtotal */
+  function subtotal() {
+    return collect().reduce(function(sum, r) { return sum + r.total; }, 0);
+  }
+
+  /* Wire up the received-input to trigger recalc */
+  document.addEventListener("DOMContentLoaded", function() {
+    document.getElementById("received-input").addEventListener("input", _recalcSummary);
+  });
+
+  /* Public API */
+  return { add: add, remove: remove, reset: reset, load: load, collect: collect, subtotal: subtotal, update: update };
+
+})();

frontend/js/ui.js

@@ -0,0 +1,56 @@
+/* ─────────────────────────────────────────
+   js/ui.js  —  UI helpers & shared utils
+   ───────────────────────────────────────── */
+
+/* Show a toast notification
+   type: "success" | "error" | "info"        */
+function showToast(msg, type) {
+  type = type || "success";
+  var el = document.getElementById("toast");
+  el.textContent = msg;
+  el.className   = "show " + type;
+  clearTimeout(el._timer);
+  el._timer = setTimeout(function() { el.className = ""; }, 3000);
+}
+
+/* Format a number as PKR currency */
+function fmt(n) {
+  return "PKR " + (Number(n) || 0).toLocaleString("en-PK", { minimumFractionDigits: 0 });
+}
+
+/* Format a number with commas (no currency prefix) */
+function fmtNum(n) {
+  return (Number(n) || 0).toLocaleString("en-PK");
+}
+
+/* Return today's date as YYYY-MM-DD */
+function todayStr() {
+  return new Date().toISOString().split("T")[0];
+}
+
+/* Show/hide the two main pages and set the active tab */
+function switchPage(page) {
+  document.getElementById("page-invoice").style.display = (page === "invoice") ? "" : "none";
+  document.getElementById("page-history").style.display = (page === "history") ? "" : "none";
+
+  document.getElementById("tab-invoice").classList.toggle("active", page === "invoice");
+  document.getElementById("tab-history").classList.toggle("active", page === "history");
+}
+
+/* Update the live invoice number & status badge in the header band */
+function updateHeaderBadge() {
+  var num    = document.getElementById("inv-number").value || "INV-0001";
+  var status = document.getElementById("inv-status").value || "Pending";
+
+  document.getElementById("display-inv-number").textContent = "#" + num;
+
+  var badge = document.getElementById("display-status");
+  badge.textContent = status;
+  badge.className   = "status-badge status-" + status.toLowerCase();
+}
+
+/* Wire up live badge updates once DOM is ready */
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById("inv-number").addEventListener("input",  updateHeaderBadge);
+  document.getElementById("inv-status").addEventListener("change", updateHeaderBadge);
+});

main.py

@@ -9,8 +9,8 @@ from api.invoices import router as invoice_router
 Base.metadata.create_all(bind=engine)
 
 app = FastAPI(title="SmiloCAD Invoice API")
-app.mount("/css", StaticFiles(directory="../frontend/css"), name="css")
-app.mount("/js", StaticFiles(directory="../frontend/js"), name="js")
+app.mount("/css", StaticFiles(directory="frontend/css"), name="css")
+app.mount("/js", StaticFiles(directory="frontend/js"), name="js")
 
 app.add_middleware(
     CORSMiddleware,
@@ -22,8 +22,11 @@ app.add_middleware(
 # 1. Route to serve the index.html
 @app.get("/")
 async def serve_index():
-    return FileResponse("../frontend/index.html")
-# 2. Mount the CSS and JS folders so the HTML can find them
+    # Return index.html from the new local frontend folder
+    return FileResponse("frontend/index.html")
+    
+        
+    # 2. Mount the CSS and JS folders so the HTML can find them
 # This matches your folder names: frontend/css and frontend/js
 
 # Include the routes from the api folder