update: Added NVS Gen on the Flasher

Orders:
- Auto-set customer status to ACTIVE when creating a new order (both "+ New Order" and "Init Negotiations")
- Update Status panel now resets datetime to current time each time it opens
- Empty note on status update saves as empty string instead of falling back to previous note
- Default note pre-filled per status type when Update Status panel opens or status changes
- Timeline items now show verbose date/time ("25 March 2026, 4:49 pm") with muted updated-by indicator

CustomerDetail:
- Reordered tabs: Overview | Communication | Quotations | Orders | Finance | Files & Media | Devices | Support
- Renamed "Financials" tab to "Finance"

CustomerList:
- Location column shows city only, falls back to country if city is empty

OverviewTab:
- Hero status container redesigned: icon + status name + verbose description + shimmer border
- Issues, Support, Orders shown as matching hero cards on the same row (status flex-grows to fill space)
- All four cards share identical height, padding, and animated shimmer border effect
- Stat card borders use muted opacity to stay visually consistent with the status card

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/manufacturing/router.py

@@ -274,9 +274,10 @@ async def download_nvs(
     sn: str,
     hw_type_override: Optional[str] = Query(None, description="Override hw_type written to NVS (for bespoke firmware)"),
     hw_revision_override: Optional[str] = Query(None, description="Override hw_revision written to NVS (for bespoke firmware)"),
+    nvs_schema: Optional[str] = Query(None, description="NVS schema to use: 'legacy' or 'new' (default)"),
     user: TokenPayload = Depends(require_permission("manufacturing", "view")),
 ):
-    binary = service.get_nvs_binary(sn, hw_type_override=hw_type_override, hw_revision_override=hw_revision_override)
+    binary = service.get_nvs_binary(sn, hw_type_override=hw_type_override, hw_revision_override=hw_revision_override, legacy=(nvs_schema == "legacy"))
     await audit.log_action(
         admin_user=user.email,
         action="device_flashed",

backend/manufacturing/service.py

@@ -197,12 +197,13 @@ def update_device_status(sn: str, data: DeviceStatusUpdate, set_by: str | None =
     return _doc_to_inventory_item(doc_ref.get())
 
 
-def get_nvs_binary(sn: str, hw_type_override: str | None = None, hw_revision_override: str | None = None) -> bytes:
+def get_nvs_binary(sn: str, hw_type_override: str | None = None, hw_revision_override: str | None = None, legacy: bool = False) -> bytes:
     item = get_device_by_sn(sn)
     return generate_nvs_binary(
         serial_number=item.serial_number,
         hw_family=hw_type_override if hw_type_override else item.hw_type,
         hw_revision=hw_revision_override if hw_revision_override else item.hw_version,
+        legacy=legacy,
     )
 
 

frontend/src/crm/customers/CustomerDetail.jsx

@@ -141,7 +141,7 @@ function ReadField({ label, value }) {
   );
 }
 
-const TABS = ["Overview", "Support", "Financials", "Orders", "Quotations", "Communication", "Files & Media", "Devices"];
+const TABS = ["Overview", "Communication", "Quotations", "Orders", "Finance", "Files & Media", "Devices", "Support"];
 
 const LANGUAGE_LABELS = {
   el: "Greek",
@@ -457,7 +457,9 @@ export default function CustomerDetail() {
   const [error, setError] = useState("");
   const [activeTab, setActiveTab] = useState(() => {
     const tab = searchParams.get("tab");
-    const TABS = ["Overview", "Support", "Financials", "Orders", "Quotations", "Communication", "Files & Media", "Devices"];
+    const TABS = ["Overview", "Communication", "Quotations", "Orders", "Finance", "Files & Media", "Devices", "Support"];
+    // Also accept old tab names for backwards compat
+    if (tab === "Financials") return "Finance";
     return TABS.includes(tab) ? tab : "Overview";
   });
 
@@ -682,7 +684,7 @@ export default function CustomerDetail() {
   useEffect(() => {
     if (activeTab === "Overview") { loadOrders(); loadComms(); loadDevicesAndProducts(); loadLatestQuotations(); }
     if (activeTab === "Support") { /* customer data already loaded */ }
-    if (activeTab === "Financials") { loadOrders(); }
+    if (activeTab === "Finance") { loadOrders(); }
     if (activeTab === "Orders") loadOrders();
     if (activeTab === "Communication") loadComms();
     if (activeTab === "Files & Media") { setNcThumbMapState(null); loadMedia(); browseNextcloud(); }
@@ -1491,8 +1493,8 @@ export default function CustomerDetail() {
         />
       )}
 
-      {/* Financials Tab */}
-      {activeTab === "Financials" && (
+      {/* Finance Tab */}
+      {activeTab === "Finance" && (
         <FinancialsTab
           customer={customer}
           orders={orders}

frontend/src/crm/customers/CustomerDetail/OrdersTab.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import api from "../../../api/client";
 import {
   ORDER_STATUS_LABELS,
-  TIMELINE_TYPE_LABELS, OrderStatusChip, fmtDateTime, fmtDateFull,
+  TIMELINE_TYPE_LABELS, OrderStatusChip, fmtDateFull,
 } from "./shared";
 
 const labelStyle = { fontSize: 11, fontWeight: 600, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" };
@@ -11,6 +11,29 @@ const inputStyle = { backgroundColor: "var(--bg-input)", borderColor: "var(--bor
 const STATUSES = Object.entries(ORDER_STATUS_LABELS);
 const TIMELINE_TYPES = Object.entries(TIMELINE_TYPE_LABELS);
 
+const STATUS_DEFAULT_NOTES = {
+  negotiating:                    "Just started Negotiating with the customer on a possible new order",
+  awaiting_quotation:             "We agreed on what the customer needs, and currently drafting a Quote for them",
+  awaiting_customer_confirmation: "The Quotation has been sent to the Customer. Awaiting their Confirmation",
+  awaiting_fulfilment:            "Customer has accepted the Quotation, and no further action is needed from them. First Chance possible we are going to build their device",
+  awaiting_payment:               "Customer has accepted the Quotation, but a payment|advance is due before we proceed",
+  manufacturing:                  "We have begun manufacturing the Customer's Device",
+  shipped:                        "The order has been Shipped ! Awaiting Customer Feedback",
+  installed:                      "Customer has informed us that the device has been successfully Installed !",
+  declined:                       "Customer sadly declined our offer",
+  complete:                       "Customer has successfully installed, and operated their product. No further action needed ! The order is complete !",
+};
+
+const VERBOSE_DATE_FMT = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "long", year: "numeric" });
+const TIME_FMT = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
+
+function fmtVerboseDateTime(iso) {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  return `${VERBOSE_DATE_FMT.format(d)}, ${TIME_FMT.format(d).toLowerCase()}`;
+}
+
 // ── Delete confirm modal ──────────────────────────────────────────────────────
 function DeleteConfirm({ message, onConfirm, onCancel, deleting }) {
   return (
@@ -46,8 +69,11 @@ function TimelineEventRow({ event, index, canEdit, onEdit, onDelete }) {
         <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text-heading)" }}>
           {TIMELINE_TYPE_LABELS[event.type] || event.type}
         </div>
-        {event.note && <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2, whiteSpace: "pre-wrap" }}>{event.note}</div>}
-        <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>{fmtDateTime(event.date)} · {event.updated_by}</div>
+        {event.note && <div style={{ fontSize: 12, color: "var(--text-primary)", marginTop: 3, whiteSpace: "pre-wrap" }}>{event.note}</div>}
+        <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 3 }}>
+          {fmtVerboseDateTime(event.date)}
+          {event.updated_by && <span style={{ opacity: 0.55 }}> · {event.updated_by}</span>}
+        </div>
       </div>
       {canEdit && hovered && (
         <div style={{ display: "flex", gap: 4, flexShrink: 0, alignSelf: "flex-start" }}>
@@ -146,7 +172,6 @@ function OrderCard({ order, customerId, canEdit, user, onReload, isOpen, onToggl
       );
       if (!existingMatch) {
         const statusToType = {
-          // "negotiating" as the first archived entry → "Started Negotiations"
           negotiating: "negotiations_started",
           awaiting_quotation: "quote_request",
           awaiting_customer_confirmation: "quote_sent",
@@ -167,13 +192,13 @@ function OrderCard({ order, customerId, canEdit, user, onReload, isOpen, onToggl
           archived_status: order.status,
         });
       }
-      // Step 2: update to new status (and optionally title)
+      // Step 2: update to new status — if note is left empty, save as empty (not the old note)
       await api.patch(`/crm/customers/${customerId}/orders/${order.id}`, {
         status: statusUpdateForm.newStatus,
         title: statusUpdateForm.title || order.title || null,
         status_updated_date: new Date(statusUpdateForm.datetime).toISOString(),
         status_updated_by: user?.name || "Staff",
-        notes: statusUpdateForm.note || order.notes || null,
+        notes: statusUpdateForm.note,
       });
       setShowStatusUpdate(false);
       setStatusUpdateForm({ newStatus: order.status || "negotiating", title: order.title || "", note: "", datetime: new Date().toISOString().slice(0, 16) });
@@ -262,7 +287,21 @@ function OrderCard({ order, customerId, canEdit, user, onReload, isOpen, onToggl
           {/* Update Status button — neutral style */}
           {canEdit && (
             <button type="button"
-              onClick={(e) => { e.stopPropagation(); setShowStatusUpdate((v) => !v); setShowEditForm(false); }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowStatusUpdate((v) => {
+                  if (!v) {
+                    // Reset datetime to NOW and pre-fill default note each time panel opens
+                    setStatusUpdateForm((f) => ({
+                      ...f,
+                      datetime: new Date().toISOString().slice(0, 16),
+                      note: STATUS_DEFAULT_NOTES[f.newStatus] || "",
+                    }));
+                  }
+                  return !v;
+                });
+                setShowEditForm(false);
+              }}
               style={{
                 fontSize: 12, padding: "4px 12px", borderRadius: 6,
                 border: "1px solid var(--border-primary)",
@@ -306,7 +345,7 @@ function OrderCard({ order, customerId, canEdit, user, onReload, isOpen, onToggl
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
             <div>
               <div style={{ ...labelStyle, marginBottom: 4 }}>New Status</div>
-              <select value={statusUpdateForm.newStatus} onChange={(e) => setStatusUpdateForm((f) => ({ ...f, newStatus: e.target.value }))} style={inputStyle}>
+              <select value={statusUpdateForm.newStatus} onChange={(e) => setStatusUpdateForm((f) => ({ ...f, newStatus: e.target.value, note: STATUS_DEFAULT_NOTES[e.target.value] || "" }))} style={inputStyle}>
                 {STATUSES.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
               </select>
             </div>
@@ -508,6 +547,14 @@ function OrderCard({ order, customerId, canEdit, user, onReload, isOpen, onToggl
 }
 
 // ── New Order form ────────────────────────────────────────────────────────────
+async function setCustomerActive(customerId) {
+  try {
+    await api.patch(`/crm/customers/${customerId}/relationship-status`, { status: "active" });
+  } catch {
+    // Non-critical — silently ignore
+  }
+}
+
 function NewOrderForm({ customerId, user, onSaved, onCancel, suggestedOrderNumber }) {
   const [form, setForm] = useState({
     order_number: suggestedOrderNumber || "",
@@ -531,6 +578,7 @@ function NewOrderForm({ customerId, user, onSaved, onCancel, suggestedOrderNumbe
         status_updated_date: new Date(form.date).toISOString(),
         status_updated_by: user?.name || "Staff",
       });
+      await setCustomerActive(customerId);
       onSaved();
     } catch (err) {
       alert(err.message);

frontend/src/crm/customers/CustomerDetail/OverviewTab.jsx

@@ -4,6 +4,13 @@ import api from "../../../api/client";
 import { CommTypeIconBadge, CommDirectionIcon } from "../../components/CommIcons";
 import { REL_STATUS_LABELS, REL_STATUS_STYLES, OrderStatusChip, fmtDate } from "./shared";
 
+import clientIcon      from "../../../assets/customer-status/client.svg?raw";
+import inactiveIcon    from "../../../assets/customer-status/inactive.svg?raw";
+import churnedIcon     from "../../../assets/customer-status/churned.svg?raw";
+import exclamationIcon from "../../../assets/customer-status/exclamation.svg?raw";
+import wrenchIcon      from "../../../assets/customer-status/wrench.svg?raw";
+import orderIcon       from "../../../assets/customer-status/order.svg?raw";
+
 const LANGUAGE_LABELS = {
   af:"Afrikaans",sq:"Albanian",am:"Amharic",ar:"Arabic",hy:"Armenian",az:"Azerbaijani",
   eu:"Basque",be:"Belarusian",bn:"Bengali",bs:"Bosnian",bg:"Bulgarian",ca:"Catalan",
@@ -56,8 +63,26 @@ function TagsField({ tags }) {
   );
 }
 
+// Verbose description per relationship status
+const REL_STATUS_DESCRIPTIONS = {
+  lead:     "This contact is a potential new lead. No active engagement yet.",
+  prospect: "Actively engaged — exploring possibilities before a formal order.",
+  active:   "Active customer with ongoing or recent commercial activity.",
+  inactive: "No recent engagement. May need a follow-up to re-activate.",
+  churned:  "Customer has disengaged. Orders declined or no activity for a long period.",
+};
+
+// Icon per relationship status (same logic as CustomerList resolveStatusIcon base cases)
+const REL_STATUS_ICONS = {
+  lead:     clientIcon,
+  prospect: clientIcon,
+  active:   clientIcon,
+  inactive: inactiveIcon,
+  churned:  churnedIcon,
+};
+
 // Status badge: shows current status + gear icon to open inline change dropdown
-function RelStatusSelector({ customer, onUpdated, canEdit, compact }) {
+function RelStatusSelector({ customer, onUpdated, canEdit }) {
   const statuses = ["lead", "prospect", "active", "inactive", "churned"];
   const current = customer.relationship_status || "lead";
   const [open, setOpen] = useState(false);
@@ -81,125 +106,186 @@ function RelStatusSelector({ customer, onUpdated, canEdit, compact }) {
   };
 
   const st = REL_STATUS_STYLES[current] || REL_STATUS_STYLES.lead;
+  const icon = REL_STATUS_ICONS[current];
+  const description = REL_STATUS_DESCRIPTIONS[current] || "";
 
-  if (compact) {
-    return (
-      <div style={{ position: "relative", display: "flex" }} ref={ref}>
-        <button
-          type="button"
-          onClick={() => canEdit && setOpen((v) => !v)}
-          style={{
-            display: "flex", alignItems: "center", gap: 8,
-            padding: "7px 14px", borderRadius: 8,
-            border: `1px solid ${st.border}`,
-            backgroundColor: st.bg,
-            color: st.color,
-            cursor: canEdit ? "pointer" : "default",
-            fontSize: 13, fontWeight: 700,
-            width: "100%",
-          }}
-        >
-          <span style={{ fontSize: 10, fontWeight: 600, opacity: 0.65, textTransform: "uppercase", letterSpacing: "0.06em" }}>Status</span>
-          <span style={{ width: 1, height: 14, backgroundColor: "currentColor", opacity: 0.3, flexShrink: 0 }} />
-          <span>{REL_STATUS_LABELS[current] || current}</span>
-          {canEdit && (
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.7, flexShrink: 0 }}>
-              <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-            </svg>
-          )}
-        </button>
-        {open && (
-          <div style={{
-            position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 30,
-            backgroundColor: "var(--bg-card)", border: "1px solid var(--border-primary)",
-            borderRadius: 8, minWidth: 160, boxShadow: "0 8px 24px rgba(0,0,0,0.18)", overflow: "hidden",
-          }}>
-            {statuses.map((s) => {
-              const sst = REL_STATUS_STYLES[s] || {};
-              const isActive = s === current;
-              return (
-                <button key={s} type="button" onClick={() => handleClick(s)}
-                  style={{
-                    display: "block", width: "100%", textAlign: "left",
-                    padding: "9px 16px", fontSize: 13, fontWeight: isActive ? 700 : 400,
-                    cursor: "pointer", background: "none", border: "none",
-                    color: isActive ? sst.color : "var(--text-primary)",
-                    backgroundColor: isActive ? sst.bg : "transparent",
-                  }}
-                  onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.backgroundColor = "var(--bg-card-hover)"; }}
-                  onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.backgroundColor = "transparent"; }}
-                >
-                  {REL_STATUS_LABELS[s]}
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    );
-  }
+  ensureShimmer();
+  const shimmerGradient = `linear-gradient(120deg, ${st.border}44 0%, ${st.border}cc 40%, ${st.border}ff 50%, ${st.border}cc 60%, ${st.border}44 100%)`;
 
   return (
-    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
-      {statuses.map((s) => {
-        const sst = REL_STATUS_STYLES[s] || {};
-        const isActive = s === current;
-        return (
-          <button
-            key={s}
-            type="button"
-            onClick={() => handleClick(s)}
-            disabled={!canEdit}
-            style={{
-              padding: "5px 14px",
-              borderRadius: 20,
-              fontSize: 12,
-              fontWeight: 600,
-              cursor: canEdit ? "pointer" : "default",
-              border: `1px solid ${isActive ? sst.border : "var(--border-primary)"}`,
-              backgroundColor: isActive ? sst.bg : "transparent",
-              color: isActive ? sst.color : "var(--text-muted)",
-              boxShadow: isActive ? `0 0 8px ${sst.bg}` : "none",
-              transition: "all 0.15s ease",
-            }}
-          >
-            {REL_STATUS_LABELS[s]}
-          </button>
-        );
-      })}
+    <div style={{ position: "relative", flex: 1, minWidth: 0 }} ref={ref}>
+      <button
+        type="button"
+        onClick={() => canEdit && setOpen((v) => !v)}
+        className="crm-shimmer-card"
+        style={{
+          "--crm-shimmer-gradient": shimmerGradient,
+          display: "flex", alignItems: "center", gap: 14,
+          padding: "14px 18px", borderRadius: 10,
+          border: `1.5px solid ${st.border}`,
+          backgroundColor: st.bg,
+          color: st.color,
+          cursor: canEdit ? "pointer" : "default",
+          width: "100%",
+          textAlign: "left",
+          boxShadow: `0 0 16px ${st.border}33`,
+          transition: "box-shadow 0.2s",
+          position: "relative", zIndex: 0,
+        }}
+      >
+        {/* Icon */}
+        {icon && renderMaskedIconOv(icon, st.color, 28)}
+        {/* Text block */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span style={{ fontSize: 10, fontWeight: 700, opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.08em" }}>Customer Status</span>
+          </div>
+          <div style={{ fontSize: 16, fontWeight: 800, marginTop: 1, letterSpacing: "0.01em" }}>{REL_STATUS_LABELS[current] || current}</div>
+          <div style={{ fontSize: 11, fontWeight: 400, opacity: 0.7, marginTop: 3, lineHeight: 1.4 }}>{description}</div>
+        </div>
+        {canEdit && (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.5, flexShrink: 0, alignSelf: "flex-start", marginTop: 2 }}>
+            <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+          </svg>
+        )}
+      </button>
+      {open && (
+        <div style={{
+          position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 30,
+          backgroundColor: "var(--bg-card)", border: "1px solid var(--border-primary)",
+          borderRadius: 8, minWidth: 160, boxShadow: "0 8px 24px rgba(0,0,0,0.18)", overflow: "hidden",
+        }}>
+          {statuses.map((s) => {
+            const sst = REL_STATUS_STYLES[s] || {};
+            const isActive = s === current;
+            return (
+              <button key={s} type="button" onClick={() => handleClick(s)}
+                style={{
+                  display: "block", width: "100%", textAlign: "left",
+                  padding: "9px 16px", fontSize: 13, fontWeight: isActive ? 700 : 400,
+                  cursor: "pointer", background: "none", border: "none",
+                  color: isActive ? sst.color : "var(--text-primary)",
+                  backgroundColor: isActive ? sst.bg : "transparent",
+                }}
+                onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.backgroundColor = "var(--bg-card-hover)"; }}
+                onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.backgroundColor = "transparent"; }}
+              >
+                {REL_STATUS_LABELS[s]}
+              </button>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
 
-// bg/color/border per chip type
-const CHIP_STYLES = {
-  issue:   { bg: "var(--crm-issue-active-bg,rgba(224,53,53,0.12))",   color: "var(--crm-issue-active-text)",   border: "var(--crm-issue-active-text)" },
-  support: { bg: "var(--crm-support-active-bg,rgba(247,103,7,0.12))", color: "var(--crm-support-active-text)", border: "var(--crm-support-active-text)" },
-  order:   { bg: "var(--badge-blue-bg,rgba(59,130,246,0.12))",        color: "var(--badge-blue-text)",          border: "var(--badge-blue-text)" },
+const STAT_CARD_STYLES = {
+  issue:   { bg: "var(--crm-issue-active-bg,rgba(224,53,53,0.12))",   color: "var(--crm-issue-active-text)",   border: "rgba(224,53,53,0.35)" },
+  support: { bg: "var(--crm-support-active-bg,rgba(247,103,7,0.12))", color: "var(--crm-support-active-text)", border: "rgba(247,103,7,0.35)" },
+  order:   { bg: "var(--badge-blue-bg,rgba(59,130,246,0.12))",        color: "var(--badge-blue-text)",          border: "rgba(59,130,246,0.35)" },
 };
 
-function StatChip({ count, label, onClick, type }) {
-  const s = CHIP_STYLES[type] || {};
+const STAT_ICONS = {
+  issue:   exclamationIcon,
+  support: wrenchIcon,
+  order:   orderIcon,
+};
+
+const STAT_LABELS = {
+  issue:   "Open Issues",
+  support: "Support Assists",
+  order:   "Open Orders",
+};
+
+// Shared shimmer keyframes injected once
+let _shimmerInjected = false;
+function ensureShimmer() {
+  if (_shimmerInjected) return;
+  _shimmerInjected = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes crm-border-shimmer {
+      0%   { background-position: 0% 50%; }
+      50%  { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    .crm-shimmer-card {
+      position: relative;
+      border-radius: 10px;
+      overflow: visible;
+    }
+    .crm-shimmer-card::before {
+      content: "";
+      position: absolute;
+      inset: -1.5px;
+      border-radius: 11px;
+      padding: 1.5px;
+      background: var(--crm-shimmer-gradient);
+      background-size: 200% 200%;
+      animation: crm-border-shimmer 3s ease infinite;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 0;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function renderMaskedIconOv(icon, color, size = 16) {
+  const svgMarkup = icon
+    .replace(/<\?xml[\s\S]*?\?>/gi, "")
+    .replace(/<!DOCTYPE[\s\S]*?>/gi, "")
+    .replace(/<!--[\s\S]*?-->/g, "")
+    .replace(
+      /<svg\b([^>]*)>/i,
+      `<svg$1 width="${size}" height="${size}" style="display:block;width:${size}px;height:${size}px;color:${color};fill:currentColor;">`,
+    );
+  return (
+    <span style={{ width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}
+      dangerouslySetInnerHTML={{ __html: svgMarkup }} />
+  );
+}
+
+// Stat card — mirrors the status hero layout exactly so all cards share the same height
+function StatCard({ count, onClick, type }) {
+  ensureShimmer();
+  const s = STAT_CARD_STYLES[type] || {};
+  const icon = STAT_ICONS[type];
+  const label = STAT_LABELS[type] || type;
+  const shimmerGradient = `linear-gradient(120deg, ${s.border}44 0%, ${s.border}cc 40%, ${s.border}ff 50%, ${s.border}cc 60%, ${s.border}44 100%)`;
+
   return (
     <button
       type="button"
       onClick={onClick}
+      className="crm-shimmer-card"
       style={{
-        display: "flex", alignItems: "center", gap: 7,
-        padding: "7px 14px", borderRadius: 8, fontSize: 13,
-        border: `1px solid ${s.border || "var(--border-primary)"}`,
-        backgroundColor: s.bg || "var(--bg-primary)",
-        color: s.color || "var(--text-secondary)",
+        "--crm-shimmer-gradient": shimmerGradient,
+        display: "flex", alignItems: "center", gap: 12,
+        padding: "14px 18px",
+        border: `1.5px solid ${s.border}`,
+        borderRadius: 10,
+        backgroundColor: s.bg,
+        color: s.color,
         cursor: "pointer",
+        flexShrink: 0,
         whiteSpace: "nowrap",
-        transition: "opacity 0.15s",
-        fontWeight: 600,
+        transition: "box-shadow 0.2s",
+        boxShadow: `0 0 14px ${s.border}33`,
+        position: "relative", zIndex: 0,
+        textAlign: "left",
       }}
-      onMouseEnter={(e) => e.currentTarget.style.opacity = "0.75"}
-      onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}
+      onMouseEnter={(e) => { e.currentTarget.style.boxShadow = `0 0 22px ${s.border}55`; }}
+      onMouseLeave={(e) => { e.currentTarget.style.boxShadow = `0 0 14px ${s.border}33`; }}
     >
-      <span style={{ fontSize: 13, fontWeight: 700 }}>{count}</span>
-      <span style={{ fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.8 }}>{label}</span>
+      {icon && renderMaskedIconOv(icon, s.color, 28)}
+      <div>
+        <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.08em" }}>{label}</div>
+        <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.1, marginTop: 1 }}>{count}</div>
+      </div>
     </button>
   );
 }
@@ -403,20 +489,17 @@ export default function OverviewTab({
     <div>
       {/* Main hero info card */}
       <div className="ui-section-card mb-4">
-        {/* Row 1: Status badge + stat chips */}
-        <div style={{ display: "flex", alignItems: "stretch", gap: 18, flexWrap: "wrap", marginBottom: 30 }}>
-          {/* Status badge — includes inline change dropdown via gear */}
-          <RelStatusSelector customer={customer} onUpdated={onCustomerUpdated} canEdit={canEdit} compact />
-
-          {/* Stat chips — only shown when count > 0 */}
+        {/* Hero row: status (flex-grow) + stat cards (shrink-to-fit), all on one line */}
+        <div style={{ display: "flex", alignItems: "stretch", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
+          <RelStatusSelector customer={customer} onUpdated={onCustomerUpdated} canEdit={canEdit} />
           {openIssues > 0 && (
-            <StatChip count={openIssues} label={`Issue${openIssues !== 1 ? "s" : ""}`} onClick={() => onTabChange("Support")} type="issue" />
+            <StatCard count={openIssues} onClick={() => onTabChange("Support")} type="issue" />
           )}
           {supportInquiries > 0 && (
-            <StatChip count={supportInquiries} label={`Support${supportInquiries !== 1 ? " Tickets" : " Ticket"}`} onClick={() => onTabChange("Support")} type="support" />
+            <StatCard count={supportInquiries} onClick={() => onTabChange("Support")} type="support" />
           )}
           {openOrders > 0 && (
-            <StatChip count={openOrders} label={`Order${openOrders !== 1 ? "s" : ""}`} onClick={() => onTabChange("Orders")} type="order" />
+            <StatCard count={openOrders} onClick={() => onTabChange("Orders")} type="order" />
           )}
         </div>
 

frontend/src/crm/customers/CustomerDetail/QuickEntryModals.jsx

@@ -50,6 +50,10 @@ export function InitNegotiationsModal({ customerId, user, onClose, onSuccess })
         date: form.date ? new Date(form.date).toISOString() : new Date().toISOString(),
         created_by: user?.name || "Staff",
       });
+      // Auto-set customer to Active when a new order is initiated
+      try {
+        await api.patch(`/crm/customers/${customerId}/relationship-status`, { status: "active" });
+      } catch { /* non-critical */ }
       onSuccess();
       onClose();
     } catch (err) {

frontend/src/crm/customers/CustomerList.jsx

@@ -777,8 +777,8 @@ export default function CustomerList() {
         return <td key={col.id} className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>{parts.join(", ") || "—"}</td>;
       }
       case "location": {
-        const cityCountry = [loc.city, loc.country].filter(Boolean).join(", ");
-        return <td key={col.id} className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)", whiteSpace: "nowrap" }}>{cityCountry || "—"}</td>;
+        const locationDisplay = loc.city || loc.country || "";
+        return <td key={col.id} className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)", whiteSpace: "nowrap" }}>{locationDisplay || "—"}</td>;
       }
       case "email":
         return <td key={col.id} className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>{primaryContact(c, "email") || "—"}</td>;

frontend/src/manufacturing/ProvisioningWizard.jsx

@@ -851,6 +851,7 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
   const [serial, setSerial]                 = useState([]);
   const [serialAutoScroll, setSerialAutoScroll] = useState(true);
   const [error, setError]                   = useState("");
+  const [nvsSchema, setNvsSchema]           = useState("new");
 
   const loaderRef           = useRef(null);
   const portRef             = useRef(null);
@@ -993,9 +994,10 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
       const partUrl = bespokeOverride
         ? `/api/manufacturing/devices/${sn}/partitions.bin?hw_type_override=${bespokeOverride.hwFamily}`
         : `/api/manufacturing/devices/${sn}/partitions.bin`;
+      const nvsSchemaParam = nvsSchema === "legacy" ? "&nvs_schema=legacy" : "";
       const nvsUrl  = bespokeOverride
-        ? `/api/manufacturing/devices/${sn}/nvs.bin?hw_type_override=${bespokeOverride.hwFamily}&hw_revision_override=1.0`
-        : `/api/manufacturing/devices/${sn}/nvs.bin`;
+        ? `/api/manufacturing/devices/${sn}/nvs.bin?hw_type_override=${bespokeOverride.hwFamily}&hw_revision_override=1.0${nvsSchemaParam}`
+        : `/api/manufacturing/devices/${sn}/nvs.bin${nvsSchema === "legacy" ? "?nvs_schema=legacy" : ""}`;
 
       appendLog("Fetching bootloader binary…");
       const blBuffer = await fetchBinary(blUrl);
@@ -1232,16 +1234,32 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
               </button>
             )}
             {portConnected && !done && (
-              <button
-                onClick={handleStartFlash}
-                className="flex items-center gap-2 px-5 py-2 text-sm rounded-md font-medium hover:opacity-90 transition-opacity cursor-pointer"
-                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-                Start Flashing
-              </button>
+              <>
+                <select
+                  value={nvsSchema}
+                  onChange={(e) => setNvsSchema(e.target.value)}
+                  disabled={flashing}
+                  className="px-3 py-2 text-sm rounded-md border cursor-pointer font-medium"
+                  style={{
+                    backgroundColor: "var(--bg-input)",
+                    borderColor: "var(--border-primary)",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  <option value="new">NVS: Current Gen</option>
+                  <option value="legacy">NVS: Legacy Gen</option>
+                </select>
+                <button
+                  onClick={handleStartFlash}
+                  className="flex items-center gap-2 px-5 py-2 text-sm rounded-md font-medium hover:opacity-90 transition-opacity cursor-pointer"
+                  style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                  Start Flashing
+                </button>
+              </>
             )}
           </div>
         )}