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/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);
+    });
+  }
+}