line-gestao-frontend/src/app/components/page-modals/chips-controle-modals/chips-controle-modals.html

371 lines
19 KiB
HTML

<app-modal-layer
[open]="chipDetailOpen || controleDetailOpen || chipEditOpen || chipDeleteOpen || controleEditOpen || controleDeleteOpen || chipCreateOpen || controleCreateOpen"
(close)="closeChipDetail(); closeControleDetail(); closeChipEdit(); cancelChipDelete(); closeControleEdit(); cancelControleDelete(); closeChipCreate(); closeControleCreate()"
>
<!-- MODAL CHIP -->
<ng-container *ngIf="chipDetailOpen">
<div class="modal-card modal-lg" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-sim"></i></span>
Detalhes do Chip
</div>
<button class="btn btn-sm btn-icon" (click)="closeChipDetail()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray">
<div class="p-5 text-center text-muted" *ngIf="chipDetailLoading">
<span class="spinner-border me-2"></span> Carregando detalhes...
</div>
<div class="details-dashboard" *ngIf="!chipDetailLoading && chipDetailData">
<div class="detail-box w-100">
<div class="box-header justify-content-center">
<span><i class="bi bi-card-text me-2"></i> Informações do Chip</span>
</div>
<div class="box-body">
<div class="info-grid">
<div class="info-item">
<span class="lbl">Item</span>
<span class="val">{{ display(chipDetailData.item) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Número do Chip</span>
<span class="val text-brand font-monospace">{{ display(chipDetailData.numeroDoChip) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Observações</span>
<span class="val">{{ display(chipDetailData.observacoes) }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<!-- MODAL CONTROLE -->
<ng-container *ngIf="controleDetailOpen">
<div class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-clipboard-data"></i></span>
Detalhes do Recebimento
</div>
<button class="btn btn-sm btn-icon" (click)="closeControleDetail()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray">
<div class="p-5 text-center text-muted" *ngIf="controleDetailLoading">
<span class="spinner-border me-2"></span> Carregando detalhes...
</div>
<div class="details-dashboard" *ngIf="!controleDetailLoading && controleDetailData">
<div class="detail-box w-100">
<div class="box-header justify-content-center">
<span><i class="bi bi-card-text me-2"></i> Informações da NF</span>
</div>
<div class="box-body">
<div class="info-grid">
<div class="info-item">
<span class="lbl">Ano</span>
<span class="val">{{ display(controleDetailData.ano) }}</span>
</div>
<div class="info-item">
<span class="lbl">Item</span>
<span class="val">{{ display(controleDetailData.item) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Nota Fiscal</span>
<span class="val">{{ display(controleDetailData.notaFiscal) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Chip</span>
<span class="val font-monospace">{{ display(controleDetailData.chip) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Serial</span>
<span class="val font-monospace">{{ display(controleDetailData.serial) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Conteúdo da NF</span>
<span class="val">{{ display(controleDetailData.conteudoDaNf) }}</span>
</div>
<div class="info-item">
<span class="lbl">Número da Linha</span>
<span class="val font-monospace">{{ display(controleDetailData.numeroDaLinha) }}</span>
</div>
<div class="info-item">
<span class="lbl">Quantidade</span>
<span class="val">{{ display(controleDetailData.quantidade) }}</span>
</div>
<div class="info-item">
<span class="lbl">Valor Unit</span>
<span class="val">{{ formatMoney(controleDetailData.valorUnit) }}</span>
</div>
<div class="info-item">
<span class="lbl">Valor da NF</span>
<span class="val text-brand">{{ formatMoney(controleDetailData.valorDaNf) }}</span>
</div>
<div class="info-item">
<span class="lbl">Data da NF</span>
<span class="val">{{ formatDate(controleDetailData.dataDaNf) }}</span>
</div>
<div class="info-item">
<span class="lbl">Recebimento</span>
<span class="val">{{ formatDate(controleDetailData.dataDoRecebimento) }}</span>
</div>
<div class="info-item">
<span class="lbl">Tipo</span>
<span class="val">{{ isResumo(controleDetailData) ? "RESUMO" : "DETALHE" }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<!-- MODAL CHIP CREATE -->
<ng-container *ngIf="chipCreateOpen">
<div class="modal-card modal-lg create-modal" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-plus-circle"></i></span>
Novo Chip
</div>
<button class="btn btn-sm btn-icon" (click)="closeChipCreate()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray" *ngIf="chipCreateModel">
<div class="edit-sections">
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-sim me-2"></i> Informações do Chip</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Item (opcional)</label><input class="form-control form-control-sm" type="number" [(ngModel)]="chipCreateModel.item" /></div>
<div class="form-field span-2"><label>Número do Chip</label><input class="form-control form-control-sm" [(ngModel)]="chipCreateModel.numeroDoChip" /></div>
<div class="form-field span-2"><label>Observações</label><input class="form-control form-control-sm" [(ngModel)]="chipCreateModel.observacoes" /></div>
</div>
</div>
</details>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="closeChipCreate()">Cancelar</button>
<button class="btn btn-brand btn-sm" [disabled]="chipCreateSaving" (click)="saveChipCreate()">
{{ chipCreateSaving ? 'Salvando...' : 'Salvar' }}
</button>
</div>
</div>
</ng-container>
<!-- MODAL CONTROLE CREATE -->
<ng-container *ngIf="controleCreateOpen">
<div class="modal-card modal-xl-custom create-modal" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-plus-circle"></i></span>
Novo Recebimento
</div>
<button class="btn btn-sm btn-icon" (click)="closeControleCreate()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray" *ngIf="controleCreateModel">
<div class="edit-sections">
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-card-list me-2"></i> Dados da Nota</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Ano</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleCreateModel.ano" /></div>
<div class="form-field"><label>Item</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleCreateModel.item" /></div>
<div class="form-field span-2"><label>Nota Fiscal</label><input class="form-control form-control-sm" [(ngModel)]="controleCreateModel.notaFiscal" /></div>
<div class="form-field span-2"><label>Conteúdo da NF</label><input class="form-control form-control-sm" [(ngModel)]="controleCreateModel.conteudoDaNf" /></div>
<div class="form-field"><label>Serial</label><input class="form-control form-control-sm" [(ngModel)]="controleCreateModel.serial" /></div>
<div class="form-field"><label>Chip</label><input class="form-control form-control-sm" [(ngModel)]="controleCreateModel.chip" /></div>
<div class="form-field"><label>Número da Linha</label><input class="form-control form-control-sm" [(ngModel)]="controleCreateModel.numeroDaLinha" /></div>
</div>
</div>
</details>
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-currency-exchange me-2"></i> Valores e Datas</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Valor Unit</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleCreateModel.valorUnit" (ngModelChange)="onControleCreateValueChange()" /></div>
<div class="form-field"><label>Quantidade</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleCreateModel.quantidade" (ngModelChange)="onControleCreateValueChange()" /></div>
<div class="form-field"><label>Valor da NF</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleCreateModel.valorDaNf" (ngModelChange)="onControleCreateValueChange()" /></div>
<div class="form-field"><label>Data da NF</label><input class="form-control form-control-sm" type="date" [(ngModel)]="controleCreateDataNf" (ngModelChange)="onControleCreateDateChange()" /></div>
<div class="form-field"><label>Recebimento</label><input class="form-control form-control-sm" type="date" [(ngModel)]="controleCreateRecebimento" /></div>
<div class="form-field"><label>Resumo</label><input class="form-check-input ms-2" type="checkbox" [(ngModel)]="controleCreateModel.isResumo" /></div>
</div>
</div>
</details>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="closeControleCreate()">Cancelar</button>
<button class="btn btn-brand btn-sm" [disabled]="controleCreateSaving" (click)="saveControleCreate()">
{{ controleCreateSaving ? 'Salvando...' : 'Salvar' }}
</button>
</div>
</div>
</ng-container>
<!-- MODAL CHIP EDIT -->
<ng-container *ngIf="chipEditOpen">
<div class="modal-card modal-lg" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span>
Editar Chip
</div>
<button class="btn btn-sm btn-icon" (click)="closeChipEdit()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray" *ngIf="chipEditModel">
<div class="edit-sections">
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-sim me-2"></i> Identificação do Chip</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Item</label><input class="form-control form-control-sm" type="number" [(ngModel)]="chipEditModel.item" /></div>
<div class="form-field span-2"><label>Número do Chip</label><input class="form-control form-control-sm" [(ngModel)]="chipEditModel.numeroDoChip" /></div>
<div class="form-field span-2"><label>Observações</label><input class="form-control form-control-sm" [(ngModel)]="chipEditModel.observacoes" /></div>
</div>
</div>
</details>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="closeChipEdit()">Cancelar</button>
<button class="btn btn-primary btn-sm" [disabled]="chipEditSaving" (click)="saveChipEdit()">
{{ chipEditSaving ? 'Salvando...' : 'Salvar' }}
</button>
</div>
</div>
</ng-container>
<!-- MODAL CHIP DELETE -->
<ng-container *ngIf="chipDeleteOpen">
<div class="modal-card modal-lg" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
Remover Chip
</div>
<button class="btn btn-sm btn-icon" (click)="cancelChipDelete()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray">
<div class="confirm-delete">
<div class="confirm-icon"><i class="bi bi-trash"></i></div>
<p class="mb-0">Confirma remover o chip <strong>{{ chipDeleteTarget?.numeroDoChip }}</strong>?</p>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="cancelChipDelete()">Cancelar</button>
<button class="btn btn-danger btn-sm" (click)="confirmChipDelete()">Excluir</button>
</div>
</div>
</ng-container>
<!-- MODAL CONTROLE EDIT -->
<ng-container *ngIf="controleEditOpen">
<div class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span>
Editar Recebimento
</div>
<button class="btn btn-sm btn-icon" (click)="closeControleEdit()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray" *ngIf="controleEditModel">
<div class="edit-sections">
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-receipt-cutoff me-2"></i> Documento</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Ano</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleEditModel.ano" /></div>
<div class="form-field"><label>Item</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleEditModel.item" /></div>
<div class="form-field span-2"><label>Nota Fiscal</label><input class="form-control form-control-sm" [(ngModel)]="controleEditModel.notaFiscal" /></div>
<div class="form-field"><label>Chip</label><input class="form-control form-control-sm" [(ngModel)]="controleEditModel.chip" /></div>
<div class="form-field"><label>Serial</label><input class="form-control form-control-sm" [(ngModel)]="controleEditModel.serial" /></div>
<div class="form-field span-2"><label>Conteúdo da NF</label><input class="form-control form-control-sm" [(ngModel)]="controleEditModel.conteudoDaNf" /></div>
<div class="form-field"><label>Número da Linha</label><input class="form-control form-control-sm" [(ngModel)]="controleEditModel.numeroDaLinha" /></div>
<div class="form-field"><label>Tipo</label>
<select class="form-control form-control-sm" [(ngModel)]="controleEditModel.isResumo">
<option [ngValue]="false">DETALHE</option>
<option [ngValue]="true">RESUMO</option>
</select>
</div>
</div>
</div>
</details>
<details open class="detail-box">
<summary class="box-header">
<span><i class="bi bi-cash-coin me-2"></i> Valores e Datas</span>
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
</summary>
<div class="box-body">
<div class="form-grid">
<div class="form-field"><label>Quantidade</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleEditModel.quantidade" (ngModelChange)="onControleEditValueChange()" /></div>
<div class="form-field"><label>Valor Unit</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleEditModel.valorUnit" (ngModelChange)="onControleEditValueChange()" /></div>
<div class="form-field"><label>Valor NF</label><input class="form-control form-control-sm" type="number" [(ngModel)]="controleEditModel.valorDaNf" (ngModelChange)="onControleEditValueChange()" /></div>
<div class="form-field"><label>Data NF</label><input class="form-control form-control-sm" type="date" [(ngModel)]="controleEditDataNf" (ngModelChange)="onControleEditDateChange()" /></div>
<div class="form-field"><label>Recebimento</label><input class="form-control form-control-sm" type="date" [(ngModel)]="controleEditRecebimento" /></div>
</div>
</div>
</details>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="closeControleEdit()">Cancelar</button>
<button class="btn btn-primary btn-sm" [disabled]="controleEditSaving" (click)="saveControleEdit()">
{{ controleEditSaving ? 'Salvando...' : 'Salvar' }}
</button>
</div>
</div>
</ng-container>
<!-- MODAL CONTROLE DELETE -->
<ng-container *ngIf="controleDeleteOpen">
<div class="modal-card modal-lg" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
Remover Recebimento
</div>
<button class="btn btn-sm btn-icon" (click)="cancelControleDelete()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray">
<div class="confirm-delete">
<div class="confirm-icon"><i class="bi bi-trash"></i></div>
<p class="mb-0">Confirma remover a NF <strong>{{ controleDeleteTarget?.notaFiscal }}</strong>?</p>
</div>
</div>
<div class="modal-footer p-3 text-end border-top bg-white">
<button class="btn btn-glass btn-sm me-2" (click)="cancelControleDelete()">Cancelar</button>
<button class="btn btn-danger btn-sm" (click)="confirmControleDelete()">Excluir</button>
</div>
</div>
</ng-container>
</app-modal-layer>