Adds comprehensive Settings page with multiple configuration tabs

Introduces a new Settings page with configurable modules:
- General company information
- Calendar and booking settings
- Billing and payment configurations
- Tracking and analytics integrations

Implements modular ViewComponents for each settings section
Enhances user experience with toggle switches and detailed configuration options

PlanTempus.Application/wwwroot/css/cash.css

@@ -114,7 +114,6 @@ swp-cash-table {
     justify-content: space-between;
     padding: var(--spacing-7) var(--spacing-10);
     background: var(--color-background-alt);
-    border-top: 1px solid var(--color-border);
     font-size: var(--font-size-md);
     color: var(--color-text-secondary);
   }

PlanTempus.Application/wwwroot/css/components.css

@@ -10,11 +10,17 @@
  * - swp-plan-card (subscription plan cards)
  * - swp-avatar (user avatars with size variants)
  * - swp-icon-btn (icon-only buttons)
- * - swp-card (content cards with section-label/footer)
+ * - swp-card (content cards with header/title/section-label/footer)
+ * - swp-card-header (card header with title and actions)
+ * - swp-card-title (icon + text title)
  * - swp-section-label (card section headers)
  * - swp-section-header (section header with action link)
  * - swp-section-action (action link in section header)
  * - swp-add-button (dashed border add button)
+ * - swp-info-box (callout box with icon)
+ * - swp-section-intro (description text)
+ * - swp-section-divider (horizontal line)
+ * - swp-two-column-grid (responsive 2-column layout)
  * - BASE PATTERNS: table, list-item, icon-container (Grid+Subgrid reusable patterns)
  */
 
@@ -544,7 +550,32 @@ swp-card {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
   padding: var(--card-padding);
-  margin-top: var(--section-gap);
+}
+
+/* Card header - flex row with title and actions */
+swp-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-5) var(--card-padding);
+  border-bottom: 1px solid var(--color-border);
+  margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing-5);
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+}
+
+/* Card title - icon + text */
+swp-card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+
+  & i {
+    font-size: 20px;
+    color: var(--color-teal);
+  }
 }
 
 /* Section label - simple card header */
@@ -1443,3 +1474,117 @@ swp-see-all {
     text-decoration: underline;
   }
 }
+
+/* ===========================================
+   INFO BOX (Callout)
+   =========================================== */
+swp-info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-5);
+  margin-top: var(--section-gap);
+  background: var(--bg-blue-subtle);
+  border: 1px solid var(--bg-blue-border);
+  border-radius: var(--radius-md);
+
+  & i {
+    font-size: 20px;
+    color: var(--color-blue);
+    flex-shrink: 0;
+  }
+
+  & p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  &.success {
+    background: var(--bg-green-subtle);
+    border-color: var(--bg-green-border);
+
+    & i {
+      color: var(--color-green);
+    }
+  }
+
+  &.warning {
+    background: var(--bg-amber-subtle);
+    border-color: var(--bg-amber-border);
+
+    & i {
+      color: var(--color-amber);
+    }
+  }
+}
+
+/* ===========================================
+   SECTION INTRO (Description text)
+   =========================================== */
+swp-section-intro {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-5);
+  line-height: 1.5;
+}
+
+/* ===========================================
+   SECTION DIVIDER (Horizontal line)
+   =========================================== */
+swp-section-divider {
+  display: block;
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--spacing-5) 0;
+}
+
+/* ===========================================
+   ACTION BAR (Filter/toolbar with white bg)
+   =========================================== */
+swp-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--section-gap);
+}
+
+swp-action-bar swp-btn-group {
+  display: flex;
+  gap: var(--spacing-3);
+}
+
+/* ===========================================
+   TWO COLUMN GRID
+   =========================================== */
+swp-two-column-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--card-gap);
+  align-items: start;
+
+  /* Full width cards span both columns */
+  & > .full-width {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 900px) {
+  swp-two-column-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Stacked cards in a grid column */
+.stacked-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+}

PlanTempus.Application/wwwroot/css/controls.css

@@ -34,6 +34,7 @@ swp-toggle-description {
 swp-toggle-slider {
   display: inline-flex;
   width: fit-content;
+  flex-shrink: 0;
   background: var(--color-background);
   border-radius: 6px;
   border: 1px solid var(--color-border);

PlanTempus.Application/wwwroot/css/page.css

@@ -10,7 +10,8 @@
 swp-page-container {
   display: block;
   max-width: var(--page-max-width);
-  margin: 0 auto;
+  margin-top: var(--section-gap);
+  margin-bottom: var(--section-gap);
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }

PlanTempus.Application/wwwroot/css/services.css

@@ -3,6 +3,7 @@
  *
  * Feature-specific styling only.
  * Reuses:
+ *   - swp-action-bar (components.css)
  *   - swp-stat-card (stats.css)
  *   - swp-data-table (components.css)
  *   - swp-sticky-header, swp-page-container (page.css)
@@ -16,21 +17,8 @@
  */
 
 /* ===========================================
-   SERVICES HEADER (Search + Button)
+   SEARCH INPUT
    =========================================== */
-
-swp-services-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--section-gap);
-}
-
-swp-services-header swp-btn-group {
-  display: flex;
-  gap: var(--spacing-3);
-}
-
 swp-search-input {
   display: flex;
   align-items: center;

PlanTempus.Application/wwwroot/css/settings.css

@@ -0,0 +1,692 @@
+/**
+ * Settings - Indstillinger page components
+ *
+ * Settings-specific styling only.
+ * Reuses: swp-card, swp-card-header, swp-card-title, swp-edit-section,
+ *         swp-toggle-row, swp-info-box, swp-section-intro (components.css)
+ */
+
+/* ===========================================
+   HOURS TABLE (Åbningstider)
+   =========================================== */
+swp-hours-table {
+  display: flex;
+  flex-direction: column;
+}
+
+swp-hours-row {
+  display: grid;
+  grid-template-columns: 100px 80px 1fr;
+  gap: var(--spacing-5);
+  align-items: center;
+  padding: var(--spacing-4) 0;
+  border-bottom: 1px solid var(--color-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+swp-hours-day {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+swp-hours-time {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+
+  & span {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
+
+  & input[type="time"] {
+    width: 100px;
+    padding: var(--spacing-2) var(--spacing-3);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-mono);
+    background: var(--color-background-alt);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    transition: all var(--transition-fast);
+
+    &:hover {
+      background: var(--color-background);
+    }
+
+    &:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+  }
+}
+
+swp-hours-closed {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+/* ===========================================
+   CARD NOTE (used in Påmindelser)
+   =========================================== */
+swp-card-note {
+  display: block;
+  margin-top: var(--spacing-4);
+  padding-top: var(--spacing-4);
+  border-top: 1px solid var(--color-border);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+swp-time-range {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+
+  & span {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
+
+  & input[type="time"] {
+    width: 100px;
+    padding: var(--spacing-2) var(--spacing-3);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-mono);
+    background: var(--color-background-alt);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    transition: all var(--transition-fast);
+
+    &:hover {
+      background: var(--color-background);
+    }
+
+    &:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+  }
+}
+
+/* ===========================================
+   URL FIELD (Booking URL)
+   =========================================== */
+swp-url-field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+
+  & input {
+    flex: 1;
+    padding: var(--spacing-3) var(--spacing-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+}
+
+swp-url-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--color-background);
+  border-left: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  & i {
+    font-size: 18px;
+    color: var(--color-text-secondary);
+  }
+
+  &:hover {
+    background: var(--color-teal);
+
+    & i {
+      color: white;
+    }
+  }
+}
+
+/* ===========================================
+   CLOSED DAYS LIST (Helligdage & Lukkedage)
+   =========================================== */
+swp-closed-days-list {
+  display: flex;
+  flex-direction: column;
+}
+
+swp-closed-day-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--spacing-4);
+  align-items: center;
+  padding: var(--spacing-3) 0;
+  border-bottom: 1px solid var(--color-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+swp-closed-day-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+swp-closed-day-date {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+swp-closed-day-name {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+swp-closed-day-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-sm);
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+
+  &.holiday {
+    background: var(--bg-red-strong);
+    color: var(--color-red);
+  }
+
+  &.custom {
+    background: var(--bg-blue-strong);
+    color: var(--color-blue);
+  }
+}
+
+/* ===========================================
+   MODULES BADGE (section header)
+   =========================================== */
+swp-modules-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-sm);
+  background: var(--bg-purple-strong);
+  color: var(--color-purple);
+}
+
+/* ===========================================
+   MODULES SECTION
+   =========================================== */
+swp-modules-section {
+  margin-bottom: var(--section-gap);
+}
+
+swp-modules-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-5);
+}
+
+swp-modules-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+
+  & i {
+    font-size: 22px;
+    color: var(--color-teal);
+  }
+}
+
+swp-modules-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--card-gap);
+}
+
+@media (max-width: 900px) {
+  swp-modules-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ===========================================
+   MODULE CARD
+   =========================================== */
+swp-module-card {
+  display: block;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    border-color: var(--color-teal);
+    box-shadow: var(--shadow-sm);
+  }
+
+  &.full-width {
+    grid-column: 1 / -1;
+  }
+}
+
+swp-module-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5);
+  padding: var(--card-padding);
+}
+
+swp-module-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  & i {
+    font-size: 24px;
+  }
+
+  &.teal {
+    background: var(--bg-teal-strong);
+    color: var(--color-teal);
+  }
+
+  &.purple {
+    background: var(--bg-purple-strong);
+    color: var(--color-purple);
+  }
+
+  &.blue {
+    background: var(--bg-blue-strong);
+    color: var(--color-blue);
+  }
+
+  &.amber {
+    background: var(--bg-amber-strong);
+    color: var(--color-amber);
+  }
+
+  &.green {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+  }
+}
+
+swp-module-info {
+  flex: 1;
+  min-width: 0;
+}
+
+swp-module-title {
+  display: block;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--spacing-1);
+}
+
+swp-module-desc {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+swp-module-toggle {
+  flex-shrink: 0;
+}
+
+swp-module-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--card-padding);
+  background: var(--color-background-alt);
+  border-top: 1px solid var(--color-border);
+}
+
+swp-module-tags {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+swp-module-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-sm);
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+
+  &.included {
+    background: var(--bg-green-strong);
+    color: var(--color-green);
+  }
+
+  &.price {
+    background: var(--bg-blue-strong);
+    color: var(--color-blue);
+  }
+
+  &.new {
+    background: var(--bg-purple-strong);
+    color: var(--color-purple);
+  }
+
+  &.coming {
+    background: var(--bg-amber-strong);
+    color: var(--color-amber);
+  }
+}
+
+/* Featured module card */
+swp-module-card.featured {
+  border: 2px solid var(--color-green);
+  background: linear-gradient(135deg, var(--bg-green-subtle) 0%, var(--color-surface) 100%);
+
+  &:hover {
+    border-color: var(--color-green);
+    box-shadow: 0 4px 16px rgba(67, 160, 71, 0.15);
+  }
+
+  &.purple {
+    border-color: var(--color-purple);
+    background: linear-gradient(135deg, var(--bg-purple-subtle) 0%, var(--color-surface) 100%);
+
+    &:hover {
+      border-color: var(--color-purple);
+      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
+    }
+  }
+}
+
+swp-module-features {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2) var(--spacing-5);
+  padding: 0 var(--card-padding) var(--spacing-5);
+}
+
+swp-module-feature {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  & i {
+    font-size: 16px;
+    color: var(--color-green);
+  }
+
+  &.purple i {
+    color: var(--color-purple);
+  }
+}
+
+swp-module-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-4);
+  padding: var(--spacing-5) var(--card-padding);
+  background: var(--bg-green-subtle);
+  border-top: 1px solid var(--bg-green-border);
+  border-bottom: 1px solid var(--bg-green-border);
+
+  &.purple {
+    background: var(--bg-purple-subtle);
+    border-color: var(--bg-purple-border);
+
+    swp-module-stat-value {
+      color: var(--color-purple);
+    }
+  }
+}
+
+swp-module-stat {
+  text-align: center;
+}
+
+swp-module-stat-value {
+  display: block;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-mono);
+  color: var(--color-green);
+}
+
+swp-module-stat-label {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  margin-top: var(--spacing-1);
+}
+
+/* ===========================================
+   TRACKING COMPONENTS
+   =========================================== */
+swp-tracking-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--color-blue) 8%, transparent);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+
+  & i {
+    font-size: 16px;
+    color: var(--color-blue);
+  }
+
+  &.privacy {
+    background: color-mix(in srgb, var(--color-green) 8%, transparent);
+
+    & i {
+      color: var(--color-green);
+    }
+  }
+}
+
+/* Modules tab max-width */
+swp-tab-content[data-tab="modules"] swp-page-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* Tracking tab uses 2-column grid layout */
+swp-tab-content[data-tab="tracking"] swp-page-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+@media (max-width: 900px) {
+  swp-tab-content[data-tab="tracking"] swp-page-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Full-width in tracking grid */
+swp-tab-content[data-tab="tracking"] .full-width {
+  grid-column: 1 / -1;
+}
+
+/* Tracking card variant */
+.tracking-card {
+  margin-bottom: 0;
+
+  & swp-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &[data-tracker] swp-card-content {
+    transition: opacity 200ms ease;
+  }
+
+  &[data-tracker].disabled swp-card-content {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+/* Script section for custom tracking */
+swp-script-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+swp-script-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+
+  & i {
+    font-size: 16px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.script-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-text);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  resize: vertical;
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-teal);
+  }
+}
+
+/* ===========================================
+   CODE PREVIEW CARD (Tracking)
+   =========================================== */
+.code-preview-card {
+  grid-column: 1 / -1;
+  border: 2px dashed var(--color-teal);
+  background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
+
+  & swp-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  & swp-card-title {
+    color: var(--color-teal);
+  }
+}
+
+swp-code-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+
+  & i {
+    font-size: 16px;
+    color: var(--color-teal);
+  }
+}
+
+.code-preview {
+  margin: 0;
+  padding: 16px;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  overflow-x: auto;
+  max-height: 400px;
+  overflow-y: auto;
+
+  & code {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.6;
+    color: var(--color-text);
+    white-space: pre;
+  }
+
+  & .comment {
+    color: var(--color-green);
+  }
+
+  & .tag {
+    color: var(--color-blue);
+  }
+
+  & .attr {
+    color: var(--color-purple);
+  }
+
+  & .string {
+    color: var(--color-teal);
+  }
+}

PlanTempus.Application/wwwroot/ts/app.ts

@@ -13,6 +13,7 @@ import { CashController } from './modules/cash';
 import { EmployeesController } from './modules/employees';
 import { ControlsController } from './modules/controls';
 import { ServicesController } from './modules/services';
+import { TrackingController } from './modules/tracking';
 
 /**
  * Main application class
@@ -27,6 +28,7 @@ export class App {
   readonly employees: EmployeesController;
   readonly controls: ControlsController;
   readonly services: ServicesController;
+  readonly tracking: TrackingController;
 
   constructor() {
     // Initialize controllers
@@ -39,6 +41,7 @@ export class App {
     this.employees = new EmployeesController();
     this.controls = new ControlsController();
     this.services = new ServicesController();
+    this.tracking = new TrackingController();
   }
 }
 

PlanTempus.Application/wwwroot/ts/modules/tracking.ts

@@ -0,0 +1,289 @@
+/**
+ * Tracking Controller
+ *
+ * Handles toggle switches, input changes, and code preview generation
+ * for the Settings > Tracking page.
+ *
+ * Note: Toggle slider click behavior is handled by ControlsController.
+ * This controller listens for 'toggle' events to update card states and preview.
+ */
+
+export class TrackingController {
+  constructor() {
+    this.setupToggleListeners();
+    this.setupInputListeners();
+    this.setupCopyButton();
+    this.initializeCardStates();
+    this.updatePreview();
+  }
+
+  /**
+   * Listen for toggle events from ControlsController
+   */
+  private setupToggleListeners(): void {
+    document.querySelectorAll<HTMLElement>('.tracking-card swp-toggle-slider').forEach(slider => {
+      slider.addEventListener('toggle', (e) => {
+        const detail = (e as CustomEvent).detail;
+        const card = slider.closest('.tracking-card');
+
+        if (card) {
+          if (detail.value === 'no') {
+            card.classList.add('disabled');
+          } else {
+            card.classList.remove('disabled');
+          }
+        }
+
+        this.updatePreview();
+      });
+    });
+  }
+
+  /**
+   * Setup input listeners for contenteditable fields and textareas
+   */
+  private setupInputListeners(): void {
+    // Contenteditable fields
+    const editableIds = [
+      'metaPixelId', 'ga4Id', 'gtmId', 'plausibleDomain',
+      'fathomSiteId', 'matomoUrl', 'matomoSiteId'
+    ];
+
+    editableIds.forEach(id => {
+      const element = document.getElementById(id);
+      if (element) {
+        element.addEventListener('input', () => this.updatePreview());
+      }
+    });
+
+    // Textareas
+    const textareaIds = ['customHeadScripts', 'customBodyScripts'];
+    textareaIds.forEach(id => {
+      const element = document.getElementById(id) as HTMLTextAreaElement;
+      if (element) {
+        element.addEventListener('input', () => this.updatePreview());
+      }
+    });
+  }
+
+  /**
+   * Setup copy button functionality
+   */
+  private setupCopyButton(): void {
+    const copyBtn = document.getElementById('copyTrackingCode');
+    if (!copyBtn) return;
+
+    copyBtn.addEventListener('click', () => this.copyCode());
+  }
+
+  /**
+   * Initialize card states based on toggle values
+   */
+  private initializeCardStates(): void {
+    document.querySelectorAll<HTMLElement>('.tracking-card[data-tracker]').forEach(card => {
+      const toggle = card.querySelector<HTMLElement>('swp-toggle-slider');
+      if (toggle && toggle.dataset.value === 'no') {
+        card.classList.add('disabled');
+      }
+    });
+  }
+
+  /**
+   * Check if a tracker is enabled
+   */
+  private isTrackerEnabled(trackerName: string): boolean {
+    const card = document.querySelector<HTMLElement>(`[data-tracker="${trackerName}"]`);
+    if (!card) return false;
+    const toggle = card.querySelector<HTMLElement>('swp-toggle-slider');
+    return toggle?.dataset.value === 'yes';
+  }
+
+  /**
+   * Get text content from an element by ID
+   */
+  private getValue(id: string): string {
+    const element = document.getElementById(id);
+    return element?.textContent?.trim() || '';
+  }
+
+  /**
+   * Get value from textarea by ID
+   */
+  private getTextareaValue(id: string): string {
+    const element = document.getElementById(id) as HTMLTextAreaElement;
+    return element?.value?.trim() || '';
+  }
+
+  /**
+   * Escape HTML entities
+   */
+  private escapeHtml(text: string): string {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  /**
+   * Update the code preview based on active trackers
+   */
+  private updatePreview(): void {
+    const preview = document.getElementById('trackingCodePreview');
+    if (!preview) return;
+
+    let code = '';
+
+    // Meta Pixel
+    if (this.isTrackerEnabled('meta')) {
+      const pixelId = this.getValue('metaPixelId');
+      if (pixelId) {
+        code += `<span class="comment">&lt;!-- Meta Pixel --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  fbq(<span class="string">'init'</span>, <span class="string">'${pixelId}'</span>);
+  fbq(<span class="string">'track'</span>, <span class="string">'PageView'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Google Analytics
+    if (this.isTrackerEnabled('ga4')) {
+      const measurementId = this.getValue('ga4Id');
+      if (measurementId) {
+        code += `<span class="comment">&lt;!-- Google Analytics (GA4) --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://www.googletagmanager.com/gtag/js?id=${measurementId}"</span><span class="tag">&gt;&lt;/script&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag(<span class="string">'js'</span>, new Date());
+  gtag(<span class="string">'config'</span>, <span class="string">'${measurementId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Google Tag Manager
+    if (this.isTrackerEnabled('gtm')) {
+      const containerId = this.getValue('gtmId');
+      if (containerId) {
+        code += `<span class="comment">&lt;!-- Google Tag Manager --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer',<span class="string">'${containerId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Plausible
+    if (this.isTrackerEnabled('plausible')) {
+      const domain = this.getValue('plausibleDomain');
+      if (domain) {
+        code += `<span class="comment">&lt;!-- Plausible Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">defer</span> <span class="attr">data-domain</span>=<span class="string">"${domain}"</span> <span class="attr">src</span>=<span class="string">"https://plausible.io/js/script.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Fathom
+    if (this.isTrackerEnabled('fathom')) {
+      const siteId = this.getValue('fathomSiteId');
+      if (siteId) {
+        code += `<span class="comment">&lt;!-- Fathom Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">src</span>=<span class="string">"https://cdn.usefathom.com/script.js"</span> <span class="attr">data-site</span>=<span class="string">"${siteId}"</span> <span class="attr">defer</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Matomo
+    if (this.isTrackerEnabled('matomo')) {
+      const serverUrl = this.getValue('matomoUrl');
+      const siteId = this.getValue('matomoSiteId');
+      if (serverUrl && siteId) {
+        code += `<span class="comment">&lt;!-- Matomo Analytics --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  var _paq = window._paq = window._paq || [];
+  _paq.push([<span class="string">'trackPageView'</span>]);
+  _paq.push([<span class="string">'enableLinkTracking'</span>]);
+  (function() {
+    var u=<span class="string">"${serverUrl}/"</span>;
+    _paq.push([<span class="string">'setTrackerUrl'</span>, u+<span class="string">'matomo.php'</span>]);
+    _paq.push([<span class="string">'setSiteId'</span>, <span class="string">'${siteId}'</span>]);
+    var d=document, g=d.createElement(<span class="string">'script'</span>), s=d.getElementsByTagName(<span class="string">'script'</span>)[0];
+    g.async=true; g.src=u+<span class="string">'matomo.js'</span>; s.parentNode.insertBefore(g,s);
+  })();
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+      }
+    }
+
+    // Custom Head Scripts
+    const customHead = this.getTextareaValue('customHeadScripts');
+    if (customHead) {
+      code += `<span class="comment">&lt;!-- Custom Scripts --&gt;</span>
+${this.escapeHtml(customHead)}
+
+`;
+    }
+
+    // Update preview
+    const codeElement = preview.querySelector('code');
+    if (codeElement) {
+      if (code) {
+        codeElement.innerHTML = code.trim();
+      } else {
+        codeElement.innerHTML = '<span class="comment">&lt;!-- Ingen aktive tracking-koder --&gt;</span>';
+      }
+    }
+  }
+
+  /**
+   * Copy generated code to clipboard
+   */
+  private copyCode(): void {
+    const preview = document.getElementById('trackingCodePreview');
+    if (!preview) return;
+
+    const codeElement = preview.querySelector('code');
+    if (!codeElement) return;
+
+    // Get plain text version (strip HTML tags and decode entities)
+    const code = codeElement.innerHTML
+      .replace(/<span[^>]*>/g, '')
+      .replace(/<\/span>/g, '')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&');
+
+    navigator.clipboard.writeText(code).then(() => {
+      const btn = document.getElementById('copyTrackingCode');
+      if (!btn) return;
+
+      const originalHtml = btn.innerHTML;
+      btn.innerHTML = '<i class="ph ph-check"></i> Kopieret!';
+      btn.style.color = 'var(--color-green)';
+
+      setTimeout(() => {
+        btn.innerHTML = originalHtml;
+        btn.style.color = '';
+      }, 2000);
+    });
+  }
+}