First Production Push

frontend/src/devices/DeviceForm.jsx

@@ -176,11 +176,15 @@ export default function DeviceForm() {
         device_stats: stats,
         events_on: eventsOn,
         device_location_coordinates: locationCoordinates,
-        device_melodies_all: [],
-        device_melodies_favorites: [],
-        user_list: [],
         websocket_url: websocketUrl,
         churchAssistantURL,
+        // device_melodies_all, device_melodies_favorites, user_list are managed
+        // elsewhere and must NOT be sent here to avoid overwriting them on edit
+        ...(!isEdit && {
+          device_melodies_all: [],
+          device_melodies_favorites: [],
+          user_list: [],
+        }),
       };
 
       let deviceId = id;

frontend/src/devices/DeviceList.jsx

@@ -468,13 +468,6 @@ export default function DeviceList() {
                           className="flex gap-2"
                           onClick={(e) => e.stopPropagation()}
                         >
-                          <button
-                            onClick={() => navigate(`/devices/${device.id}/edit`)}
-                            className="hover:opacity-80 text-xs cursor-pointer"
-                            style={{ color: "var(--text-link)" }}
-                          >
-                            Edit
-                          </button>
                           <button
                             onClick={() => setDeleteTarget(device)}
                             className="hover:opacity-80 text-xs cursor-pointer"

frontend/src/index.css

@@ -171,6 +171,940 @@ input[type="range"]::-moz-range-thumb {
   gap: 1.5rem;
 }
 
+.device-tabs-wrap {
+  border-bottom: 1px solid var(--border-primary);
+  padding: 0 0 0.6rem;
+}
+
+.device-tabs-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.device-tab-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.device-tab-divider {
+  width: 1px;
+  height: 16px;
+  background-color: var(--border-primary);
+  margin: 0 0.3rem;
+}
+
+.device-tab-btn {
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 0.45rem;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: all 0.2s ease;
+  position: relative;
+  --tab-tone: rgba(116, 184, 22, 0.24);
+  --tab-glow: rgba(116, 184, 22, 0.24);
+}
+
+.device-tab-btn:hover {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--tab-tone) 42%, transparent);
+}
+
+.device-tab-btn--active {
+  background-color: color-mix(in srgb, var(--tab-tone) 70%, transparent);
+  color: var(--tab-text);
+  box-shadow: 0 0 18px var(--tab-glow);
+}
+
+.device-tab-btn--dashboard {
+  --tab-tone: rgba(136, 201, 94, 0.34);
+  --tab-glow: rgba(136, 201, 94, 0.32);
+  --tab-text: #baff53;
+}
+
+.device-tab-btn--general {
+  --tab-tone: rgba(92, 158, 189, 0.34);
+  --tab-glow: rgba(92, 161, 189, 0.32);
+  --tab-text: #7dd6ff;
+}
+
+.device-tab-btn--bells {
+  --tab-tone: rgba(210, 218, 226, 0.34);
+  --tab-glow: rgba(230, 236, 243, 0.28);
+  --tab-text: #f3f9ff;
+}
+
+.device-tab-btn--clock {
+  --tab-tone: rgba(233, 199, 99, 0.34);
+  --tab-glow: rgba(233, 199, 99, 0.3);
+  --tab-text: #ffde4d;
+}
+
+.device-tab-btn--warranty {
+  --tab-tone: rgba(177, 94, 194, 0.33);
+  --tab-glow: rgba(182, 98, 185, 0.29);
+  --tab-text: rgba(214, 131, 253, 0.99);
+}
+
+.device-tab-btn--control {
+  --tab-tone: rgba(216, 106, 106, 0.34);
+  --tab-glow: rgba(215, 105, 105, 0.28);
+  --tab-text: #ff5353;
+}
+
+.device-tab-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.device-tab-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.device-tab-grid--wide > * {
+  grid-column: 1 / -1;
+}
+
+.device-dashboard-hero {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.device-dashboard-main-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1.1rem 1.4rem;
+}
+
+.device-dashboard-subsection {
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+/* ── Dashboard Hero Card ──────────────────────────────────────────── */
+
+/*
+ * Layout strategy (desktop):
+ *   Card is a flex row. Each section is a flex-column with
+ *   justify-content: space-between and padding: 10px 0, so the 3 rows
+ *   are evenly distributed top-to-bottom regardless of content height.
+ *   The card itself has a fixed min-height so all columns are the same.
+ *   Row alignment across columns is achieved by keeping the same
+ *   flex rhythm — each section always has exactly 3 flex children.
+ *   Sections with 2 logical items use a "grow" wrapper for the last one.
+ */
+
+/* ── Outer row: main card + notes card, same height ── */
+.db-hero-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+@media (min-width: 1100px) {
+  .db-hero-row {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 1.25rem;
+  }
+}
+
+/* ── Main info card ── */
+.db-hero-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  padding: 1.75rem 1.5rem;
+  gap: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+@media (min-width: 1100px) {
+  .db-hero-card {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+    padding: 1.3rem 0;
+    min-height: 320px;
+    row-gap: 0.5rem;
+  }
+}
+
+/* ── Notes sidebar card ── */
+.db-notes-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  padding: 3.30rem 2.5rem 2.5rem;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 1rem;
+  overflow: hidden;
+}
+
+@media (min-width: 1100px) {
+  .db-notes-card {
+    width: 22%;
+    min-width: 200px;
+    max-width: 300px;
+  }
+}
+
+/* Vertical/horizontal divider between columns */
+.db-hero-divider {
+  width: 100%;
+  height: 1px;
+  background: var(--border-primary);
+  opacity: 0.6;
+  margin: 1.25rem 0;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1100px) {
+  .db-hero-divider {
+    width: 1px;
+    height: auto;
+    margin: 1.9rem 0.8rem;
+    align-self: stretch;
+  }
+}
+
+/* ── Photo column ── */
+.db-hero-photo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 4.5rem;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1100px) {
+  .db-hero-photo {
+    padding: 0rem 2rem 0rem 3rem;
+  }
+}
+
+/* Pulsing glow animations */
+@keyframes glow-pulse-online {
+  0%, 100% { opacity: 0.55; transform: translateX(-52%) scale(1); }
+  50%       { opacity: 1;    transform: translateX(-52%) scale(1.12); }
+}
+
+@keyframes glow-pulse-offline {
+  0%, 100% { opacity: 0.45; transform: translateX(-52%) scale(1); }
+  50%       { opacity: 0.9;  transform: translateX(-52%) scale(1.1); }
+}
+
+/* Shared glow base */
+.db-hero-photo--online::before,
+.db-hero-photo--offline::before {
+  content: "";
+  position: absolute;
+  width: 230px;
+  height: 230px;
+  border-radius: 50%;
+  bottom: 10%;
+  left: 53%;
+  pointer-events: none;
+}
+
+/* Green pulsing glow when online */
+.db-hero-photo--online::before {
+  background: radial-gradient(ellipse at center, rgba(169, 247, 95, 0.7) 10%, transparent 55%);
+  animation: glow-pulse-online 2.8s ease-in-out infinite;
+}
+
+/* Orange-red pulsing glow when offline */
+.db-hero-photo--offline::before {
+  background: radial-gradient(ellipse at center, rgba(255, 120, 50, 0.65) 10%, transparent 55%);
+  animation: glow-pulse-offline 3.4s ease-in-out infinite;
+}
+
+.db-hero-photo__img {
+  position: relative; /* sits above the ::before glow */
+  max-width: 160px;
+  max-height: 210px;
+  object-fit: contain;
+}
+
+/* ── Info sections ── */
+/*
+ * Each section is a 3-row grid with fixed row height.
+ * Every child lands in one row slot — identical height regardless of content
+ * (text, progress bar, etc.) — so rows align perfectly across all sections.
+ */
+.db-hero-section {
+  display: grid;
+  grid-template-rows: repeat(3, var(--hero-row-h, 65px));
+  align-items: center;       /* centers content within each row */
+  align-content: space-between;     /* ← centers the whole row group vertically in the section */
+  padding: 1rem 1rem;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+@media (min-width: 1100px) {
+  .db-hero-section {
+    padding: 1.5rem 3rem;
+  }
+}
+
+/* Section 3 – Subscription: wide enough for both fields on one line */
+.db-hero-section--sub {
+  min-width: 400px;
+  max-width: 560px;
+  flex: 1 1 400px;
+}
+
+/* Section 4 – Uptime/Issue */
+.db-hero-section--uptime {
+  min-width: 240px;
+  max-width: 340px;
+  flex: 1 1 240px;
+}
+
+.db-uptime-issue {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* ── Row wrappers ── */
+.db-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+/* Subscription row 1: Tier left, Warranty right */
+.db-sub-header-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1.5rem;
+  white-space: nowrap;
+}
+
+/* Warranty column: pushed right by space-between, but its own content left-aligned */
+.db-sub-header-row .db-info-field:last-child {
+  text-align: left;
+}
+
+/* ── Info field (label + value pair) ── */
+.db-info-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.db-info-label {
+  font-weight: 600;
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  opacity: 0.75;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* All values use identical styling — no special mono variant */
+.db-info-value {
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text-heading);
+}
+
+/* ── Progress bars ── */
+.db-progress-track {
+  width: 100%;
+  max-width: 100%;
+  height: 12px;
+  border-radius: 999px;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  margin-top: 0.3rem;
+}
+
+.db-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.35s ease;
+}
+
+/* ── Issue text ── */
+.db-issue-source {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: #63B3ED;
+  line-height: 1.35;
+}
+
+.db-issue-body {
+  font-size: 0.82rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  line-clamp: 4;
+  overflow: hidden;
+}
+
+/* ── Admin Notes ── */
+.db-notes-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.db-notes-edit-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  opacity: 0.85;
+  line-height: 1;
+}
+
+.db-notes-edit-btn:hover {
+  opacity: 1;
+  color: orange;
+}
+
+.db-notes-body {
+  font-size: 0.80rem;
+  font-weight: 400;
+  line-height: 1.5;
+  cursor: pointer;
+  text-align: left;
+  padding: 0rem 0.5rem 0rem 0rem;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 0;   /* important — lets flex item shrink below content size */
+}
+
+.db-notes-body:hover {
+  opacity: 0.6;
+}
+
+.db-notes-textarea {
+  width: 100%;
+  min-height: 0;
+  padding: 0.3rem 0.65rem;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  border: 1px solid var(--border-input);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  resize: vertical;
+  text-align: left;
+}
+
+/* ── Section cards (used in all tabs) ── */
+.device-section-card {
+  border: 1px solid var(--border-primary);
+  border-radius: 0.75rem;
+  background-color: var(--bg-card);
+  padding: 2.25rem 2.5rem 2.5rem;
+}
+
+.device-section-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.device-section-card__title {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+/* Pencil edit button on section card titles */
+.section-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.4rem;
+  border-radius: 0.3rem;
+  transition: color 0.15s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.section-edit-btn:hover {
+  color: #ecc94b;
+}
+
+/* ── Toggle Switch ── */
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.toggle-switch__track {
+  position: relative;
+  display: inline-block;
+  width: 2.5rem;
+  height: 1.35rem;
+  border-radius: 9999px;
+  background-color: #374151;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+.toggle-switch__track[data-on="true"] {
+  background-color: var(--accent);
+}
+.toggle-switch__thumb {
+  position: absolute;
+  top: 0.175rem;
+  left: 0.175rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: transform 0.2s ease;
+}
+.toggle-switch__track[data-on="true"] .toggle-switch__thumb {
+  transform: translateX(1.15rem);
+}
+.toggle-switch__label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+.toggle-switch__label[data-on="true"] {
+  color: var(--accent);
+}
+
+/* ── Leaflet map isolation — prevents map z-indices bleeding over modals ── */
+.device-map-wrap {
+  position: relative;
+  isolation: isolate;
+}
+
+/* ── Bell master strip (between Overview and bell cards) ── */
+.bell-master-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--border-primary);
+  background-color: var(--bg-card);
+}
+.bell-master-strip__left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.bell-master-strip__right {
+  display: flex;
+  align-items: center;
+}
+.bell-master-strip__warning-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.3rem;
+  background-color: rgba(99, 179, 237, 0.1);
+  color: #63b3ed;
+  border: 1px solid rgba(99, 179, 237, 0.3);
+}
+
+/* ── Status text warning tone (for voided warranty) ── */
+.device-status-text--warning {
+  color: #f59e0b;
+}
+
+.device-subtitle {
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-bottom: 0.65rem;
+}
+
+.device-hero-image-wrap {
+  border: 1px solid var(--border-primary);
+  border-radius: 0.75rem;
+  background: radial-gradient(circle at 20% 20%, rgba(116, 184, 22, 0.18), rgba(17, 24, 39, 0.6));
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  margin-bottom: 0.8rem;
+}
+
+.device-hero-image-wrap--square {
+  min-height: 280px;
+  max-width: 400px;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+
+.device-hero-image {
+  max-height: 280px;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.device-snapshot-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem 1.2rem;
+  align-items: start;
+}
+
+.device-progress-track {
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  overflow: hidden;
+}
+
+.device-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.35s ease;
+}
+
+.device-field-row {
+  display: grid;
+  gap: 0 1.1rem;        /* no vertical gap — row height handles spacing */
+  margin-bottom: 0;
+  align-items: start;
+}
+
+/* Each field is a fixed-height slot — same as --hero-row-h so tabs match the dashboard rhythm */
+.device-field {
+  height: var(--field-row-h, 75px);
+  padding-right: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.device-field-value {
+  margin-top: 0.25rem;
+  line-height: 1.5;
+}
+
+.device-value-secondary {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+.device-status-text {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.device-status-text--positive {
+  color: var(--success-text);
+  text-shadow: 0 0 14px rgba(116, 184, 22, 0.28);
+}
+
+.device-status-text--negative {
+  color: #ff9e4a;
+  text-shadow: 0 0 14px rgba(243, 75, 75, 0.25);
+}
+
+.device-status-text--info {
+  color: var(--badge-blue-text);
+  text-shadow: 0 0 16px rgba(99, 179, 237, 0.28);
+}
+
+.device-status-text--muted {
+  color: var(--text-muted);
+}
+
+.device-empty-cell {
+  height: var(--field-row-h, 65px);
+}
+
+.device-inline-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6rem;
+  padding: 1rem 0px 0rem 0px;
+}
+
+.device-inline-facts > div {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  line-height: 1.1;
+}
+
+.device-inline-facts__label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  line-height: 1.1;
+}
+
+.device-inline-facts--overview .device-inline-facts__label::after {
+  content: "|";
+  color: var(--border-primary);
+  opacity: 0.65;
+  margin: 0 0.6rem;
+  font-weight: 500;
+}
+
+.device-inline-facts--overview > div {
+  gap: 0;
+}
+
+.device-location-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.dashboard-bottom-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+.bell-mechanism-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  gap: 0.85rem;
+}
+
+.bell-mechanism-card {
+  position: relative;
+  border-radius: 10px;
+  background: #1F2937;
+  padding: 2.5rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 160px;
+  gap: 0 2rem;
+  overflow: hidden;
+}
+
+.bell-mechanism-card::before {
+  content: '';
+  position: absolute;
+  left: -160px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 330px;
+  height: 330px;
+  opacity: 0.02;
+  pointer-events: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
+}
+
+/* Left column: title at top, info at bottom */
+.bell-mechanism-card__left {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.bell-mechanism-card__left-top {
+  display: flex;
+  flex-direction: column;
+}
+
+.bell-mechanism-card__title {
+  font-family: 'Inter', sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  color: #63B3ED;
+  text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.25);
+  margin: 0 0 0.5rem 0;
+  white-space: nowrap;
+}
+
+.bell-mechanism-card__divider {
+  border: none;
+  border-top: 1px solid #374151;
+  opacity: 0.5;
+  width: 179px;
+  margin: 0 0 1rem 0;
+}
+
+.bell-mechanism-card__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.bell-mechanism-card__info p {
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 18px;
+  color: #9CA3AF;
+  white-space: nowrap;
+}
+
+.bell-mechanism-card__highlight {
+  font-weight: 700;
+  color: #74B816;
+}
+
+.bell-mechanism-card__highlight--strikes {
+  color: #F97316;
+}
+
+/* Right column: striker image at top, cert at bottom */
+.bell-mechanism-card__right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: relative;
+  z-index: 1;
+}
+
+.bell-mechanism-card__right-top {
+  display: flex;
+  align-items: flex-start;
+}
+
+.bell-mechanism-card__striker-img {
+  width: 150px;
+  height: 110px;
+  object-fit: contain;
+  object-position: top right;
+  pointer-events: none;
+}
+
+.bell-mechanism-card__cert {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  opacity: 0.52;
+}
+
+.bell-mechanism-card__cert-text {
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 16px;
+  text-align: right;
+  color: #9CA3AF;
+}
+
+.bell-mechanism-card__cert-brand {
+  color: #63B3ED;
+}
+
+.bell-mechanism-card__cert-badge {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1024px) {
+  .device-tab-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .device-dashboard-main-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .device-location-grid {
+    grid-template-columns: 1.3fr 1fr;
+    column-gap: 2.5rem;
+  }
+
+  .device-snapshot-grid {
+    grid-template-columns: auto 1fr;
+  }
+
+  .dashboard-bottom-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+}
+
+
+@media (min-width: 1500px) {
+  .device-tab-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .device-dashboard-main-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .dashboard-bottom-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .dashboard-bottom-grid__notes {
+    grid-column: span 2;
+  }
+
+  .dashboard-bottom-grid__users {
+    grid-column: span 1;
+  }
+
+}
+
 /* File input */
 input[type="file"]::file-selector-button {
   background-color: var(--bg-card) !important;

frontend/src/layout/Header.jsx

@@ -12,7 +12,7 @@ export default function Header() {
       }}
     >
       <h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
-        BellSystems - Control Panel
+        BellSystems -  Control Panel
       </h2>
 
       <div className="flex items-center gap-4">

frontend/vite.config.js

@@ -7,6 +7,13 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 5173,
+    hmr: {
+      clientPort: 80,
+    },
+    watch: {
+      usePolling: true,
+      interval: 500,
+    },
     proxy: {
       '/api': {
         target: 'http://backend:8000',