implemented list payrolls page

src/Client/Logistics.OfficeApp/src/app/core/enums/permissions.ts

@@ -59,10 +59,10 @@ export namespace Permissions {
     Delete = 'Permissions.Invoices.Delete'
   }
 
-  export enum Payroll {
-    Create = 'Permissions.Payroll.Create',
-    View = 'Permissions.Payroll.View',
-    Edit = 'Permissions.Payroll.Edit',
-    Delete = 'Permissions.Payroll.Delete'
+  export enum Payrolls {
+    Create = 'Permissions.Payrolls.Create',
+    View = 'Permissions.Payrolls.View',
+    Edit = 'Permissions.Payrolls.Edit',
+    Delete = 'Permissions.Payrolls.Delete'
   }
 }

src/Client/Logistics.OfficeApp/src/app/core/services/api.service.ts

@@ -350,8 +350,8 @@ export class ApiService {
     return this.get(url);
   }
 
-  getPayrolls(query?: PagedIntervalQuery): Observable<PagedResponseResult<Payroll>> {
-    const url = `/payrolls?${this.stringfyPagedIntervalQuery(query)}`;
+  getPayrolls(query?: SearchableQuery): Observable<PagedResponseResult<Payroll>> {
+    const url = `/payrolls?${this.stringfySearchableQuery(query)}`;
     return this.get(url);
   }
 

src/Client/Logistics.OfficeApp/src/app/layout/sidebar/sidebar.component.ts

@@ -70,8 +70,8 @@ export class SidebarComponent implements OnInit {
         icon: 'bi bi-journal-text h1',
         items: [
           {
-            label: 'Payroll Management',
-            command: () => router.navigateByUrl('/accounting/payroll'),
+            label: 'Payrolls',
+            command: () => router.navigateByUrl('/accounting/payrolls'),
           },
           {
             label: 'Payments',

src/Client/Logistics.OfficeApp/src/app/pages/accounting/accounting.routes.ts

@@ -5,6 +5,7 @@ import {ListPaymentsComponent} from './list-payments/list-payments.component';
 import {EditPaymentComponent} from './edit-payment/edit-payment.component';
 import {ListInvoicesComponent} from './list-invoices/list-invoices.component';
 import {ViewInvoiceComponent} from './view-invoice/view-invoice.component';
+import {ListPayrollComponent} from './list-payroll/list-payroll.component';
 
 
 export const ACCOUNTING_ROUTES: Routes = [
@@ -53,4 +54,13 @@ export const ACCOUNTING_ROUTES: Routes = [
       permission: Permissions.Invoices.View,
     },
   },
+  {
+    path: 'payrolls',
+    component: ListPayrollComponent,
+    canActivate: [AuthGuard],
+    data: {
+      breadcrumb: 'Payrolls',
+      permission: Permissions.Payrolls.View,
+    },
+  },
 ];

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-payments/list-payments.component.html

@@ -66,7 +66,11 @@ <h1>Payments for the past 90 days</h1>
             <td>{{payment.paymentDate | date:'mediumDate'}}</td>
             <td>{{getPaymentMethodDesc(payment.method)}}</td>
             <td>{{payment.amount | currency}}</td>
-            <td>{{getPaymentStatusDesc(payment.status)}}</td>
+            <td>
+              <p-tag [severity]="getPaymentStatusTagSeverity(payment.status)">
+              {{getPaymentStatusDesc(payment.status)}}
+            </p-tag>
+            </td>
             <td>{{getPaymentForDesc(payment.paymentFor)}}</td>
             <td>{{payment.comment}}</td>
           </tr>

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-payments/list-payments.component.ts

@@ -4,6 +4,7 @@ import {RouterModule} from '@angular/router';
 import {CardModule} from 'primeng/card';
 import {TableLazyLoadEvent, TableModule} from 'primeng/table';
 import {TooltipModule} from 'primeng/tooltip';
+import {TagModule} from 'primeng/tag';
 import {Payment} from '@core/models';
 import {ApiService} from '@core/services';
 import {
@@ -30,7 +31,8 @@ import {PredefinedDateRanges} from '@core/helpers';
     TooltipModule,
     RouterModule,
     CurrencyPipe,
-    DatePipe
+    DatePipe,
+    TagModule,
   ],
 })
 export class ListPaymentsComponent {
@@ -80,7 +82,11 @@ export class ListPaymentsComponent {
     });
   }
 
-  getPaymentMethodDesc(enumValue: PaymentMethod): string {
+  getPaymentMethodDesc(enumValue?: PaymentMethod): string {
+    if (enumValue == null) {
+      return 'N/A';
+    }
+
     return getEnumDescription(PaymentMethodEnum, enumValue);
   }
 
@@ -91,4 +97,8 @@ export class ListPaymentsComponent {
   getPaymentForDesc(enumValue: PaymentFor): string {
     return getEnumDescription(PaymentForEnum, enumValue);
   }
+
+  getPaymentStatusTagSeverity(paymentStatus: PaymentStatus): string {
+    return paymentStatus === PaymentStatus.Paid ? 'success' : 'warning';
+  }
 }

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-payroll/list-payroll.component.html

@@ -18,14 +18,14 @@ <h1>Payrolls</h1>
         [totalRecords]="totalRecords" [loading]="isLoading"
         [rowsPerPageOptions]="[10,25,50]">
 
-        <!-- <ng-template pTemplate="caption">
+        <ng-template pTemplate="caption">
           <div class="d-flex">
             <span class="p-input-icon-left">
               <i class="pi pi-search"></i>
-              <input pInputText type="text" placeholder="Search" (input)="search($event)" />
+              <input pInputText type="text" placeholder="Search by employeer name" (input)="search($event)" />
             </span>
           </div>
-        </ng-template> -->
+        </ng-template>
 
         <ng-template pTemplate="header">
           <tr>
@@ -61,13 +61,24 @@ <h1>Payrolls</h1>
 
         <ng-template pTemplate="body" let-payroll>
           <tr>
-            <td>{{payroll.startDate | date:'mediumDate'}} - {{payroll.endDate | date:'mediumDate'}}</td>
+            <td>{{payroll.startDate | date:'MMM d'}} - {{payroll.endDate | date:'mediumDate'}}</td>
             <td>{{payroll.employee.fullName}}</td>
-            <td>{{getPaymentMethodDesc(payroll.employee.salaryType)}}</td>
-            <td>{{payroll.amount | currency}}</td>
-            <td>{{getPaymentStatusDesc(payroll.status)}}</td>
-            <td>{{getPaymentForDesc(payroll.paymentFor)}}</td>
-            <td>{{payroll.comment}}</td>
+            <td>{{getSalaryTypeDesc(payroll.employee.salaryType)}}</td>
+            <td>
+              <ng-container *ngIf="isShareOfGrossSalary(payroll.employee.salaryType) else currencySalary">
+                {{payroll.employee.salary | percent}}
+              </ng-container>
+              <ng-template #currencySalary>
+                {{payroll.employee.salary | currency}}
+              </ng-template>
+            </td>
+            <td>{{payroll.payment.amount | currency}}</td>
+            <td>
+              <p-tag [severity]="getPaymentStatusTagSeverity(payroll.payment.status)">
+                {{getPaymentStatusDesc(payroll.payment.status)}}
+              </p-tag>
+            </td>
+            <td>{{getPaymentMethodDesc(payroll.payment.method)}}</td>
           </tr>
         </ng-template>
       </p-table>

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-payroll/list-payroll.component.ts

@@ -1,32 +1,36 @@
 import {Component} from '@angular/core';
-import {CommonModule, CurrencyPipe, DatePipe} from '@angular/common';
+import {CommonModule, CurrencyPipe, DatePipe, PercentPipe} from '@angular/common';
 import {TableLazyLoadEvent, TableModule} from 'primeng/table';
+import {CardModule} from 'primeng/card';
+import {InputTextModule} from 'primeng/inputtext';
+import {TagModule} from 'primeng/tag';
 import {Payroll} from '@core/models';
 import {
   PaymentMethod,
   getEnumDescription,
   PaymentMethodEnum,
   PaymentStatus,
   PaymentStatusEnum,
-  PaymentFor,
-  PaymentForEnum,
+  SalaryType,
+  SalaryTypeEnum,
 } from '@core/enums';
-import {PredefinedDateRanges} from '@core/helpers';
 import {ApiService} from '@core/services';
-import { CardModule } from 'primeng/card';
 
 
 @Component({
   selector: 'app-list-payroll',
   standalone: true,
   templateUrl: './list-payroll.component.html',
-  styleUrls: ['./list-payroll.component.scss'],
+  styleUrls: [],
   imports: [
     CommonModule,
     CurrencyPipe,
     DatePipe,
     TableModule,
-    CardModule
+    CardModule,
+    PercentPipe,
+    InputTextModule,
+    TagModule,
   ],
 })
 export class ListPayrollComponent {
@@ -38,34 +42,31 @@ export class ListPayrollComponent {
   constructor(private readonly apiService: ApiService) {
   }
 
-  // search(event: Event) {
-  //   this.isLoading = true;
-  //   const searchValue = (event.target as HTMLInputElement).value;
+  search(event: Event) {
+    this.isLoading = true;
+    const searchValue = (event.target as HTMLInputElement).value;
 
-  //   this.apiService.getPayments({search: searchValue}).subscribe((result) => {
-  //     if (result.isSuccess && result.data) {
-  //       this.payments = result.data;
-  //       this.totalRecords = result.totalItems;
-  //     }
+    this.apiService.getPayrolls({search: searchValue}).subscribe((result) => {
+      if (result.isSuccess && result.data) {
+        this.payrolls = result.data;
+        this.totalRecords = result.totalItems;
+      }
 
-  //     this.isLoading = false;
-  //   });
-  // }
+      this.isLoading = false;
+    });
+  }
 
   load(event: TableLazyLoadEvent) {
     this.isLoading = true;
     const first = event.first ?? 1;
     const rows = event.rows ?? 10;
     const page = first / rows + 1;
     const sortField = this.apiService.parseSortProperty(event.sortField as string, event.sortOrder);
-    const past90days = PredefinedDateRanges.getPast90Days();
 
     this.apiService.getPayrolls({
       orderBy: sortField, 
       page: page, 
       pageSize: rows,
-      startDate: past90days.startDate,
-      endDate: past90days.endDate
     }).subscribe((result) => {
       if (result.isSuccess && result.data) {
         this.payrolls = result.data;
@@ -76,15 +77,27 @@ export class ListPayrollComponent {
     });
   }
 
-  getPaymentMethodDesc(enumValue: PaymentMethod): string {
+  isShareOfGrossSalary(salaryType: SalaryType): boolean {
+    return salaryType === SalaryType.ShareOfGross;
+  }
+
+  getPaymentStatusTagSeverity(paymentStatus: PaymentStatus): string {
+    return paymentStatus === PaymentStatus.Paid ? 'success' : 'warning';
+  }
+
+  getPaymentMethodDesc(enumValue?: PaymentMethod): string {
+    if (enumValue == null) {
+      return 'N/A';
+    }
+
     return getEnumDescription(PaymentMethodEnum, enumValue);
   }
 
   getPaymentStatusDesc(enumValue: PaymentStatus): string {
     return getEnumDescription(PaymentStatusEnum, enumValue);
   }
 
-  getPaymentForDesc(enumValue: PaymentFor): string {
-    return getEnumDescription(PaymentForEnum, enumValue);
+  getSalaryTypeDesc(enumValue: SalaryType): string {
+    return getEnumDescription(SalaryTypeEnum, enumValue);
   }
 }

src/Client/Logistics.OfficeApp/src/app/pages/employee/list-employees/list-employees.component.html

@@ -72,7 +72,7 @@ <h1>List Employees</h1>
                 <span>{{employee.salary | currency}}</span>
               </ng-template>
             </td>
-            <td>{{getSalaryTypeName(employee.salaryType)}}</td>
+            <td>{{getSalaryTypeDesc(employee.salaryType)}}</td>
             <td>{{employee.roles[0]?.displayName}}</td>
             <td>{{employee.joinedDate | date:'mediumDate'}}</td>
           </tr>

src/Client/Logistics.OfficeApp/src/app/pages/employee/list-employees/list-employees.component.ts

@@ -75,7 +75,7 @@ export class ListEmployeeComponent {
     });
   }
 
-  getSalaryTypeName(enumValue: SalaryType): string {
+  getSalaryTypeDesc(enumValue: SalaryType): string {
     return getEnumDescription(SalaryTypeEnum, enumValue);
   }
 }

src/Core/Logistics.Application.Tenant/Queries/Payroll/GetPayrolls/GetPayrollsHandler.cs

@@ -17,7 +17,7 @@ protected override Task<PagedResponseResult<PayrollDto>> HandleValidated(
         CancellationToken cancellationToken)
     {
         var totalItems = _tenantRepository.Query<Payroll>().Count();
-        var specification = new GetPayrolls(req.OrderBy, req.Descending);
+        var specification = new GetPayrolls(req.Search, req.OrderBy, req.Descending);
 
         var payrolls = _tenantRepository.ApplySpecification(specification)
             .Skip((req.Page - 1) * req.PageSize)

src/Core/Logistics.Application.Tenant/Queries/Payroll/GetPayrolls/GetPayrollsQuery.cs

@@ -3,6 +3,6 @@
 
 namespace Logistics.Application.Tenant.Queries;
 
-public class GetPayrollsQuery : PagedQuery, IRequest<PagedResponseResult<PayrollDto>>
+public class GetPayrollsQuery : SearchableQuery, IRequest<PagedResponseResult<PayrollDto>>
 {
 }

src/Core/Logistics.Domain/Specifications/GetPayrolls.cs

@@ -6,11 +6,21 @@ namespace Logistics.Domain.Specifications;
 public class GetPayrolls : BaseSpecification<Payroll>
 {
     public GetPayrolls(
+        string? search,
         string? orderBy, 
         bool descending = false)
     {
         Descending = descending;
         OrderBy = InitOrderBy(orderBy);
+
+        if (string.IsNullOrEmpty(search))
+        {
+            return;
+        }
+
+        Criteria = i =>
+            !string.IsNullOrEmpty(i.Employee.FirstName) && i.Employee.FirstName.Contains(search) || 
+            !string.IsNullOrEmpty(i.Employee.LastName) && i.Employee.LastName.Contains(search);
     }
 
     private static Expression<Func<Payroll, object>> InitOrderBy(string? propertyName)
@@ -20,7 +30,7 @@ private static Expression<Func<Payroll, object>> InitOrderBy(string? propertyNam
         {
             "paymentamount" => i => i.Payment.Amount,
             "paymentdate" => i => i.Payment.PaymentDate!,
-            "paymentmethod" => i => i.Payment.Method,
+            "paymentmethod" => i => i.Payment.Method!,
             "employeefirstname" => i => i.Employee.FirstName!,
             "employeelastname" => i => i.Employee.LastName!,
             "employeeemail" => i => i.Employee.Email!,

src/Server/Logistics.API/Controllers/PayrollsController.cs

@@ -16,7 +16,7 @@ public PayrollsController(IMediator mediator)
     [HttpGet("{id}")]
     [ProducesResponseType(typeof(ResponseResult<PayrollDto>), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(ResponseResult), StatusCodes.Status400BadRequest)]
-    [Authorize(Policy = Permissions.Payments.View)]
+    [Authorize(Policy = Permissions.Payrolls.View)]
     public async Task<IActionResult> GetById(string id)
     {
         var result = await _mediator.Send(new GetPaymentByIdQuery {Id = id});
@@ -30,7 +30,7 @@ public async Task<IActionResult> GetById(string id)
     [HttpGet]
     [ProducesResponseType(typeof(PagedResponseResult<PayrollDto>), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(ResponseResult), StatusCodes.Status400BadRequest)]
-    [Authorize(Policy = Permissions.Payments.View)]
+    [Authorize(Policy = Permissions.Payrolls.View)]
     public async Task<IActionResult> GetList([FromQuery] GetPayrollsQuery query)
     {
         var result = await _mediator.Send(query);

src/Shared/Logistics.Shared.Core/Policies/AppRolePermissions.cs

@@ -20,7 +20,7 @@ public static IEnumerable<string> Admin
             list.AddRange(Permissions.GeneratePermissions(nameof(Permissions.Customers)));
             list.AddRange(Permissions.GeneratePermissions(nameof(Permissions.Payments)));
             list.AddRange(Permissions.GeneratePermissions(nameof(Permissions.Invoices)));
-            list.AddRange(Permissions.GeneratePermissions(nameof(Permissions.Payroll)));
+            list.AddRange(Permissions.GeneratePermissions(nameof(Permissions.Payrolls)));
             list.Add(Permissions.Tenants.Create);
             list.Add(Permissions.Tenants.Edit);
             list.Add(Permissions.Tenants.View);

src/Shared/Logistics.Shared.Core/Policies/Permissions.cs

@@ -116,12 +116,12 @@ public static class Invoices
         public const string Delete = $"{nameof(Permissions)}.{nameof(Invoices)}.Delete";
     }
 
-    public static class Payroll
+    public static class Payrolls
     {
-        public const string Create = $"{nameof(Permissions)}.{nameof(Payroll)}.Create";
-        public const string View = $"{nameof(Permissions)}.{nameof(Payroll)}.View";
-        public const string Edit = $"{nameof(Permissions)}.{nameof(Payroll)}.Edit";
-        public const string Delete = $"{nameof(Permissions)}.{nameof(Payroll)}.Delete";
+        public const string Create = $"{nameof(Permissions)}.{nameof(Payrolls)}.Create";
+        public const string View = $"{nameof(Permissions)}.{nameof(Payrolls)}.View";
+        public const string Edit = $"{nameof(Permissions)}.{nameof(Payrolls)}.Edit";
+        public const string Delete = $"{nameof(Permissions)}.{nameof(Payrolls)}.Delete";
     }
 
     public static IEnumerable<string> GetAll()