feat(front-end): Show client state in clients table

Kaizen/ClientApp/src/app/modules/clients/components/clients/clients.component.html

@@ -64,6 +64,16 @@ <h1>Clientes registrados</h1>
                 {{ client.firstPhoneNumber }}
               </td>
             </ng-container>
+            <ng-container matColumnDef="state">
+              <th mat-header-cell *matHeaderCellDef>Estado</th>
+              <td mat-cell *matCellDef="let client">
+                <mat-chip-list>
+                  <mat-chip [class]="'client-state-' + client?.state">
+                    {{ client.state | clientState }}
+                  </mat-chip>
+                </mat-chip-list>
+              </td>
+            </ng-container>
             <ng-container matColumnDef="options">
               <th mat-header-cell *matHeaderCellDef>Opciones</th>
               <td mat-cell *matCellDef="let client">

Kaizen/ClientApp/src/app/modules/clients/components/clients/clients.component.scss

@@ -0,0 +1,14 @@
+.client-state-0 {
+  color: white;
+  background: var(--sizzling_sunrise);
+}
+
+.client-state-2 {
+  color: white;
+  background: var(--vivid_red);
+}
+
+.client-state-3, .client-state-1 {
+  color: white;
+  background: var(--forest-green-web);
+}

Kaizen/ClientApp/src/app/modules/clients/components/clients/clients.component.ts

@@ -19,7 +19,7 @@ export class ClientsComponent implements OnInit, AfterViewInit {
   clients$: Observable<Client[]>;
 
   dataSource: MatTableDataSource<Client> = new MatTableDataSource<Client>(this.clients);
-  displayedColumns: string[] = [ 'id', 'name', 'clientType', 'phonenumber', 'options' ];
+  displayedColumns: string[] = [ 'id', 'name', 'clientType', 'phonenumber', 'state', 'options' ];
 
   @ViewChild(MatPaginator, { static: true })
   paginator: MatPaginator;