Chore: Removed Mat Card from everywhere.

Chore: Removed the Toaster Service.
Chore: Updated to Material Theme 3

bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html

@@ -1,71 +1,61 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Sale Category</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Discount Limit</mat-label>
-          <input matInput type="number" formControlName="discountLimit" class="right-align" />
-          <span matSuffix>%</span>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Tax</mat-label>
-          <mat-select formControlName="tax">
-            @for (t of taxes; track t) {
-              <mat-option [value]="t.id">
-                {{ t.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Products</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/products', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2>Sale Category</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Discount Limit</mat-label>
+      <input matInput type="number" formControlName="discountLimit" class="right-align" />
+      <span matSuffix>%</span>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Tax</mat-label>
+      <mat-select formControlName="tax">
+        @for (t of taxes; track t) {
+          <mat-option [value]="t.id">
+            {{ t.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<mat-divider></mat-divider>
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
 
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
-      </ng-container>
+<h2>Products</h2>
+<mat-table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/products', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Menu Category Column -->
-      <ng-container matColumnDef="menuCategory">
-        <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Menu Category Column -->
+  <ng-container matColumnDef="menuCategory">
+    <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts

@@ -2,12 +2,13 @@ import { CurrencyPipe } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { round } from 'mathjs';
@@ -16,7 +17,6 @@ import { BehaviorSubject } from 'rxjs';
 import { Product } from '../../core/product';
 import { SaleCategory } from '../../core/sale-category';
 import { Tax } from '../../core/tax';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { SaleCategoryService } from '../sale-category.service';
 import { SaleCategoryDetailDatasource } from './sale-category-detail-datasource';
@@ -28,11 +28,12 @@ import { SaleCategoryDetailDatasource } from './sale-category-detail-datasource'
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
+    MatDividerModule,
     MatTableModule,
     ReactiveFormsModule,
     RouterLink,
@@ -42,7 +43,7 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleCategoryService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -96,11 +97,11 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sale-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -108,11 +109,11 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sale-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }

bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html

@@ -1,37 +1,31 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Sale Categories</mat-card-title>
-      <a mat-button [routerLink]="['/sale-categories', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/sale-categories', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Sale Categories</span>
+  <a mat-button [routerLink]="['/sale-categories', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/sale-categories', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Discount Limit Column -->
-      <ng-container matColumnDef="discountLimit">
-        <mat-header-cell *matHeaderCellDef>Discount Limit</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.discountLimit | percent: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Discount Limit Column -->
+  <ng-container matColumnDef="discountLimit">
+    <mat-header-cell *matHeaderCellDef>Discount Limit</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.discountLimit | percent: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Tax Column -->
-      <ng-container matColumnDef="tax">
-        <mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.tax.rate | percent: '1.2-2' }} {{ row.tax.name }}</mat-cell>
-      </ng-container>
+  <!-- Tax Column -->
+  <ng-container matColumnDef="tax">
+    <mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.tax.rate | percent: '1.2-2' }} {{ row.tax.name }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts

@@ -1,14 +1,13 @@
 import { PercentPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
 import { SaleCategory } from '../../core/sale-category';
-import { ToasterService } from '../../core/toaster.service';
 import { SaleCategoryService } from '../sale-category.service';
 import { SaleCategoryListDatasource } from './sale-category-list-datasource';
 
@@ -16,12 +15,12 @@ import { SaleCategoryListDatasource } from './sale-category-list-datasource';
   selector: 'app-sale-category-list',
   templateUrl: './sale-category-list.component.html',
   styleUrls: ['./sale-category-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
 })
 export class SaleCategoryListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleCategoryService);
 
   // @ViewChild('table', { static: true }) table?: MatTable<SaleCategory>;