@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/cards/card2/card2.component.html

@@ -0,0 +1,69 @@
+<a
+  routerLink="/crafted/pages/profile/overview"
+  class="card border border-2 border-gray-300 border-hover"
+>
+  <div class="card-header border-0 pt-9">
+    <div class="card-title m-0">
+      <div class="symbol symbol-50px w-50px bg-light">
+        <img [src]="icon" alt="card2" class="p-3" />
+      </div>
+    </div>
+
+    <div class="card-toolbar">
+      <span
+        class="badge fw-bolder me-auto px-4 py-3"
+        [ngClass]="'badge-light-' + badgeColor"
+      >
+        {{ status }}
+      </span>
+    </div>
+  </div>
+
+  <div class="card-body p-9">
+    <div class="fs-3 fw-bolder text-gray-900">{{ title }}</div>
+
+    <p class="text-gray-500 fw-bold fs-5 mt-1 mb-7">{{ description }}</p>
+
+    <div class="d-flex flex-wrap mb-5">
+      <div
+        class="
+          border border-gray-300 border-dashed
+          rounded
+          min-w-125px
+          py-3
+          px-4
+          me-7
+          mb-3
+        "
+      >
+        <div class="fs-6 text-gray-800 fw-bolder">{{ date }}</div>
+        <div class="fw-bold text-gray-500">Due Date</div>
+      </div>
+
+      <div
+        class="
+          border border-gray-300 border-dashed
+          rounded
+          min-w-125px
+          py-3
+          px-4
+          mb-3
+        "
+      >
+        <div class="fs-6 text-gray-800 fw-bolder">{{ budget }}</div>
+        <div class="fw-bold text-gray-500">Budget</div>
+      </div>
+    </div>
+
+    <div class="h-4px w-100 bg-light mb-5" ngbTooltip="This project completed">
+      <div
+        class="rounded h-4px"
+        [ngClass]="'bg-' + statusColor"
+        role="progressbar"
+        [style.width]="progress + '%'"
+      ></div>
+    </div>
+
+    <app-user-list [users]="users"></app-user-list>
+  </div>
+</a>

package/_metronic/partials/content/cards/card2/card2.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { IconUserModel } from '../icon-user.model';
+
+@Component({
+  selector: 'app-card2',
+  templateUrl: './card2.component.html',
+})
+export class Card2Component {
+  @Input() icon: string = '';
+  @Input() badgeColor: string = '';
+  @Input() status: string = '';
+  @Input() statusColor: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
+  @Input() date: string = '';
+  @Input() budget: string = '';
+  @Input() progress: number = 50;
+  @Input() users: Array<IconUserModel> = [];
+
+  constructor() {}
+}

package/_metronic/partials/content/cards/card3/card3.component.html

@@ -0,0 +1,78 @@
+<div class="card-body d-flex flex-center flex-column p-9">
+  <div class="mb-5">
+    <div class="symbol symbol-75px symbol-circle">
+      <ng-container *ngIf="color">
+        <span
+          class="symbol-label fs-5 fw-bolder"
+          [ngClass]="'bg-light-' + color"
+          [ngClass]="'text-' + color"
+        >
+          {{ name.charAt(0) }}
+        </span>
+      </ng-container>
+      <ng-container *ngIf="!color && avatar">
+        <img alt="Pic" [src]="avatar" />
+      </ng-container>
+      <ng-container *ngIf="online">
+        <div
+          class="
+            symbol-badge
+            bg-success
+            start-100
+            top-100
+            border-4
+            h-15px
+            w-15px
+            ms-n3
+            mt-n3
+          "
+        ></div>
+      </ng-container>
+    </div>
+  </div>
+
+  <a
+    class="fs-4 text-gray-800 text-hover-primary fw-bolder mb-0 cursor-pointer"
+  >
+    {{ name }}
+  </a>
+
+  <div class="fw-bold text-gray-500 mb-6">{{ job }}</div>
+
+  <div class="d-flex flex-center flex-wrap mb-5">
+    <div
+      class="
+        border border-gray-300 border-dashed
+        rounded
+        min-w-125px
+        py-3
+        px-4
+        mx-3
+        mb-3
+      "
+    >
+      <div class="fs-6 fw-bolder text-gray-700">{{ avgEarnings }}</div>
+      <div class="fw-bold text-gray-500">Avg. Earnings</div>
+    </div>
+
+    <div
+      class="
+        border border-gray-300 border-dashed
+        rounded
+        min-w-125px
+        py-3
+        mx-3
+        px-4
+        mb-3
+      "
+    >
+      <div class="fs-6 fw-bolder text-gray-700">{{ totalEarnings }}</div>
+      <div class="fw-bold text-gray-500">Total Sales</div>
+    </div>
+  </div>
+
+  <a class="btn btn-sm btn-light cursor-pointer">
+    <app-keenicon name="plus" class="fs-3"></app-keenicon>
+    Connect
+  </a>
+</div>

package/_metronic/partials/content/cards/card3/card3.component.ts

@@ -0,0 +1,18 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card3',
+  templateUrl: './card3.component.html',
+})
+export class Card3Component {
+  @Input() color: string = '';
+  @Input() avatar: string = '';
+  @Input() online: boolean = false;
+  @Input() name: string = '';
+  @Input() job: string = '';
+  @Input() avgEarnings: string = '';
+  @Input() totalEarnings: string = '';
+  @HostBinding('class') class = 'card';
+
+  constructor() {}
+}

package/_metronic/partials/content/cards/card4/card4.component.html

@@ -0,0 +1,9 @@
+<div
+  class="card-body d-flex justify-content-center text-center flex-column p-8"
+>
+  <a class="text-gray-800 text-hover-primary d-flex flex-column cursor-pointer">
+    <div class="symbol symbol-75px mb-6"><img [src]="icon" alt="" /></div>
+    <div class="fs-5 fw-bolder mb-2">{{ title }}</div>
+  </a>
+  <div class="fs-7 fw-bold text-gray-500 mt-auto">{{ description }}</div>
+</div>

package/_metronic/partials/content/cards/card4/card4.component.ts

@@ -0,0 +1,14 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card4',
+  templateUrl: './card4.component.html',
+})
+export class Card4Component {
+  @Input() icon: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
+  @HostBinding('class') class = 'card h-100';
+
+  constructor() {}
+}

package/_metronic/partials/content/cards/card5/card5.component.html

@@ -0,0 +1,58 @@
+<div class="card-header flex-nowrap border-0 pt-9">
+  <div class="card-title m-0">
+    <div class="symbol symbol-45px w-45px bg-light me-5">
+      <img [src]="image" alt="Metronic" class="p-3" />
+    </div>
+
+    <a class="fs-4 fw-bold text-hover-primary text-gray-600 m-0 cursor-pointer">
+      {{ title }}
+    </a>
+  </div>
+
+  <div class="card-toolbar m-0">
+    <button
+      type="button"
+      class="
+        btn btn-clean btn-sm btn-icon btn-icon-primary btn-active-light-primary
+        me-n3
+      "
+      data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end"
+      data-kt-menu-flip="top-end"
+    >
+      <app-keenicon name="category" class="fs-3 text-primary"></app-keenicon>
+    </button>
+    <app-dropdown-menu1></app-dropdown-menu1>
+  </div>
+</div>
+
+<div class="card-body d-flex flex-column px-9 pt-6 pb-8">
+  <div class="fs-2tx fw-bolder mb-3">{{ description }}</div>
+
+  <div class="d-flex align-items-center flex-wrap mb-5 mt-auto fs-6">
+    <ng-container *ngIf="status === 'up'">
+      <app-keenicon name="arrow-up-right" class="fs-3 me-1 text-success"></app-keenicon>
+    </ng-container>
+
+    <ng-container *ngIf="status === 'down'">
+      <app-keenicon name="arr006.svg" class="fs-3 me-1 text-danger"></app-keenicon>
+    </ng-container>
+
+    <div
+      class="fw-bolder me-2"
+      [ngClass]="status === 'up' ? 'text-success' : 'text-danger'"
+    >
+      {{ status === "up" ? "+" : "-" }}
+      {{ statusValue }}%
+    </div>
+
+    <div class="fw-bold text-gray-500">{{ statusDesc }}</div>
+  </div>
+
+  <div class="d-flex align-items-center fw-bold">
+    <span class="badge bg-light text-gray-700 px-3 py-2 me-2"
+      >{{ progress }}%</span
+    >
+    <span class="text-gray-500 fs-7">{{ progressType }}</span>
+  </div>
+</div>

package/_metronic/partials/content/cards/card5/card5.component.ts

@@ -0,0 +1,19 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card5',
+  templateUrl: './card5.component.html',
+})
+export class Card5Component {
+  @Input() image: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
+  @Input() status: 'up' | 'down' = 'up';
+  @Input() statusValue: number;
+  @Input() statusDesc: string = '';
+  @Input() progress: number = 100;
+  @Input() progressType: string = '';
+  @HostBinding('class') class = 'card h-100';
+
+  constructor() {}
+}

package/_metronic/partials/content/cards/cards.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { InlineSVGModule } from 'ng-inline-svg-2';
+import { Card1Component } from './card1/card1.component';
+import { Card2Component } from './card2/card2.component';
+import { Card3Component } from './card3/card3.component';
+import { Card4Component } from './card4/card4.component';
+import { Card5Component } from './card5/card5.component';
+import { UserListComponent } from './user-list/user-list.component';
+import { DropdownMenusModule } from '../dropdown-menus/dropdown-menus.module';
+import { SharedModule } from "../../../shared/shared.module";
+
+@NgModule({
+  declarations: [
+    Card1Component,
+    Card2Component,
+    Card3Component,
+    Card4Component,
+    Card5Component,
+    UserListComponent,
+  ],
+  imports: [
+    CommonModule,
+    InlineSVGModule,
+    NgbTooltipModule,
+    DropdownMenusModule,
+    SharedModule
+  ],
+  exports: [
+    Card1Component,
+    Card2Component,
+    Card3Component,
+    Card4Component,
+    Card5Component,
+    UserListComponent,
+  ],
+})
+export class CardsModule {}

package/_metronic/partials/content/cards/icon-user.model.ts

@@ -0,0 +1,6 @@
+export interface IconUserModel {
+  name: string;
+  avatar?: string;
+  color?: string;
+  initials?: string;
+}

package/_metronic/partials/content/cards/user-list/user-list.component.html

@@ -0,0 +1,15 @@
+<div
+  class="symbol symbol-35px symbol-circle"
+  *ngFor="let user of users"
+  [ngbTooltip]="user.name"
+  placement="top"
+>
+  <ng-container *ngIf="user.avatar">
+    <img [src]="user.avatar" alt="Pic" />
+  </ng-container>
+  <ng-container *ngIf="user.initials">
+    <span class="symbol-label bg-primary text-inverse-primary fw-bolder">
+      {{ user.initials }}
+    </span>
+  </ng-container>
+</div>

package/_metronic/partials/content/cards/user-list/user-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserListComponent } from './user-list.component';
+
+describe('UserListComponent', () => {
+  let component: UserListComponent;
+  let fixture: ComponentFixture<UserListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/_metronic/partials/content/cards/user-list/user-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IconUserModel } from '../icon-user.model';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss'],
+})
+export class UserListComponent implements OnInit {
+  @Input() users: Array<IconUserModel> = [];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/_metronic/partials/content/chat-inner/chat-inner.component.html

@@ -0,0 +1,122 @@
+<div
+  class="scroll-y me-n5 pe-5"
+  [ngClass]="!isDrawer ? 'h-300px h-lg-auto' : ''"
+  data-kt-element="messages"
+  data-kt-scroll="true"
+  data-kt-scroll-activate="{default: false, lg: true}"
+  data-kt-scroll-max-height="auto"
+  [attr.data-kt-scroll-dependencies]="
+    isDrawer
+      ? '#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer'
+      : '#kt_header, #kt_toolbar, #kt_footer, #kt_chat_messenger_header, #kt_chat_messenger_footer'
+  "
+  [attr.data-kt-scroll-wrappers]="
+    isDrawer
+      ? '#kt_drawer_chat_messenger_body'
+      : '#kt_content, #kt_chat_messenger_body'
+  "
+  [attr.data-kt-scroll-offset]="isDrawer ? '0px' : '-2px'"
+>
+  <ng-container *ngFor="let message of messagesObs | async">
+    <div
+      [ngClass]="{
+        'd-flex': !isDrawer,
+        'd-none': message.template,
+        'justify-content-start': message.type === 'in',
+        'justify-content-end': message.type !== 'in'
+      }"
+      [attr.data-kt-element]="'template-' + message.type"
+      class="mb-10"
+    >
+      <div
+        class="d-flex flex-column align-items"
+        [ngClass]="'align-items-' + (message.type === 'in' ? 'start' : 'end')"
+      >
+        <div class="d-flex align-items-center mb-2">
+          <ng-container *ngIf="message.type === 'in'">
+            <div div class="symbol symbol-35px symbol-circle">
+              <img
+                alt="Pic"
+                [src]="'./assets/media/' + getUser(message.user).avatar"
+              />
+            </div>
+            <div class="ms-3">
+              <a
+                href="#"
+                class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1"
+              >
+                {{ getUser(message.user).name }}
+              </a>
+              <span class="text-muted fs-7 mb-1">{{ message.time }}</span>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="message.type !== 'in'">
+            <div class="me-3">
+              <span class="text-muted fs-7 mb-1">{{ message.time }}</span>
+              <a
+                href="#"
+                class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1"
+              >
+                You
+              </a>
+            </div>
+            <div class="symbol symbol-35px symbol-circle">
+              <img
+                alt="Pic"
+                [src]="'./assets/media/' + getUser(message.user).avatar"
+              />
+            </div>
+          </ng-container>
+        </div>
+
+        <div
+          [ngClass]="getMessageCssClass(message)"
+          data-kt-element="message-text"
+          [innerHTML]="message.text"
+        ></div>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+<div
+  class="card-footer pt-4"
+  [id]="
+    isDrawer ? 'kt_drawer_chat_messenger_footer' : 'kt_chat_messenger_footer'
+  "
+>
+  <textarea
+    #messageInput
+    class="form-control form-control-flush mb-3"
+    rows="1"
+    data-kt-element="input"
+    placeholder="Type a message"
+  ></textarea>
+
+  <div class="d-flex flex-stack">
+    <div class="d-flex align-items-center me-2">
+      <button
+        class="btn btn-sm btn-icon btn-active-light-primary me-1"
+        type="button"
+        ngbTooltip="Coming soon"
+      >
+        <i class="bi bi-paperclip fs-3"></i>
+      </button>
+      <button
+        class="btn btn-sm btn-icon btn-active-light-primary me-1"
+        type="button"
+        ngbTooltip="Coming soon"
+      >
+        <i class="bi bi-upload fs-3"></i>
+      </button>
+    </div>
+    <button
+      class="btn btn-primary"
+      type="button"
+      data-kt-element="send"
+      (click)="submitMessage()"
+    >
+      Send
+    </button>
+  </div>
+</div>

package/_metronic/partials/content/chat-inner/chat-inner.component.ts

@@ -0,0 +1,74 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import {
+  defaultMessages,
+  defaultUserInfos,
+  messageFromClient,
+  MessageModel,
+  UserInfoModel,
+} from './dataExample';
+
+@Component({
+  selector: 'app-chat-inner',
+  templateUrl: './chat-inner.component.html',
+})
+export class ChatInnerComponent implements OnInit {
+  @Input() isDrawer: boolean = false;
+  @HostBinding('class') class = 'card-body';
+  @HostBinding('id') id = this.isDrawer
+    ? 'kt_drawer_chat_messenger_body'
+    : 'kt_chat_messenger_body';
+  @ViewChild('messageInput', { static: true })
+  messageInput: ElementRef<HTMLTextAreaElement>;
+
+  private messages$: BehaviorSubject<Array<MessageModel>> = new BehaviorSubject<
+    Array<MessageModel>
+  >(defaultMessages);
+  messagesObs: Observable<Array<MessageModel>>;
+
+  constructor() {
+    this.messagesObs = this.messages$.asObservable();
+  }
+
+  submitMessage(): void {
+    const text = this.messageInput.nativeElement.value;
+    const newMessage: MessageModel = {
+      user: 2,
+      type: 'out',
+      text,
+      time: 'Just now',
+    };
+    this.addMessage(newMessage);
+    // auto answer
+    setTimeout(() => {
+      this.addMessage(messageFromClient);
+    }, 4000);
+    // clear input
+    this.messageInput.nativeElement.value = '';
+  }
+
+  addMessage(newMessage: MessageModel): void {
+    const messages = [...this.messages$.value];
+    messages.push(newMessage);
+    this.messages$.next(messages);
+  }
+
+  getUser(user: number): UserInfoModel {
+    return defaultUserInfos[user];
+  }
+
+  getMessageCssClass(message: MessageModel): string {
+    return `p-5 rounded text-gray-900 fw-bold mw-lg-400px bg-light-${
+      message.type === 'in' ? 'info' : 'primary'
+    } text-${message.type === 'in' ? 'start' : 'end'}`;
+  }
+
+  ngOnInit(): void {}
+}

package/_metronic/partials/content/chat-inner/chat-inner.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InlineSVGModule } from 'ng-inline-svg-2';
+import { ChatInnerComponent } from './chat-inner.component';
+
+@NgModule({
+  declarations: [ChatInnerComponent],
+  imports: [CommonModule, InlineSVGModule],
+  exports: [ChatInnerComponent],
+})
+export class ChatInnerModule {}