<header class="app-header" [class.scrolled]="isScrolled">
  <div class="header-inner container">

    <ng-container *ngIf="isLoggedHeader; else publicHeader">
      <div class="logged-header">
        <div class="left-logged">
          <button class="btn-icon hamburger" type="button" (click)="toggleMenu()" aria-label="Abrir menu">
            <i class="bi bi-list"></i>
          </button>

          <a routerLink="/dashboard" class="logo-area" (click)="closeMenu()">
            <img src="linegestao-logo.png" alt="Line Gestão" class="logo-symbol" />
            <div class="lg-wordmark" [attr.aria-label]="headerLogoAriaLabel">
              <div class="lg-wordmark__line">Line</div>
              <div class="lg-wordmark__movel">{{ headerLogoSubtitle }}</div>
            </div>
          </a>
        </div>

        <div class="logged-actions">
          <div class="client-header-context" *ngIf="isClientHeader">
            <div class="client-chip" [title]="clientTenantDisplayName || 'Cliente'">
              <span class="client-chip__icon" aria-hidden="true">
                <i class="bi bi-building"></i>
              </span>
              <span class="client-chip__name">{{ clientTenantDisplayNameAbbrev }}</span>
            </div>
          </div>

          <div class="notifications-menu" [class.open]="notificationsOpen" (click)="$event.stopPropagation()">
            <button
              type="button"
              class="btn-icon btn-bell"
              aria-label="Notificações"
              (click)="toggleNotifications()"
              [attr.aria-expanded]="notificationsOpen"
              [class.has-unread]="unreadCount > 0"
            >
              <i class="bi" [class.bi-bell-fill]="unreadCount > 0" [class.bi-bell]="unreadCount === 0"></i>
              <span class="badge-pulse" *ngIf="unreadCount > 0"></span>
            </button>

	            <div class="notifications-dropdown" *ngIf="notificationsOpen">
	              <div class="notifications-head">
	                <div class="head-title">
	                  <span>Notificações</span>
	                  <span class="badge-count" *ngIf="unreadCount > 0">{{ unreadCount }} nova(s)</span>
	                </div>
	                <div class="head-actions">
	                  <button
	                    type="button"
	                    class="head-btn"
	                    (click)="markAllNotificationsRead(); $event.stopPropagation()"
	                    [disabled]="notificationsBulkReadLoading || unreadCount === 0"
	                    *ngIf="notificationsView === 'pendentes'"
	                  >
	                    <span *ngIf="!notificationsBulkReadLoading"><i class="bi bi-check2-all"></i> Ler tudo</span>
	                    <span *ngIf="notificationsBulkReadLoading"><span class="spinner-border spinner-border-sm me-2"></span> Lendo...</span>
	                  </button>
	                  <button
	                    type="button"
	                    class="head-btn"
	                    (click)="markAllNotificationsUnread(); $event.stopPropagation()"
	                    [disabled]="notificationsBulkUnreadLoading || notificationsVisibleCount === 0"
	                    *ngIf="notificationsView === 'lidas'"
	                  >
	                    <span *ngIf="!notificationsBulkUnreadLoading"><i class="bi bi-arrow-counterclockwise"></i> Restaurar tudo</span>
	                    <span *ngIf="notificationsBulkUnreadLoading"><span class="spinner-border spinner-border-sm me-2"></span> Restaurando...</span>
	                  </button>
	                  <a routerLink="/notificacoes" class="see-all" (click)="closeNotifications()">Ver tudo</a>
	                </div>
	              </div>

	              <div class="notifications-tabs">
	                <button
	                  type="button"
	                  class="notif-tab"
	                  [class.active]="notificationsView === 'pendentes'"
	                  (click)="setNotificationsView('pendentes'); $event.stopPropagation()"
	                >
	                  Pendentes
	                </button>
	                <button
	                  type="button"
	                  class="notif-tab"
	                  [class.active]="notificationsView === 'lidas'"
	                  (click)="setNotificationsView('lidas'); $event.stopPropagation()"
	                >
	                  Arquivadas / Lidas
	                </button>
	              </div>
	
	              <div class="notifications-body custom-scroll">
	                <div class="notifications-state loading" *ngIf="notificationsLoading">
	                  <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                  <span>Carregando...</span>
                </div>

                <div class="notifications-state warn" *ngIf="notificationsError">
                  <i class="bi bi-exclamation-triangle"></i>
	                  <span>Falha ao carregar.</span>
	                </div>
	
	                <div class="notifications-empty" *ngIf="!notificationsLoading && !notificationsError && notificationsVisibleCount === 0">
	                  <div class="empty-icon"><i class="bi bi-bell-slash"></i></div>
	                  <p>Não há notificações no momento.</p>
	                </div>
	
	                <div class="notifications-state info" *ngIf="!notificationsLoading && !notificationsError && hasNotificationsTruncated">
	                  <i class="bi bi-info-circle"></i>
	                  <span class="notifications-truncate-copy">
	                    Mostrando <strong>{{ notificationsPreviewLimit }}</strong> de <strong>{{ notificationsVisibleCount }}</strong> notificações
	                  </span>
	                </div>

	                <div
	                  class="notification-item"
	                  *ngFor="let n of notificationsPreview; trackBy: trackByNotificationId"
	                  [class.unread]="!n.lida"
	                  (click)="onNotificationItemClick(n)"
	                >
                  <div class="notif-icon-area">
                    <div class="icon-circle"
                         [class.danger]="getNotificationTipo(n) === 'Vencido'"
                         [class.warn]="getNotificationTipo(n) === 'AVencer'">
                      <i class="bi"
                         [class.bi-x-lg]="getNotificationTipo(n) === 'Vencido'"
                         [class.bi-clock-history]="getNotificationTipo(n) === 'AVencer'"
                         [class.bi-info-circle]="getNotificationTipo(n) !== 'Vencido' && getNotificationTipo(n) !== 'AVencer'"></i>
                    </div>
                  </div>

                  <div class="notif-content">
                    <div class="notif-header">
                      <span class="notif-title-line">
                        <span class="notif-line">{{ n.linha || 'Sem Linha' }}</span>
                        <span class="notif-sep">•</span>
                        <span class="notif-client" [title]="n.cliente || '-'">{{ abbreviateName(n.cliente) }}</span>
                      </span>
                    </div>
                    <p class="notif-desc">
                      <span class="notif-verb">{{ getVigenciaLabel(n) }}:</span>
                      <strong class="notif-date-strong" [class.danger]="getNotificationTipo(n) === 'Vencido'" [class.warn]="getNotificationTipo(n) === 'AVencer'">
                        {{ getVigenciaDate(n) }}
                      </strong>
                    </p>
                    <div class="notif-meta-lines">
                      <div class="notif-meta-line">
                        <span class="meta-label">Usuário:</span>
                        <span class="meta-value">{{ abbreviateName(n.usuario) }}</span>
                      </div>
                      <div class="notif-meta-line">
                        <span class="meta-label">Conta:</span>
                        <span class="meta-value">{{ n.conta || '-' }}</span>
                      </div>
                    </div>
                  </div>

	                  <div class="notif-status" *ngIf="!n.lida" title="Marcar como lida">
	                    <span class="status-dot"></span>
	                  </div>
                    <button
                      type="button"
                      class="notif-restore-btn"
                      *ngIf="n.lida"
                      (click)="markNotificationUnread(n); $event.stopPropagation()"
                      title="Marcar como não lida"
                    >
                      Restaurar
                    </button>
	                </div>
	              </div>
	            </div>
          </div>

          <div class="options-menu" [class.open]="optionsOpen" (click)="$event.stopPropagation()">
            <button
              type="button"
              class="user-trigger"
              (click)="toggleOptions()"
              aria-haspopup="true"
              [attr.aria-expanded]="optionsOpen"
            >
              <div class="user-avatar">
                <i class="bi bi-person-fill"></i>
              </div>
              <i class="bi bi-chevron-down chevron"></i>
            </button>

            <div class="options-dropdown" *ngIf="optionsOpen">
              <div class="dropdown-arrow"></div>
              <button type="button" class="options-item" (click)="goToProfile()">
                <i class="bi bi-person-circle"></i> Perfil
              </button>
              <div class="divider" *ngIf="isSysAdmin"></div>
              <button type="button" class="options-item" *ngIf="isSysAdmin" (click)="openCreateUserModal()">
                <i class="bi bi-person-plus"></i> Criar novo usuário
              </button>
              <button type="button" class="options-item" *ngIf="isSysAdmin" (click)="openManageUsersModal()">
                <i class="bi bi-people"></i> Editar usuário
              </button>
              <button type="button" class="options-item" *ngIf="isSysAdmin" (click)="openManageClientCredentialsModal()">
                <i class="bi bi-person-badge"></i> Credenciais de clientes
              </button>
              <button type="button" class="options-item" *ngIf="isSysAdmin" (click)="goToSystemProvisionUser()">
                <i class="bi bi-shield-lock"></i> Criar credenciais do cliente
              </button>
              <div class="divider"></div>
              <button type="button" class="options-item danger" (click)="logout()">
                <i class="bi bi-box-arrow-right"></i> Sair
              </button>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

    <ng-template #publicHeader>
      <a routerLink="/" class="logo-area">
        <img src="linegestao-logo.png" alt="Line Gestão" class="logo-symbol" />
        <div class="lg-wordmark" aria-label="Line Gestão">
          <div class="lg-wordmark__line">Line</div>
          <div class="lg-wordmark__movel">Gestão</div>
        </div>
      </a>
      <nav class="nav-links">
        <a href="https://www.linemovel.com.br/empresas" target="_blank" class="nav-link">Para Empresas</a>
        <a href="https://www.linemovel.com.br/proposta" target="_blank" class="nav-link">Proposta</a>
        <a href="https://www.linemovel.com.br/sobrenos" target="_blank" class="nav-link">Sobre</a>
      </nav>
      <div class="header-actions">
        <a routerLink="/login" class="btn-login-header">
          Acessar Sistema <i class="bi bi-arrow-right-short"></i>
        </a>
      </div>
    </ng-template>

  </div>
</header>

<div class="modal-overlay" *ngIf="createUserOpen" (click)="closeCreateUserModal()"></div>
<div class="modal-card" *ngIf="createUserOpen" (click)="$event.stopPropagation()">
  <div class="modal-header">
    <h3>Novo Usuário LineGestão</h3>
    <button type="button" class="btn-icon close-x" (click)="closeCreateUserModal()" aria-label="Fechar">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  <div class="modal-body">
    <div class="form-alert error" *ngIf="createUserForbidden">
      Você não tem permissão para criar usuários.
    </div>
    <div class="form-alert error" *ngIf="!createUserForbidden && createUserErrors.length">
      <strong>Confira os campos:</strong>
      <ul>
        <li *ngFor="let err of createUserErrors">
          {{ err.message }}
        </li>
      </ul>
    </div>
    <div class="form-alert success" *ngIf="createUserSuccess">
      {{ createUserSuccess }}
    </div>

    <form class="user-form" id="createUserForm" [formGroup]="createUserForm" (ngSubmit)="submitCreateUser()">
      <div class="form-field" [class.has-error]="hasFieldError('nome') || (createUserForm.get('nome')?.touched && createUserForm.get('nome')?.invalid)">
        <label for="modalNome">Nome</label>
        <input id="modalNome" type="text" placeholder="Nome completo" formControlName="nome" />
        <small class="field-error" *ngIf="createUserForm.get('nome')?.touched && createUserForm.get('nome')?.invalid">Nome obrigatório.</small>
        <small class="field-error" *ngIf="getFieldErrors('nome').length">{{ getFieldErrors('nome')[0] }}</small>
      </div>
      <div class="form-field" [class.has-error]="hasFieldError('email') || (createUserForm.get('email')?.touched && createUserForm.get('email')?.invalid)">
        <label for="modalEmail">Email</label>
        <input id="modalEmail" type="email" placeholder="nome@empresa.com" formControlName="email" />
        <small class="field-error" *ngIf="createUserForm.get('email')?.touched && createUserForm.get('email')?.invalid">Email inválido.</small>
        <small class="field-error" *ngIf="getFieldErrors('email').length">{{ getFieldErrors('email')[0] }}</small>
      </div>
      <div class="form-field" [class.has-error]="hasFieldError('senha') || (createUserForm.get('senha')?.touched && createUserForm.get('senha')?.invalid)">
        <label for="modalSenha">Senha</label>
        <input id="modalSenha" type="password" placeholder="Defina uma senha segura" formControlName="senha" />
        <small class="field-error" *ngIf="createUserForm.get('senha')?.touched && createUserForm.get('senha')?.invalid">Senha inválida.</small>
        <small class="field-error" *ngIf="getFieldErrors('senha').length">{{ getFieldErrors('senha')[0] }}</small>
      </div>
      <div class="form-field" [class.has-error]="hasFieldError('confirmarSenha') || (createUserForm.get('confirmarSenha')?.touched && createUserForm.get('confirmarSenha')?.invalid) || (passwordMismatch && createUserForm.get('confirmarSenha')?.touched)">
        <label for="modalConfirmar">Confirmar Senha</label>
        <input id="modalConfirmar" type="password" placeholder="Repita a senha" formControlName="confirmarSenha" />
        <small class="field-error" *ngIf="passwordMismatch && createUserForm.get('confirmarSenha')?.touched">As senhas não conferem.</small>
        <small class="field-error" *ngIf="getFieldErrors('confirmarSenha').length">{{ getFieldErrors('confirmarSenha')[0] }}</small>
      </div>
      <div class="form-field" [class.has-error]="hasFieldError('permissao') || (createUserForm.get('permissao')?.touched && createUserForm.get('permissao')?.invalid)">
        <label for="modalPermissoes">Permissões</label>
        <app-select id="modalPermissoes" formControlName="permissao" [options]="permissionOptions" labelKey="label" valueKey="value" placeholder="Selecione o nivel"></app-select>
        <small class="field-error" *ngIf="createUserForm.get('permissao')?.touched && createUserForm.get('permissao')?.invalid">Selecione uma permissão.</small>
        <small class="field-error" *ngIf="getFieldErrors('permissao').length">{{ getFieldErrors('permissao')[0] }}</small>
      </div>
    </form>
  </div>
  <div class="modal-actions">
    <button type="button" class="btn-secondary" (click)="closeCreateUserModal()">Cancelar</button>
    <button type="submit" form="createUserForm" class="btn-primary" [disabled]="createUserSubmitting || createUserForm.invalid">
      <span *ngIf="!createUserSubmitting">Salvar</span>
      <span *ngIf="createUserSubmitting">Salvando...</span>
    </button>
  </div>
</div>

<div class="modal-overlay" *ngIf="manageUsersOpen" (click)="closeManageUsersModal()"></div>
<div class="modal-card manage-users-modal" *ngIf="manageUsersOpen" (click)="$event.stopPropagation()">
  <div class="modal-header">
    <h3>{{ manageModalTitle }}</h3>
    <button type="button" class="btn-icon close-x" (click)="closeManageUsersModal()" aria-label="Fechar">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  <div class="modal-body manage-body">
    <div class="manage-left">
      <div class="manage-search">
        <div class="search-input-wrapper">
          <i class="bi bi-search"></i>
          <input type="text" [placeholder]="manageSearchPlaceholder" [(ngModel)]="manageSearch" (keyup.enter)="onManageSearch()" />
        </div>
      </div>

      <div class="manage-table-wrap custom-scroll">
        <div class="loading-state" *ngIf="manageUsersLoading">
           <div class="spinner-border text-primary" role="status"></div>
        </div>

        <table class="manage-table" *ngIf="!manageUsersLoading && manageUsers.length">
          <thead>
            <tr>
              <th style="width: 40%;">Usuário</th>
              <th style="width: 25%;" class="text-center">Perfil</th>
              <th style="width: 15%;" class="text-center">Status</th>
              <th style="width: 20%;" class="text-center">Ações</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let u of manageUsers" [class.selected]="editUserTarget?.id === u.id" (click)="openEditUser(u)">
              <td>
                <div class="user-cell">
                  <div class="avatar-mini">{{ u.nome.charAt(0).toUpperCase() }}</div>
                  <div class="user-info">
                    <span class="u-name" title="{{ u.nome }}">{{ u.nome }}</span>
                    <span class="u-email" title="{{ u.email }}">{{ u.email }}</span>
                  </div>
                </div>
              </td>
              <td class="text-center">
                <span class="badge-role">{{ u.permissao }}</span>
              </td>
              <td class="text-center">
                <span class="status-dot" [class.off]="u.ativo === false" title="{{ u.ativo === false ? 'Inativo' : 'Ativo' }}"></span>
              </td>
              <td class="text-center">
                <div class="actions-group">
                   <button type="button" class="btn-action edit" title="Editar" (click)="openEditUser(u); $event.stopPropagation()">
                     <i class="bi bi-pencil-fill"></i>
                   </button>
                   <button
                     type="button"
                     class="btn-action"
                     [class.edit]="u.ativo === false"
                     [class.delete]="u.ativo !== false"
                     [title]="u.ativo === false ? 'Reativar conta' : 'Inativar conta'"
                     (click)="confirmToggleUserStatus(u); $event.stopPropagation()">
                     <i class="bi" [class.bi-person-check-fill]="u.ativo === false" [class.bi-person-x-fill]="u.ativo !== false"></i>
                   </button>
                   <button
                     type="button"
                     class="btn-action delete"
                     [title]="u.ativo !== false ? 'Inative a conta antes de excluir permanentemente' : 'Excluir permanentemente'"
                     (click)="confirmPermanentDeleteUser(u); $event.stopPropagation()">
                     <i class="bi bi-trash-fill"></i>
                   </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="empty-state-list" *ngIf="!manageUsersLoading && !manageUsers.length">
          <i class="bi bi-search"></i>
          <p>Nenhum usuário encontrado.</p>
        </div>
      </div>

      <div class="list-footer">
        <div class="page-info">
          {{ managePage }} / {{ manageTotalPages }}
        </div>
        <div class="pagination">
          <button type="button" class="btn-ghost icon-only" (click)="manageGoToPage(managePage - 1)" [disabled]="managePage <= 1">
            <i class="bi bi-chevron-left"></i>
          </button>
          <button type="button" class="btn-ghost icon-only" (click)="manageGoToPage(managePage + 1)" [disabled]="managePage >= manageTotalPages">
            <i class="bi bi-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="manage-right-wrapper">
        <div class="manage-right" *ngIf="editUserTarget as target">
            <div class="edit-header-info">
                <div class="avatar-large">{{ target.nome.charAt(0).toUpperCase() }}</div>
                <div class="info-text">
                    <h4>{{ target.nome }}</h4>
                    <span>{{ isManageClientsMode ? 'Editando credencial do cliente' : 'Editando perfil' }}</span>
                </div>
            </div>

            <div class="form-alert error" *ngIf="editUserErrors.length">
                <ul><li *ngFor="let err of editUserErrors">{{ err.message }}</li></ul>
            </div>
            <div class="form-alert success" *ngIf="editUserSuccess">{{ editUserSuccess }}</div>

            <form class="user-form refined-form" id="editUserHeaderForm" [formGroup]="editUserForm" (ngSubmit)="submitEditUser()">
                <div class="form-row">
                    <div class="form-field">
                        <label for="editHeaderNome">{{ isManageClientsMode ? 'Nome do responsável' : 'Nome Completo' }}</label>
                        <input id="editHeaderNome" type="text" formControlName="nome" />
                    </div>
                </div>

                <div class="form-field">
                    <label for="editHeaderEmail">{{ isManageClientsMode ? 'Email de acesso' : 'Email Corporativo' }}</label>
                    <input id="editHeaderEmail" type="email" formControlName="email" />
                </div>

                <div class="form-row two-col">
                      <div class="form-field">
                        <label for="editHeaderSenha">Nova Senha</label>
                        <input id="editHeaderSenha" type="password" placeholder="••••••" formControlName="senha" autocomplete="new-password" />
                      </div>
                      <div class="form-field">
                        <label for="editHeaderConfirmar">Confirmar</label>
                        <input id="editHeaderConfirmar" type="password" placeholder="••••••" formControlName="confirmarSenha" autocomplete="new-password" />
                      </div>
                </div>

                <div class="form-row two-col align-end">
                    <div class="form-field">
                        <label for="editHeaderPermissao">Nível de Acesso</label>
                        <app-select
                          id="editHeaderPermissao"
                          formControlName="permissao"
                          [options]="editPermissionOptions"
                          labelKey="label"
                          valueKey="value"
                          placeholder="Selecione o nivel"></app-select>
                    </div>

                    <div class="form-field">
                        <label class="mb-1 d-block">Status da Conta</label>
                        <div class="toggle-wrapper">
                            <label class="switch">
                                <input id="editHeaderAtivo" type="checkbox" formControlName="ativo" />
                                <span class="slider round"></span>
                            </label>
                            <span class="toggle-status" [class.active]="editUserForm.get('ativo')?.value">
                                {{ editUserForm.get('ativo')?.value ? 'Ativo' : 'Inativo' }}
                            </span>
                        </div>
                    </div>
                </div>
            </form>

             <div class="manage-actions-footer">
                <button
                  type="button"
                  class="btn-secondary btn-delete-permanent-left"
                  (click)="confirmPermanentDeleteUser(target)"
                  [disabled]="editUserSubmitting"
                  [title]="target.ativo !== false ? 'Inative a conta antes de excluir permanentemente' : 'Excluir permanentemente'">
                  {{ isManageClientsMode ? 'Excluir Credencial' : 'Excluir Permanentemente' }}
                </button>
                <button type="button" class="btn-ghost" (click)="cancelEditUser()" [disabled]="editUserSubmitting">Cancelar</button>
                <button type="submit" form="editUserHeaderForm" class="btn-primary" [disabled]="editUserSubmitting || !editUserTarget">
                  <span *ngIf="!editUserSubmitting">Salvar Alterações</span>
                  <span *ngIf="editUserSubmitting"><div class="spinner-border spinner-border-sm"></div></span>
                </button>
             </div>
        </div>

        <div class="manage-right placeholder" *ngIf="!editUserTarget">
            <div class="placeholder-content">
                <div class="placeholder-icon">
                    <i class="bi bi-person-gear"></i>
                </div>
                <h3>{{ isManageClientsMode ? 'Editar Credencial' : 'Editar Usuário' }}</h3>
                <p>{{ isManageClientsMode ? 'Selecione uma credencial de cliente para visualizar e editar os detalhes.' : 'Selecione um usuário na lista para visualizar e editar os detalhes.' }}</p>
            </div>
        </div>
    </div>
  </div>
</div>

<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 2000;">
  <div class="toast notification-toast" #notifToast>
    <div class="toast-header">
      <i class="bi bi-exclamation-circle-fill text-warning me-2"></i>
      <strong class="me-auto">Atenção à Vigência</strong>
      <button type="button" class="btn-close" (click)="acknowledgeCurrentToast()" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body" *ngIf="toastNotification as toastItem">
      A linha <strong>{{ toastItem.linha }}</strong> vence em breve.
      <div class="mt-2 pt-2 border-top">
        <button type="button" class="btn btn-sm btn-primary w-100" (click)="acknowledgeNotification(toastItem)" data-bs-dismiss="toast">
          Estou ciente
        </button>
      </div>
    </div>
  </div>
</div>

<div class="menu-overlay" *ngIf="isLoggedHeader && menuOpen" (click)="closeMenu()"></div>

<aside *ngIf="isLoggedHeader" class="side-menu" [class.open]="menuOpen" (click)="$event.stopPropagation()">
  <div class="side-menu-header">
    <a class="side-logo" routerLink="/dashboard" (click)="closeMenu()">
      <img src="linegestao-logo.png" alt="Line Gestão" class="side-logo-symbol" />
      <div class="side-wordmark" aria-label="Line Gestão">
        <div class="side-wordmark__line">Line</div>
        <div class="side-wordmark__movel">Gestão</div>
      </div>
    </a>
    <button type="button" class="close-btn" (click)="closeMenu()"><i class="bi bi-x-lg"></i></button>
  </div>
  <div class="side-menu-body">
    <a routerLink="/dashboard" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-grid-fill"></i> <span>Dashboard</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/resumo" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-table"></i> <span>Resumo</span>
    </a>
    <a routerLink="/geral" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-sim"></i> <span>Geral</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/mureg" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-diagram-3-fill"></i> <span>Mureg</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/faturamento" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-receipt"></i> <span>Faturamento</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/parcelamentos" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-wallet2"></i> <span>Parcelamentos</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/historico" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-clock-history"></i> <span>Histórico</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/dadosusuarios" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-people-fill"></i> <span>Dados PF/PJ</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/vigencia" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-calendar2-check-fill"></i> <span>Vigência</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/chips-controle-recebidos" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-archive-fill"></i> <span>Chips Virgens e Recebidos</span>
    </a>
    <a *ngIf="canViewAll" routerLink="/trocanumero" routerLinkActive="active" class="side-item" (click)="closeMenu()">
      <i class="bi bi-arrow-left-right"></i> <span>Troca de número</span>
    </a>
  </div>
</aside>
