fix: serve frontend from root

frontend/css/style.css

@@ -1,432 +0,0 @@
-/* ─────────────────────────────────────────
-   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-logo     { height: 38px; width: auto; max-width: 160px; background: #fff; padding: 4px 6px; border-radius: 8px; object-fit: contain; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
-.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; color: #fff; }
-.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 ─── */
-.print-sheet { display: none; max-width: 820px; margin: 0 auto; font-family: 'Nunito', sans-serif; color: #222; }
-.print-sheet, .print-sheet * { box-sizing: border-box; }
-.print-header {
-  background: #1e5c78;
-  color: #fff;
-  padding: 22px 26px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.print-title {
-  font-size: 2.1rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-}
-.print-brand { text-align: right; font-size: 0.75rem; line-height: 1.45; }
-.print-brand-name { font-weight: 700; font-size: 0.8rem; margin-bottom: 2px; }
-.print-info {
-  padding: 18px 26px 8px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  font-size: 0.76rem;
-}
-.print-info-title { font-weight: 700; margin-bottom: 6px; }
-.print-info-row { display: flex; gap: 8px; margin: 2px 0; }
-.print-info-row .k { width: 120px; font-weight: 600; color: #333; }
-.print-info-row .v { color: #333; }
-
-.print-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.75rem;
-  margin: 6px 0 0;
-}
-.print-table thead th {
-  background: #1e5c78;
-  color: #fff;
-  padding: 6px 8px;
-  text-align: left;
-  font-weight: 700;
-}
-.print-table thead th.c { text-align: center; }
-.print-table thead th.r { text-align: right; }
-.print-table tbody td {
-  padding: 6px 8px;
-  border-bottom: 1px solid #d7e1e8;
-}
-.print-table tbody td.c { text-align: center; }
-.print-table tbody td.r { text-align: right; }
-
-.print-summary {
-  padding: 10px 26px 0;
-  display: grid;
-  grid-template-columns: 1fr 280px;
-  gap: 24px;
-  font-size: 0.75rem;
-}
-.print-terms { color: #333; }
-.print-totals { display: grid; gap: 6px; }
-.tot-row { display: flex; justify-content: space-between; }
-.tot-row.total { border-top: 2px solid #7a2a2a; padding-top: 6px; font-weight: 700; }
-
-.print-footer {
-  margin: 22px 26px 0;
-  background: #1e5c78;
-  color: #fff;
-  text-align: center;
-  padding: 10px 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-@media print {
-  body { background: #fff !important; }
-  .topbar, .action-bar, .btn-del, .add-row-btn, #toast, #page-history, #page-invoice { display: none !important; }
-  .app-body { padding: 0 !important; max-width: none !important; }
-  .print-sheet { display: block; }
-  .print-header, .print-table thead th, .print-footer {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-}
-
-/* ─── 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; }
-}
-
-
-/* ─── SUMMARY SECTION (NEW DESIGN) ─── */
-.inv-section.summary {
-  padding: 1.4rem 2.5rem;
-  border-bottom: none;
-}
-
-.summary-container {
-  max-width: 380px;
-  margin-left: auto;
-  margin-bottom: 20px;
-}
-
-.summary-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 0;
-  font-size: 0.95rem;
-  border-bottom: 1px solid var(--gray-100);
-}
-
-.summary-row .label {
-  color: var(--gray-700);
-  font-weight: 700;
-  font-size: 0.85rem;
-}
-
-.summary-row .value {
-  font-weight: 800;
-  color: var(--gray-900);
-  font-size: 1rem;
-}
-
-/* Green styling for Remaining Balance as per screenshot */
-.summary-row.remaining .value {
-  color: var(--green);
-}
-
-.received-input {
-  width: 140px;
-  text-align: right;
-  padding: 8px 12px;
-  border: 1.5px solid var(--gray-200);
-  border-radius: 8px;
-  font-family: 'Nunito', sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--gray-900);
-  outline: none;
-  transition: all 0.2s;
-}
-
-.received-input:focus {
-  border-color: var(--blue-accent);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* The dark navy Total Amount block */
-.total-block {
-  background: var(--blue-deep);
-  margin: 10px -2.5rem -1.4rem auto; /* Aligns to right and sticks to bottom/right edges */
-  padding: 20px 2.5rem;
-  width: calc(100% + 5rem); /* Stretches to full card width if desired, or keep as container */
-  max-width: 450px; 
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top-left-radius: var(--radius);
-}
-
-.total-block .label {
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 0.9rem;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.total-block .value {
-  color: #fff;
-  font-family: 'Lora', serif;
-  font-size: 1.8rem;
-  font-weight: 700;
-}
-
-@media (max-width: 768px) {
-    .total-block {
-        margin-right: -1.2rem;
-        width: calc(100% + 2.4rem);
-        max-width: none;
-        border-radius: 0;
-    }
-}

frontend/index.html

@@ -1,224 +0,0 @@
-<!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@400;700&display=swap" rel="stylesheet"/>
-  <link rel="stylesheet" href="/css/style.css?v=20260413"/>
-</head>
-<body>
-
-  <div class="topbar">
-    <div class="topbar-brand">
-      <img class="topbar-logo" src="/img/logo.jpeg" alt="SmiloCAD Dental Lab logo" width="140" height="38">
-      <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>
-
-  <div class="app-body" id="page-invoice">
-    <div class="inv-card">
-
-      <div class="inv-header-band">
-        <div>
-          <div class="lab-title">SmiloCAD Dental Laboratory</div>
-          <div class="lab-meta">📍 Al Anayat Plaza, G11 Markaz Islamabad</div>
-        </div>
-        <div class="inv-badge-block">
-          <div class="inv-badge-label">Invoice</div>
-          <div class="inv-number-pill" id="display-inv-number">#NEW</div>
-        </div>
-      </div>
-
-      <div class="inv-section">
-        <div class="section-title">Details</div>
-        <div class="form-grid form-grid-2">
-          <div class="form-group">
-            <label>Invoice No.</label>
-            <input class="form-control" id="inv-number" value="Auto-Generated" readonly>
-          </div>
-          <div class="form-group">
-            <label>Date</label>
-            <input type="date" class="form-control" id="inv-date">
-          </div>
-        </div>
-        
-        <div class="form-grid form-grid-3" style="margin-top:15px">
-          <div class="form-group">
-            <label>Doctor Name</label>
-            <input class="form-control" id="doctor-name" placeholder="Dr. Name">
-          </div>
-          <div class="form-group">
-            <label>Clinic Name</label>
-            <input class="form-control" id="clinic" placeholder="Clinic Name">
-          </div>
-          <div class="form-group">
-            <label>Patient Name</label>
-            <input class="form-control" id="patient" placeholder="Patient Name">
-          </div>
-        </div>
-
-        <div class="form-grid form-grid-3" style="margin-top:15px">
-          <div class="form-group">
-              <label>Shade</label>
-              <select class="form-control" id="shade">
-                <option value="">Select shade</option>
-                <option value="A1">A1</option>
-                <option value="A2">A2</option>
-                <option value="A3">A3</option>
-                <option value="A3.5">A3.5</option>
-                <option value="A4">A4</option>
-                <option value="B1">B1</option>
-                <option value="B2">B2</option>
-                <option value="B3">B3</option>
-                <option value="B4">B4</option>
-                <option value="C1">C1</option>
-                <option value="C2">C2</option>
-                <option value="C3">C3</option>
-                <option value="C4">C4</option>
-                <option value="D2">D2</option>
-                <option value="D3">D3</option>
-                <option value="D4">D4</option>
-              </select>
-          </div>
-        </div>
-      </div>
-
-      <div class="inv-section">
-        <div class="section-title">Services / Work Items</div>
-        <table class="svc-table">
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>Description</th>
-              <th>Qty</th>
-              <th>Price (PKR)</th>
-              <th>Total</th>
-              <th class="center">✕</th>
-            </tr>
-          </thead>
-          <tbody id="rows-body"></tbody>
-        </table>
-        <button class="add-row-btn" onclick="Rows.add()">+ Add Row</button>
-      </div>
-
-      <div class="inv-section summary">
-        <div class="section-title">Summary</div>
-        <div class="summary-container">
-          <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 type="number" class="received-input" id="received-input" placeholder="0" min="0">
-          </div>
-          <div class="summary-row remaining">
-            <span class="label">Remaining Balance</span>
-            <span class="value" id="summary-remaining">PKR 0</span>
-          </div>
-        </div>
-        <div class="total-block">
-          <span class="label">Total Amount</span>
-          <span class="value" id="summary-total">PKR 0</span>
-        </div>
-      </div>
-
-      <div class="inv-section" style="border-bottom:none">
-        <label style="font-size:0.85rem; font-weight:700; color:#555">Notes</label>
-        <textarea class="form-control" id="notes" rows="2" placeholder="Instructions..."></textarea>
-      </div>
-
-      <div class="action-bar">
-        <button class="btn btn-save"  onclick="App.save()">💾 Save</button>
-        <button class="btn btn-pdf"   onclick="App.downloadPDF()">⬇️ PDF</button>
-        <button class="btn btn-print" onclick="App.print()">🖨️ Print</button>
-        <button class="btn btn-excel" onclick="App.exportExcel()">📊 Excel</button>
-        <div class="btn-spacer"></div>
-        <button class="btn btn-new"   onclick="App.newInvoice()">📄 New</button>
-        <button class="btn btn-clear" onclick="App.clear()">🗑️ Clear</button>
-      </div>
-
-    </div>
-  </div>
-
-  <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</span></div>
-    <div class="search-wrap"><input id="search-input" placeholder="Search..." oninput="History.filter()"></div>
-    <div class="hist-list" id="hist-list"></div>
-  </div>
-
-  <div id="toast"></div>
-
-  <!-- Print-only invoice layout (matches example PDF style) -->
-  <div id="print-sheet" class="print-sheet">
-    <div class="print-header">
-      <div class="print-title">INVOICE</div>
-      <div class="print-brand">
-        <div class="print-brand-name">SmiloCAD Dental Lab</div>
-        <div class="print-brand-line">Al Anayat Plaza, G11 Markaz Islamabad</div>
-        <div class="print-brand-line">Phone: </div>
-        <div class="print-brand-line">Email: </div>
-      </div>
-    </div>
-
-    <div class="print-info">
-      <div class="print-info-left">
-        <div class="print-info-row"><span class="k">Invoice No.</span> <span class="v" id="print-inv-no">INV-0000</span></div>
-        <div class="print-info-row"><span class="k">Date of Issue</span> <span class="v" id="print-inv-date">Enter Date Here</span></div>
-        <div class="print-info-row"><span class="k">Due Date</span> <span class="v" id="print-due-date">Enter Due Date Here</span></div>
-      </div>
-      <div class="print-info-right">
-        <div class="print-info-title">Bill To</div>
-        <div class="print-info-row"><span class="k">Doctor Name</span> <span class="v" id="print-client-name">Client Name</span></div>
-        <div class="print-info-row"><span class="k">Clinic Name</span> <span class="v" id="print-company-name">Company Name</span></div>
-        <div class="print-info-row"><span class="k">Address</span> <span class="v" id="print-address">Address</span></div>
-        <div class="print-info-row"><span class="k">Phone</span> <span class="v" id="print-phone">Phone</span></div>
-        <div class="print-info-row"><span class="k">Email</span> <span class="v" id="print-email">Email</span></div>
-      </div>
-    </div>
-
-    <table class="print-table">
-      <thead>
-        <tr>
-          <th class="c">Item</th>
-          <th>Patient Name</th>
-          <th>Shield</th>
-          <th>Description</th>
-          <th class="c">Unit</th>
-          <th class="r">Rate</th>
-          <th class="r">Amount</th>
-        </tr>
-      </thead>
-      <tbody id="print-rows"></tbody>
-    </table>
-
-    <div class="print-summary">
-      <div class="print-terms">Terms</div>
-      <div class="print-totals">
-        <div class="tot-row"><span>Subtotal</span><span id="print-subtotal">$0.00</span></div>
-        <div class="tot-row"><span>Discount</span><span>$0.00</span></div>
-        <div class="tot-row"><span>Tax Rate</span><span>0%</span></div>
-        <div class="tot-row"><span>Tax</span><span>$0.00</span></div>
-        <div class="tot-row total"><span>Total</span><span id="print-total">$0.00</span></div>
-      </div>
-    </div>
-
-    <div class="print-footer">Thank you for your business!</div>
-  </div>
-
-  <script src="/js/data.js?v=20260413"></script>
-  <script src="/js/db.js?v=20260413"></script>
-  <script src="/js/ui.js?v=20260413"></script>
-  <script src="/js/rows.js?v=20260413"></script>
-  <script src="/js/history.js?v=20260413"></script>
-  <script src="/js/app.js?v=20260413"></script>
-</body>
-</html>

frontend/js/app.js

@@ -1,218 +0,0 @@
-/* ─────────────────────────────────────────
-   js/app.js  —  Main application controller
-   ───────────────────────────────────────── */
-
-var App = (function() {
-    var _currentId = null;
-
-    // ── Internal Helper: Collect form data ──
-    function _collect() {
-        // Safe check for Rows object
-        var rowData = (typeof Rows !== 'undefined') ? Rows.collect() : [];
-        
-        var items = rowData.map(row => ({
-            description: row.description || row.desc || "Service",
-            quantity: parseInt(row.quantity || row.qty) || 1,
-            price_per_unit: parseFloat(row.price_per_unit || row.price) || 0
-        }));
-
-        return {
-            date: document.getElementById("inv-date")?.value ? document.getElementById("inv-date").value + "T00:00:00" : new Date().toISOString(),
-            doctor_name: document.getElementById("doctor-name")?.value || "",
-            clinic_name: document.getElementById("clinic")?.value || "",
-            patient_name: document.getElementById("patient")?.value || "",
-            shade: document.getElementById("shade")?.value || "",
-            received_amount: parseFloat(document.getElementById("received-input")?.value) || 0,
-            items: items,
-            notes: document.getElementById("notes")?.value || ""
-        };
-    }
-
-    // ── Public: Save to Neon ──
-    async function save() {
-        console.log("Save initiated...");
-        try {
-            var data = _collect();
-            if (_currentId) data.id = _currentId;
-
-            // Ensure dbSave exists from db.js
-            if (typeof dbSave !== 'function') throw new Error("dbSave function not found. Check db.js");
-
-            var result = await dbSave(data);
-            
-            if (document.getElementById("inv-number")) {
-                document.getElementById("inv-number").value = result.invoice_no;
-            }
-            _currentId = result.id;
-
-            if (typeof showToast === 'function') showToast(`✅ Saved! ${result.invoice_no}`, "success");
-            if (typeof updateHeaderBadge === 'function') updateHeaderBadge();
-            
-        } catch (err) {
-            console.error("Save Error:", err);
-            if (typeof showToast === 'function') showToast("❌ Save failed. Check console.", "error");
-        }
-    }
-
-    // ── Public: New/Reset ──
-    async function _resetForm() {
-        _currentId = null;
-        if (document.getElementById("inv-number")) document.getElementById("inv-number").value = "Auto-Generated";
-        if (document.getElementById("inv-date")) document.getElementById("inv-date").value = (typeof todayStr !== 'undefined') ? todayStr() : "";
-        
-        const fields = ["doctor-name", "clinic", "patient", "shade", "notes", "received-input"];
-        fields.forEach(id => {
-            const el = document.getElementById(id);
-            if (el) el.value = "";
-        });
-
-        if (typeof Rows !== 'undefined') Rows.reset();
-        if (typeof updateHeaderBadge === 'function') updateHeaderBadge();
-    }
-
-    function showPage(page) {
-        if (typeof switchPage === 'function') switchPage(page);
-        if (page === "history" && typeof History !== 'undefined') History.load();
-    }
-
-    async function newInvoice() {
-        await _resetForm();
-        showPage("invoice");
-    }
-
-    function clear() {
-        if (confirm("Clear form?")) _resetForm();
-    }
-
-    function _fmtMoney(n) {
-        return "PKR " + (Number(n) || 0).toLocaleString("en-PK", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    }
-
-    function _preparePrint() {
-        var invNo = document.getElementById("inv-number")?.value || "INV-0000";
-        var invDate = document.getElementById("inv-date")?.value || "";
-        var doctor = document.getElementById("doctor-name")?.value || "";
-        var clinic = document.getElementById("clinic")?.value || "";
-        var patient = document.getElementById("patient")?.value || "";
-        var shade = document.getElementById("shade")?.value || "";
-
-        var invNoEl = document.getElementById("print-inv-no");
-        var invDateEl = document.getElementById("print-inv-date");
-        if (invNoEl) invNoEl.textContent = invNo === "Auto-Generated" ? "INV-0000" : invNo;
-        if (invDateEl) invDateEl.textContent = invDate || "Enter Date Here";
-
-        var clientEl = document.getElementById("print-client-name");
-        var companyEl = document.getElementById("print-company-name");
-        if (clientEl) clientEl.textContent = doctor || "Doctor Name";
-        if (companyEl) companyEl.textContent = clinic || "Clinic Name";
-
-        var rowsEl = document.getElementById("print-rows");
-        if (rowsEl) rowsEl.innerHTML = "";
-
-        var items = (typeof Rows !== 'undefined') ? Rows.collect() : [];
-
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            var desc = item ? item.description : "";
-            var qty = item ? item.quantity : "";
-            var price = item ? item.price_per_unit : "";
-            var total = item ? (item.quantity * item.price_per_unit) : "";
-            var rowPatient = item ? (patient || "") : "";
-            var rowShade = item ? (shade || "") : "";
-            var rowHtml = [
-                '<tr>',
-                '<td class="c">', (i + 1), '</td>',
-                '<td>', rowPatient, '</td>',
-                '<td>', rowShade, '</td>',
-                '<td>', desc || '', '</td>',
-                '<td class="c">', (qty !== "" ? qty : ''), '</td>',
-                '<td class="r">', (price !== "" ? _fmtMoney(price) : ''), '</td>',
-                '<td class="r">', (total !== "" ? _fmtMoney(total) : ''), '</td>',
-                '</tr>'
-            ].join("");
-            if (rowsEl) rowsEl.insertAdjacentHTML("beforeend", rowHtml);
-        }
-
-        var subtotal = (typeof Rows !== 'undefined') ? Rows.subtotal() : 0;
-        var subEl = document.getElementById("print-subtotal");
-        var totalEl = document.getElementById("print-total");
-        if (subEl) subEl.textContent = _fmtMoney(subtotal);
-        if (totalEl) totalEl.textContent = _fmtMoney(subtotal);
-    }
-
-    // Empty stubs to prevent "undefined" errors if UI calls them
-    function print() { _preparePrint(); window.print(); }
-    function downloadPDF() { _preparePrint(); window.print(); }
-    function exportExcel() { console.log("Exporting..."); }
-    async function loadEdit(id) {
-        try {
-            if (!id || isNaN(id)) {
-                if (typeof showToast === 'function') showToast("❌ Invalid invoice id", "error");
-                return;
-            }
-            // Give immediate feedback and switch view
-            if (typeof showPage === "function") showPage("invoice");
-            if (typeof showToast === 'function') showToast("Loading invoice...", "info");
-            if (typeof dbGet !== 'function') throw new Error("dbGet function not found. Check db.js");
-            const inv = await dbGet(id);
-
-            _currentId = inv.id || id;
-            if (document.getElementById("inv-number")) {
-                document.getElementById("inv-number").value = inv.invoice_no || "Auto-Generated";
-            }
-            if (document.getElementById("inv-date")) {
-                const dateStr = inv.date ? String(inv.date).split("T")[0] : "";
-                document.getElementById("inv-date").value = dateStr;
-            }
-
-            const doctorEl = document.getElementById("doctor-name");
-            const clinicEl = document.getElementById("clinic");
-            const patientEl = document.getElementById("patient");
-            const shadeEl = document.getElementById("shade");
-            const receivedEl = document.getElementById("received-input");
-
-            if (doctorEl) doctorEl.value = inv.doctor_name || "";
-            if (clinicEl) clinicEl.value = inv.clinic_name || "";
-            if (patientEl) patientEl.value = inv.patient_name || "";
-            if (shadeEl) shadeEl.value = inv.shade || "";
-            if (receivedEl) receivedEl.value = (inv.received_amount || 0);
-
-            if (typeof Rows !== 'undefined' && typeof Rows.load === 'function') {
-                Rows.load(inv.items || []);
-            }
-
-            if (typeof updateHeaderBadge === 'function') updateHeaderBadge();
-            showPage("invoice");
-        } catch (err) {
-            console.error("Load Error:", err);
-            if (typeof showToast === 'function') showToast("❌ Load failed. Check console.", "error");
-        }
-    }
-
-    // ── Boot ──
-    document.addEventListener("DOMContentLoaded", async function() {
-        console.log("App Booting...");
-        try {
-            if (typeof dbOpen === 'function') await dbOpen();
-            if (document.getElementById("inv-number")) document.getElementById("inv-number").value = "Auto-Generated";
-            if (document.getElementById("inv-date") && typeof todayStr !== 'undefined') {
-                document.getElementById("inv-date").value = todayStr();
-            }
-            if (typeof updateHeaderBadge === 'function') updateHeaderBadge();
-            if (typeof Rows !== 'undefined') Rows.reset();
-        } catch(e) {
-            console.error("Boot failure:", e);
-        }
-    });
-
-    return {
-        showPage: showPage,
-        save: save,
-        newInvoice: newInvoice,
-        clear: clear,
-        print: print,
-        downloadPDF: downloadPDF,
-        exportExcel: exportExcel,
-        loadEdit: loadEdit
-    };
-})();

frontend/js/data.js

@@ -1,45 +0,0 @@
-/* ─────────────────────────────────────────
-   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 = [
-  "Veneer",
-  "Zirconium Crown",
-  "Zirconium Implant",
-  "PFM Crown",
-  "PFM Implant",
-  "D-sign Porcelain",
-  "Night Guard",
-  "Retainer",
-  "Bleaching Tary",
-  "Soft Denture",
-  "EMAX Veneer",
-  "EMAX Crown",
-  "Zirconium bridge + I bar"
-];
-// Expose globally so rows.js can always access it
-window.SERVICES = SERVICES;
-
-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

@@ -1,82 +0,0 @@
-/* ─────────────────────────────────────────
-   js/db.js  —  Live Neon DB Helpers
-   ───────────────────────────────────────── */
-
-const API_URL = "/api/invoices"; // Relative path since frontend/backend are on same host
-
-/* No need to "Open" a local DB anymore, but we'll keep the function 
-   so app.js doesn't break. We'll just return true. */
-async function dbOpen() {
-    console.log("Connected to Live API Mode");
-    return true;
-}
-
-/* Save one invoice record to Neon */
-async function dbSave(data) {
-    try {
-            const response = await fetch(`${API_URL}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data)
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.detail || "Failed to save to Neon");
-        }
-
-        const result = await response.json();
-        // result will contain { "id": X, "invoice_no": "INV-XXXX" }
-        return result; 
-    } catch (error) {
-        console.error("Save Error:", error);
-        throw error;
-    }
-}
-
-/* Load all invoice records from Neon */
-async function dbAll() {
-    try {
-        const response = await fetch(`${API_URL}/`);
-        if (!response.ok) throw new Error("Could not fetch history");
-        return await response.json();
-    } catch (error) {
-        console.error("Fetch Error:", error);
-        return []; // Return empty list on error to prevent UI crash
-    }
-}
-
-/* Load one invoice by id from Neon */
-async function dbGet(id) {
-    try {
-        const response = await fetch(`${API_URL}/${id}`);
-        if (!response.ok) {
-            let detail = "";
-            try {
-                const err = await response.json();
-                detail = err.detail ? ` (${err.detail})` : "";
-            } catch (e) {}
-            throw new Error(`Could not fetch invoice${detail}`);
-        }
-        return await response.json();
-    } catch (error) {
-        console.error("Fetch One Error:", error);
-        throw error;
-    }
-}
-
-/* Delete one invoice by id from Neon */
-async function dbDelete(id) {
-    try {
-        const response = await fetch(`${API_URL}/${id}`, {
-            method: 'DELETE'
-        });
-        if (!response.ok) throw new Error("Could not delete invoice");
-        return true;
-    } catch (error) {
-        console.error("Delete Error:", error);
-        throw error;
-    }
-}

frontend/js/history.js

@@ -1,129 +0,0 @@
-/* ─────────────────────────────────────────
-   js/history.js  —  Live Neon History Page
-   ───────────────────────────────────────── */
-
-var History = (function() {
-
-  var _allInvoices = [];   // cache of loaded invoices
-  var _boundClicks = false;
-
-  /* Format PKR */
-  function _fmt(n) { return fmt(n); }
-
-  /* Build HTML for a single history card (Updated for Neon fields) */
-/* Build HTML for a single history card (Updated for Neon fields + Notes) */
-  function _buildCard(inv) {
-    // Check if there is a note, and create a small snippet for the UI
-    var notePreview = inv.notes 
-      ? '<div class="hist-detail" style="color:var(--amber); font-style:italic;">📝 Note: ' + inv.notes.substring(0, 30) + (inv.notes.length > 30 ? '...' : '') + '</div>'
-      : '';
-
-    return [
-      '<div class="hist-item">',
-        '<div class="hist-inv-no">' + (inv.invoice_no || "—") + '</div>',
-        '<div>',
-          '<div class="hist-client-name">' + (inv.doctor_name || "Unknown Doctor") + '</div>',
-          '<div class="hist-date">📅 ' + (inv.date ? inv.date.split('T')[0] : "—") + ' &nbsp;·&nbsp; ' + (inv.clinic_name || "—") + '</div>',
-        '</div>',
-        '<div>',
-          '<div class="hist-detail">Patient: <span>' + (inv.patient_name || "—") + '</span></div>',
-          // Show the note preview here
-          notePreview, 
-        '</div>',
-        '<div>',
-          '<div class="hist-amount">' + _fmt(inv.total_amount || 0) + '</div>',
-          '<div style="font-size:0.75rem;color:var(--green);text-align:right;margin-top:2px">Rcvd: ' + _fmt(inv.received_amount || 0) + '</div>',
-        '</div>',
-        '<div class="hist-actions">',
-          '<button class="btn-xs btn-xs-blue" type="button" data-action="load" data-id="' + inv.id + '">✏️ Load</button>',
-          '<button class="btn-xs btn-xs-red"  type="button" data-action="delete" data-id="' + inv.id + '">🗑️</button>',
-        '</div>',
-      '</div>',
-    ].join("");
-  }
-  
-  /* Load all invoices from DB and render */
-  function load() {
-    // dbAll() now calls fetch('/invoices/')
-    dbAll().then(function(all) {
-      // API already returns newest first if you used .order_by(Invoice.id.desc())
-      _allInvoices = all; 
-      filter();
-    }).catch(err => {
-      console.error("Failed to load history:", err);
-      showToast("❌ Could not load history", "error");
-    });
-  }
-
-  /* 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.invoice_no  || "").toLowerCase().includes(q) ||
-        (inv.doctor_name || "").toLowerCase().includes(q) ||
-        (inv.clinic_name || "").toLowerCase().includes(q) ||
-        (inv.patient_name|| "").toLowerCase().includes(q)
-      );
-    });
-    _render(filtered);
-  }
-
-  /* Delete an invoice after confirmation */
-  function deleteInvoice(id) {
-    if (!confirm("Delete this invoice permanently from Neon?")) return;
-    dbDelete(id).then(function() {
-      showToast("🗑️ Invoice deleted", "success");
-      load();   // refresh the list
-    }).catch(err => {
-      showToast("❌ Delete failed", "error");
-    });
-  }
-
-  /* Get a single invoice by id from cache */
-  function getById(id) {
-    return _allInvoices.find(function(inv) { return inv.id === id; }) || null;
-  }
-
-  /* Internal render function (No changes needed) */
-  function _render(list) {
-    var container = document.getElementById("hist-list");
-    var count     = document.getElementById("history-count");
-    if (!container || !count) return;
-
-    _bindClicks();
-    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"><h3>No invoices found</h3></div>';
-    } else {
-      container.innerHTML = list.map(_buildCard).join("");
-    }
-  }
-
-  function _bindClicks() {
-    if (_boundClicks) return;
-    document.addEventListener("click", function(e) {
-      var btn = e.target.closest("button[data-action]");
-      if (!btn) return;
-      var id = parseInt(btn.getAttribute("data-id"), 10);
-      var action = btn.getAttribute("data-action");
-      if (action === "load") {
-        if (typeof showToast === "function") showToast("Loading invoice...", "info");
-        if (typeof App !== "undefined" && typeof App.loadEdit === "function") {
-          App.loadEdit(id);
-        } else if (typeof showToast === "function") {
-          showToast("Load handler missing", "error");
-        }
-      } else if (action === "delete") {
-        deleteInvoice(id);
-      }
-    });
-    _boundClicks = true;
-  }
-
-  return { load: load, filter: filter, deleteInvoice: deleteInvoice, getById: getById };
-
-})();

frontend/js/rows.js

@@ -1,153 +0,0 @@
-/* ─────────────────────────────────────────
-   js/rows.js  —  Service row management (Live Version)
-   ───────────────────────────────────────── */
-
-var Rows = (function() {
-
-  var _rowCounter = 0;
-
-  /* Build the <select> options HTML */
-  function _serviceOptions(selected) {
-    var html = '<option value="">— Select Service —</option>';
-    var services = (typeof SERVICES !== "undefined" && SERVICES) ? SERVICES : [];
-    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, update, and summary logic (No changes needed here) */
-  function _renumber() {
-    var cells = document.querySelectorAll("#rows-body .row-index");
-    cells.forEach(function(cell, i) { cell.textContent = i + 1; });
-  }
-
-  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();
-  }
-
-  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)";
-  }
-
-  /* ── Collect current row data (UPDATED FOR FASTAPI) ── */
-  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    = parseInt(inputs[0] ? inputs[0].value : 1)  || 1;
-      var price  = parseFloat(inputs[1] ? inputs[1].value : 0)  || 0;
-      
-      var serviceName = sel ? sel.value : "";
-      
-      // We only collect rows that actually have a service selected
-      if (serviceName) {
-        result.push({
-          description:    serviceName,       // Matches Pydantic
-          quantity:       qty,               // Matches Pydantic
-          price_per_unit: price,             // Matches Pydantic
-          total_price:    qty * price        // Optional, backend recalculates anyway
-        });
-      }
-    });
-    return result;
-  }
-
-  /* Helper methods */
-  function add() {
-    var id = ++_rowCounter;
-    document.getElementById("rows-body").insertAdjacentHTML("beforeend", _buildRow(id));
-    _renumber();
-  }
-
-  function remove(id) {
-    var row = document.getElementById("row-" + id);
-    if (row) { row.remove(); _renumber(); _recalcSummary(); }
-  }
-
-  function reset() {
-    document.getElementById("rows-body").innerHTML = "";
-    add(); add();
-  }
-
-  /* Loading from DB (Updated keys) */
-  function load(savedItems) {
-    document.getElementById("rows-body").innerHTML = "";
-    (savedItems || []).forEach(function(item) {
-      var id = ++_rowCounter;
-      // Note the mapping: description -> desc, etc.
-      document.getElementById("rows-body")
-              .insertAdjacentHTML("beforeend", _buildRow(
-                  id, 
-                  item.description, 
-                  item.quantity, 
-                  item.price_per_unit, 
-                  (item.quantity * item.price_per_unit)
-              ));
-    });
-    _renumber();
-    _recalcSummary();
-  }
-
-  function subtotal() {
-    return collect().reduce(function(sum, r) { return sum + (r.quantity * r.price_per_unit); }, 0);
-  }
-
-  document.addEventListener("DOMContentLoaded", function() {
-    document.getElementById("received-input").addEventListener("input", _recalcSummary);
-  });
-
-  return { add: add, remove: remove, reset: reset, load: load, collect: collect, subtotal: subtotal, update: update };
-
-})();

frontend/js/ui.js

@@ -1,68 +0,0 @@
-/* ─────────────────────────────────────────
-   js/ui.js  —  UI helpers & shared utils
-   ───────────────────────────────────────── */
-
-/* Show a toast notification */
-function showToast(msg, type) {
-  type = type || "success";
-  var el = document.getElementById("toast");
-  if (!el) return;
-  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 */
-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 pages */
-function switchPage(page) {
-  const invPage = document.getElementById("page-invoice");
-  const histPage = document.getElementById("page-history");
-  const invTab = document.getElementById("tab-invoice");
-  const histTab = document.getElementById("tab-history");
-
-  if (invPage) invPage.style.display = (page === "invoice") ? "" : "none";
-  if (histPage) histPage.style.display = (page === "history") ? "" : "none";
-
-  if (invTab) invTab.classList.toggle("active", page === "invoice");
-  if (histTab) histTab.classList.toggle("active", page === "history");
-}
-
-/* Update the live invoice number badge in the header */
-function updateHeaderBadge() {
-  const numInput = document.getElementById("inv-number");
-  const displayPill = document.getElementById("display-inv-number");
-
-  if (numInput && displayPill) {
-    const val = numInput.value;
-    // Show "NEW" if it hasn't been saved to Neon yet
-    const displayNum = (val === "Auto-Generated" || !val) ? "NEW" : val;
-    displayPill.textContent = "#" + displayNum;
-  }
-}
-
-/* Wire up listeners */
-document.addEventListener("DOMContentLoaded", function() {
-  const invNumEl = document.getElementById("inv-number");
-  
-  // Update badge whenever the invoice number changes (e.g., after saving)
-  if (invNumEl) {
-    invNumEl.addEventListener("change", updateHeaderBadge);
-    // Initial call to set badge to #NEW
-    updateHeaderBadge();
-  }
-});