+ Do you need a highly customizable and developer friendly premium
+ Angular admin template packed with numerous features? Modernize
+ Angular Admin Template has everything you need. This bootstrap based
+ admin template is designed in accordance with industry standards and
+ best practices to provide you.
+
+
+
+
+
+
+
+
+
+ The hassle-free setup process
+
+
+ @for(topcard of setupCards; track topcard.title) {
+
+
+
+
+ @if(topcard.id!==2){
+
+ }
+
+
+ {{ topcard.title }}
+
+
+ {{ topcard.subtitle }}
+
+ @if(topcard.id===2){
+
+ }
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
Key metric at a glance
+
+ From the year we were founded to the impressive customer base
+ we've built, and the growth percentages that reflect our
+ continuous improvement, these numbers tell our story at a glance.
+ Explore the data that drives our mission and underscores our
+ commitment to excellence.
+
+
+
+
+
+ @for (stat of stats; track stat) {
+
+
+
+ {{ stat.label }}
+
+
+ {{ stat.value }}
+
+
{{ stat.description }}
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ What our clients think
+ about us?
+
+
+ Our users' feedback is a testament to our commitment to quality
+ and user satisfaction. Read what they have to say about their
+ journey with us.
+
+
+
+
+
+
+ Features availability
+
+
+
+
+
+
{{ currentUser().name }}
+
+
+
+ Our users' feedback is a testament to our commitment to quality
+ and user satisfaction. Read what they have to say about their
+ journey with us.
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+ industry's standard dummy text ever since
+ the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
+ has survived not only five centuries,
+ but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the
+
+
+
Vivamus eu lacus scelerisque, placerat commodo lectus.
+
Etiam et ante at ex porta fringilla.
+
Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus
+
+
+ Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
+ only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
+ popularised in the
+
+
+
+ We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
+ helping businesses from new startups
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour, or randomised words which don't look even slightly believable making this the
+ first true generator on the Internet. It uses a dictionary
+
+ Do you need a highly customizable and developer friendly premium
+ Angular admin template packed with numerous features? Modernize
+ Angular Admin Template has everything you need. This bootstrap based
+ admin template is designed in accordance with industry standards and
+ best practices to provide you.
+
+
+
+
+
+
+
+
+
+ The hassle-free setup process
+
+
+ @for(topcard of setupCards; track topcard.title) {
+
+
+
+
+ @if(topcard.id!==2){
+
+ }
+
+
+ {{ topcard.title }}
+
+
+ {{ topcard.subtitle }}
+
+ @if(topcard.id===2){
+
+ }
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
Key metric at a glance
+
+ From the year we were founded to the impressive customer base
+ we've built, and the growth percentages that reflect our
+ continuous improvement, these numbers tell our story at a glance.
+ Explore the data that drives our mission and underscores our
+ commitment to excellence.
+
+
+
+
+
+ @for (stat of stats; track stat) {
+
+
+
+ {{ stat.label }}
+
+
+ {{ stat.value }}
+
+
{{ stat.description }}
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ What our clients think
+ about us?
+
+
+ Our users' feedback is a testament to our commitment to quality
+ and user satisfaction. Read what they have to say about their
+ journey with us.
+
+
+
+
+
+
+ Features availability
+
+
+
+
+
+
{{ currentUser().name }}
+
+
+
+ Our users' feedback is a testament to our commitment to quality
+ and user satisfaction. Read what they have to say about their
+ journey with us.
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+ industry's standard dummy text ever since
+ the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
+ has survived not only five centuries,
+ but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the
+
+
+
Vivamus eu lacus scelerisque, placerat commodo lectus.
+
Etiam et ante at ex porta fringilla.
+
Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus
+
+
+ Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
+ only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
+ popularised in the
+
+
+
+ We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
+ helping businesses from new startups
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+ some form, by injected humour, or randomised words which don't look even slightly believable making this the
+ first true generator on the Internet. It uses a dictionary
+
+ But you cannot figure out what it is or what it can do. MTA web directory
+ is the simplest way in which one can bid on a link, or a few links if they
+ wish to do so. The link directory on MTA displays all of the links it
+ currently has, and does so in alphabetical order, which makes it much
+ easier for someone to find what they are looking for if it is something
+ specific and they do not want to go through all the other sites and links
+ as well. It allows you to start your bid at the bottom and slowly work
+ your way to the top of the list.
+
+
+
+ Gigure out what it is or what it can do. MTA web directory is the simplest
+ way in which one can bid on a link, or a few links if they wish to do so.
+ The link directory on MTA displays all of the links it currently has, and
+ does so in alphabetical order, which makes it much easier for someone to
+ find what they are looking for if it is something specific and they do not
+ want to go through all the other sites and links as well. It allows you to
+ start your bid at the bottom and slowly work your way to the top of the
+
+
+
This is strong text.
+
This is italic text.
+
+
+
Unorder list.
+
+
Gigure out what it is or
+
The links it currently
+
It allows you to start your bid
+
Gigure out what it is or
+
The links it currently
+
It allows you to start your bid
+
+
+
+
Order list.
+
+
Gigure out what it is or
+
The links it currently
+
It allows you to start your bid
+
Gigure out what it is or
+
The links it currently
+
It allows you to start your bid
+
+
+
+
Quotes
+
+
+ Life is short, Smile
+ while you still have teeth!
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+ Get the sample code
+
Step 2 - Get the sample code
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+
+ Create a Firebase project and Set up your app
+
Step 3 - Create a Firebase project and Set up your app
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Install the Firebase Command Line Interface
+
Step 4 - Install the Firebase Command Line Interface
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Deploy and run the web app
+
Step 5 - Deploy and run the web app
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ The Functions Directory
+
Step 6 - The Functions Directory
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Import the Cloud Functions and Firebase Admin modules
+
Step 7 -Import the Cloud Functions and Firebase Admin modules
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Welcome New Users
+
Step 8 - Welcome New Users
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Images moderation
+
Step 9 - Images moderation
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ New Message Notifications
+
Step 10 - New Message Notifications
+
+ This is an example step of the course. You can put anything in here
+ from example codes to videos.
+
+
+ To install the CLI you need to have installed npm which typically
+ comes with NodeJS.To install or upgrade the CLI run the following npm
+ command:
+
+
npm -g install @angular/cli
+
+ To verify that the CLI has been installed correctly, open a console
+ and run:
+
+
ng version
+
Install dependencies
+
To moderate the images we'll need a few Node.js packages:
+ The Google Cloud Vision Client Library for Node.js:
+ @google-cloud/vision to run the image through the Cloud Vision API
+ to detect inappropriate images. The Google Cloud Storage Client Library
+ for Node.js: @google-cloud/storage to download and upload the images
+ from Cloud Storage. A Node.js library allowing us to run processes:
+ child-process-promise to run ImageMagick since the ImageMagick
+ command-line tool comes pre-installed on all Functions instances.
+
+ To install these three packages into your Cloud Functions app, run the
+ following npm install --save command. Make sure that you do this from
+ the functions directory.
+
+ This will install the three packages locally and add them as declared
+ dependencies in your package.js file.
+
+
+
+
+
+
+
+
+ Congratulations!
+
Step 11 - Congratulations!
+
+ You've built a full-fidelity, offline-capable progressive web app by
+ leveraging the power of reusable Web Components and Firebase. Why
+ bother with a native app when you know how to do all that?!
+
+ Sed at diam elit. Vivamus tortor odio, pellentesque eu tincidunt a,
+ aliquet sit amet lorem pellentesque eu tincidunt a, aliquet sit amet
+ lorem.
+
+
+ Cras eget elit semper, congue sapien id, pellentesque diam. Nulla
+ faucibus diam nec fermentum ullamcorper. Praesent sed ipsum ut augue
+ vestibulum malesuada. Duis vitae volutpat odio. Integer sit amet elit ac
+ justo sagittis dignissim.
+
+
+ Vivamus quis metus in nunc semper efficitur eget vitae diam. Proin justo
+ diam, venenatis sit amet eros in, iaculis auctor magna. Pellentesque sit
+ amet accumsan urna, sit amet pretium ipsum. Fusce condimentum venenatis
+ mauris et luctus. Vestibulum ante ipsum primis in faucibus orci luctus
+ et ultrices posuere cubilia curae.
+
diff --git a/theme/packages/main/src/app/pages/apps/task/task.component.scss b/theme/packages/main/src/app/pages/apps/task/task.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/theme/packages/main/src/app/pages/apps/task/task.component.spec.ts b/theme/packages/main/src/app/pages/apps/task/task.component.spec.ts
new file mode 100644
index 0000000..1dd0129
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/task/task.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { AppTaskComponent } from './task.component';
+
+describe('AppTaskComponent', () => {
+ let component: AppTaskComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(
+ waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [AppTaskComponent],
+ imports: [FormsModule],
+ }).compileComponents();
+ }),
+ );
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AppTaskComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ // it('should create', () => {
+ // expect(component).toBeTruthy();
+ // });
+});
diff --git a/theme/packages/main/src/app/pages/apps/task/task.component.ts b/theme/packages/main/src/app/pages/apps/task/task.component.ts
new file mode 100644
index 0000000..e7ae9f9
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/task/task.component.ts
@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { TasksService } from './tasks-service.service';
+import { TaskSection } from './tasks';
+
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { MaterialModule } from 'src/app/material.module';
+import { CommonModule } from '@angular/common';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+ selector: 'app-task',
+ templateUrl: './task.component.html',
+ styleUrls: ['./task.component.scss'],
+ imports: [MaterialModule, CommonModule, TablerIconsModule]
+})
+export class AppTaskComponent {
+ sectionTask: TaskSection[] | null = null;
+ selectedST: TaskSection | undefined = Object.create(null);
+
+ count = 0;
+ totalcount: number | undefined = 0;
+ completedcount: number | undefined = 0;
+ titleTaskSection = '';
+ borderClass = false;
+
+ constructor(public ts: TasksService) {
+ this.sectionTask = ts.getSectionWiseTask();
+ this.remainingTasks();
+ this.totalcount = this.sectionTask?.filter(
+ (st) => st.sectionTaskType === 'task'
+ )?.length;
+ this.completedcount = this.sectionTask?.filter(
+ (st) => st.sectionTaskType === 'task' && st.status
+ )?.length;
+ }
+
+ addTaskSection(funtion: string): void {
+ if (
+ (document.getElementById('rightMenu') as HTMLFormElement).style.width ===
+ '300px'
+ ) {
+ this.closeRightMenu();
+ return;
+ }
+ (document.getElementById('rightMenu') as HTMLFormElement).style.width =
+ '300px';
+ if (funtion === 'task') {
+ this.titleTaskSection = 'Task';
+
+ const task = new TaskSection();
+ task.status = false;
+ task.sectionTaskType = 'task';
+ task.title = 'Task';
+ task.priority = 'normal';
+ this.sectionTask?.splice(0, 0, task);
+ this.sectionTask?.push(task);
+ this.selectedST = this.sectionTask?.find((tk) => tk === task);
+ } else {
+ this.titleTaskSection = 'Section';
+ const section: TaskSection = new TaskSection();
+ section.status = false;
+ section.sectionTaskType = 'section';
+ section.title = 'Section';
+ section.priority = 'normal';
+ this.sectionTask?.splice(0, 0, section);
+ this.sectionTask?.push(section);
+ this.selectedST = this.sectionTask?.find((sec) => sec === section);
+ }
+ this.remainingTasks();
+ }
+
+ sectionTaskSelected(selected: TaskSection): void {
+ if (
+ (document.getElementById('rightMenu') as HTMLFormElement).style.width ===
+ '300px'
+ ) {
+ this.closeRightMenu();
+ return;
+ }
+ (document.getElementById('rightMenu') as HTMLFormElement).style.width =
+ '300px';
+ if (selected.sectionTaskType === 'section') {
+ this.titleTaskSection = 'Section';
+ } else {
+ this.titleTaskSection = 'Task';
+ }
+ this.selectedST = selected;
+ this.selectedST.border = true;
+ }
+
+ closeRightMenu(): void {
+ (document.getElementById('rightMenu') as HTMLFormElement).style.width = '0';
+ if (this.selectedST !== undefined) {
+ this.selectedST.border = false;
+ }
+ this.selectedST = undefined;
+ }
+
+ remainingTasks(): void {
+ this.count = 0;
+ if (this.sectionTask) {
+ for (const st of this.sectionTask) {
+ if (st.sectionTaskType === 'task') {
+ if (!st.status) {
+ this.count++;
+ }
+ }
+ }
+ }
+ }
+
+ checkboxValue($event: any, st: TaskSection): void {
+ st.status = $event.currentTarget.checked;
+ this.remainingTasks();
+ }
+
+ deleteClick(object: TaskSection): void {
+ if (this.sectionTask !== null) {
+ this.sectionTask = this.sectionTask.filter((tks) => tks !== object);
+ }
+ this.remainingTasks();
+ this.closeRightMenu();
+ }
+
+ drop(event: any): void {
+ if (this.sectionTask !== null) {
+ moveItemInArray(
+ this.sectionTask,
+ event.previousIndex,
+ event.currentIndex
+ );
+ }
+ }
+}
diff --git a/theme/packages/main/src/app/pages/apps/task/tasks-data.ts b/theme/packages/main/src/app/pages/apps/task/tasks-data.ts
new file mode 100644
index 0000000..e750fc2
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/task/tasks-data.ts
@@ -0,0 +1,136 @@
+import { TaskSection } from './tasks';
+
+export const sectionWiseTask: TaskSection[] = [
+ {
+ Id: 101,
+ status: false,
+ title: 'Design the solution',
+ priority: 'normal',
+ dueDate: '25-05-2024',
+ notes:
+ "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+ sectionTaskType: 'section',
+ border: false,
+ },
+ {
+ Id: 102,
+ status: true,
+ title: 'Identify resources to be monitored.',
+ priority: 'low',
+ dueDate: '25-05-2024',
+ notes:
+ 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 103,
+ status: false,
+ title: 'Define users and workflow',
+ priority: 'low',
+ dueDate: '25-05-2024',
+ notes:
+ "Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 104,
+ status: false,
+ title: 'Identify event sources by resource type.',
+ priority: 'high',
+ dueDate: '25-05-2024',
+ notes:
+ 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 105,
+ status: false,
+ title: 'Define the relationship between resources and business systems.',
+ priority: 'normal',
+ dueDate: '25-05-2024',
+ notes:
+ "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.",
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 106,
+ status: true,
+ title: 'Identify tasks and URLs by resource type.',
+ priority: 'high',
+ dueDate: '25-05-2024',
+ notes:
+ 'It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 107,
+ status: false,
+ title: 'Prepare for implementation',
+ priority: 'normal',
+ dueDate: '31-05-2015',
+ notes:
+ 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33.',
+ sectionTaskType: 'section',
+ border: false,
+ },
+ {
+ Id: 108,
+ status: true,
+ title: 'Identify the implementation team.',
+ priority: 'low',
+ dueDate: '14-01-2024',
+ notes:
+ 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 109,
+ status: false,
+ title: 'Order the server hardware for production assurance (QA).',
+ priority: 'low',
+ dueDate: '15-11-2024',
+ notes:
+ 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 110,
+ status: false,
+ title: 'Order console machines.',
+ priority: 'low',
+ dueDate: '09-01-2015',
+ notes:
+ 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 111,
+ status: true,
+ title: 'Order prerequisite software.',
+ priority: 'normal',
+ dueDate: '21-12-2016',
+ notes:
+ 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.',
+ sectionTaskType: 'task',
+ border: false,
+ },
+ {
+ Id: 112,
+ status: true,
+ title: 'Identify production LPARs.',
+ priority: 'high',
+ dueDate: '19-01-2024',
+ notes:
+ 'Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise',
+ sectionTaskType: 'task',
+ border: false,
+ },
+];
diff --git a/theme/packages/main/src/app/pages/apps/task/tasks-service.service.ts b/theme/packages/main/src/app/pages/apps/task/tasks-service.service.ts
new file mode 100644
index 0000000..e48d234
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/task/tasks-service.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { sectionWiseTask } from './tasks-data';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class TasksService {
+ public sidebarShow = false;
+
+ constructor() {}
+
+ public getSectionWiseTask(): any {
+ return sectionWiseTask;
+ }
+}
diff --git a/theme/packages/main/src/app/pages/apps/task/tasks.ts b/theme/packages/main/src/app/pages/apps/task/tasks.ts
new file mode 100644
index 0000000..39ec001
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/task/tasks.ts
@@ -0,0 +1,10 @@
+export class TaskSection {
+ public Id = 202;
+ public status = false;
+ public title = '';
+ public priority = '';
+ public dueDate = '';
+ public notes = '';
+ public border = false;
+ public sectionTaskType = '';
+}
diff --git a/theme/packages/main/src/app/pages/apps/tickets/ticket-dialog-content.html b/theme/packages/main/src/app/pages/apps/tickets/ticket-dialog-content.html
new file mode 100644
index 0000000..19f96d5
--- /dev/null
+++ b/theme/packages/main/src/app/pages/apps/tickets/ticket-dialog-content.html
@@ -0,0 +1,132 @@
+@if(action !== 'Delete') {
+
+
+
+
+ Already have an Account?
+
+
+ Sign In
+
+
+
+
+
+
diff --git a/theme/packages/main/src/app/pages/authentication/boxed-register/boxed-register.component.ts b/theme/packages/main/src/app/pages/authentication/boxed-register/boxed-register.component.ts
new file mode 100644
index 0000000..7377e15
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/boxed-register/boxed-register.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+import {
+ FormGroup,
+ FormControl,
+ Validators,
+ FormsModule,
+ ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+ selector: 'app-boxed-register',
+ imports: [
+ RouterModule,
+ MaterialModule,
+ FormsModule,
+ BrandingComponent,
+ ReactiveFormsModule,
+ ],
+ templateUrl: './boxed-register.component.html',
+})
+export class AppBoxedRegisterComponent {
+ 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(['/dashboards/dashboard1']);
+ }
+}
diff --git a/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.html b/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.html
new file mode 100644
index 0000000..577b48e
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+ We sent a verification code to your mobile. Enter the code from the
+ mobile in the field below.
+ ******1234
+
+
+ Didn't get the code?
+ Resend
+
+
+
+
+
+
diff --git a/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.ts b/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.ts
new file mode 100644
index 0000000..53fb594
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CoreService } from 'src/app/services/core.service';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+ selector: 'app-boxed-two-steps',
+ imports: [RouterModule, MaterialModule, BrandingComponent],
+ templateUrl: './boxed-two-steps.component.html'
+})
+export class AppBoxedTwoStepsComponent {
+ options = this.settings.getOptions();
+
+ constructor(private settings: CoreService) {}
+}
diff --git a/theme/packages/main/src/app/pages/authentication/error/error.component.html b/theme/packages/main/src/app/pages/authentication/error/error.component.html
new file mode 100644
index 0000000..7bc4017
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/error/error.component.html
@@ -0,0 +1,10 @@
+
diff --git a/theme/packages/main/src/app/pages/authentication/side-register/side-register.component.ts b/theme/packages/main/src/app/pages/authentication/side-register/side-register.component.ts
new file mode 100644
index 0000000..26ef24c
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/side-register/side-register.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { CoreService } from 'src/app/services/core.service';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+ selector: 'app-side-register',
+ imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
+ 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(['/dashboards/dashboard1']);
+ }
+}
diff --git a/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.html b/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.html
new file mode 100644
index 0000000..60950fb
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.html
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Two Step Verification
+ We sent a verification code to your mobile. Enter the code from the
+ mobile in the field below.
+ ******1234
+
+
+ Didn't get the code?
+ Resend
+
+
+
+
+
+
diff --git a/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.ts b/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.ts
new file mode 100644
index 0000000..a5f0d83
--- /dev/null
+++ b/theme/packages/main/src/app/pages/authentication/side-two-steps/side-two-steps.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CoreService } from 'src/app/services/core.service';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+ selector: 'app-side-two-steps',
+ imports: [RouterModule, MaterialModule, BrandingComponent],
+ templateUrl: './side-two-steps.component.html',
+})
+export class AppSideTwoStepsComponent {
+ options = this.settings.getOptions();
+
+ constructor(private settings: CoreService) {}
+}
diff --git a/theme/packages/main/src/app/pages/charts/area/area.component.html b/theme/packages/main/src/app/pages/charts/area/area.component.html
new file mode 100644
index 0000000..070e758
--- /dev/null
+++ b/theme/packages/main/src/app/pages/charts/area/area.component.html
@@ -0,0 +1,28 @@
+
+
+
+ 
+ 
+ 
+ 
+ 
+ about us?
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+