Create groups forms

ogWebconsole/src/app/app.module.ts

@@ -34,6 +34,11 @@ import { AddRoleModalComponent } from './components/pages/admin/roles/roles/add-
 import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/delete-role-modal/delete-role-modal.component';
 import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component';
 import { GroupsComponent } from './components/groups/groups.component';
+import {MatDividerModule} from '@angular/material/divider';
+import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component'; 
+import {MatStepperModule} from '@angular/material/stepper';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
 
 
 @NgModule({ declarations: [
@@ -53,7 +58,9 @@ import { GroupsComponent } from './components/groups/groups.component';
         AddRoleModalComponent,
         DeleteRoleModalComponent,
         ChangePasswordModalComponent,
-        GroupsComponent
+        GroupsComponent,
+        CreateOrganizationalUnitComponent,
+        CreateClientComponent
     ],
     bootstrap: [AppComponent], 
     imports: [BrowserModule,
@@ -72,7 +79,10 @@ import { GroupsComponent } from './components/groups/groups.component';
         MatListModule,
         MatTableModule,
         MatDialogModule,
-        MatSelectModule],
+        MatSelectModule,
+        MatDividerModule,
+        MatStepperModule,
+        MatSlideToggleModule],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css

@@ -0,0 +1,39 @@
+h1 {
+    text-align: center;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    color: #3f51b5;
+    margin-bottom: 20px;
+  }
+  
+  .network-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .form-field {
+    width: 100%;
+    margin-top: 10px;
+  }
+  
+  .mat-dialog-content {
+    padding: 20px;
+  }
+  
+  .mat-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20px;
+  }
+  
+  button {
+    text-transform: none;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .mat-slide-toggle {
+    margin-top: 20px;
+  }
+  

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html

@@ -0,0 +1,54 @@
+<h1 mat-dialog-title>Añadir Cliente</h1>
+<div mat-dialog-content>
+  <form [formGroup]="clientForm" class="client-form">
+    <mat-form-field class="form-field">
+      <mat-label>Nombre</mat-label>
+      <input matInput formControlName="name" required>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Número de Serie</mat-label>
+      <input matInput formControlName="serialNumber" required>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Interfaz de Red</mat-label>
+      <input matInput formControlName="netiface">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Controlador de Red</mat-label>
+      <input matInput formControlName="netDriver">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>MAC</mat-label>
+      <input matInput formControlName="mac" required pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$">
+      <mat-error>Formato de MAC inválido. Ejemplo válido: 00:11:22:33:44:55</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Dirección IP</mat-label>
+      <input matInput formControlName="ip" required pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$">
+      <mat-error>Formato de dirección IP inválido. Ejemplo válido: 127.0.0.1</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Estado</mat-label>
+      <input matInput formControlName="status">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Unidad Organizativa</mat-label>
+      <input matInput formControlName="organizationalUnit" type="url">
+      <mat-error>Formato de URL inválido.</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Menú URL</mat-label>
+      <input matInput formControlName="menu" type="url">
+      <mat-error>Formato de URL inválido.</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Perfil de Hardware</mat-label>
+      <input matInput formControlName="hardwareProfile" type="url">
+      <mat-error>Formato de URL inválido.</mat-error>
+    </mat-form-field>
+  </form>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button [disabled]="!clientForm.valid" (click)="onSubmit()">Añadir</button>
+</div>

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateClientComponent } from './create-client.component';
+
+describe('CreateClientComponent', () => {
+  let component: CreateClientComponent;
+  let fixture: ComponentFixture<CreateClientComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateClientComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateClientComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-create-client',
+  templateUrl: './create-client.component.html',
+  styleUrls: ['./create-client.component.css']
+})
+export class CreateClientComponent implements OnInit {
+  clientForm!: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<CreateClientComponent>
+  ) { }
+
+  ngOnInit(): void {
+    this.clientForm = this.fb.group({
+      name: ['', Validators.required],
+      serialNumber: ['', Validators.required],
+      netiface: [''],
+      netDriver: [''],
+      mac: ['', [Validators.required, Validators.pattern('^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$')]],
+      ip: ['', [Validators.required, Validators.pattern('^([0-9]{1,3}\.){3}[0-9]{1,3}$')]],
+      status: [''],
+      organizationalUnit: ['', Validators.pattern('https?://.+')],
+      menu: ['', Validators.pattern('https?://.+')],
+      hardwareProfile: ['', Validators.pattern('https?://.+')],
+    });
+  }
+
+  onSubmit() {
+    if (this.clientForm.valid) {
+      const formData = this.clientForm.value;
+      console.log('Form Data:', formData);
+      this.dialogRef.close(formData);
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

ogWebconsole/src/app/components/groups/groups.component.css

@@ -5,3 +5,13 @@
 mat-card {
     margin: 10px;
 }
+
+.groups-button-row {
+    display: flex;
+    flex-grow: 1;
+}
+button {
+    margin-left: 10px;
+    
+    margin-bottom: 20px;
+}

ogWebconsole/src/app/components/groups/groups.component.html

@@ -1,5 +1,11 @@
-<!-- groups.component.html -->
+<h2>Crear</h2>
-<p>groups works!</p>
+<div class="groups-button-row">
+  <button mat-flat-button color="primary" (click)="addOU()">+ Unidad Organizativa</button>
+  <button mat-flat-button color="primary">+ Aula</button>
+  <button mat-flat-button color="primary" (click)="addClient()">+ Cliente</button>
+</div>
+<mat-divider></mat-divider>
+<h2>Grupos</h2>
 <div class="groupLists-container">
   <mat-card>
     <mat-card-title>Unidad organizativa</mat-card-title>
@@ -16,24 +22,24 @@
   <mat-card *ngIf="selectedUnidad">
     <mat-card-title>Aulas</mat-card-title>
     <mat-card-content>
-      <mat-list role="list">
+      <mat-selection-list role="list">
-        <mat-list-item 
+        <mat-list-option 
           *ngFor="let aula of selectedUnidad.aulas" 
           (click)="onSelectAula(aula)">
           {{ aula.nombre }}
-        </mat-list-item>
+        </mat-list-option>
-      </mat-list>
+      </mat-selection-list>
     </mat-card-content>
   </mat-card>
   <mat-card *ngIf="selectedAula">
     <mat-card-title>Clientes</mat-card-title>
     <mat-card-content>
-      <mat-list role="list">
+      <mat-selection-list role="list">
-        <mat-list-item 
+        <mat-list-option 
           *ngFor="let cliente of selectedClientes">
           {{ cliente.nombre }}
-        </mat-list-item>
+        </mat-list-option>
-      </mat-list>
+      </mat-selection-list>
     </mat-card-content>
   </mat-card>
 </div>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -2,6 +2,9 @@
 import { Component, OnInit } from '@angular/core';
 import { DataService } from './data.service';
 import { UnidadOrganizativa, Aula, Cliente } from './model';
+import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
+import { MatDialog } from '@angular/material/dialog';
+import { CreateClientComponent } from './clients/create-client/create-client.component';
 
 @Component({
   selector: 'app-groups',
@@ -14,7 +17,7 @@ export class GroupsComponent implements OnInit {
   selectedAula: Aula | null = null;
   selectedClientes: Cliente[] = [];
 
-  constructor(private dataService: DataService) {}
+  constructor(private dataService: DataService, public dialog: MatDialog) {}
 
   ngOnInit(): void {
     this.unidadesOrganizativas = this.dataService.getUnidadesOrganizativas();
@@ -30,4 +33,13 @@ export class GroupsComponent implements OnInit {
     this.selectedAula = aula;
     this.selectedClientes = aula.clientes;
   }
+
+
+  addOU() {
+    const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
+  }
+
+  addClient() {
+    const dialogRef = this.dialog.open(CreateClientComponent);
+  }
 }

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.css

@@ -0,0 +1,38 @@
+h1 {
+  text-align: center;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  color: #3f51b5;
+  margin-bottom: 20px;
+}
+
+.network-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-field {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.mat-dialog-content {
+  padding: 20px;
+}
+
+.mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 20px;
+}
+
+button {
+  text-transform: none;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mat-slide-toggle {
+  margin-top: 20px;
+}

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html

@@ -0,0 +1,112 @@
+<h1 mat-dialog-title>Añadir Unidad Organizativa</h1>
+<div mat-dialog-content>
+  <mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
+    <!-- Step 1: General -->
+    <mat-step [stepControl]="generalFormGroup">
+      <form [formGroup]="generalFormGroup">
+        <ng-template matStepLabel>General</ng-template>
+        <mat-form-field class="form-field">
+          <mat-label>Nombre</mat-label>
+          <input matInput formControlName="name" required>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Padre</mat-label>
+          <input matInput formControlName="parent" type="url" required>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Descripción</mat-label>
+          <textarea matInput formControlName="description"></textarea>
+        </mat-form-field>
+        <div>
+          <button mat-button matStepperSiguiente>Siguiente</button>
+        </div>
+      </form>
+    </mat-step>
+    
+    <!-- Step 2: Información Adicional -->
+    <mat-step [stepControl]="additionalInfoFormGroup">
+      <form [formGroup]="additionalInfoFormGroup">
+        <ng-template matStepLabel>Información Adicional</ng-template>
+        <mat-form-field class="form-field">
+          <mat-label>Comentarios</mat-label>
+          <textarea matInput formControlName="comments"></textarea>
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Tipo</mat-label>
+          <input matInput formControlName="type" required>
+        </mat-form-field>
+        <div>
+          <button mat-button matStepperPrevious>Atrás</button>
+          <button mat-button matStepperSiguiente>Siguiente</button>
+        </div>
+      </form>
+    </mat-step>
+
+    <!-- Step 3: Configuración de Red -->
+    <mat-step [stepControl]="networkSettingsFormGroup">
+      <form [formGroup]="networkSettingsFormGroup">
+        <ng-template matStepLabel>Configuración de Red</ng-template>
+        <mat-form-field class="form-field">
+          <mat-label>Proxy</mat-label>
+          <input matInput formControlName="proxy">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>DNS</mat-label>
+          <input matInput formControlName="dns">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Máscara de Red</mat-label>
+          <input matInput formControlName="netmask">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Router</mat-label>
+          <input matInput formControlName="router">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>NTP</mat-label>
+          <input matInput formControlName="ntp">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Modo P2P</mat-label>
+          <input matInput formControlName="p2pMode">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Tiempo P2P</mat-label>
+          <input matInput formControlName="p2pTime" type="number">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>IP Multicast</mat-label>
+          <input matInput formControlName="mcastIp">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Velocidad Multicast</mat-label>
+          <input matInput formControlName="mcastSpeed" type="number">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Puerto Multicast</mat-label>
+          <input matInput formControlName="mcastPort" type="number">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Modo Multicast</mat-label>
+          <input matInput formControlName="mcastMode">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Menú URL</mat-label>
+          <input matInput formControlName="menu" type="url">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Perfil de Hardware</mat-label>
+          <input matInput formControlName="hardwareProfile" type="url">
+        </mat-form-field>
+        <mat-slide-toggle formControlName="validation">Validación</mat-slide-toggle>
+        <div>
+          <button mat-button matStepperPrevious>Atrás</button>
+          <button mat-button (click)="onSubmit()" [disabled]="!networkForm.valid">Añadir</button>
+        </div>
+      </form>
+    </mat-step>
+  </mat-stepper>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+</div>

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateOrganizationalUnitComponent } from './create-organizational-unit.component';
+
+describe('CreateOrganizationalUnitComponent', () => {
+  let component: CreateOrganizationalUnitComponent;
+  let fixture: ComponentFixture<CreateOrganizationalUnitComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateOrganizationalUnitComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateOrganizationalUnitComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-create-organizational-unit',
+  templateUrl: './create-organizational-unit.component.html',
+  styleUrls: ['./create-organizational-unit.component.css']
+})
+export class CreateOrganizationalUnitComponent implements OnInit {
+  isLinear = true;
+  networkForm: FormGroup;
+  generalFormGroup: FormGroup;
+  additionalInfoFormGroup: FormGroup;
+  networkSettingsFormGroup: FormGroup;
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private dialogRef: MatDialogRef<CreateOrganizationalUnitComponent>
+  ) {
+    this.generalFormGroup = this._formBuilder.group({
+      name: ['', Validators.required],
+      parent: ['', [Validators.required, Validators.pattern('https?://.+')]],
+      description: ['']
+    });
+    this.additionalInfoFormGroup = this._formBuilder.group({
+      comments: [''],
+      type: ['', Validators.required]
+    });
+    this.networkSettingsFormGroup = this._formBuilder.group({
+      proxy: [''],
+      dns: [''],
+      netmask: [''],
+      router: [''],
+      ntp: [''],
+      p2pMode: [''],
+      p2pTime: [0, Validators.min(0)],
+      mcastIp: [''],
+      mcastSpeed: [0, Validators.min(0)],
+      mcastPort: [0, Validators.min(0)],
+      mcastMode: [''],
+      menu: ['', Validators.pattern('https?://.+')],
+      hardwareProfile: ['', Validators.pattern('https?://.+')],
+      validation: [false]
+    });
+
+    this.networkForm = this._formBuilder.group({
+      general: this.generalFormGroup,
+      additionalInfo: this.additionalInfoFormGroup,
+      networkSettings: this.networkSettingsFormGroup
+    });
+  }
+
+  ngOnInit() {}
+
+  onSubmit() {
+    if (this.networkForm.valid) {
+      const formData = this.networkForm.value;
+      console.log('Form Data:', formData);
+      // handle form submission logic
+      this.dialogRef.close(formData); // Cierra el modal y pasa los datos del formulario
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close(); // Cierra el modal sin pasar datos
+  }
+}

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_BACKUP_16366.css

@@ -0,0 +1,23 @@
+.user-form .form-field {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+=======
+    margin-bottom: 10px; 
+>>>>>>> main
+  }
+  
+  .checkbox-group label {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+=======
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+>>>>>>> main
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_BACKUP_24186.css

@@ -0,0 +1,23 @@
+.user-form .form-field {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+=======
+    margin-bottom: 10px; 
+>>>>>>> main
+  }
+  
+  .checkbox-group label {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+=======
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+>>>>>>> main
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_BACKUP_29029.css

@@ -0,0 +1,23 @@
+.user-form .form-field {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+=======
+    margin-bottom: 10px; 
+>>>>>>> main
+  }
+  
+  .checkbox-group label {
+    display: block;
+<<<<<<< HEAD
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+=======
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+>>>>>>> main
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_LOCAL_16366.css

@@ -0,0 +1,10 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_LOCAL_24186.css

@@ -0,0 +1,10 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_LOCAL_29029.css

@@ -0,0 +1,10 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; /* Puedes ajustar el valor para cambiar la separación */
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px; /* Ajusta este valor según necesites */
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_REMOTE_16366.css

@@ -0,0 +1,15 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; 
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_REMOTE_24186.css

@@ -0,0 +1,15 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; 
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+  }
+  

ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component_REMOTE_29029.css

@@ -0,0 +1,15 @@
+.user-form .form-field {
+    display: block;
+    margin-bottom: 10px; 
+  }
+  
+  .checkbox-group label {
+    display: block;
+    margin-bottom: 8px;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+  }
+