techlify-inventory-common 0.0.1

package/src/app/@modules/inventory-common/stock-issuances/stock-issue-form/stock-issue-form-button/stock-issue-form-button.component.ts

@@ -0,0 +1,35 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+
+@Component({
+  selector: "app-stock-issue-form-button",
+  templateUrl: "./stock-issue-form-button.component.html",
+  styleUrls: ["./stock-issue-form-button.component.scss"],
+})
+export class StockIssueFormButtonComponent {
+  @Input() product: any;
+  @Input() stockIssuance: any;
+  @Input() icon!: string | null;
+  @Input() issuableType!: string;
+  @Input() issuableId!: number;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+
+  matDialogRef!: MatDialogRef<any>;
+
+  constructor(private matDialog: MatDialog) {}
+
+  showStockIssuanceForm(templateRef: TemplateRef<any>) {
+    this.matDialogRef = this.matDialog.open(templateRef, { width: "500px" });
+  }
+
+  onStockIssuanceSaved(item: any) {
+    this.matDialogRef.close();
+    this.saved.emit(item);
+  }
+}

package/src/app/@modules/inventory-common/stock-issuances/stock-issue-form/stock-issue-form.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StockIssueFormComponent } from "./stock-issue-form/stock-issue-form.component";
+import { StockIssueFormButtonComponent } from "./stock-issue-form-button/stock-issue-form-button.component";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { SearchableSelectorModule } from "ngx-techlify-core";
+
+@NgModule({
+  declarations: [StockIssueFormComponent, StockIssueFormButtonComponent],
+  exports: [StockIssueFormButtonComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatTooltipModule,
+    SearchableSelectorModule,
+  ],
+})
+export class StockIssueFormModule {}

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-delete-button/stock-receipt-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 Receipt</h3>
+  <div mat-dialog-content>
+    <p>Are you sure you want to delete the stock receipt 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/src/app/@modules/inventory-common/stock-receipts/stock-receipt-delete-button/stock-receipt-delete-button.component.ts

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

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-form/stock-receipt-form/stock-receipt-form.component.html

@@ -0,0 +1,74 @@
+<h3 class="text-center">
+  {{ stockReceipt?.id ? "Edit" : "Receive" }} Stock for {{ product?.name }}
+</h3>
+<form
+  [formGroup]="form"
+  class="d-flex flex-column gap-1 justify-content-start"
+  (submit)="save()"
+>
+  <app-payee-selector
+    label="Supplier"
+    formControlName="supplier_id"
+    appearance="fill"
+    [showAddButton]="true"
+  ></app-payee-selector>
+
+  <mat-form-field>
+    <mat-label>Date</mat-label>
+    <input
+      matInput
+      [matDatepicker]="datePicker"
+      formControlName="date"
+      (focus)="datePicker.open()"
+    />
+    <mat-datepicker #datePicker></mat-datepicker>
+    <mat-error *ngIf="isFieldValid('date')">
+      {{ getErrorMessage("date") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Quantity</mat-label>
+    <input matInput formControlName="quantity" type="number" min="0" />
+    <mat-error *ngIf="isFieldValid('quantity')">
+      {{ getErrorMessage("quantity") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Purchase Price</mat-label>
+    <input matInput formControlName="purchase_price" type="number" min="0" />
+    <mat-error *ngIf="isFieldValid('purchase_price')">
+      {{ getErrorMessage("purchase_price") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Total Value</mat-label>
+    <input matInput formControlName="amount" readonly type="number" min="0" />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Particulars</mat-label>
+    <textarea matInput formControlName="particulars" rows="3"></textarea>
+  </mat-form-field>
+
+  <div class="d-flex justify-content-end align-items-center gap-2">
+    <button
+      [disabled]="isWorking"
+      mat-raised-button
+      color="primary"
+      type="submit"
+    >
+      Save
+    </button>
+    <button
+      [disabled]="isWorking"
+      (click)="cancelled.emit()"
+      mat-flat-button
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</form>

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-form/stock-receipt-form/stock-receipt-form.component.ts

@@ -0,0 +1,122 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import {
+  AlertService,
+  DateUtils,
+  FormValidatorService,
+  TechlifyFormComponentInterface,
+} from "ngx-techlify-core";
+import { FormBuilder, Validators } from "@angular/forms";
+import { StockReceiptService } from "../../stock-receipt.service";
+import { debounceTime, Observable } from "rxjs";
+
+@Component({
+  selector: "app-stock-receipt-form",
+  templateUrl: "./stock-receipt-form.component.html",
+  styleUrls: ["./stock-receipt-form.component.scss"],
+})
+export class StockReceiptFormComponent
+  extends TechlifyFormComponentInterface
+  implements OnInit
+{
+  @Input() product: any;
+  @Input() stockReceipt: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+  @Output() cancelled: EventEmitter<any> = new EventEmitter<any>();
+
+  isWorking!: boolean;
+
+  constructor(
+    formValidatorService: FormValidatorService,
+    private formBuilder: FormBuilder,
+    private stockReceiptService: StockReceiptService,
+    private alertService: AlertService,
+    private dateUtils: DateUtils
+  ) {
+    super(formValidatorService);
+    this.errorMessages = {
+      date: {
+        required: "The date field is required.",
+      },
+      quantity: {
+        required: "The quantity field is required.",
+      },
+      purchase_price: {
+        required: "The purchase price field is required.",
+      },
+    };
+
+    this.form = this.formBuilder.group({
+      id: [""],
+      supplier_id: [""],
+      date: [new Date(), Validators.required],
+      quantity: [1, Validators.required],
+      purchase_price: [0, Validators.required],
+      amount: [0],
+      particulars: [""],
+    });
+  }
+
+  ngOnInit() {
+    this.form
+      .get("quantity")
+      ?.valueChanges.pipe(debounceTime(500))
+      .subscribe(() => this.updateTotalAmount());
+    this.form
+      .get("purchase_price")
+      ?.valueChanges.pipe(debounceTime(500))
+      .subscribe(() => this.updateTotalAmount());
+
+    if (this.stockReceipt) {
+      let data: any = { ...this.stockReceipt };
+      if (data.date) {
+        data.date = new Date(data.date);
+      }
+      this.form.patchValue(data);
+    } else {
+      // on create for set default quantity and purchase price from last record
+      if (this.product?.last_stock_receipt) {
+        const { quantity, purchase_price } = this.product.last_stock_receipt;
+        this.form.patchValue({
+          quantity,
+          purchase_price,
+        });
+      }
+    }
+  }
+
+  save() {
+    if (this.form.invalid) {
+      this.alertService.addAlert("Please check the form for errors", "error");
+      return;
+    }
+    const data: any = {
+      product_id: this.product?.id,
+      ...this.form.value,
+    };
+    if (data.date) {
+      data.date = this.dateUtils.getYYYYMMDDString(data.date);
+    }
+    this.isWorking = true;
+    let request: Observable<any> = this.stockReceiptService.store(data);
+    if (this.stockReceipt?.id) {
+      request = this.stockReceiptService.update(data);
+    }
+    request.subscribe({
+      next: (response: any) => {
+        this.isWorking = false;
+        this.saved.emit(response?.item);
+        this.alertService.addAlert(
+          "Stock Receipt Saved Successfully!",
+          "success"
+        );
+      },
+      error: () => (this.isWorking = false),
+    });
+  }
+
+  private updateTotalAmount() {
+    const { purchase_price, quantity } = this.form.value;
+    const amount: any = parseFloat(purchase_price) * parseFloat(quantity) || 0;
+    this.form.get("amount")?.setValue(amount);
+  }
+}

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-form/stock-receipt-form-button/stock-receipt-form-button.component.html

@@ -0,0 +1,18 @@
+<span
+  class="material-symbols-outlined cursor-pointer"
+  [class.text-primary]="icon"
+  matTooltip="Stock Receipt"
+  (click)="showStockReceiptForm(stockReceiptFormTemplate)"
+>
+  {{ stockReceipt ? "edit" : icon ?? "download" }}
+</span>
+
+<ng-template #stockReceiptFormTemplate>
+  <app-stock-receipt-form
+    mat-dialog-content
+    [product]="product"
+    [stockReceipt]="stockReceipt"
+    (cancelled)="matDialogRef.close()"
+    (saved)="onStockReceiptSaved($event)"
+  ></app-stock-receipt-form>
+</ng-template>

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-form/stock-receipt-form-button/stock-receipt-form-button.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+
+@Component({
+  selector: "app-stock-receipt-form-button",
+  templateUrl: "./stock-receipt-form-button.component.html",
+  styleUrls: ["./stock-receipt-form-button.component.scss"],
+})
+export class StockReceiptFormButtonComponent {
+  @Input() product: any;
+  @Input() stockReceipt: any;
+  @Input() icon!: string | null;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+
+  matDialogRef!: MatDialogRef<any>;
+
+  constructor(private matDialog: MatDialog) {}
+
+  showStockReceiptForm(templateRef: TemplateRef<any>) {
+    this.matDialogRef = this.matDialog.open(templateRef, { width: "500px" });
+  }
+
+  onStockReceiptSaved(item: any) {
+    this.matDialogRef.close();
+    this.saved.emit(item);
+  }
+}

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt-form/stock-receipt-form.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { StockReceiptFormComponent } from "./stock-receipt-form/stock-receipt-form.component";
+import { StockReceiptFormButtonComponent } from "./stock-receipt-form-button/stock-receipt-form-button.component";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatDialogModule } from "@angular/material/dialog";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatButtonModule } from "@angular/material/button";
+import { PayeeSelectorModule } from "@modules/inventory-common/supplier/payee-selector/payee-selector.module";
+
+@NgModule({
+  declarations: [StockReceiptFormComponent, StockReceiptFormButtonComponent],
+  exports: [StockReceiptFormButtonComponent],
+  imports: [
+    CommonModule,
+    MatTooltipModule,
+    MatDialogModule,
+    PayeeSelectorModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatButtonModule,
+  ],
+})
+export class StockReceiptFormModule {}

package/src/app/@modules/inventory-common/stock-receipts/stock-receipt.service.ts

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

package/src/app/@modules/inventory-common/stock-receipts/stock-receipts-list-page/stock-receipts-list-page.component.html

@@ -0,0 +1,139 @@
+<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">Stock Receipts</h3>
+    </div>
+
+    <app-techlify-filter
+      [filterForm]="filterForm"
+      (filterUpdated)="reload()"
+      [filterConfig]="filterConfig"
+    ></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"> output_circle </span>
+      <h3 class="mb-0">Stock Receipts</h3>
+      <app-stock-receipt-form-button
+        [product]="product"
+        (saved)="reload(); listUpdated.emit()"
+        icon="add"
+      ></app-stock-receipt-form-button>
+    </div>
+  </mat-card-content>
+  <mat-card-content class="p-0">
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      aria-describedby="Stock Receipts"
+      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>
+
+      <!-- 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-receipt-form-button
+              [product]="element.product"
+              [stockReceipt]="element"
+              (saved)="reload(); listUpdated.emit()"
+            ></app-stock-receipt-form-button>
+            <app-stock-receipt-delete-button
+              [stockReceipt]="element"
+              (deleted)="reload(); listUpdated.emit()"
+            ></app-stock-receipt-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>