feat: integrate toast notifications in settings and layout components

- Added ToastService for managing toast notifications.
- Replaced alert in settings component with toast notifications for success and error messages.
- Included ToastComponent in layout for displaying notifications.
- Created loading spinner component for better user experience.
- Implemented domain detail component with detailed views for certificates, requirements, and services.
- Added functionality to manage and display SSL certificates and their statuses.
- Introduced a registry manager class for handling Docker registry operations.

ui/src/app/features/domains/domains.component.ts

@@ -1,86 +1,216 @@
 import { Component, OnInit, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
 import { ApiService } from '../../core/services/api.service';
+import { ToastService } from '../../core/services/toast.service';
+
+interface DomainView {
+  domain: {
+    id: number;
+    domain: string;
+    dnsProvider: 'cloudflare' | 'manual' | null;
+    isObsolete: boolean;
+    defaultWildcard: boolean;
+  };
+  serviceCount: number;
+  certificateStatus: 'valid' | 'expiring-soon' | 'expired' | 'pending' | 'none';
+  daysRemaining: number | null;
+  certificates: any[];
+  requirements: any[];
+}
 
 @Component({
-  selector: 'app-ssl',
+  selector: 'app-domains',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
   template: `
     <div class="px-4 sm:px-0">
-      <h1 class="text-3xl font-bold text-gray-900 mb-8">SSL Certificates</h1>
+      <div class="flex justify-between items-center mb-8">
+        <h1 class="text-3xl font-bold text-gray-900">Domains</h1>
+        <button
+          (click)="syncDomains()"
+          [disabled]="syncing()"
+          class="btn btn-primary"
+        >
+          {{ syncing() ? 'Syncing...' : 'Sync Cloudflare' }}
+        </button>
+      </div>
 
-      @if (certificates().length > 0) {
+      @if (loading()) {
+        <div class="card text-center py-12">
+          <p class="text-gray-500">Loading domains...</p>
+        </div>
+      } @else if (domains().length > 0) {
         <div class="card overflow-hidden p-0">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
                 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Domain</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Issuer</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Provider</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Services</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Certificate</th>
                 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expiry</th>
                 <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              @for (cert of certificates(); track cert.domain) {
-                <tr>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ cert.domain }}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ cert.issuer }}</td>
+              @for (domainView of domains(); track domainView.domain.id) {
+                <tr [class.opacity-50]="domainView.domain.isObsolete">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm font-medium text-gray-900">{{ domainView.domain.domain }}</div>
+                    @if (domainView.domain.isObsolete) {
+                      <span class="text-xs text-red-600">Obsolete</span>
+                    }
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    @if (domainView.domain.dnsProvider === 'cloudflare') {
+                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                        Cloudflare
+                      </span>
+                    } @else if (domainView.domain.dnsProvider === 'manual') {
+                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                        Manual
+                      </span>
+                    } @else {
+                      <span class="text-sm text-gray-400">None</span>
+                    }
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    {{ domainView.serviceCount }}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    @switch (domainView.certificateStatus) {
+                      @case ('valid') {
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                          Valid
+                        </span>
+                      }
+                      @case ('expiring-soon') {
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                          Expiring Soon
+                        </span>
+                      }
+                      @case ('expired') {
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                          Expired
+                        </span>
+                      }
+                      @case ('pending') {
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                          Pending
+                        </span>
+                      }
+                      @default {
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                          None
+                        </span>
+                      }
+                    }
+                  </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm">
-                    <span [ngClass]="isExpiringSoon(cert.expiryDate) ? 'text-red-600' : 'text-gray-500'">
-                      {{ formatDate(cert.expiryDate) }}
-                    </span>
+                    @if (domainView.daysRemaining !== null) {
+                      <span [ngClass]="domainView.daysRemaining <= 30 ? 'text-red-600 font-medium' : 'text-gray-500'">
+                        {{ domainView.daysRemaining }} days
+                      </span>
+                    } @else {
+                      <span class="text-gray-400">—</span>
+                    }
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
-                    <button (click)="renewCertificate(cert)" class="text-primary-600 hover:text-primary-900">Renew</button>
+                    <a
+                      [routerLink]="['/domains', domainView.domain.domain]"
+                      class="text-primary-600 hover:text-primary-900"
+                    >
+                      View Details
+                    </a>
                   </td>
                 </tr>
               }
             </tbody>
           </table>
         </div>
+
+        <!-- Summary Stats -->
+        <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-4">
+          <div class="card">
+            <dt class="text-sm font-medium text-gray-500 truncate">Total Domains</dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-900">{{ domains().length }}</dd>
+          </div>
+          <div class="card">
+            <dt class="text-sm font-medium text-gray-500 truncate">Valid Certificates</dt>
+            <dd class="mt-1 text-3xl font-semibold text-green-600">{{ getStatusCount('valid') }}</dd>
+          </div>
+          <div class="card">
+            <dt class="text-sm font-medium text-gray-500 truncate">Expiring Soon</dt>
+            <dd class="mt-1 text-3xl font-semibold text-yellow-600">{{ getStatusCount('expiring-soon') }}</dd>
+          </div>
+          <div class="card">
+            <dt class="text-sm font-medium text-gray-500 truncate">Expired/Pending</dt>
+            <dd class="mt-1 text-3xl font-semibold text-red-600">{{ getStatusCount('expired') + getStatusCount('pending') }}</dd>
+          </div>
+        </div>
       } @else {
         <div class="card text-center py-12">
-          <p class="text-gray-500">No SSL certificates</p>
-          <p class="text-sm text-gray-400 mt-2">Certificates are obtained automatically when deploying services with domains</p>
+          <p class="text-gray-500">No domains found</p>
+          <p class="text-sm text-gray-400 mt-2">
+            Sync your Cloudflare zones or manually add domains to get started
+          </p>
+          <button
+            (click)="syncDomains()"
+            class="mt-4 btn btn-primary"
+          >
+            Sync Cloudflare Domains
+          </button>
         </div>
       }
     </div>
   `,
 })
-export class SslComponent implements OnInit {
+export class DomainsComponent implements OnInit {
   private apiService = inject(ApiService);
-  certificates = signal<any[]>([]);
+  private toastService = inject(ToastService);
+
+  domains = signal<DomainView[]>([]);
+  loading = signal(true);
+  syncing = signal(false);
 
   ngOnInit(): void {
-    this.loadCertificates();
+    this.loadDomains();
   }
 
-  loadCertificates(): void {
-    this.apiService.getSslCertificates().subscribe({
+  loadDomains(): void {
+    this.loading.set(true);
+    this.apiService.getDomains().subscribe({
       next: (response) => {
         if (response.success && response.data) {
-          this.certificates.set(response.data);
+          this.domains.set(response.data);
         }
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
       },
     });
   }
 
-  renewCertificate(cert: any): void {
-    this.apiService.renewSslCertificate(cert.domain).subscribe({
-      next: () => {
-        alert('Certificate renewal initiated');
-        this.loadCertificates();
+  syncDomains(): void {
+    this.syncing.set(true);
+    this.apiService.syncCloudflareDomains().subscribe({
+      next: (response) => {
+        if (response.success) {
+          this.toastService.success('Cloudflare domains synced successfully');
+          this.loadDomains();
+        }
+        this.syncing.set(false);
+      },
+      error: (error) => {
+        this.toastService.error('Failed to sync Cloudflare domains: ' + (error.error?.error || error.message));
+        this.syncing.set(false);
       },
     });
   }
 
-  formatDate(timestamp: number): string {
-    return new Date(timestamp).toLocaleDateString();
-  }
-
-  isExpiringSoon(timestamp: number): boolean {
-    const thirtyDays = 30 * 24 * 60 * 60 * 1000;
-    return timestamp - Date.now() < thirtyDays;
+  getStatusCount(status: string): number {
+    return this.domains().filter(d => d.certificateStatus === status).length;
   }
 }