Update the UI and also work on shade and description

api/__init__.py

@@ -0,0 +1 @@
+# Package marker for local api modules.

core/__init__.py

@@ -0,0 +1 @@
+# Package marker for local core modules.

frontend/css/style.css

@@ -55,6 +55,7 @@ body {
 }
 .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; }

frontend/index.html

@@ -11,7 +11,7 @@
 
   <div class="topbar">
     <div class="topbar-brand">
-      <div class="topbar-icon">🦷</div>
+      <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>
@@ -65,9 +65,29 @@
           </div>
         </div>
 
-        <div class="form-group" style="margin-top:15px">
-            <label>Shade</label>
-            <input class="form-control" id="shade" placeholder="e.g. A1, B2">
+        <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>
 
@@ -157,8 +177,8 @@
       </div>
       <div class="print-info-right">
         <div class="print-info-title">Bill To</div>
-        <div class="print-info-row"><span class="k">Client Name</span> <span class="v" id="print-client-name">Client Name</span></div>
-        <div class="print-info-row"><span class="k">Company Name</span> <span class="v" id="print-company-name">Company Name</span></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>

frontend/js/app.js

@@ -103,8 +103,8 @@ var App = (function() {
 
         var clientEl = document.getElementById("print-client-name");
         var companyEl = document.getElementById("print-company-name");
-        if (clientEl) clientEl.textContent = doctor || "Client Name";
-        if (companyEl) companyEl.textContent = clinic || "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 = "";

frontend/js/data.js

@@ -10,33 +10,22 @@ const LAB = {
 };
 
 const SERVICES = [
+  "Veneer",
   "Zirconium Crown",
-  "Veneers",
+  "Zirconium Implant",
   "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",
+  "PFM Implant",
+  "D-sign Porcelain",
   "Night Guard",
   "Retainer",
-  "Maryland Bridge",
-  "Inlay",
-  "Onlay",
-  "Post & Core",
-  "Study Model",
-  "Occlusal Splint",
-  "Other",
+  "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",

frontend/js/rows.js

@@ -9,8 +9,8 @@ var Rows = (function() {
   /* Build the <select> options HTML */
   function _serviceOptions(selected) {
     var html = '<option value="">— Select Service —</option>';
-    // Ensure SERVICES is defined in your data.js
-    SERVICES.forEach(function(s) {
+    var services = (typeof SERVICES !== "undefined" && SERVICES) ? SERVICES : [];
+    services.forEach(function(s) {
       html += '<option' + (s === selected ? ' selected' : '') + '>' + s + '</option>';
     });
     return html;
@@ -150,4 +150,4 @@ var Rows = (function() {
 
   return { add: add, remove: remove, reset: reset, load: load, collect: collect, subtotal: subtotal, update: update };
 
-})();
+})();

main.py

@@ -1,4 +1,5 @@
 import os
+from pathlib import Path
 from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
@@ -9,13 +10,17 @@ from api.invoices import router as invoice_router
 Base.metadata.create_all(bind=engine)
 
 app = FastAPI(title="SmiloCAD Invoice API")
-app.mount("/js", StaticFiles(directory="frontend/js"), name="js")
-app.mount("/css", StaticFiles(directory="frontend/css"), name="css")
+
+# Always resolve static paths relative to this file (works regardless of CWD)
+BASE_DIR = Path(__file__).resolve().parent
+app.mount("/js", StaticFiles(directory=BASE_DIR / "frontend" / "js"), name="js")
+app.mount("/css", StaticFiles(directory=BASE_DIR / "frontend" / "css"), name="css")
+app.mount("/img", StaticFiles(directory=BASE_DIR / "frontend" / "img"), name="img")
 
 # 1. Route to serve the index.html
 @app.get("/")
 async def serve_index():
-    return FileResponse("frontend/index.html")
+    return FileResponse(BASE_DIR / "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

models/__init__.py

@@ -0,0 +1 @@
+# Package marker for local models to avoid name conflicts with site-packages.