techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/measure/measure-form/measure-form/measure-form.component.html

@@ -0,0 +1,66 @@
+<h3 class="text-center mb-1">{{ measure?.id ? "Edit" : "Create" }} Measure</h3>
+<p class="text-center text-secondary">
+  Measures are used throughout the app. ONLY create measure as is applicable.
+</p>
+
+<form
+  [formGroup]="form"
+  class="d-flex flex-row flex-wrap justify-content-start gap-2"
+  (submit)="save()"
+>
+  <mat-form-field style="width: calc(100%)">
+    <mat-label>Title</mat-label>
+    <input formControlName="title" type="text" matInput placeholder="Title" />
+    <mat-error *ngIf="isFieldValid('title')">
+      {{ getErrorMessage("title") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field style="width: calc(100%)">
+    <mat-label>Quantity Measure</mat-label>
+    <input
+      formControlName="quantity_measure"
+      type="text"
+      matInput
+      placeholder="Quantity Measure"
+    />
+    <mat-hint>
+      What is this measure for? eg: Unit, Length, Mass, Capacity.
+    </mat-hint>
+    <mat-error *ngIf="isFieldValid('quantity_measure')">
+      {{ getErrorMessage("quantity_measure") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field style="width: calc(100%)">
+    <mat-label>Description</mat-label>
+    <textarea
+      matInput
+      formControlName="description"
+      placeholder="Description"
+      rows="3"
+    ></textarea>
+  </mat-form-field>
+
+  <div
+    class="d-flex justify-content-end align-items-center gap-2"
+    style="width: calc(100%)"
+  >
+    <button
+      [disabled]="isWorking"
+      type="submit"
+      mat-raised-button
+      color="primary"
+    >
+      Save
+    </button>
+    <button
+      [disabled]="isWorking"
+      type="button"
+      mat-flat-button
+      (click)="cancelled.emit()"
+    >
+      Cancel
+    </button>
+  </div>
+</form>

package/projects/inventory-common/src/lib/inventory-common/measure/measure-form/measure-form/measure-form.component.ts

@@ -0,0 +1,78 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import {
+  AlertService,
+  FormValidatorService,
+  TechlifyFormComponentInterface,
+} from "ngx-techlify-core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { MeasureService } from "../../measure.service";
+import { Observable } from "rxjs";
+
+@Component({
+  selector: "app-measure-form",
+  templateUrl: "./measure-form.component.html",
+  styleUrls: ["./measure-form.component.scss"],
+})
+export class MeasureFormComponent
+  extends TechlifyFormComponentInterface
+  implements OnInit
+{
+  @Input() measure: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+  @Output() cancelled: EventEmitter<any> = new EventEmitter<any>();
+
+  isWorking!: boolean;
+  constructor(
+    formValidatorService: FormValidatorService,
+    private formBuilder: FormBuilder,
+    private alertService: AlertService,
+    private measureService: MeasureService
+  ) {
+    super(formValidatorService);
+
+    this.errorMessages = {
+      title: {
+        required: "The title field is required.",
+      },
+      quantity_measure: {
+        required: "The quantity measure field is required.",
+      },
+    };
+
+    this.form = this.formBuilder.group({
+      id: [""],
+      title: ["", Validators.required],
+      quantity_measure: ["", Validators.required],
+      description: [""],
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.measure) {
+      this.form.patchValue({ ...this.measure });
+    }
+  }
+
+  save() {
+    if (this.form.invalid) {
+      this.alertService.addAlert("Please check the form for errors.", "error");
+      return;
+    }
+    const data: any = {
+      ...this.form.value,
+    };
+    this.isWorking = true;
+    let request: Observable<any> = this.measureService.store(data);
+    if (this.measure?.id) {
+      request = this.measureService.update(data);
+    }
+    request.subscribe({
+      next: (response: any) => {
+        this.alertService.addAlert("Measure saved successfully!", "success");
+        this.isWorking = false;
+        this.saved.emit(response?.item);
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/measure/measure-form/measure-form-button/measure-form-button.component.html

@@ -0,0 +1,16 @@
+<span
+  class="material-symbols-outlined cursor-pointer"
+  (click)="showForm(measureFormTemplate)"
+  [class.text-primary]="!measure?.id"
+>
+  {{ measure?.id ? "edit" : "add" }}
+</span>
+
+<ng-template #measureFormTemplate>
+  <app-measure-form
+    [measure]="measure"
+    mat-dialog-content
+    (saved)="onSave($event)"
+    (cancelled)="matDialog.closeAll()"
+  ></app-measure-form>
+</ng-template>

package/projects/inventory-common/src/lib/inventory-common/measure/measure-form/measure-form-button/measure-form-button.component.ts

@@ -0,0 +1,29 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+
+@Component({
+  selector: "app-measure-form-button",
+  templateUrl: "./measure-form-button.component.html",
+  styleUrls: ["./measure-form-button.component.scss"],
+})
+export class MeasureFormButtonComponent {
+  @Input() measure: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(public matDialog: MatDialog) {}
+
+  showForm(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "500px" });
+  }
+
+  onSave(measure: any) {
+    this.matDialog.closeAll();
+    this.saved.emit(measure);
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/measure/measure-form/measure-form.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MeasureFormComponent } from "./measure-form/measure-form.component";
+import { MeasureFormButtonComponent } from "./measure-form-button/measure-form-button.component";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MaterialModule } from 'ngx-techlify-core';
+
+@NgModule({
+  declarations: [MeasureFormComponent, MeasureFormButtonComponent],
+  imports: [CommonModule, MaterialModule, ReactiveFormsModule],
+  exports: [MeasureFormComponent, MeasureFormButtonComponent],
+})
+export class MeasureFormModule {}

package/projects/inventory-common/src/lib/inventory-common/measure/measure-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { MeasuresListComponent } from "./measures-list/measures-list.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: MeasuresListComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MeasureRoutingModule {}

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

@@ -0,0 +1,26 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { MeasureRoutingModule } from "./measure-routing.module";
+import { MeasuresListComponent } from "./measures-list/measures-list.component";
+import { MeasureFormModule } from "./measure-form/measure-form.module";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MeasureDeleteModule } from "./measure-delete/measure-delete.module";
+import { MaterialModule } from "ngx-techlify-core";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { TechlifyFilterModule } from '../techlify-filter/techlify-filter.module';
+
+@NgModule({
+  declarations: [MeasuresListComponent],
+  imports: [
+    CommonModule,
+    MeasureRoutingModule,
+    MaterialModule,
+    MeasureFormModule,
+    TechlifyFilterModule,
+    InfiniteScrollModule,
+    MeasureDeleteModule,
+    MatProgressBarModule,
+  ],
+})
+export class MeasureModule {}

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

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

package/projects/inventory-common/src/lib/inventory-common/measure/measures-list/measures-list.component.html

@@ -0,0 +1,88 @@
+<mat-card class="mb-2">
+  <mat-card-content
+    class="d-flex justify-content-between align-items-center gap-3"
+  >
+    <div class="d-flex justify-content-center align-items-center gap-2">
+      <h3 class="mb-0">Measures</h3>
+      <app-measure-form-button
+        class="mt-1"
+        (saved)="reload()"
+      ></app-measure-form-button>
+    </div>
+    <app-techlify-filter
+      [filterForm]="filterForm"
+      (filterUpdated)="reload()"
+    ></app-techlify-filter>
+  </mat-card-content>
+</mat-card>
+
+<mat-card class="p-0">
+  <mat-card-content>
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      aria-describedby="Service Centers"
+      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>
+
+      <!-- Title Column -->
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.title }}
+        </td>
+      </ng-container>
+
+      <!-- Quantity Measure Column -->
+      <ng-container matColumnDef="quantity_measure">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          Quantity Measure
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.quantity_measure }}
+        </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>
+      </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 justify-content-start align-items-center gap-2">
+            <app-measure-form-button
+              [measure]="element"
+              (saved)="reload()"
+              *ngIf="element?.client_id"
+            ></app-measure-form-button>
+            <app-measure-delete-button
+              [measure]="element"
+              (deleted)="reload()"
+              *ngIf="element?.client_id"
+            ></app-measure-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 mode="indeterminate" *ngIf="isWorking"></mat-progress-bar>
+  </mat-card-content>
+</mat-card>

package/projects/inventory-common/src/lib/inventory-common/measure/measures-list/measures-list.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { TechlifyListingControllerInterface } from "ngx-techlify-core";
+import { MeasureService } from "../measure.service";
+import { Sort } from "@angular/material/sort";
+
+@Component({
+  selector: "app-measure-list",
+  templateUrl: "./measures-list.component.html",
+  styleUrls: ["./measures-list.component.scss"],
+})
+export class MeasuresListComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  displayedColumns: string[] = [
+    "no",
+    "title",
+    "quantity_measure",
+    "description",
+    "actions",
+  ];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private measureService: MeasureService
+  ) {
+    super();
+    this.filterForm = this.formBuilder.group({
+      search: [""],
+      sort_by: ["created_at|desc"],
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  loadData(): void {
+    const params: any = {
+      page: this.page,
+      perPage: this.perPage,
+      ...this.filterForm.value,
+    };
+    this.isWorking = true;
+    this.measureService.index(params).subscribe({
+      next: (response: any) => {
+        this.isWorking = false;
+        this.models = this.models.concat(response?.data);
+        this.lastPage = response?.last_page;
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+
+  onSortChange(sort: Sort) {
+    let { active, direction } = sort;
+    if (!active) {
+      active = "created_at";
+    }
+    if (!direction) {
+      direction = "desc";
+      active = "created_at";
+    }
+    this.filterForm.get("sort_by").setValue(active + "|" + direction);
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/low-stock-products-widget/low-stock-products-widget.component.html

@@ -0,0 +1,52 @@
+<mat-card style="max-height: 460px; overflow: auto">
+  <mat-card-content>
+    <h3>Low Stock Products</h3>
+  </mat-card-content>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+    >
+      <!-- # 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>Product</th>
+        <td mat-cell *matCellDef="let element">
+          <a
+            [routerLink]="['/inventory/products', element?.id, 'view']"
+            class="text-dark"
+          >
+            {{ element?.name }}
+          </a>
+        </td>
+      </ng-container>
+
+      <!-- Stock Column -->
+      <ng-container matColumnDef="Stock">
+        <th mat-header-cell *matHeaderCellDef>Stock</th>
+        <td mat-cell *matCellDef="let element">{{ element?.current_stock }}</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>
+
+      <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>

package/projects/inventory-common/src/lib/inventory-common/product/low-stock-products-widget/low-stock-products-widget.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from "@angular/core";
+import { TechlifyListingControllerInterface } from "ngx-techlify-core";
+import { ProductService } from "../product.service";
+
+@Component({
+  selector: "app-low-stock-products-widget",
+  templateUrl: "./low-stock-products-widget.component.html",
+})
+export class LowStockProductsWidgetComponent
+  extends TechlifyListingControllerInterface
+  implements OnInit
+{
+  displayedColumns: string[] = ["#", "Product", "Stock", "Reorder Point"];
+
+  constructor(private productService: ProductService) {
+    super();
+    this.lastPage = 0;
+    this.perPage = 1000;
+  }
+
+  ngOnInit() {
+    this.loadData();
+  }
+
+  loadData() {
+    const params: any = {
+      page: this.page,
+      perPage: this.perPage,
+      is_low_stock: true,
+      num_items: this.perPage + "|" + this.page,
+    };
+    this.isWorking = true;
+    this.productService.index(params).subscribe({
+      next: (response: any) => {
+        this.models = this.models?.concat(response?.data);
+        this.lastPage = response?.last_page;
+        this.isWorking = false;
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/product/low-stock-products-widget/low-stock-products-widget.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MaterialModule } from "ngx-techlify-core";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { RouterModule } from "@angular/router";
+import { LowStockProductsWidgetComponent } from './low-stock-products-widget.component';
+
+@NgModule({
+  declarations: [LowStockProductsWidgetComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    InfiniteScrollModule,
+    MatProgressBarModule,
+    RouterModule,
+  ],
+  exports: [LowStockProductsWidgetComponent],
+})
+export class LowStockProductsWidgetModule {}

package/projects/inventory-common/src/lib/inventory-common/product/product-basic-info/product-basic-info.component.html

@@ -0,0 +1,114 @@
+<mat-card *ngIf="product" class="w-100">
+  <mat-card-content
+    class="d-flex justify-content-between align-items-center mb-1 mb-2"
+  >
+    <div class="d-flex justify-content-start gap-2">
+      <span class="material-symbols-outlined"> campaign </span>
+      <strong class="mb-0 text-dark">Product Information</strong>
+    </div>
+    <div class="d-flex justify-content-start align-items-center gap-2">
+      <app-product-form-button
+        [product]="product"
+        (saved)="onProductSaved($event)"
+      ></app-product-form-button>
+      <app-product-delete-button
+        [product]="product"
+        (deleted)="deleted.emit()"
+      ></app-product-delete-button>
+    </div>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-content class="mt-3">
+    <h3 class="mb-1 font-weight-bold">{{ product?.name }}</h3>
+    <div class="d-flex flex-wrap gap-1">
+      <span
+        class="badge badge-primary"
+        *ngFor="let category of product?.categories"
+      >
+        {{ category?.title }}
+      </span>
+    </div>
+  </mat-card-content>
+
+  <mat-card-content
+    class="mt-3 d-flex justify-content-between align-items-start"
+  >
+    <div
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">SKU</small>
+      <p class="mb-0">{{ product?.sku }}</p>
+    </div>
+    <div
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">Measure</small>
+      <p class="mb-0">{{ product?.measure?.title }}</p>
+    </div>
+    <div
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">Reorder Point</small>
+      <p class="mb-0">{{ product?.reorder_point }}</p>
+    </div>
+  </mat-card-content>
+
+  <mat-card-content
+    class="mt-3 d-flex flex-column justify-content-start align-items-start gap-1"
+  >
+    <small class="text-secondary">Description</small>
+    <p class="mb-0">{{ product?.description }}</p>
+  </mat-card-content>
+
+  <mat-card-content
+    class="mt-5 d-flex justify-content-between align-items-start"
+  >
+    <div
+      *ngIf="stockSummary"
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">Stock Receipts</small>
+      <div class="d-flex justify-content-start align-items-center gap-2">
+        <span class="material-symbols-outlined"> arrow_downward </span>
+        <p class="mb-0" style="font-size: 24px">
+          {{ stockSummary?.stock_receipts_quantity_sum }}
+        </p>
+      </div>
+      <small *ngIf="product?.last_stock_receipt" class="text-secondary">
+        Last Added On {{ product?.last_stock_receipt?.date | date }}
+      </small>
+    </div>
+    <div
+      *ngIf="stockSummary"
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">Stock Issuances</small>
+      <div class="d-flex justify-content-start align-items-center gap-2">
+        <span class="material-symbols-outlined"> ungroup </span>
+        <p class="mb-0" style="font-size: 24px">
+          {{ stockSummary?.stock_issuances_quantity_sum }}
+        </p>
+      </div>
+      <small *ngIf="product?.last_stock_issuance" class="text-secondary">
+        Last Added On {{ product?.last_stock_issuance?.date | date }}
+      </small>
+    </div>
+  </mat-card-content>
+
+  <mat-card-content
+    *ngIf="stockSummary"
+    class="mt-3 d-flex justify-content-center align-items-center"
+  >
+    <div
+      class="d-flex flex-column justify-content-start align-items-start gap-1"
+    >
+      <small class="text-secondary">On Hand</small>
+      <div class="d-flex justify-content-start align-items-center gap-2">
+        <span class="material-symbols-outlined"> inventory_2 </span>
+        <p class="mb-0" style="font-size: 24px">
+          {{ stockSummary?.stock_quantity_remaining }}
+        </p>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>