ADDED website templates #1

2025-07-13 09:32:53 +00:00
parent e467247175
commit 9201f49b5b
330 changed files with 35271 additions and 0 deletions
--- a/Web/themes/modernize/src/app/pages/authentication/authentication.routes.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/authentication.routes.ts
@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+import { AppSideLoginComponent } from './side-login/side-login.component';
+import { AppSideRegisterComponent } from './side-register/side-register.component';
+
+export const AuthenticationRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'login',
+        component: AppSideLoginComponent,
+      },
+      {
+        path: 'register',
+        component: AppSideRegisterComponent,
+      },
+    ],
+  },
+];
--- a/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.html
+++ b/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.html
@@ -0,0 +1,64 @@
+<div class="blank-layout-container justify-content-center align-items-center bg-light">
+  <div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <a [routerLink]="['/dashboard']">
+              <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+            </a>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
+                  <span>
+                    Sign in with Google
+                  </span>
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100 d-flex align-items-center">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign in with</div>
+
+          <form class="m-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput />
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" />
+            </mat-form-field>
+
+            <div class="d-flex align-items-center m-b-12">
+              <mat-checkbox color="primary">Remember this Device</mat-checkbox>
+              <a [routerLink]="['/']" class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password
+                ?</a>
+            </div>
+            <a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
+              Sign In
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24">New to Modernize?
+            <a [routerLink]="['/authentication/register']" class="text-decoration-none text-primary f-w-500 f-s-14">
+              Create an account</a>
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/side-login/side-login.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-side-login',
+  imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './side-login.component.html',
+})
+export class AppSideLoginComponent {
+
+  constructor( private router: Router) {}
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/']);
+  }
+}
--- a/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.html
+++ b/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.html
@@ -0,0 +1,62 @@
+<div class="blank-layout-container justify-content-center align-items-center bg-light">
+  <div class="position-relative row w-100 h-100 bg-gredient justify-content-center">
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <a [routerLink]="['/dashboard']">
+              <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+            </a>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
+                  Sign in with Google
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100 d-flex align-items-center">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign up with</div>
+
+          <form class="m-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput />
+            </mat-form-field>
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Email Adddress</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="email" />
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" />
+            </mat-form-field>
+
+            <a [routerLink]="['/']" mat-flat-button color="primary" class="w-100">
+              Sign Up
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24">Already have an Account?
+
+            <a [routerLink]="['/authentication/login']" class="text-decoration-none text-primary f-w-500 f-s-14">
+              Sign In</a>
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.ts
+++ b/Web/themes/modernize/src/app/pages/authentication/side-register/side-register.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'src/app/material.module';
+
+@Component({
+  selector: 'app-side-register',
+  imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './side-register.component.html',
+})
+export class AppSideRegisterComponent {
+  options = this.settings.getOptions();
+
+  constructor(private settings: CoreService, private router: Router) {}
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    email: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/']);
+  }
+}
--- a/Web/themes/modernize/src/app/pages/extra/extra.routes.ts
+++ b/Web/themes/modernize/src/app/pages/extra/extra.routes.ts
@@ -0,0 +1,22 @@
+import { Routes } from '@angular/router';
+
+
+// pages
+import { AppIconsComponent } from './icons/icons.component';
+import { AppSamplePageComponent } from './sample-page/sample-page.component';
+
+export const ExtraRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'icons',
+        component: AppIconsComponent,
+      },
+      {
+        path: 'sample-page',
+        component: AppSamplePageComponent,
+      },
+    ],
+  },
+];
--- a/Web/themes/modernize/src/app/pages/extra/icons/icons.component.html
+++ b/Web/themes/modernize/src/app/pages/extra/icons/icons.component.html
@@ -0,0 +1,12 @@
+<!-- ============================================================== -->
+<!-- Simple four boxes Row -->
+<!-- ============================================================== -->
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Icons</mat-card-title>
+    <mat-card-subtitle class="m-b-24">Tabler Icons</mat-card-subtitle>
+    <iframe src="https://tabler.io/icons" title="Tabler Icons" width="100%" height="630px"
+      allowfullscreen frameBorder="0">
+    </iframe>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/extra/icons/icons.component.ts
+++ b/Web/themes/modernize/src/app/pages/extra/icons/icons.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'app-icons',
+  imports: [MaterialModule],
+  templateUrl: './icons.component.html',
+})
+export class AppIconsComponent { }
--- a/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.html
+++ b/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.html
@@ -0,0 +1,9 @@
+<!-- ============================================================== -->
+<!-- Simple four boxes Row -->
+<!-- ============================================================== -->
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Sample Page</mat-card-title>
+    <mat-card-subtitle>This is test page</mat-card-subtitle>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.ts
+++ b/Web/themes/modernize/src/app/pages/extra/sample-page/sample-page.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'app-sample-page',
+  imports: [MaterialModule],
+  templateUrl: './sample-page.component.html',
+})
+
+export class AppSamplePageComponent { }
--- a/Web/themes/modernize/src/app/pages/pages.routes.ts
+++ b/Web/themes/modernize/src/app/pages/pages.routes.ts
@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+import { StarterComponent } from './starter/starter.component';
+
+export const PagesRoutes: Routes = [
+  {
+    path: '',
+    component: StarterComponent,
+    data: {
+      title: 'Starter Page',
+      urls: [
+        { title: 'Dashboard', url: '/dashboards/dashboard1' },
+        { title: 'Starter Page' },
+      ],
+    },
+  },
+];
--- a/Web/themes/modernize/src/app/pages/starter/starter.component.html
+++ b/Web/themes/modernize/src/app/pages/starter/starter.component.html
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-lg-8">
+    <app-sales-overview></app-sales-overview>
+  </div>
+  <div class="col-lg-4">
+    <app-yearly-breakup></app-yearly-breakup>
+    <app-monthly-earnings></app-monthly-earnings>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-4">
+    <app-recent-transactions></app-recent-transactions>
+  </div>
+  <div class="col-lg-8">
+    <app-product-performance></app-product-performance>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <app-blog-card></app-blog-card>
+  </div>
+</div>
--- a/Web/themes/modernize/src/app/pages/starter/starter.component.ts
+++ b/Web/themes/modernize/src/app/pages/starter/starter.component.ts
@@ -0,0 +1,25 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MaterialModule } from '../../material.module';
+import { AppSalesOverviewComponent } from 'src/app/components/sales-overview/sales-overview.component';
+import { AppYearlyBreakupComponent } from 'src/app/components/yearly-breakup/yearly-breakup.component';
+import { AppMonthlyEarningsComponent } from 'src/app/components/monthly-earnings/monthly-earnings.component';
+import { AppRecentTransactionsComponent } from 'src/app/components/recent-transactions/recent-transactions.component';
+import { AppProductPerformanceComponent } from 'src/app/components/product-performance/product-performance.component';
+import { AppBlogCardsComponent } from 'src/app/components/blog-card/blog-card.component';
+
+
+@Component({
+  selector: 'app-starter',
+  imports: [
+    MaterialModule,
+    AppSalesOverviewComponent,
+    AppYearlyBreakupComponent,
+    AppMonthlyEarningsComponent,
+    AppRecentTransactionsComponent,
+    AppProductPerformanceComponent,
+    AppBlogCardsComponent
+  ],
+  templateUrl: './starter.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class StarterComponent { }
--- a/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.html
@@ -0,0 +1,51 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Badges</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <div matBadge="4" matBadgeOverlap="false" class="d-inline">Text with a badge</div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <div matBadge="1" matBadgeSize="small" class="d-inline">Text with small badge</div><br /><br />
+        <div matBadge="1" matBadgeSize="large" class="d-inline">Text with large badge</div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p class="f-w-500 text-muted">
+          Button with a badge on the left
+          <button mat-flat-button color="primary" matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+            Action
+          </button>
+        </p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p class="f-w-500 text-muted">
+          Icon with a badge
+          <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+        </p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card class="b-1 shadow-none">
+      <mat-card-content>
+        <p>
+          Button toggles badge visibility
+          <button mat-flat-button color="primary" matBadge="7" [matBadgeHidden]="hidden"
+            (click)="toggleBadgeVisibility()">
+            Hide
+          </button>
+        </p>
+      </mat-card-content>
+    </mat-card>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/badge/badge.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'app-badge',
+  templateUrl: './badge.component.html',
+  imports: [MatBadgeModule, MatButtonModule, MatIconModule, MatCardModule],
+})
+export class AppBadgeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  hidden = false;
+
+  toggleBadgeVisibility() {
+    this.hidden = !this.hidden;
+  }
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.html
@@ -0,0 +1,172 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Chips</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- basic -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-listbox aria-label="Fish selection">
+              <mat-chip-option class="f-s-14" color="primary">One fish</mat-chip-option>
+              <mat-chip-option class="f-s-14">Two fish</mat-chip-option>
+              <mat-chip-option class="f-s-14" color="accent" selected>Accent fish</mat-chip-option>
+              <mat-chip-option class="f-s-14" color="warn">Warn fish</mat-chip-option>
+            </mat-chip-listbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- avatar -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Avatar</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-set aria-label="Dog selection">
+              <mat-chip class="f-s-14">
+                <img matChipAvatar src="/assets/images/profile/user-1.jpg" alt="Photo of a Shiba Inu" />
+                Anderson
+              </mat-chip>
+              <mat-chip class="f-s-14" color="primary">
+                <img matChipAvatar src="/assets/images/profile/user-2.jpg" alt="Photo of a Shiba Inu" />
+                Monty
+              </mat-chip>
+              <mat-chip class="f-s-14" color="accent">
+                <img matChipAvatar src="/assets/images/profile/user-3.jpg" alt="Photo of a Shiba Inu" />
+                Mathew
+              </mat-chip>
+            </mat-chip-set>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Drag n Drop -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Drag n Drop</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-set class="example-chip" cdkDropList cdkDropListOrientation="horizontal"
+              (cdkDropListDropped)="drop($event)">
+              @for (vegetable of vegetables(); track vegetable.name) {
+              <mat-chip class="example-box" cdkDrag>{{
+                vegetable.name
+                }}</mat-chip>
+              }
+            </mat-chip-set>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Stacked  -->
+        <!-- ------------------------------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Stacked </mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
+              @for(chip of availableColors; track chip.color) {
+              <mat-chip-option selected [color]="chip.color">
+                {{ chip.name }}
+              </mat-chip-option>
+              }
+            </mat-chip-listbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Input -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Input</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-form-field appearance="outline" class="w-100">
+              <mat-label>Favorite Fruits</mat-label>
+              <mat-chip-grid #chipGrid aria-label="Enter fruits">
+                @for(fruit of fruits; track fruit.name) {
+                <mat-chip-row (removed)="remove(fruit)" [editable]="true" (edited)="edit(fruit, $event)"
+                  [aria-description]="'press enter to edit ' + fruit.name" class="f-s-14">
+                  {{ fruit.name }}
+                  <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+                }
+
+                <input placeholder="New fruit..." [matChipInputFor]="chipGrid"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
+                  (matChipInputTokenEnd)="add($event)" />
+              </mat-chip-grid>
+            </mat-form-field>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- ------------------------------------------------------------------------- -->
+        <!-- Form Control -->
+        <!-- ------------------------------------------------------------------------- -->
+
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Form Control</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="d-flex gap-8">
+              <button mat-stroked-button color="primary" (click)="formControl.disable()">
+                Disable form control
+              </button>
+              <button mat-raised-button color="primary" (click)="formControl.enable()">
+                Enable form control
+              </button>
+            </div>
+            <mat-form-field appearance="outline" class="w-100 m-t-20">
+              <mat-label>Video keywords</mat-label>
+              <mat-chip-grid #formChip aria-label="Enter keywords" [formControl]="formControl">
+                @for (keyword of keywords(); track keyword) {
+                <mat-chip-row (removed)="removeKeyword(keyword)">
+                  {{ keyword }}
+                  <button matChipRemove aria-label="'remove ' + keyword">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+                }
+              </mat-chip-grid>
+              <input placeholder="New keyword..." [matChipInputFor]="formChip"
+                (matChipInputTokenEnd)="addForm($event)" />
+            </mat-form-field>
+
+            <p>
+              <span class="f-w-600">The following keywords are entered:</span>
+              {{ formControl.value }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.scss
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.scss
@@ -0,0 +1,7 @@
+.example-box.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-chip .cdk-drop-list-dragging {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/chips/chips.component.ts
@@ -0,0 +1,161 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { ThemePalette } from '@angular/material/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import { MatCardModule } from '@angular/material/card';
+import {
+  MatChipEditedEvent,
+  MatChipInputEvent,
+  MatChipsModule,
+} from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { MatButtonModule } from '@angular/material/button';
+
+export interface ChipColor {
+  name: string;
+  color: ThemePalette;
+}
+
+export interface Fruit {
+  name: string;
+}
+
+export interface Vegetable {
+  name: string;
+}
+
+@Component({
+  selector: 'app-chips',
+  templateUrl: './chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+  imports: [
+    MatFormFieldModule,
+    MatChipsModule,
+    MatIconModule,
+    MatCardModule,
+    CdkDropList,
+    CdkDrag,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppChipsComponent {
+  // drag n drop
+  readonly vegetables = signal<Vegetable[]>([
+    { name: 'apple' },
+    { name: 'banana' },
+    { name: 'strawberry' },
+    { name: 'orange' },
+    { name: 'kiwi' },
+    { name: 'cherry' },
+  ]);
+
+  drop(event: CdkDragDrop<Vegetable[]>) {
+    this.vegetables.update((vegetables) => {
+      moveItemInArray(vegetables, event.previousIndex, event.currentIndex);
+      return [...vegetables];
+    });
+  }
+
+  //
+  // Stacked
+  //
+  availableColors: ChipColor[] = [
+    { name: 'Primary', color: 'primary' },
+    { name: 'Accent', color: 'accent' },
+    { name: 'Warn', color: 'warn' },
+  ];
+
+  //
+  //  chips with input
+  //
+  addOnBlur = true;
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  fruits: Fruit[] = [{ name: 'Lemon' }, { name: 'Lime' }, { name: 'Apple' }];
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our fruit
+    if (value) {
+      this.fruits.push({ name: value });
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+
+  remove(fruit: Fruit): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+
+  edit(fruit: Fruit, event: MatChipEditedEvent) {
+    const value = event.value.trim();
+
+    // Remove fruit if it no longer has a name
+    if (!value) {
+      this.remove(fruit);
+      return;
+    }
+
+    // Edit existing fruit
+    const index = this.fruits.indexOf(fruit);
+    if (index >= 0) {
+      this.fruits[index].name = value;
+    }
+  }
+
+  // form control
+
+  readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
+  readonly formControl = new FormControl(['angular']);
+
+  announcer = inject(LiveAnnouncer);
+
+  removeKeyword(keyword: string) {
+    this.keywords.update(keywords => {
+      const index = keywords.indexOf(keyword);
+      if (index < 0) {
+        return keywords;
+      }
+
+      keywords.splice(index, 1);
+      this.announcer.announce(`removed ${keyword}`);
+      return [...keywords];
+    });
+  }
+
+  addForm(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our keyword
+    if (value) {
+      this.keywords.update(keywords => [...keywords, value]);
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+}
+function isDragDrop(object: any): object is CdkDragDrop<string[]> {
+  return 'previousIndex' in object;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.html
@@ -0,0 +1,73 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Form</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <form>
+      <div class="row">
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Your Name</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput placeholder="your name " />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">Country</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedCountry">
+              @for(option of country; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Email</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput type="email" placeholder="your email" />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">State</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedState">
+              @for(option of state; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <!-- input -->
+          <mat-label class="f-w-600 m-b-8 d-block">Password</mat-label>
+          <mat-form-field appearance="outline" class="w-100" color="primary">
+            <input matInput type="password" placeholder="your password" />
+          </mat-form-field>
+        </div>
+        <div class="col-lg-6">
+          <mat-label class="f-w-600 m-b-8 d-block">City</mat-label>
+          <mat-form-field appearance="outline" class="w-100">
+            <mat-select [(value)]="selectedCity">
+              @for(option of city; track option.value) {
+              <mat-option [value]="option.value">{{
+                option.viewValue
+                }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div class="m-t-12">
+        <button mat-flat-button color="primary" class="m-r-8">Submit</button>
+        <button mat-stroked-button color="warn">Cancel</button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/forms/forms.component.ts
@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+
+interface Food {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  selector: 'app-forms',
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatCardModule,
+    MatInputModule,
+    MatCheckboxModule,
+  ],
+  templateUrl: './forms.component.html',
+})
+export class AppFormsComponent {
+  country: Food[] = [
+    { value: 'steak-0', viewValue: 'USA' },
+    { value: 'pizza-1', viewValue: 'India' },
+    { value: 'tacos-2', viewValue: 'France' },
+    { value: 'tacos-3', viewValue: 'UK' },
+  ];
+
+  selectedCountry = this.country[2].value;
+
+  city: Food[] = [
+    { value: 'steak-0', viewValue: 'Mexico' },
+    { value: 'pizza-1', viewValue: 'Mumbai' },
+    { value: 'tacos-2', viewValue: 'Tokyo' },
+    { value: 'tacos-3', viewValue: 'New York' },
+  ];
+
+  selectedCity = this.city[1].value;
+
+  state: Food[] = [
+    { value: 'steak-0', viewValue: 'Cuba' },
+    { value: 'pizza-1', viewValue: 'Djibouti' },
+    { value: 'tacos-2', viewValue: 'Bulgaria' },
+    { value: 'tacos-3', viewValue: 'Cabo Verde' },
+  ];
+
+  selectedState = this.state[3].value;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.html
@@ -0,0 +1,197 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Lists</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- basic -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list role="list">
+              <mat-list-item role="listitem">Item 1</mat-list-item>
+              <mat-list-item role="listitem">Item 2</mat-list-item>
+              <mat-list-item role="listitem">Item 3</mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Two Line</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+              </mat-list-item>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Three Line</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line</span>
+                <span matListItemLine>Third line</span>
+              </mat-list-item>
+              <mat-list-item>
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span matListItemLine>Second line. This line will truncate.</span>
+                <span>Third line</span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- two line -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Three Line with Text wrapping</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list style="max-width: 500px">
+              <mat-list-item lines="3">
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span>Secondary line that will wrap because the list lines is
+                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
+                  or `matListItemLine` will never wrap.
+                </span>
+              </mat-list-item>
+              <mat-list-item lines="3">
+                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
+                <span>Secondary line that will wrap because the list lines is
+                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
+                  or `matListItemLine` will never wrap.
+                </span>
+              </mat-list-item>
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- List with Selection -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with Selection</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-selection-list #shoes>
+              @for(shoe of typesOfShoes; track shoe) {
+              <mat-list-option>
+                {{ shoe }}
+              </mat-list-option>
+              }
+            </mat-selection-list>
+
+            <p class="f-w-600 p-16 bg-light-primary rounded">
+              Options selected: {{ shoes.selectedOptions.selected.length }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <!-- --------------------------------------------------- -->
+        <!-- List with single Selection -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with single Selection</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-selection-list #shoes2 [multiple]="false">
+              @for(shoe of typesOfShoes; track shoe) {
+              <mat-list-option [value]="shoe">
+                {{ shoe }}
+              </mat-list-option>
+              }
+            </mat-selection-list>
+
+            <p class="f-w-600 p-16 bg-light-primary rounded">
+              Option selected:
+              {{
+              shoes2.selectedOptions.hasValue()
+              ? shoes2.selectedOptions.selected[0].value
+              : "None"
+              }}
+            </p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <!-- --------------------------------------------------- -->
+        <!-- List with sections -->
+        <!-- --------------------------------------------------- -->
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>List with sections</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-list>
+              <div mat-subheader class="m-b-16 f-w-600">Folders</div>
+              @for(folder of folders; track folder.name) {
+              <mat-list-item>
+                <mat-icon matListItemIcon>folder</mat-icon>
+                <div matListItemTitle class="f-w-600">
+                  {{ folder.name }}
+                </div>
+                <div matListItemLine class="f-s-14 ">
+                  {{ folder.updated | date }}
+                </div>
+              </mat-list-item>
+              }
+
+              <mat-divider></mat-divider>
+              <div mat-subheader class="m-y-16 f-w-600">Notes</div>
+              @for(note of notes; track note.name) {
+              <mat-list-item>
+                <mat-icon matListItemIcon>note</mat-icon>
+                <div matListItemTitle class="f-w-600">
+                  {{ note.name }}
+                </div>
+                <div matListItemLine class="f-s-14 ">
+                  {{ note.updated | date }}
+                </div>
+              </mat-list-item>
+              }
+            </mat-list>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/lists/lists.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import {MatIconModule} from '@angular/material/icon';
+import {DatePipe} from '@angular/common';
+import { MaterialModule } from 'src/app/material.module';
+
+
+export interface Section {
+  name: string;
+  updated: Date;
+}
+
+@Component({
+  selector: 'app-lists',
+  imports: [MatListModule, MatCardModule, DatePipe,MatIconModule, MaterialModule ],
+  templateUrl: './lists.component.html',
+})
+export class AppListsComponent {
+  constructor() {}
+
+  typesOfShoes: string[] = ['Loafers', 'Sneakers'];
+
+  folders: Section[] = [
+    {
+      name: 'Photos',
+      updated: new Date('1/1/25'),
+    },
+    {
+      name: 'Recipes',
+      updated: new Date('1/17/25'),
+    },
+    {
+      name: 'Work',
+      updated: new Date('1/28/25'),
+    },
+  ];
+  notes: Section[] = [
+    {
+      name: 'Vacation Itinerary',
+      updated: new Date('2/20/25'),
+    },
+    {
+      name: 'Kitchen Remodel',
+      updated: new Date('1/18/25'),
+    },
+  ];
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.html
@@ -0,0 +1,166 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Menu</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" class="m-t-8" [matMenuTriggerFor]="menu">
+              Menu
+            </button>
+            <mat-menu #menu="matMenu" class="cardWithShadow">
+              <button mat-menu-item>Item 1</button>
+              <button mat-menu-item>Item 2</button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>with Icons</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+              <mat-icon>
+                <i-tabler name="dots" class="icon-20"></i-tabler>
+              </mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" class="cardWithShadow">
+              <button mat-menu-item>
+                <mat-icon>dialpad</mat-icon>
+                <span>Redial</span>
+              </button>
+              <button mat-menu-item disabled>
+                <mat-icon>voicemail</mat-icon>
+                <span>Check voice mail</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>notifications_off</mat-icon>
+                <span>Disable alerts</span>
+              </button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Nested Menu</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" [matMenuTriggerFor]="animals" class="m-t-8">
+              Animal index
+            </button>
+            <mat-menu class="cardWithShadow" #animals="matMenu">
+              <button mat-menu-item [matMenuTriggerFor]="vertebrates">
+                Vertebrates
+              </button>
+              <button mat-menu-item [matMenuTriggerFor]="invertebrates">
+                Invertebrates
+              </button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #vertebrates="matMenu">
+              <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
+              <button mat-menu-item [matMenuTriggerFor]="amphibians">
+                Amphibians
+              </button>
+              <button mat-menu-item [matMenuTriggerFor]="reptiles">
+                Reptiles
+              </button>
+              <button mat-menu-item>Birds</button>
+              <button mat-menu-item>Mammals</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #invertebrates="matMenu">
+              <button mat-menu-item>Insects</button>
+              <button mat-menu-item>Molluscs</button>
+              <button mat-menu-item>Crustaceans</button>
+              <button mat-menu-item>Corals</button>
+              <button mat-menu-item>Arachnids</button>
+              <button mat-menu-item>Velvet worms</button>
+              <button mat-menu-item>Horseshoe crabs</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #fish="matMenu">
+              <button mat-menu-item>Baikal oilfish</button>
+              <button mat-menu-item>Bala shark</button>
+              <button mat-menu-item>Ballan wrasse</button>
+              <button mat-menu-item>Bamboo shark</button>
+              <button mat-menu-item>Banded killifish</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #amphibians="matMenu">
+              <button mat-menu-item>Sonoran desert toad</button>
+              <button mat-menu-item>Western toad</button>
+              <button mat-menu-item>Arroyo toad</button>
+              <button mat-menu-item>Yosemite toad</button>
+            </mat-menu>
+
+            <mat-menu class="cardWithShadow" #reptiles="matMenu">
+              <button mat-menu-item>Banded Day Gecko</button>
+              <button mat-menu-item>Banded Gila Monster</button>
+              <button mat-menu-item>Black Tree Monitor</button>
+              <button mat-menu-item>Blue Spiny Lizard</button>
+              <button mat-menu-item disabled>Velociraptor</button>
+            </mat-menu>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-12">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Positions</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="row">
+              <div class="col-sm-3">
+                <button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="aboveMenu">
+                  Above
+                </button>
+                <mat-menu class="cardWithShadow" #aboveMenu="matMenu" yPosition="above">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="accent" class="w-100" [matMenuTriggerFor]="belowMenu">
+                  Below
+                </button>
+                <mat-menu class="cardWithShadow" #belowMenu="matMenu" yPosition="below">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="warn" class="w-100" [matMenuTriggerFor]="beforeMenu">
+                  Before
+                </button>
+                <mat-menu class="cardWithShadow" #beforeMenu="matMenu" xPosition="before">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+              <div class="col-sm-3">
+                <button mat-flat-button color="primary" class="w-100" [matMenuTriggerFor]="afterMenu">
+                  After
+                </button>
+                <mat-menu class="cardWithShadow" #afterMenu="matMenu" xPosition="after">
+                  <button mat-menu-item>Item 1</button>
+                  <button mat-menu-item>Item 2</button>
+                </mat-menu>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/menu/menu.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+  selector: 'app-menu',
+  imports: [MatCardModule, MatMenuModule, MatIconModule, TablerIconsModule, MatButtonModule],
+  templateUrl: './menu.component.html',
+})
+export class AppMenuComponent {
+  constructor() {}
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.html
@@ -0,0 +1,102 @@
+<mat-card class="cardWithShadow">
+  <mat-card-content>
+    <mat-card-title>Table</mat-card-title>
+
+    <div class="table-responsive">
+      <table mat-table [dataSource]="dataSource1" class="w-100">
+        <!-- Position Column -->
+        <ng-container matColumnDef="assigned">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14 p-l-0">
+            Product
+          </th>
+          <td mat-cell *matCellDef="let element" class="p-l-0">
+            <div class="d-flex align-items-center">
+              <img [src]="element.imagePath" alt="users" width="60" class="rounded" />
+              <div class="m-l-16">
+                <h6 class="f-s-14 f-w-600">
+                  {{ element.uname }}
+                </h6>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+            Payment
+          </th>
+          <td mat-cell *matCellDef="let element">
+            @if(element.budget >= 160) {
+            <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+            </h6>
+            <span class="f-s-14 f-w-500 d-block m-b-4">Full paid</span>
+            <mat-progress-bar mode="determinate" value="80" color="primary"></mat-progress-bar>
+            } @else if(element.budget > 119) {
+            <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+            </h6>
+            <span class="f-s-14 f-w-500 d-block m-b-4">Partially paid</span>
+            <mat-progress-bar mode="determinate" class="mat-error" value="35" color="accent"></mat-progress-bar>
+            } @else if(element.budget < 100) { <h6 class=" f-s-16 m-b-4">
+              <span class="text-dark f-w-600">${{ element.budget }} </span>/ 499
+              </h6>
+              <span class="f-s-14 f-w-500 d-block m-b-4">Cancelled</span>
+              <mat-progress-bar mode="determinate" class="mat-warning" value="50" color="warn"></mat-progress-bar>
+              }
+          </td>
+        </ng-container>
+
+        <!-- Weight Column -->
+        <ng-container matColumnDef="priority">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14">
+            Status
+          </th>
+          <td mat-cell *matCellDef="let element">
+            @if(element.priority == 'cancelled') {
+            <span class="bg-light-warning text-warning rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            } @if(element.priority == 'rejected') {
+            <span class="bg-light-error text-error rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            } @if(element.priority == 'confirmed') {
+            <span class="bg-light-success text-success rounded f-w-600 p-6 p-y-4 f-s-12">
+              {{ element.priority | titlecase }}
+            </span>
+            }
+          </td>
+        </ng-container>
+
+        <!-- Symbol Column -->
+        <ng-container matColumnDef="budget">
+          <th mat-header-cell *matHeaderCellDef class="f-w-600 f-s-14"></th>
+          <td mat-cell *matCellDef="let element">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+              <button mat-menu-item>
+                <mat-icon>add</mat-icon>
+                <span>Add</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>edit</mat-icon>
+                <span>Edit</span>
+              </button>
+              <button mat-menu-item>
+                <mat-icon>delete</mat-icon>
+                <span>Delete</span>
+              </button>
+            </mat-menu>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns1"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns1"></tr>
+      </table>
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/tables/tables.component.ts
@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MaterialModule } from 'src/app/material.module';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+
+// table 1
+export interface productsData {
+  id: number;
+  imagePath: string;
+  uname: string;
+  budget: number;
+  priority: string;
+}
+
+const PRODUCT_DATA: productsData[] = [
+  {
+    id: 1,
+    imagePath: 'assets/images/products/product-1.png',
+    uname: 'iPhone 13 pro max-Pacific Blue-128GB storage',
+    budget: 180,
+    priority: 'confirmed',
+  },
+  {
+    id: 2,
+    imagePath: 'assets/images/products/product-2.png',
+    uname: 'Apple MacBook Pro 13 inch-M1-8/256GB-space',
+    budget: 90,
+    priority: 'cancelled',
+  },
+  {
+    id: 3,
+    imagePath: 'assets/images/products/product-3.png',
+    uname: 'PlayStation 5 DualSense Wireless Controller',
+    budget: 120,
+    priority: 'rejected',
+  },
+  {
+    id: 4,
+    imagePath: 'assets/images/products/product-4.png',
+    uname: 'Amazon Basics Mesh, Mid-Back, Swivel Office',
+    budget: 160,
+    priority: 'confirmed',
+  },
+];
+
+@Component({
+  selector: 'app-tables',
+  imports: [
+    MatTableModule,
+    CommonModule,
+    MatCardModule,
+    MaterialModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+  ],
+  templateUrl: './tables.component.html',
+})
+export class AppTablesComponent {
+  // table 1
+  displayedColumns1: string[] = ['assigned', 'name', 'priority', 'budget'];
+  dataSource1 = PRODUCT_DATA;
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.html
+++ b/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.html
@@ -0,0 +1,128 @@
+<mat-card class="cardWithShadow theme-card">
+  <mat-card-header>
+    <mat-card-title class="m-b-0">Tooltips</mat-card-title>
+  </mat-card-header>
+  <mat-card-content class="b-t-1">
+    <div class="row">
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Basic</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action">
+              Button
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Uppercase</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipClass="text-uppercase">
+              Button
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Disabled on click</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" matTooltip="Info about the action"
+              [matTooltipDisabled]="disabled.value" class="m-r-8">
+              Action
+            </button>
+
+            <mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
+              Tooltip disabled
+            </mat-checkbox>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Position</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="below" matTooltipHideDelay="100000">
+              Below
+            </button>
+            <button mat-flat-button color="accent" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="above" class="m-l-8" matTooltipHideDelay="100000">
+              Above
+            </button>
+            <button mat-flat-button color="warn" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="left" class="m-l-8" matTooltipHideDelay="100000">
+              Left
+            </button>
+            <button mat-flat-button color="primary" #tooltip="matTooltip" matTooltip="Info about the action"
+              matTooltipPosition="right" class="m-l-8" matTooltipHideDelay="100000">
+              Right
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Show and Hide</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <div class="row">
+              <div class="col-sm-4">
+                <mat-form-field class="w-100" appearance="outline">
+                  <mat-label>Show delay</mat-label>
+                  <input matInput type="number" [formControl]="showDelay" />
+                  <mat-hint>milliseconds</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="col-sm-4">
+                <mat-form-field class="w-100" appearance="outline">
+                  <mat-label>Hide delay</mat-label>
+                  <input matInput type="number" [formControl]="hideDelay2" />
+                  <mat-hint>milliseconds</mat-hint>
+                </mat-form-field>
+              </div>
+              <div class="col-sm-4">
+                <button mat-flat-button color="primary" matTooltip="Info about the action"
+                  [matTooltipShowDelay]="showDelay.value" [matTooltipHideDelay]="hideDelay2.value">
+                  Action
+                </button>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+      <div class="col-lg-4 col-sm-6">
+        <mat-card class="b-1 shadow-none">
+          <mat-card-header>
+            <mat-card-title>Change Message</mat-card-title>
+          </mat-card-header>
+          <mat-card-content class="b-t-1">
+            <mat-form-field class="w-100" appearance="outline">
+              <mat-label>Tooltip message</mat-label>
+              <input matInput [formControl]="message" />
+            </mat-form-field>
+
+            <button mat-flat-button color="primary" [matTooltip]="message.value || ''"
+              aria-label="Button that displays a tooltip with a custom message">
+              Action
+            </button>
+          </mat-card-content>
+        </mat-card>
+      </div>
+
+    </div>
+  </mat-card-content>
+</mat-card>
--- a/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/tooltips/tooltips.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'app-tooltips',
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatTooltipModule, MatCardModule, MatInputModule, MatCheckboxModule
+  ],
+  templateUrl: './tooltips.component.html',
+})
+export class AppTooltipsComponent {
+  //  disabled
+  disabled = new FormControl(false);
+
+  // show and hide
+  showDelay = new FormControl(1000);
+  hideDelay2 = new FormControl(2000);
+
+  // change message
+  message = new FormControl('Info about the action');
+}
--- a/Web/themes/modernize/src/app/pages/ui-components/ui-components.routes.ts
+++ b/Web/themes/modernize/src/app/pages/ui-components/ui-components.routes.ts
@@ -0,0 +1,46 @@
+import { Routes } from '@angular/router';
+
+// ui
+import { AppBadgeComponent } from './badge/badge.component';
+import { AppChipsComponent } from './chips/chips.component';
+import { AppListsComponent } from './lists/lists.component';
+import { AppMenuComponent } from './menu/menu.component';
+import { AppTooltipsComponent } from './tooltips/tooltips.component';
+import { AppFormsComponent } from './forms/forms.component';
+import { AppTablesComponent } from './tables/tables.component';
+
+export const UiComponentsRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'badge',
+        component: AppBadgeComponent,
+      },
+      {
+        path: 'chips',
+        component: AppChipsComponent,
+      },
+      {
+        path: 'lists',
+        component: AppListsComponent,
+      },
+      {
+        path: 'menu',
+        component: AppMenuComponent,
+      },
+      {
+        path: 'tooltips',
+        component: AppTooltipsComponent,
+      },
+      {
+        path: 'forms',
+        component: AppFormsComponent,
+      },
+      {
+        path: 'tables',
+        component: AppTablesComponent,
+      },
+    ],
+  },
+];