Develop

apps/web/src/app/app.routes.ts

@@ -19,6 +19,12 @@ export const routes: Routes = [
         loadChildren: () =>
           import('./features/empresa/empresa.routes')
             .then(r => r.EMPRESA_ROUTES)
+      },
+      {
+        path: 'sucursales',
+        loadChildren: () =>
+          import('./features/sucursal/sucursal.routes')
+            .then(r => r.SUCURSAL_ROUTES)
       }
 
     ]

apps/web/src/app/features/sucursal/api/sucursal-api.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { BaseApi } from '../../../core/http/base-api';
+import { ApiResponse } from '../../../core/http/api-response';
+
+import { CreateSucursalRequest } from '../models/create-sucursal-request'
+import { SucursalResponse } from '../models/sucursal-response';
+import { UpdateSucursalRequest } from '../models/update-sucursal-request';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SucursalApi extends BaseApi {
+
+  private readonly endpoint = `${this.api}/sucursales`;
+
+  create(
+    request: CreateSucursalRequest
+  ): Observable<ApiResponse<SucursalResponse>> {
+
+    return this.http.post<ApiResponse<SucursalResponse>>(
+      this.endpoint,
+      request
+    );
+
+  }
+
+  list(): Observable<ApiResponse<SucursalResponse[]>> {
+
+    return this.http.get<ApiResponse<SucursalResponse[]>>(
+      this.endpoint
+    );
+
+  }
+
+  getById(id: string): Observable<ApiResponse<SucursalResponse>> {
+
+    return this.http.get<ApiResponse<SucursalResponse>>(
+      `${this.endpoint}/${id}`
+    );
+
+  }
+
+  update(
+    id: string,
+    request: UpdateSucursalRequest
+  ): Observable<ApiResponse<SucursalResponse>> {
+
+    return this.http.put<ApiResponse<SucursalResponse>>(
+      `${this.endpoint}/${id}`,
+      request
+    );
+
+  }
+
+  delete(id: string): Observable<ApiResponse<void>> {
+
+    return this.http.delete<ApiResponse<void>>(
+      `${this.endpoint}/${id}`
+    );
+
+  }
+
+}

apps/web/src/app/features/sucursal/models/create-sucursal-request.ts

@@ -0,0 +1,17 @@
+export interface CreateSucursalRequest {
+
+  empresaId: string;
+
+  codigo: string;
+
+  nombre: string;
+
+  direccion: string;
+
+  comuna: string;
+
+  telefono: string;
+
+  email: string;
+
+}

apps/web/src/app/features/sucursal/models/sucursal-response.ts

@@ -0,0 +1,25 @@
+export interface SucursalResponse {
+
+  id: string;
+
+  empresaId: string;
+
+  codigo: string;
+
+  nombre: string;
+
+  direccion: string;
+
+  comuna: string;
+
+  telefono: string;
+
+  email: string;
+
+  activo: boolean;
+
+  createdAt: string;
+
+  updatedAt: string;
+
+}

apps/web/src/app/features/sucursal/models/sucursal.ts

@@ -0,0 +1,25 @@
+export interface Sucursal {
+
+  id: string;
+
+  empresaId: string;
+
+  codigo: string;
+
+  nombre: string;
+
+  direccion: string;
+
+  comuna: string;
+
+  telefono: string;
+
+  email: string;
+
+  activo: boolean;
+
+  createdAt: Date;
+
+  updatedAt: Date;
+
+}

apps/web/src/app/features/sucursal/models/update-sucursal-request.ts

@@ -0,0 +1,19 @@
+export interface UpdateSucursalRequest {
+
+  empresaId: string;
+
+  codigo: string;
+
+  nombre: string;
+
+  direccion: string;
+
+  comuna: string;
+
+  telefono: string;
+
+  email: string;
+
+  activo: boolean;
+
+}

apps/web/src/app/features/sucursal/pages/sucursal-create/sucursal-create.css

@@ -0,0 +1,60 @@
+:host {
+  display: block;
+  padding: 24px;
+}
+
+.form-container {
+  margin-top: 24px;
+}
+
+mat-card {
+  border-radius: 16px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 20px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+.actions {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+button {
+  min-width: 140px;
+}
+
+/* Campo informativo */
+
+.readonly-field {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.readonly-label {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 6px;
+}
+
+.readonly-value {
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+}

apps/web/src/app/features/sucursal/pages/sucursal-create/sucursal-create.html

@@ -0,0 +1,128 @@
+<app-page-header
+  [title]="isEdit ? 'Editar Sucursal' : 'Nueva Sucursal'"
+  [subtitle]="isEdit ? 'Actualización de sucursal' : 'Registro de sucursal'">
+</app-page-header>
+
+<div class="form-container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <form
+        class="form-grid"
+        [formGroup]="form"
+        (ngSubmit)="guardar()">
+
+        @if (!isEdit) {
+
+          <mat-form-field appearance="outline">
+
+            <mat-label>Empresa</mat-label>
+
+            <mat-select formControlName="empresaId">
+
+              @for (empresa of empresas; track empresa.id) {
+
+                <mat-option [value]="empresa.id">
+                  {{ empresa.nombreComercial }}
+                </mat-option>
+
+              }
+
+            </mat-select>
+
+          </mat-form-field>
+
+        }
+        <mat-form-field appearance="outline">
+
+          <mat-label>Código</mat-label>
+
+          <input
+            matInput
+            formControlName="codigo">
+
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+
+          <mat-label>Nombre</mat-label>
+
+          <input
+            matInput
+            formControlName="nombre">
+
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+
+          <mat-label>Dirección</mat-label>
+
+          <input
+            matInput
+            formControlName="direccion">
+
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+
+          <mat-label>Comuna</mat-label>
+
+          <input
+            matInput
+            formControlName="comuna">
+
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+
+          <mat-label>Teléfono</mat-label>
+
+          <input
+            matInput
+            type="tel"
+            formControlName="telefono">
+
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+
+          <mat-label>Email</mat-label>
+
+          <input
+            matInput
+            type="email"
+            formControlName="email">
+
+        </mat-form-field>
+
+        <div class="actions">
+
+          <button
+            mat-stroked-button
+            type="button"
+            (click)="cancelar()">
+
+            Cancelar
+
+          </button>
+
+          <button
+            mat-raised-button
+            color="primary"
+            type="submit">
+
+            {{ isEdit ? 'Actualizar' : 'Guardar' }}
+
+          </button>
+
+        </div>
+
+      </form>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>