techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/product/product-view-page/product-view-page.component.html

@@ -0,0 +1,34 @@
+<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+
+<div
+  *ngIf="product"
+  class="d-flex justify-content-start align-items-start gap-3"
+>
+  <div style="width: calc(25% - 1rem)" class="d-flex flex-column gap-3">
+    <app-product-basic-info
+      [product]="product"
+      #productBasicInfoComponent
+      (deleted)="onProductDeleted()"
+      (saved)="onProductUpdated($event)"
+    ></app-product-basic-info>
+
+    <app-product-tax-list [product]="product"></app-product-tax-list>
+  </div>
+  <div style="width: calc(75%)" class="d-flex flex-column gap-3">
+    <app-stock-receipts-list-page
+      [product]="product"
+      (listUpdated)="
+        getProduct(this.id);
+        productBasicInfoComponent.loadProductStocksSummary()
+      "
+    ></app-stock-receipts-list-page>
+
+    <app-stock-issuances-list
+      [product]="product"
+      (listUpdated)="
+        getProduct(this.id);
+        productBasicInfoComponent.loadProductStocksSummary()
+      "
+    ></app-stock-issuances-list>
+  </div>
+</div>

package/projects/inventory-common/src/lib/inventory-common/product/product-view-page/product-view-page.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from "@angular/core";
+import { ProductService } from "../product.service";
+import { ActivatedRoute } from "@angular/router";
+import { Location } from "@angular/common";
+
+@Component({
+  selector: "app-product-view-page",
+  templateUrl: "./product-view-page.component.html",
+})
+export class ProductViewPageComponent implements OnInit {
+  public product: any;
+  id: number;
+  isLoading!: boolean;
+
+  constructor(
+    private productService: ProductService,
+    private activatedRoute: ActivatedRoute,
+    private location: Location
+  ) {
+    this.id = this.activatedRoute.snapshot.params?.["id"];
+  }
+
+  ngOnInit(): void {
+    if (this.id) {
+      this.getProduct(this.id);
+    }
+  }
+
+  /**
+   * Get the product details.
+   *
+   * @param productId
+   */
+  getProduct(productId: any) {
+    this.isLoading = true;
+    const params: any = {
+      with: "type,measure,incomeAccount,expenseAccount,categories,lastStockReceipt,lastStockIssuance,taxes.tax.type",
+    };
+    this.productService.show(productId, params).subscribe({
+      next: (result: any) => {
+        this.isLoading = false;
+        this.product = result?.item;
+      },
+      error: () => (this.isLoading = false),
+    });
+  }
+
+  /**
+   * Handle the on product update event.
+   *
+   * @param product
+   */
+  onProductUpdated(product: any) {
+    this.getProduct(this.id);
+  }
+
+  /**
+   * Handle on product delete event.
+   */
+  onProductDeleted() {
+    this.location.back();
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/product.module.ts

@@ -0,0 +1,69 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ProductRoutingModule } from "./product-routing.module";
+import { ProductListComponent } from "./product-list/product-list.component";
+import { ProductFormComponent } from "./product-form/product-form.component";
+import {
+    ColumnSelectorModule,
+    ImportCsvModule,
+    MaterialModule,
+    SearchableSelectorModule,
+    TimelineFilterModule,
+} from "ngx-techlify-core";
+import { ProductNavBarComponent } from "./product-nav-bar/product-nav-bar.component";
+import { ProductMeasuresListComponent } from "./product-measures-list/product-measures-list.component";
+import { ProductMeasureFormComponent } from "./product-measure-form/product-measure-form.component";
+import { ProductViewPageComponent } from "./product-view-page/product-view-page.component";
+import { ProductFormButtonComponent } from "./product-form-button/product-form-button.component";
+import { ProductDeleteButtonComponent } from "./product-delete-button/product-delete-button.component";
+import { ProductBasicInfoComponent } from "./product-basic-info/product-basic-info.component";
+import { StockReceiptFormModule } from "../stock-receipts/stock-receipt-form/stock-receipt-form.module";
+import { StockIssueFormModule } from "../stock-issuances/stock-issue-form/stock-issue-form.module";
+import { ProductImportPageComponent } from "./product-import-page/product-import-page.component";
+import { StockReceiptsModule } from "../stock-receipts/stock-receipts.module";
+import { StockIssuancesListModule } from "../stock-issuances/stock-issuances-list/stock-issuances-list.module";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { FlexModule } from "@angular/flex-layout";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { ProductTaxModule } from './product-tax/product-tax.module';
+
+@NgModule({
+  declarations: [
+    ProductListComponent,
+    ProductFormComponent,
+    ProductNavBarComponent,
+    ProductMeasuresListComponent,
+    ProductMeasureFormComponent,
+    ProductViewPageComponent,
+    ProductFormButtonComponent,
+    ProductDeleteButtonComponent,
+    ProductBasicInfoComponent,
+    ProductImportPageComponent,
+  ],
+    imports: [
+        CommonModule,
+        ProductRoutingModule,
+        SearchableSelectorModule,
+        TimelineFilterModule,
+        StockReceiptFormModule,
+        StockIssueFormModule,
+        ImportCsvModule,
+        StockReceiptsModule,
+        StockIssuancesListModule,
+        ProductTaxModule,
+        MaterialModule,
+        MatProgressBarModule,
+        InfiniteScrollModule,
+        FlexModule,
+        ReactiveFormsModule,
+        FormsModule,
+        ColumnSelectorModule,
+    ],
+  exports: [
+    ProductFormComponent,
+    ProductBasicInfoComponent,
+    ProductFormButtonComponent,
+  ],
+})
+export class ProductModule {}

package/projects/inventory-common/src/lib/inventory-common/product/product.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from "@angular/core";
+import {
+  DataManager,
+  HttpService,
+  TechlifyServiceBaseClass,
+} from "ngx-techlify-core";
+import { Observable } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ProductService extends TechlifyServiceBaseClass {
+  constructor(
+    private dataManager: DataManager,
+    public httpService: HttpService
+  ) {
+    super(httpService, "products");
+  }
+
+  getProducts(filters?: any) {
+    return this.dataManager.GET(`api/products`, filters);
+  }
+
+  getProduct(id: any) {
+    return this.dataManager.GET(`api/products/${id}`);
+  }
+
+  createProduct(model: any) {
+    return this.dataManager.POST(`api/products`, model);
+  }
+
+  updateProducts(model: any) {
+    return this.dataManager.PUT(`api/products/${model.id}`, model);
+  }
+  deleteProduct(id: any) {
+    return this.dataManager.DELETE(`api/products/${id}`);
+  }
+
+  getProductMeasures(filters?: any) {
+    return this.dataManager.GET(`api/product-measures`, filters);
+  }
+
+  createProductMeasure(model: any) {
+    return this.dataManager.POST(`api/product-measures`, model);
+  }
+
+  updateProductMeasure(model: any) {
+    return this.dataManager.PUT(`api/product-measures/${model.id}`, model);
+  }
+
+  summary(params?: any): Observable<any> {
+    return this.httpService.get("api/products-summary", { params });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/widgets/product-category-badges/product-category-badges.component.html

@@ -0,0 +1,8 @@
+<ng-container
+  *ngIf="product?.categories?.length > 0"
+  class="d-flex justify-content-start align-items-center gap-1"
+>
+  <span class="badge bg-primary-lighter" *ngFor="let category of product?.categories">
+    {{ category?.title }}
+  </span>
+</ng-container>

package/projects/inventory-common/src/lib/inventory-common/product/widgets/product-category-badges/product-category-badges.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {NgForOf, NgIf} from '@angular/common';
+
+@Component({
+  selector: 'app-product-category-badges',
+  standalone: true,
+  imports: [
+    NgIf,
+    NgForOf
+  ],
+  templateUrl: './product-category-badges.component.html',
+  styleUrl: './product-category-badges.component.scss'
+})
+export class ProductCategoryBadgesComponent {
+  @Input() product: any;
+}

package/projects/inventory-common/src/lib/inventory-common/reports/inventory-value-report/inventory-value-report.component.html

@@ -0,0 +1,140 @@
+<div class="container">
+  <mat-card>
+    <mat-card-content class="d-flex justify-content-between align-items-center gap-2">
+      <div class="d-flex justify-content-start align-items-center gap-2">
+        <h3 class="mb-0">Inventory Value Report</h3>
+        <i class="fa-solid fa-file-excel cursor-pointer d-print-none" (click)="export('excel')"></i>
+        <i class="fa-solid fa-file-pdf cursor-pointer d-print-none" (click)="export('pdf')"></i>
+      </div>
+      <form [formGroup]="filterForm" class="d-flex justify-content-end align-items-center gap-2">
+        <mat-form-field>
+          <mat-label>Search</mat-label>
+          <input matInput placeholder="Search products" formControlName="search" />
+        </mat-form-field>
+
+        <mat-form-field>
+          <mat-label>Category</mat-label>
+          <app-searchable-selector
+            apiUrl="api/product-categories"
+            formControlName="category_ids"
+            [multiple]="true"
+          >
+          </app-searchable-selector>
+        </mat-form-field>
+      </form>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="mt-3">
+    <mat-card-content class="p-0">
+      <table
+        mat-table [dataSource]="models" class="w-100"
+        infiniteScroll
+        [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()"
+        matSort (matSortChange)="onSortChange($event)"
+      >
+
+        <!-- # Column -->
+        <ng-container matColumnDef="#">
+          <th mat-header-cell *matHeaderCellDef> # </th>
+          <td mat-cell *matCellDef="let element; let i = index"> {{ i + 1}} </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Product Column -->
+        <ng-container matColumnDef="Product">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> Product </th>
+          <td mat-cell *matCellDef="let element">
+            <a
+              [routerLink]="['/inventory/products', element?.id, 'view']"
+              class="text-dark"
+            >
+              {{ element?.name }}
+            </a>
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Description Column -->
+        <ng-container matColumnDef="Description">
+          <th mat-header-cell *matHeaderCellDef> Description </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.description }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Categories Column -->
+        <ng-container matColumnDef="Categories">
+          <th mat-header-cell *matHeaderCellDef> Categories </th>
+          <td mat-cell *matCellDef="let element">
+            <app-product-category-badges [product]="element"></app-product-category-badges>
+          </td>
+          <td mat-footer-cell *matFooterCellDef>
+            <strong>Total</strong>
+          </td>
+        </ng-container>
+
+        <!-- Available Stock Column -->
+        <ng-container matColumnDef="Available Stock">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="current_stock"> Available Stock </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.current_stock }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Average Price Column -->
+        <ng-container matColumnDef="Average Price">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="average_purchase_price"> Average Price </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.average_purchase_price | currency }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Inventory Value Column -->
+        <ng-container matColumnDef="Inventory Value">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="inventory_value"> Inventory Value </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.inventory_value | currency }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef>
+            <strong>{{ totalInventoryValue | currency }}</strong>
+          </td>
+        </ng-container>
+
+        <!-- Last Purchase Price Column -->
+        <ng-container matColumnDef="Last Purchase Price">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="last_stock_receipt.purchase_price">
+            Last Purchase Price
+          </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <!-- Inventory Value Based On Last Purchase Price Column -->
+        <ng-container matColumnDef="Inventory Value Based On Last Purchase Price">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="last_stock_receipt.amount">
+            <div>
+              <p class="mb-0">Inventory Value</p>
+              <small class="text-secondary">Based on last purchase price</small>
+            </div>
+          </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.last_stock_receipt?.amount ?? 0 | currency }}
+          </td>
+          <td mat-footer-cell *matFooterCellDef></td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+      </table>
+
+      <mat-progress-bar mode="indeterminate" *ngIf="isWorking"></mat-progress-bar>
+    </mat-card-content>
+  </mat-card>
+</div>

package/projects/inventory-common/src/lib/inventory-common/reports/inventory-value-report/inventory-value-report.component.ts

@@ -0,0 +1,191 @@
+import {Component, OnInit} from '@angular/core';
+import {MatCard, MatCardContent} from '@angular/material/card';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef, MatFooterCell, MatFooterCellDef, MatFooterRow, MatFooterRowDef,
+  MatHeaderCell, MatHeaderCellDef, MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable
+} from '@angular/material/table';
+import {RequestHelperService, SearchableSelectorModule, TechlifyListingControllerInterface} from 'ngx-techlify-core';
+import {InventoryValueReportService} from '../../inventory-value-report.service';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {
+  ProductCategoryBadgesComponent
+} from '../../product/widgets/product-category-badges/product-category-badges.component';
+import {CurrencyPipe, NgIf} from '@angular/common';
+import {MatProgressBar} from '@angular/material/progress-bar';
+import {debounceTime, distinctUntilChanged} from 'rxjs';
+import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {InfiniteScrollDirective} from 'ngx-infinite-scroll';
+import {MatSort, MatSortHeader, Sort} from '@angular/material/sort';
+
+@Component({
+  selector: 'app-inventory-value-report',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatTable,
+    MatColumnDef,
+    MatColumnDef,
+    MatCellDef,
+    MatRow,
+    MatCellDef,
+    MatHeaderCell,
+    MatCell,
+    MatRowDef,
+    MatCellDef,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderRowDef,
+    MatHeaderCell,
+    MatCell,
+    MatHeaderRow,
+    MatCell,
+    MatCellDef,
+    MatHeaderCellDef,
+    MatHeaderCellDef,
+    MatHeaderCellDef,
+    MatHeaderCellDef,
+    RouterLink,
+    ProductCategoryBadgesComponent,
+    CurrencyPipe,
+    MatProgressBar,
+    NgIf,
+    MatFooterRowDef,
+    MatFooterRow,
+    MatFooterCellDef,
+    MatFooterCell,
+    MatFormField,
+    MatLabel,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+    MatInput,
+    InfiniteScrollDirective,
+    MatSort,
+    MatSortHeader
+  ],
+  templateUrl: './inventory-value-report.component.html',
+  styleUrl: './inventory-value-report.component.scss'
+})
+export class InventoryValueReportComponent extends TechlifyListingControllerInterface implements OnInit {
+  displayedColumns: string[] = [
+    '#',
+    'Product',
+    'Description',
+    'Categories',
+    'Available Stock',
+    'Average Price',
+    'Inventory Value',
+    'Last Purchase Price',
+    'Inventory Value Based On Last Purchase Price',
+  ];
+  totalInventoryValue = 0;
+  isExporting = false;
+
+  constructor(
+    private service: InventoryValueReportService,
+    private activatedRoute: ActivatedRoute,
+    private requestHelperService: RequestHelperService,
+    private formBuilder: FormBuilder
+  ) {
+    super();
+
+    this.filterForm = this.formBuilder.group({
+      category_ids: [''],
+      search: [''],
+      sort_by: ['id|desc']
+    });
+  }
+
+  ngOnInit() {
+    this.updateFormWithQueryParams();
+    this.subscribeToFormChanges();
+    this.subscribeToRouteChanges();
+  }
+
+  loadData(): void {
+    const params: any = {
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+      page: this.page,
+      perPage: this.perPage,
+      with: 'categories,lastStockReceipt',
+    }
+    this.isWorking = true;
+    this.service.index(params).subscribe({
+      next: (response: any) => {
+        this.models = this.models?.concat(response?.data);
+        this.isWorking = false;
+
+        this.models.forEach((model: any) => {
+          this.totalInventoryValue += model?.inventory_value;
+        })
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+
+  private updateFormWithQueryParams(): void {
+    this.requestHelperService.updateFormWithQueryParams(
+      this.filterForm,
+      {
+        category_ids: { multiple: true }
+      }
+    );
+  }
+
+  private subscribeToFormChanges(): void {
+    (this.filterForm as FormGroup).valueChanges.pipe(
+      debounceTime(800)
+    ).subscribe({
+      next: () => {
+        this.requestHelperService.updateQueryParams(
+          this.requestHelperService.convertToFormData(this.filterForm.value)
+        );
+      }
+    });
+  }
+
+  private subscribeToRouteChanges(): void {
+    this.activatedRoute.queryParams
+      .pipe(debounceTime(500),
+        distinctUntilChanged())
+      .subscribe(() => {
+        this.reload();
+      });
+  }
+
+  onSortChange(sort: Sort) {
+    let {active, direction} = sort;
+    if (!active) active = 'id';
+    if (!direction) direction = 'desc';
+    this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+  }
+
+  export(type: string = 'excel') {
+    const params: any = {
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+      page: this.page,
+      perPage: 50000,
+      with: 'categories,lastStockReceipt',
+      export_type: type,
+    }
+    this.isExporting = true;
+    this.service.export(params).subscribe({
+      next: (response: any) => {
+        this.isExporting = false;
+        window.open(response?.item?.file_link, '_blank');
+      },
+      error: () => (this.isExporting = false)
+    });
+  }
+}