techlify-inventory-common 0.0.1

package/src/app/@modules/auth/login/login.component.scss

@@ -0,0 +1,43 @@
+.removeborder {
+  border: none !important;
+}
+
+.heading {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700 !important;
+  font-size: 30px !important;
+  line-height: 36px !important;
+  color: #000000 !important;
+}
+
+.subheading {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 !important;
+  font-size: 18px !important;
+  line-height: 28px !important;
+  color: #8692a6 !important;
+}
+
+.customlabel {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: 19px !important;
+  color: #696f79 !important;
+}
+
+.custombutton {
+  height: 50px;
+  background: #009ffd;
+  border-radius: 6px;
+}
+
+.custominput {
+  border: 1px solid #8692a6;
+  border-radius: 6px;
+  /* height: 64px; */
+  background-color: white !important;
+}

package/src/app/@modules/auth/login/login.component.ts

@@ -0,0 +1,57 @@
+import { HttpClient } from "@angular/common/http";
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.scss"],
+})
+export class LoginComponent implements OnInit {
+  constructor(
+    private fb: FormBuilder,
+    private http: HttpClient,
+    private _router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.ReactiveForms();
+  }
+
+  public Form!: FormGroup;
+
+  ReactiveForms() {
+    this.Form = this.fb.group({
+      password: "",
+      username: "",
+      client_id: 2,
+      client_secret: "KKKnfR6E6FziQtlSpiH3FvnHtCWmxMTIbLtuKjTH",
+      grant_type: "password",
+      remember: true,
+    });
+  }
+
+  Logicall() {
+    debugger;
+
+    try {
+      this.Loginservices(
+        "http://127.0.0.1:8000/oauth/token",
+        this.Form.value
+      ).subscribe((dt) => {
+        localStorage.setItem("user", JSON.stringify(dt));
+        console.log("dt", dt);
+        setTimeout(() => {
+          this._router.navigate(["/product-table"]);
+        }, 10);
+      });
+    } catch {
+      console.error("error");
+    }
+  }
+
+  Loginservices(url: string, body: any) {
+    return this.http.post(url, body);
+  }
+}

package/src/app/@modules/inventory-common/category/category-form/category-form.component.html

@@ -0,0 +1,41 @@
+<form
+  [formGroup]="form"
+  (submit)="save()"
+  class="d-flex flex-column justify-content-start"
+>
+  <mat-form-field>
+    <mat-label>Title</mat-label>
+    <input type="text" matInput formControlName="title" placeholder="Title" />
+    <mat-error *ngIf="isFieldValid('title')">
+      {{ getErrorMessage("title") }}
+    </mat-error>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Description</mat-label>
+    <textarea
+      matInput
+      formControlName="description"
+      placeholder="Description"
+    ></textarea>
+  </mat-form-field>
+
+  <div class="d-flex justify-content-end align-items-center gap-2">
+    <button
+      [disabled]="isSaving"
+      type="submit"
+      mat-raised-button
+      color="primary"
+    >
+      Save
+    </button>
+    <button
+      [disabled]="isSaving"
+      type="button"
+      mat-flat-button
+      (click)="cancelled.emit()"
+    >
+      Cancel
+    </button>
+  </div>
+</form>

package/src/app/@modules/inventory-common/category/category-form/category-form.component.ts

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

package/src/app/@modules/inventory-common/category/category-form-button/category-form-button.component.html

@@ -0,0 +1,32 @@
+<mat-icon
+  *ngIf="!category"
+  color="primary"
+  class="cursor-pointer"
+  (click)="showCategoryForm(categoryFormTemplate)"
+>
+  add
+</mat-icon>
+
+<mat-icon
+  *ngIf="category"
+  class="cursor-pointer"
+  (click)="showCategoryForm(categoryFormTemplate)"
+>
+  edit
+</mat-icon>
+
+<ng-template #categoryFormTemplate>
+  <h3 mat-dialog-title class="mb-0">
+    {{ category ? "Edit" : "Create" }} Category
+  </h3>
+  <small class="text-secondary mb-1">
+    Note that category names are unique and cannot be duplicated.
+  </small>
+  <div mat-dialog-content>
+    <app-category-form
+      [category]="category"
+      (saved)="onCategorySaved($event)"
+      (cancelled)="matDialog.closeAll()"
+    ></app-category-form>
+  </div>
+</ng-template>

package/src/app/@modules/inventory-common/category/category-form-button/category-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-category-form-button",
+  templateUrl: "./category-form-button.component.html",
+  styleUrls: ["./category-form-button.component.scss"],
+})
+export class CategoryFormButtonComponent {
+  @Input() category: any;
+  @Output() saved: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(public matDialog: MatDialog) {}
+
+  showCategoryForm(templateRef: TemplateRef<any>) {
+    this.matDialog.open(templateRef, { width: "400px" });
+  }
+
+  onCategorySaved(category: any) {
+    this.matDialog.closeAll();
+    this.saved.emit(category);
+  }
+}

package/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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/src/app/@modules/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 { TechlifyFilterModule } from "@modules/techlify-filter/techlify-filter.module";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+
+@NgModule({
+  declarations: [
+    CategoryListPageComponent,
+    CategoryFormButtonComponent,
+    CategoryFormComponent,
+  ],
+  imports: [
+    CommonModule,
+    CategoryRoutingModule,
+    MatCardModule,
+    MatIconModule,
+    MatDialogModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    TechlifyFilterModule,
+    InfiniteScrollModule,
+    MatProgressBarModule,
+  ],
+})
+export class CategoryModule {}

package/src/app/@modules/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/src/app/@modules/inventory-common/inventory-common-routing.module.ts

@@ -0,0 +1,55 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { InventoryDashboardPageComponent } from "./inventory-dashboard-page/inventory-dashboard-page.component";
+
+const routes: Routes = [
+  {
+    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/src/app/@modules/inventory-common/inventory-common.module.ts

@@ -0,0 +1,20 @@
+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 "@modules/inventory-common/product/low-stock-products-widget/low-stock-products-widget.module";
+import { ProductSummaryChartModule } from "@modules/inventory-common/product/product-summary-chart/product-summary-chart.module";
+
+@NgModule({
+  declarations: [InventoryDashboardPageComponent],
+  imports: [
+    CommonModule,
+    InventoryCommonRoutingModule,
+    MaterialModule,
+    LowStockProductsWidgetModule,
+    ProductSummaryChartModule,
+  ],
+})
+export class InventoryCommonModule {}

package/src/app/@modules/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-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 cursor-pointer"
+        >
+          <span class="material-symbols-outlined fs-3"> description </span>
+          <h3 class="mb-0">On Hand 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"
+        >
+          <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>