feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,32 +6,51 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="ac-container">
|
||||
<div class="ac-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ac-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
|
||||
</button>
|
||||
<h2 class="ac-header__title">{{ 'labels.heading.Allocate Cash' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="ac-card">
|
||||
<form [formGroup]="allocateCashForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-48">
|
||||
<div class="ac-section">
|
||||
<div class="ac-section__header">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<h3>{{ 'labels.heading.Cashier Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="ac-grid">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input matInput required formControlName="office" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="tellerName" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
|
||||
<input matInput required formControlName="cashier" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
|
||||
<input matInput formControlName="assignmentPeriod" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="cashDatePicker.open()">
|
||||
<div class="ac-section">
|
||||
<div class="ac-section__header">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
<h3>{{ 'labels.heading.Allocate Cash' | translate }}</h3>
|
||||
</div>
|
||||
<div class="ac-grid">
|
||||
<mat-form-field appearance="outline" class="ac-field" (click)="cashDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -51,7 +70,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
|
||||
<mat-select required formControlName="currencyCode">
|
||||
@for (currency of cashierData.currencyOptions; track currency) {
|
||||
@@ -68,7 +87,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
|
||||
<input matInput required formControlName="txnAmount" />
|
||||
@if (allocateCashForm.controls.txnAmount.hasError('required')) {
|
||||
@@ -79,7 +98,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ac-field">
|
||||
<mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
|
||||
<input matInput required formControlName="txnNote" />
|
||||
@if (allocateCashForm.controls.txnNote.hasError('required')) {
|
||||
@@ -90,21 +109,23 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="ac-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ac-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!allocateCashForm.valid"
|
||||
class="ac-actions__submit"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,3 +5,125 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.ac-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.ac-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ac-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.ac-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ac-section {
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50 !important;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ac-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
.ac-field {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ac-actions {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50 !important;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,28 +6,31 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[routerLink]="['create']"
|
||||
*mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'"
|
||||
>
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.New Cashier' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="layout-row gap-20px">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-user-tie title-icon"></i>
|
||||
{{ 'labels.heading.Cashiers' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<mat-form-field class="table-search" appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
<div class="table-buttons">
|
||||
<button mat-flat-button color="primary" class="btn-create" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.New Cashier' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="period">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Period' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let cashier">
|
||||
@@ -46,46 +49,39 @@
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="vaultActions">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Vault Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let cashier">
|
||||
<button
|
||||
class="cashier-action-button"
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
|
||||
(click)="routeEdit($event)"
|
||||
[routerLink]="[cashier.id, 'allocate']"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
</button>
|
||||
<button
|
||||
class="cashier-action-button"
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
|
||||
(click)="routeEdit($event)"
|
||||
[routerLink]="[cashier.id, 'settle']"
|
||||
*mifosxHasPermission="'SETTLECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fa fa-arrow-down"></i>
|
||||
</button>
|
||||
<button
|
||||
class="cashier-action-button"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
matTooltip="{{ 'tooltips.View Transactions' | translate }}"
|
||||
(click)="routeEdit($event)"
|
||||
[routerLink]="[cashier.id, 'transactions']"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fa fa-eye"></i>
|
||||
</button>
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Vault Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let cashier" (click)="$event.stopPropagation()">
|
||||
<div class="vault-actions">
|
||||
<a
|
||||
class="vault-btn vault-btn--allocate"
|
||||
matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
|
||||
[routerLink]="[cashier.id, 'allocate']"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</a>
|
||||
<a
|
||||
class="vault-btn vault-btn--settle"
|
||||
matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
|
||||
[routerLink]="[cashier.id, 'settle']"
|
||||
*mifosxHasPermission="'SETTLECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
</a>
|
||||
<a
|
||||
class="vault-btn vault-btn--view"
|
||||
matTooltip="{{ 'tooltips.View Transactions' | translate }}"
|
||||
[routerLink]="[cashier.id, 'transactions']"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" [routerLink]="[row.id]"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="table-row" [routerLink]="[row.id]"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
|
||||
@@ -6,17 +6,47 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
@use '../../../shared/styles/list-layout' as *;
|
||||
|
||||
.cashier-action-button {
|
||||
min-width: 26px;
|
||||
padding: 0 6px;
|
||||
margin: 4px;
|
||||
line-height: 25px;
|
||||
$primary: #1353a0;
|
||||
|
||||
.vault-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.vault-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.select-row:hover {
|
||||
cursor: pointer;
|
||||
&--allocate {
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
&--settle {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
&--view {
|
||||
background: #eff6ff;
|
||||
color: $primary;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
}
|
||||
|
||||
+54
-41
@@ -6,22 +6,33 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="cc-container">
|
||||
<div class="cc-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="cc-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
|
||||
</button>
|
||||
<h2 class="cc-header__title">{{ 'labels.heading.Create Cashier' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="cc-card">
|
||||
<form [formGroup]="createCashierForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-48">
|
||||
<div class="cc-section">
|
||||
<div class="cc-section__header">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
<h3>{{ 'labels.heading.Cashier Assignment' | translate }}</h3>
|
||||
</div>
|
||||
<div class="cc-grid">
|
||||
<mat-form-field appearance="outline" class="cc-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input matInput required autofocus [value]="cashierTemplate.officeName" disabled />
|
||||
<input matInput required [value]="cashierTemplate.officeName" disabled />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cc-field">
|
||||
<mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
|
||||
<input matInput required autofocus [value]="cashierTemplate.tellerName" disabled />
|
||||
<input matInput required [value]="cashierTemplate.tellerName" disabled />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cc-field">
|
||||
<mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of cashierTemplate.staffOptions; track staff) {
|
||||
@@ -38,12 +49,20 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="cc-field">
|
||||
<mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
|
||||
<input matInput autofocus formControlName="description" />
|
||||
<input matInput formControlName="description" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="fromDatePicker.open()">
|
||||
<div class="cc-section">
|
||||
<div class="cc-section__header">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<h3>{{ 'labels.heading.Schedule' | translate }}</h3>
|
||||
</div>
|
||||
<div class="cc-grid">
|
||||
<mat-form-field appearance="outline" class="cc-field" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -63,7 +82,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="toDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="cc-field" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -84,21 +103,17 @@
|
||||
</mat-form-field>
|
||||
|
||||
@if (!createCashierForm.value.isFullDay) {
|
||||
<div class="flex-48 layout-row gap-10px">
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
|
||||
>
|
||||
<div class="cc-time-row">
|
||||
<mat-form-field appearance="outline" class="cc-time-field">
|
||||
<mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
|
||||
<mat-select formControlName="hourStartTime">
|
||||
@for (hour of hours; track hour) {
|
||||
<mat-option [value]="hour">{{ hour }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="cc-time-field">
|
||||
<mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
|
||||
<mat-select formControlName="minStartTime">
|
||||
@for (minute of minutes; track minute) {
|
||||
<mat-option [value]="minute">{{ minute }}</mat-option>
|
||||
@@ -106,21 +121,17 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex-48 layout-row gap-10px">
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
|
||||
>
|
||||
<div class="cc-time-row">
|
||||
<mat-form-field appearance="outline" class="cc-time-field">
|
||||
<mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
|
||||
<mat-select formControlName="hourEndTime">
|
||||
@for (hour of hours; track hour) {
|
||||
<mat-option [value]="hour">{{ hour }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="cc-time-field">
|
||||
<mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
|
||||
<mat-select formControlName="minEndTime">
|
||||
@for (minute of minutes; track minute) {
|
||||
<mat-option [value]="minute">{{ minute }}</mat-option>
|
||||
@@ -129,7 +140,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (createCashierForm.hasError('invalidTimeRange')) {
|
||||
<div class="flex-48">
|
||||
<div class="cc-field--full">
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.End Time' | translate }} {{ 'labels.commons.must' | translate }}
|
||||
{{ 'labels.commons.be' | translate }} {{ 'labels.commons.greater than' | translate }}
|
||||
@@ -139,27 +150,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
<div class="space flex-100">
|
||||
<mat-checkbox labelPosition="before" formControlName="isFullDay">
|
||||
<div class="cc-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="isFullDay">
|
||||
{{ 'labels.inputs.Full Day' | translate }}?
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="cc-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="cc-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!createCashierForm.valid"
|
||||
class="cc-actions__submit"
|
||||
*mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+145
-2
@@ -6,6 +6,149 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.space {
|
||||
padding-top: 10px;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.cc-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.cc-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.cc-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cc-section {
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50 !important;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cc-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
.cc-field {
|
||||
width: 100% !important;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-time-row {
|
||||
display: flex !important;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 600px) { flex-direction: column; gap: 4px; }
|
||||
}
|
||||
|
||||
.cc-time-field {
|
||||
flex: 1;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.cc-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
padding: 4px 0;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-actions {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50 !important;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,23 +6,34 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="ec-container">
|
||||
<div class="ec-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ec-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
|
||||
</button>
|
||||
<h2 class="ec-header__title">{{ 'labels.heading.Edit Cashier' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="ec-card">
|
||||
<form [formGroup]="editCashierForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-48">
|
||||
<div class="ec-section">
|
||||
<div class="ec-section__header">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
<h3>{{ 'labels.heading.Cashier Assignment' | translate }}</h3>
|
||||
</div>
|
||||
<div class="ec-grid">
|
||||
<mat-form-field appearance="outline" class="ec-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input matInput required autofocus [value]="cashierData.template.officeName" disabled />
|
||||
<input matInput required [value]="cashierData.template.officeName" disabled />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ec-field">
|
||||
<mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
|
||||
<input matInput required autofocus [value]="cashierData.data.tellerName" disabled />
|
||||
<input matInput required [value]="cashierData.data.tellerName" disabled />
|
||||
</mat-form-field>
|
||||
|
||||
@if (isStaffId) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ec-field">
|
||||
<mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of cashierData.template.staffOptions; track staff) {
|
||||
@@ -35,24 +46,30 @@
|
||||
}
|
||||
|
||||
@if (!isStaffId) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ec-field">
|
||||
<mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
|
||||
@if (!isStaffId) {
|
||||
<mat-select formControlName="staffId">
|
||||
<mat-option [value]="cashierData.data.staffId">
|
||||
{{ 'labels.inputs.Select Option' | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
}
|
||||
<mat-select formControlName="staffId">
|
||||
<mat-option [value]="cashierData.data.staffId">
|
||||
{{ 'labels.inputs.Select Option' | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="ec-field">
|
||||
<mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
|
||||
<input matInput autofocus formControlName="description" />
|
||||
<input matInput formControlName="description" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="fromDatePicker.open()">
|
||||
<div class="ec-section">
|
||||
<div class="ec-section__header">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<h3>{{ 'labels.heading.Schedule' | translate }}</h3>
|
||||
</div>
|
||||
<div class="ec-grid">
|
||||
<mat-form-field appearance="outline" class="ec-field" (click)="fromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -72,7 +89,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="toDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="ec-field" (click)="toDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -93,21 +110,17 @@
|
||||
</mat-form-field>
|
||||
|
||||
@if (!editCashierForm.value.isFullDay) {
|
||||
<div class="flex-48 layout-row gap-10px">
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
|
||||
>
|
||||
<div class="ec-time-row">
|
||||
<mat-form-field appearance="outline" class="ec-time-field">
|
||||
<mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
|
||||
<mat-select formControlName="hourStartTime">
|
||||
@for (hour of hours; track hour) {
|
||||
<mat-option [value]="hour">{{ hour }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="ec-time-field">
|
||||
<mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
|
||||
<mat-select formControlName="minStartTime">
|
||||
@for (minute of minutes; track minute) {
|
||||
<mat-option [value]="minute">{{ minute }}</mat-option>
|
||||
@@ -115,21 +128,17 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex-48 layout-row gap-10px">
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
|
||||
>
|
||||
<div class="ec-time-row">
|
||||
<mat-form-field appearance="outline" class="ec-time-field">
|
||||
<mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
|
||||
<mat-select formControlName="hourEndTime">
|
||||
@for (hour of hours; track hour) {
|
||||
<mat-option [value]="hour">{{ hour }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-50">
|
||||
<mat-label
|
||||
>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
|
||||
>
|
||||
<mat-form-field appearance="outline" class="ec-time-field">
|
||||
<mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
|
||||
<mat-select formControlName="minEndTime">
|
||||
@for (minute of minutes; track minute) {
|
||||
<mat-option [value]="minute">{{ minute }}</mat-option>
|
||||
@@ -138,7 +147,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@if (editCashierForm.hasError('invalidTimeRange')) {
|
||||
<div class="flex-48">
|
||||
<div class="ec-field--full">
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.End Time' | translate }} {{ 'labels.commons.must' | translate }}
|
||||
{{ 'labels.commons.be' | translate }} {{ 'labels.commons.greater than' | translate }}
|
||||
@@ -148,27 +157,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
<div class="space flex-100">
|
||||
<mat-checkbox labelPosition="before" formControlName="isFullDay">
|
||||
<div class="ec-checkbox-row">
|
||||
<mat-checkbox labelPosition="after" formControlName="isFullDay">
|
||||
{{ 'labels.inputs.Full Day' | translate }}?
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="ec-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ec-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!editCashierForm.valid"
|
||||
class="ec-actions__submit"
|
||||
*mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,149 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.space {
|
||||
padding-top: 10px;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.ec-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.ec-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ec-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.ec-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ec-section {
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50 !important;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ec-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
.ec-field {
|
||||
width: 100% !important;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.ec-time-row {
|
||||
display: flex !important;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 600px) { flex-direction: column; gap: 4px; }
|
||||
}
|
||||
|
||||
.ec-time-field {
|
||||
flex: 1;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ec-checkbox-row {
|
||||
grid-column: 1 / -1;
|
||||
padding: 4px 0;
|
||||
|
||||
::ng-deep .mat-mdc-checkbox {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.ec-actions {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50 !important;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,32 +6,51 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="sc-container">
|
||||
<div class="sc-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="sc-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
|
||||
</button>
|
||||
<h2 class="sc-header__title">{{ 'labels.heading.Settle Cash' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="sc-card">
|
||||
<form [formGroup]="settleCashForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-48">
|
||||
<div class="sc-section">
|
||||
<div class="sc-section__header">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<h3>{{ 'labels.heading.Cashier Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="sc-grid">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input matInput required formControlName="office" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="tellerName" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
|
||||
<input matInput required formControlName="cashier" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
|
||||
<input matInput formControlName="assignmentPeriod" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="cashDatePicker.open()">
|
||||
<div class="sc-section">
|
||||
<div class="sc-section__header">
|
||||
<i class="fas fa-arrow-down"></i>
|
||||
<h3>{{ 'labels.heading.Settle Cash' | translate }}</h3>
|
||||
</div>
|
||||
<div class="sc-grid">
|
||||
<mat-form-field appearance="outline" class="sc-field" (click)="cashDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -51,7 +70,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
|
||||
<mat-select required formControlName="currencyCode">
|
||||
@for (currency of cashierData.currencyOptions; track currency) {
|
||||
@@ -68,7 +87,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
|
||||
<input matInput required formControlName="txnAmount" />
|
||||
@if (settleCashForm.controls.txnAmount.hasError('required')) {
|
||||
@@ -79,7 +98,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-form-field appearance="outline" class="sc-field">
|
||||
<mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
|
||||
<input matInput required formControlName="txnNote" />
|
||||
@if (settleCashForm.controls.txnNote.hasError('required')) {
|
||||
@@ -90,21 +109,23 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<div class="sc-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="sc-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!settleCashForm.valid"
|
||||
class="sc-actions__submit"
|
||||
*mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'"
|
||||
>
|
||||
{{ 'labels.buttons.Settle Cash' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Settle Cash' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,3 +5,125 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.sc-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.sc-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sc-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.sc-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sc-section {
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50 !important;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sc-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
.sc-field {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.sc-actions {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50 !important;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,128 +6,115 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="layout-row gap-1percent layout-align-end container m-b-20">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[routerLink]="['../allocate']"
|
||||
*mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
|
||||
>
|
||||
<fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Allocate Cash' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="warn"
|
||||
[routerLink]="['../settle']"
|
||||
*mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'"
|
||||
>
|
||||
<fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Settle Cash' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (cashierData) {
|
||||
<div class="container m-b-20">
|
||||
<mat-card class="mat-elevation-z8">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-25 header">
|
||||
{{ 'labels.inputs.Branch' | translate }}
|
||||
</div>
|
||||
<div class="flex-25">
|
||||
{{ cashierData.officeName }}
|
||||
</div>
|
||||
<div class="flex-25 header">
|
||||
{{ 'labels.inputs.Teller' | translate }}
|
||||
</div>
|
||||
<div class="flex-25">
|
||||
{{ cashierData.tellerName }}
|
||||
</div>
|
||||
<div class="flex-25 header">
|
||||
{{ 'labels.inputs.Cashier' | translate }}
|
||||
</div>
|
||||
<div class="flex-25">
|
||||
{{ cashierData.cashierName }}
|
||||
</div>
|
||||
<div class="flex-25 header">
|
||||
{{ 'labels.inputs.Net Cash' | translate }}
|
||||
</div>
|
||||
<div class="flex-25">{{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="container">
|
||||
<mat-card class="layout-column gap-2percent mat-elevation-z8">
|
||||
<div class="layout-row gap-2percent">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label> {{ 'labels.inputs.Select Currency' | translate }} </mat-label>
|
||||
<mat-select [formControl]="currencySelector" required>
|
||||
@for (currency of currencyData; track currency) {
|
||||
<mat-option [value]="currency.code">
|
||||
{{ currency.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-exchange-alt title-icon"></i>
|
||||
{{ 'labels.heading.Cash Transactions' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@if (cashierData) {
|
||||
<div>
|
||||
<table class="mat-elevation-z1" mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let transaction">{{ transaction.txnDate | dateFormat }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="transactions">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transactions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let transaction">{{ transaction.txnType.value }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="allocation">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Allocation' | translate }} ({{ cashierData.sumCashAllocation | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Allocate Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="cashIn">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Cash In' | translate }} ({{ cashierData.sumInwardCash | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Cash In' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="cashOut">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Cash Out' | translate }} ({{ cashierData.sumOutwardCash | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Cash Out' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="settlement">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Settlement' | translate }} ({{ cashierData.sumCashSettlement | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Settle Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<div class="table-actions">
|
||||
<div class="table-buttons">
|
||||
<button mat-flat-button color="primary" class="btn-create" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
|
||||
<fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Allocate Cash' | translate }}
|
||||
</button>
|
||||
<button mat-stroked-button class="btn-import" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
|
||||
<fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Settle Cash' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (cashierData) {
|
||||
<div class="txn-summary">
|
||||
<div class="txn-summary__item">
|
||||
<span class="txn-summary__label">{{ 'labels.inputs.Branch' | translate }}</span>
|
||||
<span class="txn-summary__value">{{ cashierData.officeName }}</span>
|
||||
</div>
|
||||
<div class="txn-summary__item">
|
||||
<span class="txn-summary__label">{{ 'labels.inputs.Teller' | translate }}</span>
|
||||
<span class="txn-summary__value">{{ cashierData.tellerName }}</span>
|
||||
</div>
|
||||
<div class="txn-summary__item">
|
||||
<span class="txn-summary__label">{{ 'labels.inputs.Cashier' | translate }}</span>
|
||||
<span class="txn-summary__value">{{ cashierData.cashierName }}</span>
|
||||
</div>
|
||||
<div class="txn-summary__item">
|
||||
<span class="txn-summary__label">{{ 'labels.inputs.Net Cash' | translate }}</span>
|
||||
<span class="txn-summary__value txn-summary__value--highlight">{{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="table-actions" style="margin-bottom: 12px;">
|
||||
<mat-form-field class="table-search" appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="table-search" style="max-width: 220px;">
|
||||
<mat-label>{{ 'labels.inputs.Select Currency' | translate }}</mat-label>
|
||||
<mat-select [formControl]="currencySelector" required>
|
||||
@for (currency of currencyData; track currency) {
|
||||
<mat-option [value]="currency.code">
|
||||
{{ currency.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@if (cashierData) {
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let transaction">{{ transaction.txnDate | dateFormat }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="transactions">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transactions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let transaction">{{ transaction.txnType.value }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="allocation">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Allocation' | translate }} ({{ cashierData.sumCashAllocation | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Allocate Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="cashIn">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Cash In' | translate }} ({{ cashierData.sumInwardCash | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Cash In' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="cashOut">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Cash Out' | translate }} ({{ cashierData.sumOutwardCash | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Cash Out' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="settlement">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ 'labels.inputs.Settlement' | translate }} ({{ cashierData.sumCashSettlement | formatNumber }})
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
{{ transaction.txnType.value === 'Settle Cash' ? (transaction.txnAmount | formatNumber) : '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -6,16 +6,53 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.content {
|
||||
div {
|
||||
line-height: 3rem;
|
||||
@use '../../../../shared/styles/list-layout' as *;
|
||||
|
||||
&.header {
|
||||
font-weight: 500;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.txn-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $gray-500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $gray-900;
|
||||
|
||||
&--highlight {
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -6,79 +6,55 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CASHIER'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="vc-container">
|
||||
<div class="vc-header">
|
||||
<button mat-stroked-button [routerLink]="['..']" class="vc-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
|
||||
</button>
|
||||
<h2 class="vc-header__title">{{ cashierData.staffName }}</h2>
|
||||
<div class="vc-header__spacer"></div>
|
||||
<button mat-flat-button color="primary" [routerLink]="['edit']" class="vc-header__action" *mifosxHasPermission="'UPDATE_CASHIER'">
|
||||
<i class="fas fa-pen"></i> {{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
<button mat-stroked-button color="warn" (click)="deleteCashier()" class="vc-header__delete" *mifosxHasPermission="'DELETECASHIER_TELLER'">
|
||||
<i class="fas fa-trash-alt"></i> {{ 'labels.buttons.Delete' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap">
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.Name' | translate }}
|
||||
<div class="vc-card">
|
||||
<div class="vc-section">
|
||||
<div class="vc-section__header">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
<h3>{{ 'labels.heading.Cashier Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="vc-details">
|
||||
<div class="vc-detail">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.Name' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.staffName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ cashierData.staffName }}
|
||||
<div class="vc-detail">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.Teller' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.tellerName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.Teller' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ cashierData.tellerName }}
|
||||
</div>
|
||||
|
||||
@if (cashierData.description !== '') {
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.Description' | translate }}
|
||||
<div class="vc-detail vc-detail--full">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.Description' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.description }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (cashierData.description !== '') {
|
||||
<div class="flex-50">
|
||||
{{ cashierData.description }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.Start Date' | translate }}
|
||||
<div class="vc-detail">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.Start Date' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.startDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ cashierData.startDate | dateFormat }}
|
||||
<div class="vc-detail">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.End Date' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.endDate | dateFormat }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.End Date' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ cashierData.endDate | dateFormat }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50 header">
|
||||
{{ 'labels.inputs.Full Day/Time' | translate }}
|
||||
</div>
|
||||
|
||||
<div class="flex-50">
|
||||
{{ cashierData.isFullDay }}
|
||||
<div class="vc-detail">
|
||||
<span class="vc-detail__label">{{ 'labels.inputs.Full Day/Time' | translate }}</span>
|
||||
<span class="vc-detail__value">{{ cashierData.isFullDay | yesNo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" color="primary" mat-raised-button [routerLink]="['..']">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,17 +6,136 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.content {
|
||||
div {
|
||||
margin: 1rem 0;
|
||||
word-wrap: break-word;
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
&.header {
|
||||
font-weight: 500;
|
||||
.vc-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.vc-header {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__action {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
|
||||
&__delete {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
.vc-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.vc-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vc-section {
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50 !important;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-details {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
.vc-detail {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 4px;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $gray-500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
color: $gray-900;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import { MatDialog } from '@angular/material/dialog';
|
||||
import { OrganizationService } from 'app/organization/organization.service';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
|
||||
import { YesnoPipe } from '../../../../pipes/yesno.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -30,7 +31,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
DateFormatPipe
|
||||
DateFormatPipe,
|
||||
YesnoPipe
|
||||
]
|
||||
})
|
||||
export class ViewCashierComponent {
|
||||
|
||||
Reference in New Issue
Block a user