techlify-inventory-common 0.0.1

package/projects/inventory-common/src/lib/inventory-common/category/category-list-page/category-list-page.component.html

@@ -0,0 +1,79 @@
+<mat-card>
+  <mat-card-content
+    class="d-flex justify-content-start align-items-center gap-3"
+  >
+    <div class="d-flex justify-content-start align-items-center gap-2">
+      <h3 class="mb-0">Product Categories</h3>
+      <app-category-form-button
+        class="mt-1"
+        (saved)="reload()"
+      ></app-category-form-button>
+    </div>
+    <app-techlify-filter
+      [filterForm]="filterForm"
+      (filterUpdated)="reload()"
+      [filterConfig]="filterConfig"
+    ></app-techlify-filter>
+  </mat-card-content>
+</mat-card>
+
+<mat-card class="mt-2 p-0">
+  <mat-card-content>
+    <table
+      mat-table
+      [dataSource]="models"
+      class="w-100"
+      aria-describedby="Product Categories"
+      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>
+
+      <!-- Description Column -->
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef>Description</th>
+        <td mat-cell *matCellDef="let element">{{ element?.description }}</td>
+      </ng-container>
+
+      <!-- Products Column -->
+      <ng-container matColumnDef="products">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="products_count">
+          Products
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element?.products_count }}
+        </td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let element">
+          <app-category-form-button
+            [category]="element"
+            (saved)="reload()"
+          ></app-category-form-button>
+        </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>

package/projects/inventory-common/src/lib/inventory-common/category/category-list-page/category-list-page.component.ts

@@ -0,0 +1,61 @@
+import { Component } from "@angular/core";
+import { TechlifyListingControllerInterface } from "ngx-techlify-core";
+import { FormBuilder } from "@angular/forms";
+import { CategoryService } from "../category.service";
+import { Sort } from "@angular/material/sort";
+
+@Component({
+  selector: "app-category-list-page",
+  templateUrl: "./category-list-page.component.html",
+  styleUrls: ["./category-list-page.component.scss"],
+})
+export class CategoryListPageComponent extends TechlifyListingControllerInterface {
+  filterConfig = {
+    search: {
+      placeholder: "Search category title, description",
+    },
+  };
+  displayedColumns: string[] = [
+    "no",
+    "title",
+    "description",
+    "products",
+    "actions",
+  ];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private categoryService: CategoryService
+  ) {
+    super();
+    this.filterForm = this.formBuilder.group({
+      search: [""],
+      sort_by: ["created_at|desc"],
+    });
+  }
+
+  override loadData() {
+    this.isWorking = true;
+    const params: any = { ...this.filterForm.value };
+    params.perPage = this.perPage;
+    params.page = this.page;
+    params.withCount = "products";
+
+    this.categoryService.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),
+    });
+  }
+
+  onSortChange(sort: Sort) {
+    let { active, direction } = sort;
+    if (!active) active = "created_at";
+    if (!direction) direction = "desc";
+
+    this.filterForm.get("sort_by").setValue(active + "|" + direction);
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { CategoryRoutingModule } from "./category-routing.module";
+import { CategoryListPageComponent } from "./category-list-page/category-list-page.component";
+import { MatCardModule } from "@angular/material/card";
+import { CategoryFormButtonComponent } from "./category-form-button/category-form-button.component";
+import { MatIconModule } from "@angular/material/icon";
+import { CategoryFormComponent } from "./category-form/category-form.component";
+import { MatDialogModule } from "@angular/material/dialog";
+import { ReactiveFormsModule } from "@angular/forms";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MaterialModule } from "ngx-techlify-core";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { TechlifyFilterModule } from '../techlify-filter/techlify-filter.module';
+
+@NgModule({
+  declarations: [
+    CategoryListPageComponent,
+    CategoryFormButtonComponent,
+    CategoryFormComponent,
+  ],
+  imports: [
+    CommonModule,
+    CategoryRoutingModule,
+    MatCardModule,
+    MatIconModule,
+    MatDialogModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    TechlifyFilterModule,
+    InfiniteScrollModule,
+    MatProgressBarModule,
+  ],
+})
+export class CategoryModule {}

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

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

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

@@ -0,0 +1,65 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { InventoryDashboardPageComponent } from "./inventory-dashboard-page/inventory-dashboard-page.component";
+import { LowStockReportComponent } from "./reports/low-stock-report/low-stock-report.component";
+import { InventoryValueReportComponent } from "./reports/inventory-value-report/inventory-value-report.component";
+
+const routes: Routes = [
+  {
+    path: 'reports/low-stock-report',
+    component: LowStockReportComponent,
+  },
+  {
+    path: 'reports/inventory-value-report',
+    component: InventoryValueReportComponent,
+  },
+  {
+    path: "suppliers",
+    loadChildren: () =>
+      import("./supplier/supplier.module").then((m) => m.SupplierModule),
+  },
+  {
+    path: "measures",
+    loadChildren: () =>
+      import("./measure/measure.module").then((mod) => mod.MeasureModule),
+  },
+  {
+    path: "stock-issuances",
+    loadChildren: () =>
+      import("./stock-issuances/stock-issuances.module").then(
+        (mod) => mod.StockIssuancesModule
+      ),
+  },
+  {
+    path: "stock-receipts",
+    loadChildren: () =>
+      import("./stock-receipts/stock-receipts.module").then(
+        (mod) => mod.StockReceiptsModule
+      ),
+  },
+  {
+    path: "categories",
+    loadChildren: () =>
+      import("./category/category.module").then((mod) => mod.CategoryModule),
+  },
+  {
+    path: "products",
+    loadChildren: () =>
+      import("./product/product.module").then((mod) => mod.ProductModule),
+  },
+  {
+    path: "dashboard",
+    component: InventoryDashboardPageComponent,
+  },
+  {
+    path: "**",
+    redirectTo: "dashboard",
+    pathMatch: "full",
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class InventoryCommonRoutingModule {}

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

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { InventoryCommonRoutingModule } from "./inventory-common-routing.module";
+import { InventoryDashboardPageComponent } from "./inventory-dashboard-page/inventory-dashboard-page.component";
+import { MaterialModule } from "ngx-techlify-core";
+import { LowStockProductsWidgetModule } from './product/low-stock-products-widget/low-stock-products-widget.module';
+import { ProductSummaryChartModule } from './product/product-summary-chart/product-summary-chart.module';
+import { ProductSummaryChartComponent } from './product/product-summary-chart/product-summary-chart.component';
+import {ProductQuickSearchComponent} from "./product/product-quick-search/product-quick-search.component";
+
+@NgModule({
+  declarations: [InventoryDashboardPageComponent],
+  imports: [
+    CommonModule,
+    InventoryCommonRoutingModule,
+    MaterialModule,
+    LowStockProductsWidgetModule,
+    ProductSummaryChartModule,
+    ProductSummaryChartComponent,
+    ProductQuickSearchComponent,
+  ],
+})
+export class InventoryCommonModule {}

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

@@ -0,0 +1,88 @@
+<div class="d-flex justify-content-start align-items-start gap-3 vh-100">
+  <div class="row" style="width: calc(100% - 300px)">
+    <div class="col-lg-4 mb-3">
+      <mat-card>
+        <mat-card-content class="d-flex justify-content-center align-items-center gap-3">
+          <span class="material-symbols-outlined fs-1 fw-bold" style="color: #F5222D !important;">
+            inventory_2
+          </span>
+          <div class="d-flex flex-column gap-0">
+            <small class="text-secondary">Low Stock Products</small>
+            <h1 class="mb-0 fw-bold">{{ lowStockProductsCount | number }}</h1>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4 mb-3">
+      <mat-card>
+        <mat-card-content class="d-flex justify-content-center align-items-center gap-3">
+          <span class="material-symbols-outlined fs-1 fw-bold">
+            arrow_circle_down
+          </span>
+          <div class="d-flex flex-column gap-0">
+            <small class="text-secondary">Products Received This Month</small>
+            <h1 class="mb-0 fw-bold">{{ stockReceiptsQtySum | number }}</h1>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4 mb-3">
+      <mat-card>
+        <mat-card-content class="d-flex justify-content-center align-items-center gap-3">
+          <span class="material-symbols-outlined fs-1 fw-bold">
+            arrow_circle_up
+          </span>
+          <div class="d-flex flex-column gap-0">
+            <small class="text-secondary">Products Issued This Month</small>
+            <h1 class="mb-0 fw-bold">{{ stockIssuanceQtySum | number }}</h1>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-6 mb-3">
+      <app-product-quick-search></app-product-quick-search>
+    </div>
+    <div class="col-lg-6 mb-3">
+      <app-low-stock-products-widget></app-low-stock-products-widget>
+    </div>
+    <div class="col-lg-6 mb-3">
+      <app-product-summary-chart title="Product By Category"></app-product-summary-chart>
+    </div>
+  </div>
+  <div style="width: 300px" class="d-flex flex-column gap-3 h-100">
+    <mat-card class="h-100">
+      <mat-card-content>
+        <div class="d-flex justify-content-start align-items-center gap-2">
+          <mat-icon>flag</mat-icon>
+          <h3 class="mb-0 fw-bold">Reports</h3>
+        </div>
+      </mat-card-content>
+      <mat-card-content class="mt-3 d-flex flex-column justify-content-start gap-3">
+        <a
+          class="d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark"
+          routerLink="/inventory/reports/low-stock-report"
+        >
+          <span class="material-symbols-outlined fs-3">
+            description
+          </span>
+          <h3 class="mb-0">Low Stock Report</h3>
+          <span class="material-symbols-outlined">
+            chevron_forward
+          </span>
+        </a>
+        <a
+          class="d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer"
+          routerLink="/inventory/reports/inventory-value-report"
+        >
+          <span class="material-symbols-outlined fs-3">
+            description
+          </span>
+          <h3 class="mb-0">Inventory Value Report</h3>
+          <span class="material-symbols-outlined">
+            chevron_forward
+          </span>
+        </a>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ProductService } from "../product/product.service";
+import moment from "moment";
+
+@Component({
+  selector: 'app-inventory-dashboard-page',
+  templateUrl: './inventory-dashboard-page.component.html',
+  styleUrls: ['./inventory-dashboard-page.component.scss']
+})
+export class InventoryDashboardPageComponent implements OnInit {
+  lowStockProductsCount!: number;
+  stockReceiptsQtySum!: number;
+  stockIssuanceQtySum!: number;
+  constructor(
+    private productService: ProductService,
+  ) { }
+
+  ngOnInit(): void {
+    this.loadProductSummary();
+  }
+
+  private loadProductSummary() {
+    const params: any = {
+      include: 'low_stock_products_count,stock_receipts_quantity_sum,stock_issuances_quantity_sum',
+      date_from: moment().startOf('month').format('YYYY-MM-DD'),
+      date_to: moment().endOf('month').format('YYYY-MM-DD'),
+    }
+    this.productService.summary(params).subscribe({
+      next: (response: any) => {
+        this.lowStockProductsCount = response?.low_stock_products_count;
+        this.stockReceiptsQtySum = response?.stock_receipts_quantity_sum;
+        this.stockIssuanceQtySum = response?.stock_issuances_quantity_sum;
+      }
+    });
+  }
+}

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

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpService, TechlifyServiceBaseClass} from 'ngx-techlify-core';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InventoryValueReportService extends TechlifyServiceBaseClass {
+
+  constructor(
+    httpService: HttpService,
+  ) {
+    super(httpService, 'reports/inventory-value-report');
+  }
+
+  export(params?: any): Observable<any> {
+    return this.http.get('api/reports/inventory-value-report/export', { params });
+  }
+}

package/projects/inventory-common/src/lib/inventory-common/low-stock-report.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {HttpService, TechlifyServiceBaseClass} from 'ngx-techlify-core';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LowStockReportService extends TechlifyServiceBaseClass {
+
+  constructor(
+    protected httpService: HttpService,
+  ) {
+    super(httpService, 'reports/low-stock-report');
+  }
+
+  export(params?: any): Observable<any> {
+    return this.http.get('api/reports/low-stock-report/export', { params });
+  }
+}

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

@@ -0,0 +1,95 @@
+/*
+ * This module imports and re-exports all Angular Material modules for convenience,
+ * so only 1 module import is needed in your feature modules.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+
+import { NgModule } from "@angular/core";
+import {
+  MatCommonModule,
+  MatLineModule,
+  MatNativeDateModule,
+  MatPseudoCheckboxModule,
+  MatRippleModule,
+} from "@angular/material/core";
+import { MatOptionModule } from "@angular/material/core";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatBadgeModule } from "@angular/material/badge";
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatCardModule } from "@angular/material/card";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatGridListModule } from "@angular/material/grid-list";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatListModule } from "@angular/material/list";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatRadioModule } from "@angular/material/radio";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSliderModule } from "@angular/material/slider";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatSortModule } from "@angular/material/sort";
+import { MatStepperModule } from "@angular/material/stepper";
+import { MatTableModule } from "@angular/material/table";
+import { MatTabsModule } from "@angular/material/tabs";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatTreeModule } from "@angular/material/tree";
+
+@NgModule({
+  exports: [
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatCommonModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatLineModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatOptionModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatPseudoCheckboxModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+  ],
+})
+export class MaterialModule {}

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

@@ -0,0 +1,37 @@
+<span
+  (click)="showConfirmDialog(deleteMeasureTemplate)"
+  class="material-symbols-outlined cursor-pointer text-secondary"
+>
+  delete
+</span>
+
+<ng-template #deleteMeasureTemplate>
+  <h3 mat-dialog-title>Delete Measure</h3>
+  <div mat-dialog-content>
+    <p>
+      Deleting this measure cannot be undone, are you sure you want to proceed?
+    </p>
+  </div>
+  <div
+    mat-dialog-actions
+    class="d-flex justify-content-end align-items-center gap-2"
+  >
+    <button
+      [disabled]="isDeleting"
+      mat-flat-button
+      type="button"
+      mat-dialog-close
+    >
+      Cancel
+    </button>
+    <button
+      [disabled]="isDeleting"
+      mat-raised-button
+      color="warn"
+      type="button"
+      (click)="deleteMeasure()"
+    >
+      Delete
+    </button>
+  </div>
+</ng-template>

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

@@ -0,0 +1,44 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { MeasureService } from "../../measure.service";
+
+@Component({
+  selector: "app-measure-delete-button",
+  templateUrl: "./measure-delete-button.component.html",
+  styleUrls: ["./measure-delete-button.component.scss"],
+})
+export class MeasureDeleteButtonComponent {
+  @Input() measure: any;
+  @Output() deleted: EventEmitter<any> = new EventEmitter<any>();
+  isDeleting: boolean = false;
+
+  constructor(
+    private measureService: MeasureService,
+    private matDialog: MatDialog
+  ) {}
+
+  /**
+   * Delete the expense record.
+   */
+  deleteMeasure() {
+    this.isDeleting = true;
+    this.measureService.delete(this.measure).subscribe({
+      next: () => {
+        this.matDialog.closeAll();
+        this.isDeleting = false;
+        this.deleted.emit();
+      },
+      error: () => (this.isDeleting = false),
+    });
+  }
+
+  showConfirmDialog(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef);
+  }
+}

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

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