techlify-inventory-common 0.0.1

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

@@ -0,0 +1,158 @@
+<div>
+  <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">Low Stock Report</h3>
+        <i class="fa-solid fa-file-excel cursor-pointer d-print-none" (click)="export()"></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>
+        </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>
+        </ng-container>
+
+        <!-- Type Column -->
+        <ng-container matColumnDef="Type">
+          <th mat-header-cell *matHeaderCellDef> Type </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.type?.title }}
+          </td>
+        </ng-container>
+
+        <!-- Reorder Point Column -->
+        <ng-container matColumnDef="Reorder Point">
+          <th mat-header-cell *matHeaderCellDef> Reorder Point </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.reorder_point }}
+          </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>
+        </ng-container>
+
+        <!-- Stock Column -->
+        <ng-container matColumnDef="Stock">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header="stock"> Stock </th>
+          <td mat-cell *matCellDef="let element">
+            {{ element?.stock }}
+          </td>
+        </ng-container>
+
+        <!-- Last Purchase Column -->
+        <ng-container matColumnDef="Last Purchase">
+          <th mat-header-cell *matHeaderCellDef>
+            Last Purchase
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <p class="mb-0" *ngIf="element?.last_stock_receipt">
+              {{ element?.last_stock_receipt?.date | date }} -
+              {{ element?.last_stock_receipt?.quantity }} {{ element?.measure?.title }}
+            </p>
+            <small class="text-secondary" *ngIf="element?.last_stock_receipt">
+              {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }} per {{ element?.measure?.title }}
+            </small>
+          </td>
+        </ng-container>
+
+        <!-- 30d Issues -->
+        <ng-container matColumnDef="30d Issues">
+          <th mat-header-cell *matHeaderCellDef> 30d Issues </th>
+          <td mat-cell *matCellDef="let element">{{ element?.issues_30d }}</td>
+        </ng-container>
+
+        <!-- 30d Receipts -->
+        <ng-container matColumnDef="30d Receipts">
+          <th mat-header-cell *matHeaderCellDef> 30d Receipts </th>
+          <td mat-cell *matCellDef="let element">{{ element?.receipts_30d }}</td>
+        </ng-container>
+
+        <!-- 60d Issues -->
+        <ng-container matColumnDef="60d Issues">
+          <th mat-header-cell *matHeaderCellDef> 60d Issues </th>
+          <td mat-cell *matCellDef="let element">{{ element?.issues_60d }}</td>
+        </ng-container>
+
+        <!-- 60d Receipts -->
+        <ng-container matColumnDef="60d Receipts">
+          <th mat-header-cell *matHeaderCellDef> 60d Receipts </th>
+          <td mat-cell *matCellDef="let element">{{ element?.receipts_60d }}</td>
+        </ng-container>
+
+        <!-- 90d Issues -->
+        <ng-container matColumnDef="90d Issues">
+          <th mat-header-cell *matHeaderCellDef> 90d Issues </th>
+          <td mat-cell *matCellDef="let element">{{ element?.issues_90d }}</td>
+        </ng-container>
+
+        <!-- 90d Receipts -->
+        <ng-container matColumnDef="90d Receipts">
+          <th mat-header-cell *matHeaderCellDef> 90d Receipts </th>
+          <td mat-cell *matCellDef="let element">{{ element?.receipts_90d }}</td>
+        </ng-container>
+
+        <!-- 1y Issues -->
+        <ng-container matColumnDef="1y Issues">
+          <th mat-header-cell *matHeaderCellDef> 1y Issues </th>
+          <td mat-cell *matCellDef="let element">{{ element?.issues_1y }}</td>
+        </ng-container>
+
+        <!-- 60d Receipts -->
+        <ng-container matColumnDef="1y Receipts">
+          <th mat-header-cell *matHeaderCellDef> 1y Receipts </th>
+          <td mat-cell *matCellDef="let element">{{ element?.receipts_1y }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: 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/low-stock-report/low-stock-report.component.ts

@@ -0,0 +1,191 @@
+import {Component, OnInit} from '@angular/core';
+import {CurrencyPipe, DatePipe, NgIf} from "@angular/common";
+import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {InfiniteScrollDirective} from "ngx-infinite-scroll";
+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 {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatProgressBar} from "@angular/material/progress-bar";
+import {MatSort, MatSortHeader, Sort} from "@angular/material/sort";
+import {
+  ProductCategoryBadgesComponent
+} from "../../product/widgets/product-category-badges/product-category-badges.component";
+import {RequestHelperService, SearchableSelectorModule, TechlifyListingControllerInterface} from "ngx-techlify-core";
+import {InventoryValueReportService} from '../../inventory-value-report.service';
+import {ActivatedRoute, RouterLink} from '@angular/router';
+import {debounceTime, distinctUntilChanged} from 'rxjs';
+import {LowStockReportService} from '../../low-stock-report.service';
+
+@Component({
+  selector: 'app-low-stock-report',
+  standalone: true,
+  imports: [
+    CurrencyPipe,
+    FormsModule,
+    InfiniteScrollDirective,
+    MatCard,
+    MatCardContent,
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatFooterCell,
+    MatFooterRow,
+    MatFooterRowDef,
+    MatFormField,
+    MatHeaderCell,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatInput,
+    MatLabel,
+    MatProgressBar,
+    MatRow,
+    MatRowDef,
+    MatSort,
+    MatSortHeader,
+    MatTable,
+    NgIf,
+    ProductCategoryBadgesComponent,
+    ReactiveFormsModule,
+    SearchableSelectorModule,
+    RouterLink,
+    MatFooterCellDef,
+    MatHeaderCellDef,
+    MatFooterCellDef,
+    MatHeaderCellDef,
+    MatHeaderCellDef,
+    DatePipe
+  ],
+  templateUrl: './low-stock-report.component.html',
+  styleUrl: './low-stock-report.component.scss'
+})
+export class LowStockReportComponent extends TechlifyListingControllerInterface implements OnInit {
+  displayedColumns: string[] = [
+    '#',
+    'Product',
+    'Type',
+    'Categories',
+    'Reorder Point',
+    'Stock',
+    'Last Purchase',
+    '30d Issues',
+    '30d Receipts',
+    '60d Issues',
+    '60d Receipts',
+    '90d Issues',
+    '90d Receipts',
+    '1y Issues',
+    '1y Receipts',
+  ];
+  totalInventoryValue = 0;
+  isExporting = false;
+
+  constructor(
+    private service: LowStockReportService,
+    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,type,measure',
+    }
+    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),
+    });
+  }
+
+  onSortChange(sort: Sort) {
+    let {active, direction} = sort;
+    if (!active) active = 'id';
+    if (!direction) direction = 'desc';
+    this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+  }
+
+  export() {
+    const params: any = {
+      ...this.requestHelperService.convertToFormData(this.filterForm.value),
+      page: this.page,
+      perPage: 50000,
+      with: 'categories,lastStockReceipt',
+    }
+    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)
+    });
+  }
+
+  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();
+      });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/services/techlify-form-service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+
+export default class TechlifyFormService {
+  private _isListUpdated = new BehaviorSubject(false);
+
+  isListUpdated() {
+    return this._isListUpdated.asObservable();
+  }
+
+  listUpdated(val: boolean) {
+    this._isListUpdated.next(val);
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.component.html

@@ -0,0 +1,32 @@
+<span
+  class="material-symbols-outlined cursor-pointer"
+  (click)="showDeleteConfirmModel(deleteModelTemplate)"
+>
+  delete
+</span>
+
+<ng-template #deleteModelTemplate>
+  <h3 mat-dialog-title>Delete Stock Issuance</h3>
+  <div mat-dialog-content>
+    <p>Are you sure you want to delete the stock issuance record?</p>
+  </div>
+  <div mat-dialog-actions class="d-flex justify-content-end gap-2">
+    <button
+      [disabled]="isDeleting"
+      mat-raised-button
+      type="button"
+      color="warn"
+      (click)="delete()"
+    >
+      Delete
+    </button>
+    <button
+      [disabled]="isDeleting"
+      mat-flat-button
+      mat-dialog-close
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</ng-template>

package/projects/inventory-common/src/lib/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.component.ts

@@ -0,0 +1,49 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { StockIssuanceService } from "../stock-issuance.service";
+import { AlertService } from "ngx-techlify-core";
+
+@Component({
+  selector: "app-stock-issuance-delete-button",
+  templateUrl: "./stock-issuance-delete-button.component.html",
+  styleUrls: ["./stock-issuance-delete-button.component.scss"],
+})
+export class StockIssuanceDeleteButtonComponent {
+  @Input() stockIssuance: any;
+  @Output() deleted: EventEmitter<any> = new EventEmitter<any>();
+  isDeleting: boolean = false;
+
+  constructor(
+    private matDialog: MatDialog,
+    private stockIssuanceService: StockIssuanceService,
+    private alertService: AlertService
+  ) {}
+
+  showDeleteConfirmModel(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "400px" });
+  }
+
+  delete() {
+    this.isDeleting = true;
+    this.stockIssuanceService.delete(this.stockIssuance).subscribe({
+      next: () => {
+        this.matDialog.closeAll();
+        this.isDeleting = false;
+        this.deleted.emit();
+        this.alertService.addAlert(
+          "Stock Issuance deleted successfully!",
+          "success"
+        );
+      },
+      error: () => {
+        this.isDeleting = false;
+      },
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/stock-issuances/stock-issuance-delete-button/stock-issuance-delete-button.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StockIssuanceDeleteButtonComponent } from "./stock-issuance-delete-button.component";
+import { MaterialModule } from "ngx-techlify-core";
+
+@NgModule({
+  declarations: [StockIssuanceDeleteButtonComponent],
+  imports: [CommonModule, MaterialModule],
+  exports: [StockIssuanceDeleteButtonComponent],
+})
+export class StockIssuanceDeleteButtonModule {}

package/projects/inventory-common/src/lib/inventory-common/stock-issuances/stock-issuance.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { HttpService, TechlifyServiceBaseClass } from "ngx-techlify-core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class StockIssuanceService extends TechlifyServiceBaseClass {
+  constructor(httpService: HttpService) {
+    super(httpService, "stock-issuances");
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/stock-issuances/stock-issuances-list/stock-issuances-list.component.html

@@ -0,0 +1,165 @@
+<mat-card *ngIf="!product" class="mb-2">
+  <mat-card-content
+    class="d-flex justify-content-between align-items-center gap-3"
+  >
+    <div class="d-flex justify-content-start align-items-center gap-2">
+      <h3 class="mb-0">{{ label }}</h3>
+
+      <app-stock-issue-form-button
+        icon="add"
+        [issuableType]="issuableType"
+        [issuableId]="issuableId"
+        (saved)="reload()"
+      ></app-stock-issue-form-button>
+    </div>
+
+    <app-techlify-filter
+      [filterForm]="filterForm"
+      [filterConfig]="filterConfig"
+      (filterUpdated)="reload()"
+    ></app-techlify-filter>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content *ngIf="product" class="mb-0">
+    <div class="d-flex justify-content-start align-items-center gap-2 mb-2">
+      <span class="material-symbols-outlined"> ungroup </span>
+      <h3 class="mb-0">Stock Issuances</h3>
+
+      <app-stock-issue-form-button
+        [product]="product"
+        icon="add"
+        (saved)="reload(); listUpdated.emit()"
+      ></app-stock-issue-form-button>
+    </div>
+  </mat-card-content>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      aria-describedby="Stock Issuances"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      matSort
+      (matSortChange)="onSortChange($event)"
+    >
+      <!-- # Column -->
+      <ng-container matColumnDef="no">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
+      </ng-container>
+
+      <!-- Product Column -->
+      <ng-container matColumnDef="product">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            [routerLink]="[
+              '/inventory/products/',
+              element?.product?.id,
+              'view'
+            ]"
+          >
+            {{ element?.product?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- Date Column -->
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
+        <td mat-cell *matCellDef="let element">{{ element?.date | date }}</td>
+      </ng-container>
+
+      <!-- Related Column -->
+      <ng-container matColumnDef="related">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Related</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            class="text-dark"
+            *ngIf="element?.issuable"
+            [routerLink]="['/maintenances', element?.issuable_id, 'view']"
+          >
+            Maintenance for {{ element?.issuable?.fixed_asset?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.quantity }} {{ element?.product?.measure?.title }}
+        </td>
+      </ng-container>
+
+      <!-- Purchase Price Column -->
+      <ng-container matColumnDef="purchase_price">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          Purchase Price
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.purchase_price | currency }}
+        </td>
+      </ng-container>
+
+      <!-- Total Value Column -->
+      <ng-container matColumnDef="amount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.amount | currency }}
+        </td>
+      </ng-container>
+
+      <!-- Particulars Column -->
+      <ng-container matColumnDef="particulars">
+        <th mat-header-cell *matHeaderCellDef>Particulars</th>
+        <td mat-cell *matCellDef="let element">{{ element?.particulars }}</td>
+      </ng-container>
+
+      <!-- Supplier Column -->
+      <ng-container matColumnDef="supplier">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.supplier?.company_name }}
+        </td>
+      </ng-container>
+
+      <!-- Creator Column -->
+      <ng-container matColumnDef="creator">
+        <th mat-header-cell *matHeaderCellDef>Creator</th>
+        <td mat-cell *matCellDef="let element">
+          <p class="mb-1">{{ element?.creator?.name }}</p>
+          <small class="text-secondary">{{ element?.created_at | date }}</small>
+        </td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <div class="d-flex gap-1">
+            <app-stock-issue-form-button
+              [product]="element.product"
+              [stockIssuance]="element"
+              (saved)="reload(); listUpdated.emit()"
+            ></app-stock-issue-form-button>
+            <app-stock-issuance-delete-button
+              [stockIssuance]="element"
+              (deleted)="reload(); listUpdated.emit()"
+            ></app-stock-issuance-delete-button>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+
+    <mat-progress-bar *ngIf="isWorking" mode="indeterminate"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>