reasech

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+.angular
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

+# posadmin_frontend
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://gitlab.com/my-contact/posadmin_frontend.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://gitlab.com/my-contact/posadmin_frontend/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "multikart-backend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "allowedCommonJsDependencies": [
+              "mousetrap",
+              "hammerjs",
+              "@ks89/angular-modal-gallery",
+              "hammerjs",
+              "rxjs/internal/operators",
+              "lodash",
+              "chartist",
+              "chart.js"
+            ],
+            "outputPath": "dist/multikart-backend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "src/assets/scss/style.scss",
+              "node_modules/font-awesome/scss/font-awesome.scss"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "multikart-backend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "multikart-backend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "multikart-backend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "multikart-backend:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "multikart-backend:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "multikart-backend",
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file

e2e/src/app.e2e-spec.ts

+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('multikart-backend app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

e2e/src/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
+  }
+
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}

e2e/tsconfig.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/multikart-backend'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package.json

+{
+  "name": "multikart-backend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@akveo/ng2-completer": "^9.0.1",
+    "@angular/animations": "~13.0.3",
+    "@angular/cdk": "~10.0.1",
+    "@angular/common": "~13.0.3",
+    "@angular/compiler": "~13.0.3",
+    "@angular/core": "~13.0.3",
+    "@angular/forms": "~13.0.3",
+    "@angular/localize": "^13.0.3",
+    "@angular/platform-browser": "~13.0.3",
+    "@angular/platform-browser-dynamic": "~13.0.3",
+    "@angular/router": "~13.0.3",
+    "@ks89/angular-modal-gallery": "^7.2.5",
+    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
+    "@swimlane/ngx-charts": "^13.0.2",
+    "@swimlane/ngx-datatable": "^16.0.3",
+    "angular-count-to": "0.0.3",
+    "angular-mydatepicker": "^0.11.5",
+    "bootstrap": "^4.4.1",
+    "chart.js": "^2.9.3",
+    "chartist": "^0.11.4",
+    "express": "^4.15.2",
+    "feather-icons": "^4.26.0",
+    "flag-icons": "^2.0.0",
+    "font-awesome": "^4.7.0",
+    "hammerjs": "^2.0.8",
+    "mousetrap": "^1.6.5",
+    "mydatepicker": "^2.6.11",
+    "ng-animate": "^0.3.4",
+    "ng-chartist": "^5.0.0",
+    "ng2-charts": "^2.3.0",
+    "ng2-completer": "^9.0.1",
+    "ng2-google-charts": "^5.0.0",
+    "ng2-smart-table": "^1.7.0",
+    "ngx-ckeditor": "^8.0.0",
+    "ngx-dropzone-wrapper": "^8.0.0",
+    "ngx-owl-carousel-o": "^2.0.3",
+    "ngx-slimscroll": "^8.1.0",
+    "rxjs": "~6.6.0",
+    "sass": "~1.26.11",
+    "screenfull": "^5.0.1",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~13.0.4",
+    "@angular/cli": "~13.0.4",
+    "@angular/compiler-cli": "~13.0.3",
+    "@angular/language-service": "~13.0.3",
+    "@types/chart.js": "^2.9.13",
+    "@types/node": "^12.11.1",
+    "@types/jasmine": "~3.6.0",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.2",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.4.4"
+  }
+}

readme.txt

+npm uninstall ng-chartist
+npm uninstall -g ng-chartist
+npm cache clear --force
+npm install ng-chartist@5.0.0
\ No newline at end of file

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { content } from './shared/routes/content-routes';
+import { ContentLayoutComponent } from './shared/layout/content-layout/content-layout.component';
+import { LoginComponent } from './components/auth/login/login.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'dashboard/default',
+    pathMatch: 'full'
+  },
+  {
+    path: '',
+    component: ContentLayoutComponent,
+    children: content
+  },
+  {
+    path: 'auth/login',
+    component: LoginComponent,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {
+    scrollPositionRestoration: 'enabled',
+    relativeLinkResolution: 'legacy'
+})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

+<router-outlet></router-outlet>
\ No newline at end of file

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'multikart-backend';
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+import { DashboardModule } from './components/dashboard/dashboard.module';
+import { SharedModule } from './shared/shared.module';
+import { ProductsModule } from './components/products/products.module';
+import { SalesModule } from './components/sales/sales.module';
+import { CouponsModule } from './components/coupons/coupons.module';
+import { PagesModule } from './components/pages/pages.module';
+import { MediaModule } from './components/media/media.module';
+import { MenusModule } from './components/menus/menus.module';
+import { VendorsModule } from './components/vendors/vendors.module';
+import { UsersModule } from './components/users/users.module';
+import { LocalizationModule } from './components/localization/localization.module';
+import { InvoiceModule } from './components/invoice/invoice.module';
+import { SettingModule } from './components/setting/setting.module';;
+import { ReportsModule } from './components/reports/reports.module';
+import { AuthModule } from './components/auth/auth.module';
+import { MyDatePickerModule } from 'mydatepicker';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    AppRoutingModule,
+    DashboardModule,
+    InvoiceModule,
+    SettingModule,
+    ReportsModule,
+    AuthModule,
+    SharedModule,
+    LocalizationModule,
+    ProductsModule,
+    SalesModule,
+    VendorsModule,
+    CouponsModule,
+    PagesModule,
+    MediaModule,
+    MenusModule,
+    UsersModule,
+    
+    
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/components/auth/auth-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './login/login.component';
+
+
+const routes: Routes = [
+  {
+    path:'login',
+    component:LoginComponent,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuthRoutingModule { }

src/app/components/auth/auth.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuthRoutingModule } from './auth-routing.module';
+import { LoginComponent } from './login/login.component';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CarouselModule } from 'ngx-owl-carousel-o';
+import { SharedModule } from '../../shared/shared.module';
+import { HttpClientModule } from '@angular/common/http';
+
+
+@NgModule({
+  declarations: [LoginComponent],
+  imports: [
+    CommonModule,
+    AuthRoutingModule,
+    ReactiveFormsModule,
+    NgbModule,
+    CarouselModule,
+    SharedModule,
+    HttpClientModule,
+
+  ]
+})
+export class AuthModule { }

src/app/components/auth/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { UserService } from 'src/app/services/user/user.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  public loginForm: FormGroup;
+  public registerForm: FormGroup;
+  private userName:FormControl;
+
+  constructor(private formBuilder: FormBuilder,private userService:UserService,private router: Router
+    ) {
+    this.createLoginForm();
+    this.createRegisterForm();
+  }
+
+  owlcarousel = [
+    {
+      title: "Welcome to FreshMeat.lk",
+      desc: "Mobile Application Products and Reports",
+    },
+    {
+      title: "Welcome to FreshMeat.lk",
+      desc: "Mobile Application Products and Reports",
+    },
+    {
+      title: "Welcome to FreshMeat.lk",
+      desc: "Mobile Application Products and Reports",
+    }
+  ]
+  owlcarouselOptions = {
+    loop: true,
+    items: 1,
+    dots: true
+  };
+
+  createLoginForm() {
+    this.loginForm = this.formBuilder.group({
+      userName: this.userName,
+      password: [''],
+    })
+    this.userName=new FormControl('',[Validators.required])
+
+  }
+  createRegisterForm() {
+    this.registerForm = this.formBuilder.group({
+      userName: [''],
+      password: [''],
+      confirmPassword: [''],
+    })
+  }
+
+
+  ngOnInit() {
+  }
+
+  onSubmit() {
+
+  }
+
+}

src/app/components/coupons/coupons-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListCouponComponent } from './list-coupon/list-coupon.component';
+import { CreateCouponComponent } from './create-coupon/create-coupon.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'list-coupons',
+        component: ListCouponComponent,
+        data: {
+          title: "List Coupons",
+          breadcrumb: "List Coupons"
+        }
+      },
+      {
+        path: 'create-coupons',
+        component: CreateCouponComponent,
+        data: {
+          title: "Create Coupon",
+          breadcrumb: "Create Coupons"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CouponsRoutingModule { }

src/app/components/coupons/coupons.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { CouponsRoutingModule } from './coupons-routing.module';
+import { ListCouponComponent } from './list-coupon/list-coupon.component';
+import { CreateCouponComponent } from './create-coupon/create-coupon.component';
+
+@NgModule({
+  declarations: [ListCouponComponent, CreateCouponComponent],
+  imports: [
+    CommonModule,
+    CouponsRoutingModule,
+    NgbModule,
+    ReactiveFormsModule,
+    NgxDatatableModule
+  ]
+})
+export class CouponsModule { }

src/app/components/coupons/create-coupon/create-coupon.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="card">
+        <div class="card-header">
+            <h5>Discount Coupon Details</h5>
+        </div>
+        <div class="card-body tab2-card">
+            <ngb-tabset class="tab-coupon">
+                <ngb-tab title="General">
+                    <ng-template ngbTabContent>
+                        <form [formGroup]="generalForm"  class="needs-validation" novalidate="">
+                            <h4>General</h4>
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div class="form-group row">
+                                        <label for="validationCustom0" class="col-xl-3 col-md-4"><span>*</span>
+                                            Coupan Title</label>
+                                        <input class="form-control col-md-7" formControlName="name"
+                                            id="validationCustom0" type="text" required="">
+                                    </div>
+                                    <div class="form-group row">
+                                        <label for="validationCustom1" class="col-xl-3 col-md-4"><span>*</span>
+                                            Coupan Code</label>
+                                        <input class="form-control col-md-7" formControlName="code"
+                                            id="validationCustom1" type="text" required="">
+                                        <div class="valid-feedback">Please Provide a Valid Coupon Code.</div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">Start Date</label>
+                                        <div class="input-group col-md-7 input-grp-p">
+                                            <input class="datepicker-here form-control digits" ngbDatepicker
+                                                formControlName="start_date" #f="ngbDatepicker">
+                                            <div class="input-group-append">
+                                                <button class="btn calendar" (click)="f.toggle()" type="button"><i
+                                                        class="fa fa-calendar"></i></button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">End Date</label>
+                                        <div class="input-group col-md-7 input-grp-p">
+                                            <input class="datepicker-here form-control digits" ngbDatepicker
+                                                formControlName="end_date" #c="ngbDatepicker">
+                                            <div class="input-group-append">
+                                                <button class="btn calendar" (click)="c.toggle()" type="button"><i
+                                                        class="fa fa-calendar"></i></button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">Free Shipping</label>
+                                        <div class="checkbox checkbox-primary col-md-7">
+                                            <input id="checkbox-primary-1" type="checkbox"
+                                                formControlName="free_shipping" data-original-title="" title="">
+                                            <label for="checkbox-primary-1">Allow Free Shipping</label>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">Quantity</label>
+                                        <input class="form-control col-md-7" formControlName="quantity" type="number"
+                                            required="">
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">Discount Type</label>
+                                        <select class="custom-select col-md-7" required="">
+                                            <option value="">--Select--</option>
+                                            <option value="1">Percent</option>
+                                            <option value="2">Fixed</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-md-4">Status</label>
+                                        <div class="checkbox checkbox-primary col-md-7">
+                                            <input id="checkbox-primary-2" formControlName="status" type="checkbox"
+                                                data-original-title="" title="">
+                                            <label for="checkbox-primary-2">Enable the Coupon</label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </ng-template>
+                </ngb-tab>
+                <ngb-tab>
+                    <ng-template ngbTabTitle>Restriction</ng-template>
+                    <ng-template ngbTabContent>
+                        <form [formGroup]="restrictionForm" class="needs-validation" novalidate="">
+                            <h4>Restriction</h4>
+                            <div class="form-group row">
+                                <label for="validationCustom3" class="col-xl-3 col-md-4">Products</label>
+                                <input class="form-control col-md-7" formControlName="products" id="validationCustom3"
+                                    type="text" required="">
+                                <div class="valid-feedback">Please Provide a Product Name.</div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 col-md-4">Category</label>
+                                <select class="custom-select col-md-7" formControlName="category" required="">
+                                    <option value="">--Select--</option>
+                                    <option value="1">Electronics</option>
+                                    <option value="2">Clothes</option>
+                                    <option value="2">Shoes</option>
+                                    <option value="2">Digital</option>
+                                </select>
+                            </div>
+                            <div class="form-group row">
+                                <label for="validationCustom4" class="col-xl-3 col-md-4">Minimum Spend</label>
+                                <input class="form-control col-md-7" formControlName="min" id="validationCustom4"
+                                    type="number">
+                            </div>
+                            <div class="form-group row">
+                                <label for="validationCustom5" class="col-xl-3 col-md-4">Maximum Spend</label>
+                                <input class="form-control col-md-7" formControlName="max" id="validationCustom5"
+                                    type="number">
+                            </div>
+                        </form>
+                    </ng-template>
+                </ngb-tab>
+                <ngb-tab>
+                    <ng-template ngbTabTitle>Usage</ng-template>
+                    <ng-template ngbTabContent>
+                        <form [formGroup]="usageForm" class="needs-validation" novalidate="">
+                            <h4>Usage Limits</h4>
+                            <div class="form-group row">
+                                <label for="validationCustom6" class="col-xl-3 col-md-4">Per Limit</label>
+                                <input class="form-control col-md-7" formControlName="limit" id="validationCustom6"
+                                    type="number">
+                            </div>
+                            <div class="form-group row">
+                                <label for="validationCustom7" class="col-xl-3 col-md-4">Per Customer</label>
+                                <input class="form-control col-md-7" formControlName="customer" id="validationCustom7"
+                                    type="number">
+                            </div>
+                        </form>
+                    </ng-template>
+                </ngb-tab>
+            </ngb-tabset>
+            <div class="pull-right">
+                <button type="button" class="btn btn-primary">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/coupons/create-coupon/create-coupon.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NgbDateStruct, NgbDate, NgbCalendar, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-create-coupon',
+  templateUrl: './create-coupon.component.html',
+  styleUrls: ['./create-coupon.component.scss']
+})
+export class CreateCouponComponent implements OnInit {
+  public generalForm: FormGroup;
+  public restrictionForm: FormGroup;
+  public usageForm: FormGroup;
+  public model: NgbDateStruct;
+  public date: { year: number, month: number };
+  public modelFooter: NgbDateStruct;
+
+  constructor(private formBuilder: FormBuilder, private calendar: NgbCalendar) {
+    this.createGeneralForm();
+    this.createRestrictionForm();
+    this.createUsageForm();
+  }
+
+  selectToday() {
+    this.model = this.calendar.getToday();
+  }
+
+  createGeneralForm() {
+    this.generalForm = this.formBuilder.group({
+      name: [''],
+      code: [''],
+      start_date: [''],
+      end_date: [''],
+      free_shipping: [''],
+      quantity: [''],
+      discount_type: [''],
+      status: [''],
+    });
+  }
+
+  createRestrictionForm() {
+    this.restrictionForm = this.formBuilder.group({
+      products: [''],
+      category: [''],
+      min: [''],
+      max: ['']
+    })
+  }
+
+  createUsageForm() {
+    this.usageForm = this.formBuilder.group({
+      limit: [''],
+      customer: ['']
+    })
+  }
+  ngOnInit() {
+
+  }
+
+}

src/app/components/coupons/list-coupon/list-coupon.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Products Category</h5>
+                </div>
+                <div class="card-body">
+                    <div class="custom-datatable">
+                        <button class="btn btn-primary mr-1 mb-3" style="float: right;">Delete</button>
+                        <div class="clearfix"></div>
+                        <ngx-datatable class="bootstrap" [rows]="digital_categories" [columnMode]="'force'"
+                            [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="5"
+                            [selected]="selected" [selectionType]="'checkbox'" [selectAllRowsOnPage]="false"
+                            (select)='onSelect($event)'>
+                            <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
+                                [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
+                                [checkboxable]="true">
+                                <button type="button" class="btn btn-primery">Delete</button>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column name="Title"></ngx-datatable-column>
+                            <ngx-datatable-column name="Code"></ngx-datatable-column>
+                            <ngx-datatable-column name="Discount"></ngx-datatable-column>
+                            <ngx-datatable-column name="Status"></ngx-datatable-column>
+                        </ngx-datatable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/coupons/list-coupon/list-coupon.component.ts

+import { Component, OnInit } from '@angular/core';
+import { listCouponsDB } from 'src/app/shared/tables/list-coupon';
+
+@Component({
+  selector: 'app-list-coupon',
+  templateUrl: './list-coupon.component.html',
+  styleUrls: ['./list-coupon.component.scss']
+})
+export class ListCouponComponent implements OnInit {
+
+  public digital_categories = [];
+  public selected = [];
+
+  constructor() {
+    this.digital_categories = listCouponsDB.list_coupons;
+  }
+
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+
+  ngOnInit() { }
+
+
+}

src/app/components/dashboard/dashboard-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'default',
+        component: DashboardComponent,
+        data: {
+          title: "Dashboard",
+          breadcrumb: "Dashboard"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardRoutingModule { }

src/app/components/dashboard/dashboard.component.ts

+import { Component, OnInit } from '@angular/core';
+import * as chartData from '../../shared/data/chart';
+import { doughnutData, pieData } from '../../shared/data/chart';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+  public doughnutData = doughnutData;
+  public pieData = pieData;
+  constructor() {
+    Object.assign(this, { doughnutData, pieData })
+  }
+
+  // doughnut 2
+  public view = chartData.view;
+  public doughnutChartColorScheme = chartData.doughnutChartcolorScheme;
+  public doughnutChartShowLabels = chartData.doughnutChartShowLabels;
+  public doughnutChartGradient = chartData.doughnutChartGradient;
+  public doughnutChartTooltip = chartData.doughnutChartTooltip;
+
+  public chart5 = chartData.chart5;
+
+
+  // lineChart
+  public lineChartData = chartData.lineChartData;
+  public lineChartLabels = chartData.lineChartLabels;
+  public lineChartOptions = chartData.lineChartOptions;
+  public lineChartColors = chartData.lineChartColors;
+  public lineChartLegend = chartData.lineChartLegend;
+  public lineChartType = chartData.lineChartType;
+
+  // lineChart
+  public smallLineChartData = chartData.smallLineChartData;
+  public smallLineChartLabels = chartData.smallLineChartLabels;
+  public smallLineChartOptions = chartData.smallLineChartOptions;
+  public smallLineChartColors = chartData.smallLineChartColors;
+  public smallLineChartLegend = chartData.smallLineChartLegend;
+  public smallLineChartType = chartData.smallLineChartType;
+
+  // lineChart
+  public smallLine2ChartData = chartData.smallLine2ChartData;
+  public smallLine2ChartLabels = chartData.smallLine2ChartLabels;
+  public smallLine2ChartOptions = chartData.smallLine2ChartOptions;
+  public smallLine2ChartColors = chartData.smallLine2ChartColors;
+  public smallLine2ChartLegend = chartData.smallLine2ChartLegend;
+  public smallLine2ChartType = chartData.smallLine2ChartType;
+
+  // lineChart
+  public smallLine3ChartData = chartData.smallLine3ChartData;
+  public smallLine3ChartLabels = chartData.smallLine3ChartLabels;
+  public smallLine3ChartOptions = chartData.smallLine3ChartOptions;
+  public smallLine3ChartColors = chartData.smallLine3ChartColors;
+  public smallLine3ChartLegend = chartData.smallLine3ChartLegend;
+  public smallLine3ChartType = chartData.smallLine3ChartType;
+
+  // lineChart
+  public smallLine4ChartData = chartData.smallLine4ChartData;
+  public smallLine4ChartLabels = chartData.smallLine4ChartLabels;
+  public smallLine4ChartOptions = chartData.smallLine4ChartOptions;
+  public smallLine4ChartColors = chartData.smallLine4ChartColors;
+  public smallLine4ChartLegend = chartData.smallLine4ChartLegend;
+  public smallLine4ChartType = chartData.smallLine4ChartType;
+
+  public chart3 = chartData.chart3;
+
+
+
+  // events
+  public chartClicked(e: any): void {
+  }
+  public chartHovered(e: any): void {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/dashboard/dashboard.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { DashboardComponent } from './dashboard.component';
+import { CountToModule } from 'angular-count-to';
+import { ChartsModule } from 'ng2-charts';
+import { Ng2GoogleChartsModule } from 'ng2-google-charts';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { ChartistModule } from 'ng-chartist';
+import { SharedModule } from '../../shared/shared.module';
+
+@NgModule({
+  declarations: [DashboardComponent],
+  imports: [
+    CommonModule,
+    DashboardRoutingModule,
+    CountToModule,
+    SharedModule,
+    ChartsModule,
+    Ng2GoogleChartsModule,
+    NgxChartsModule,
+    ChartistModule
+  ]
+})
+export class DashboardModule { }

src/app/components/invoice/invoice-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { InvoiceComponent } from './invoice.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InvoiceComponent,
+    data: {
+      title: "Invoice",
+      breadcrumb: "Invoice"
+    }
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class InvoiceRoutingModule { }

src/app/components/invoice/invoice.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Invoice List</h5>
+                </div>
+                <div class="card-body">
+                    <div id="batchDelete" class="custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="invoice"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/invoice/invoice.component.ts

+import { Component, OnInit } from '@angular/core';
+import { invoiceDB } from '../../shared/tables/invoice';
+
+@Component({
+  selector: 'app-invoice',
+  templateUrl: './invoice.component.html',
+  styleUrls: ['./invoice.component.scss']
+})
+export class InvoiceComponent implements OnInit {
+
+  public invoice = []
+
+  constructor() {
+    this.invoice = invoiceDB.data;
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      no: {
+        title: 'No'
+      },
+      invoice: {
+        title: 'Invoice'
+      },
+      date: {
+        title: 'Date'
+      },
+      shipping: {
+        title: 'Shipping'
+      },
+      amount: {
+        title: 'Amount'
+      },
+      tax: {
+        title: 'Tax'
+      },
+      total: {
+        title: 'Total'
+      }
+    },
+  };
+
+
+  ngOnInit() {
+  }
+
+}

src/app/components/invoice/invoice.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { InvoiceRoutingModule } from './invoice-routing.module';
+import { InvoiceComponent } from './invoice.component';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+@NgModule({
+  declarations: [InvoiceComponent],
+  imports: [
+    CommonModule,
+    InvoiceRoutingModule,
+    Ng2SmartTableModule
+  ]
+})
+export class InvoiceModule { }

src/app/components/localization/localization-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { RatesComponent } from './rates/rates.component';
+import { TranslationsComponent } from './translations/translations.component';
+import { TaxesComponent } from './taxes/taxes.component';
+
+
+const routes: Routes = [
+  {
+    path: 'translations',
+    component: TranslationsComponent,
+    data: {
+      title: "Translations",
+      breadcrumb: "Translations"
+    }
+  },
+  {
+    path: 'currency-rates',
+    component: RatesComponent,
+    data: {
+      title: "Currency Rates",
+      breadcrumb: "Currency Rates"
+    }
+  },
+  {
+    path: 'taxes',
+    component: TaxesComponent,
+    data: {
+      title: 'Taxes',
+      breadcrumb: 'Taxes'
+    }
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LocalizationRoutingModule { }

src/app/components/localization/localization.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LocalizationRoutingModule } from './localization-routing.module';
+import { TranslationsComponent } from './translations/translations.component';
+import { RatesComponent } from './rates/rates.component';
+import { TaxesComponent } from './taxes/taxes.component';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+
+@NgModule({
+  declarations: [TranslationsComponent, RatesComponent, TaxesComponent],
+  imports: [
+    CommonModule,
+    LocalizationRoutingModule,
+    Ng2SmartTableModule
+  ]
+})
+export class LocalizationModule { }

src/app/components/localization/rates/rates.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Currency Details</h5>
+                </div>
+                <div class="card-body">
+                    <div id="batchDelete" class="custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="rate"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/localization/rates/rates.component.ts

+import { Component, OnInit } from '@angular/core';
+import { rateDB } from '../../../shared/tables/rate';
+
+@Component({
+  selector: 'app-rates',
+  templateUrl: './rates.component.html',
+  styleUrls: ['./rates.component.scss']
+})
+export class RatesComponent implements OnInit {
+  public rate = []
+
+  constructor() {
+    this.rate = rateDB.data;
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      title: {
+        title: 'Currency Title'
+      },
+      usd: {
+        title: 'USD'
+      },
+      code: {
+        title: 'Code'
+      },
+      rate: {
+        title: 'Exchange Rate'
+      }
+    },
+  };
+
+
+  ngOnInit() {
+  }
+
+}

src/app/components/localization/taxes/taxes.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Tax Details</h5>
+                </div>
+                <div class="card-body">
+                    <div id="batchDelete" class="custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="taxes"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/localization/taxes/taxes.component.ts

+import { Component, OnInit } from '@angular/core';
+import { taxesDB } from '../../../shared/tables/taxes';
+
+@Component({
+  selector: 'app-taxes',
+  templateUrl: './taxes.component.html',
+  styleUrls: ['./taxes.component.scss']
+})
+export class TaxesComponent implements OnInit {
+  public taxes = []
+
+  constructor() {
+    this.taxes = taxesDB.data;
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      detail: {
+        title: 'Tax Detail'
+      },
+      tax_schedule: {
+        title: 'Tax Schedule'
+      },
+      rate: {
+        title: 'Tax Rate'
+      },
+      total_amount: {
+        title: 'Total Tax Amount'
+      }
+    },
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/localization/translations/translations.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Translations</h5>
+                </div>
+                <div class="card-body">
+                    <div id="batchDelete" class="custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="translations"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/localization/translations/translations.component.ts

+import { Component, OnInit } from '@angular/core';
+import { translationsDB } from '../../../shared/tables/translations';
+
+@Component({
+  selector: 'app-translations',
+  templateUrl: './translations.component.html',
+  styleUrls: ['./translations.component.scss']
+})
+export class TranslationsComponent implements OnInit {
+
+  public translations = []
+
+  constructor() {
+    this.translations = translationsDB.data;
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      user_key: {
+        title: 'User Key'
+      },
+      russian: {
+        title: 'Russian'
+      },
+      arabic: {
+        title: 'Arabic'
+      },
+      english: {
+        title: 'English'
+      }
+    },
+  };
+
+
+  ngOnInit() {
+  }
+
+}

src/app/components/media/media-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MediaComponent } from './media/media.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: '',
+        component: MediaComponent,
+        data: {
+          title: "Media",
+          breadcrumb: "Media"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MediaRoutingModule { }

src/app/components/media/media.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MediaRoutingModule } from './media-routing.module';
+import { MediaComponent } from './media/media.component';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+import { DropzoneModule } from 'ngx-dropzone-wrapper';
+import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
+import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+
+const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
+  maxFilesize: 50,
+  url: 'https://httpbin.org/post',
+};
+
+
+@NgModule({
+  declarations: [MediaComponent],
+  imports: [
+    CommonModule,
+    MediaRoutingModule,
+    DropzoneModule,
+    Ng2SmartTableModule
+  ],
+  providers: [
+    {
+      provide: DROPZONE_CONFIG,
+      useValue: DEFAULT_DROPZONE_CONFIG
+    }
+  ]
+})
+export class MediaModule { }

src/app/components/media/media/media.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid bulk-cate">
+    <div class="card ">
+        <div class="card-header">
+            <h5>Dropzone Media</h5>
+        </div>
+        <div class="card-body">
+            <div class="dropzone-custom">
+                <div class="dropzone dropzone-primary" [dropzone]="config1">
+                    <div class="dz-message needsclick">
+                        <i class="fa fa-cloud-upload"></i>
+                        <h4 class="mb-0 f-w-600">Drop files here or click to upload.</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <h5>Media File List</h5>
+        </div>
+        <div class="card-body">
+            <div id="batchDelete" class="category-table custom-datatable media-datatable">
+                <div class="table-responsive">
+                    <ng2-smart-table [settings]="settings" [source]="media"></ng2-smart-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/media/media/media.component.ts

+import { Component, OnInit } from '@angular/core';
+import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+import { mediaDB } from 'src/app/shared/tables/media';
+
+@Component({
+  selector: 'app-media',
+  templateUrl: './media.component.html',
+  styleUrls: ['./media.component.scss']
+})
+export class MediaComponent implements OnInit {
+
+  public media = []
+
+  constructor() {
+    this.media = mediaDB.data;
+  }
+
+  public settings = {
+
+    columns: {
+      img: {
+        title: 'Image',
+        type: 'html',
+      },
+      file_name: {
+        title: 'File Name'
+      },
+      url: {
+        title: 'Url',
+      },
+    },
+  };
+
+
+  public config1: DropzoneConfigInterface = {
+    clickable: true,
+    maxFiles: 1,
+    autoReset: null,
+    errorReset: null,
+    cancelReset: null
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/menus/create-menu/create-menu.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Add Menu</h5>
+                </div>
+                <div class="card-body">
+                    <form class="needs-validation">
+                        <div class="form-group row">
+                            <label for="validationCustom0" class="col-xl-3 col-md-4"><span>*</span> Menu Name</label>
+                            <input class="form-control col-md-8" id="validationCustom0" type="text" required="">
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-xl-3 col-md-4">Status</label>
+                            <div class="checkbox checkbox-primary col-xl-9 col-md-8">
+                                <input id="checkbox-primary-2" type="checkbox" data-original-title="" title="">
+                                <label for="checkbox-primary-2">Enable the Menu</label>
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-primary">Save</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/menus/create-menu/create-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-menu',
+  templateUrl: './create-menu.component.html',
+  styleUrls: ['./create-menu.component.scss']
+})
+export class CreateMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/menus/list-menu/list-menu.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Menu Lists</h5>
+                </div>
+                <div class="card-body">
+                    <div class="custom-datatable">
+                        <button class="btn btn-primary mr-1 mb-3" style="float: right;" >Delete</button>
+                        <div class="clearfix"></div>
+                        <ngx-datatable class="bootstrap" [rows]="menus" [columnMode]="'force'" [headerHeight]="50"
+                            [footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected"
+                            [selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'>
+                            <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
+                                [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
+                                [checkboxable]="true">
+                                <button type="button" class="btn btn-primery">Delete</button>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column name="Name"></ngx-datatable-column>
+                            <ngx-datatable-column name="Status"></ngx-datatable-column>
+                            <ngx-datatable-column prop="created on"></ngx-datatable-column>
+                        </ngx-datatable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/menus/list-menu/list-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+import { menuDB } from 'src/app/shared/tables/menu';
+
+@Component({
+  selector: 'app-list-menu',
+  templateUrl: './list-menu.component.html',
+  styleUrls: ['./list-menu.component.scss']
+})
+export class ListMenuComponent implements OnInit {
+
+  public menus = [];
+  public selected = [];
+
+  constructor() {
+    this.menus = menuDB.data;
+  }
+
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+
+  ngOnInit() { }
+
+}

src/app/components/menus/menus-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListMenuComponent } from './list-menu/list-menu.component';
+import { CreateMenuComponent } from './create-menu/create-menu.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'list-menu',
+        component: ListMenuComponent,
+        data: {
+          title: "Menu Lists",
+          breadcrumb: "Menu Lists"
+        }
+      },
+      {
+        path: 'create-menu',
+        component: CreateMenuComponent,
+        data: {
+          title: "Create Menu",
+          breadcrumb: "Create Menu"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MenusRoutingModule { }

src/app/components/menus/menus.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { MenusRoutingModule } from './menus-routing.module';
+import { ListMenuComponent } from './list-menu/list-menu.component';
+import { CreateMenuComponent } from './create-menu/create-menu.component';
+
+@NgModule({
+  declarations: [ListMenuComponent, CreateMenuComponent],
+  imports: [
+    CommonModule,
+    MenusRoutingModule,
+    NgxDatatableModule
+  ]
+})
+export class MenusModule { }

src/app/components/pages/create-page/create-page.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="card">
+        <div class="card-header">
+            <h5>Add Page</h5>
+        </div>
+        <div class="card-body tab2-card">
+            <ngb-tabset class="tab-coupon">
+                <ngb-tab title="General">
+                    <ng-template ngbTabContent>
+                        <form [formGroup]="generalForm"  class="needs-validation" novalidate="">
+                            <h4>General</h4>
+                            <div class="form-group row">
+                                <label for="validationCustom0" class="col-xl-3 col-md-4"><span>*</span> Name</label>
+                                <input class="form-control col-xl-8 col-md-7" formControlName="name"
+                                    id="validationCustom0" type="text" required="">
+                            </div>
+                            <div class="form-group row editor-label">
+                                <label class="col-xl-3 col-md-4"><span>*</span> Description</label>
+                                <div class="col-xl-8 col-md-7 editor-space">
+                                    <ck-editor id="editor1" name="editor1" cols="30" rows="10" language="en"
+                                        [fullPage]="false"></ck-editor>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label class="col-xl-3 col-md-4">Status</label>
+                                <div class="checkbox checkbox-primary col-xl-8 col-md-7">
+                                    <input id="checkbox-primary-2" formControlName="status" type="checkbox"
+                                        data-original-title="" title="">
+                                    <label for="checkbox-primary-2">Enable the Page</label>
+                                </div>
+                            </div>
+                        </form>
+                    </ng-template>
+                </ngb-tab>
+                <ngb-tab>
+                    <ng-template ngbTabTitle>SEO</ng-template>
+                    <ng-template ngbTabContent>
+                        <form [formGroup]="seoForm" class="needs-validation" novalidate="">
+                            <h4>SEO</h4>
+                            <div class="form-group row">
+                                <label for="validationCustom2" class="col-xl-3 col-md-4">Meta Title</label>
+                                <input class="form-control col-xl-8 col-md-7" formControlName="title"
+                                    id="validationCustom2" type="text" required="">
+                            </div>
+                            <div class="form-group row editor-label">
+                                <label class="col-xl-3 col-md-4">Meta Description</label>
+                                <textarea rows="4" formControlName="meta_desc" class="col-xl-8 col-md-7"></textarea>
+                            </div>
+                        </form>
+                    </ng-template>
+                </ngb-tab>
+            </ngb-tabset>
+            <!-- <ul class="nav nav-tabs tab-coupon" id="myTab" role="tablist">
+                <li class="nav-item"><a class="nav-link active show" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true" data-original-title="" title="">General</a></li>
+                <li class="nav-item"><a class="nav-link" id="restriction-tabs" data-toggle="tab" href="#seo" role="tab" aria-controls="seo" aria-selected="false" data-original-title="" title="">SEO</a></li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade active show" id="general" role="tabpanel" aria-labelledby="general-tab">
+                    <form class="needs-validation" novalidate="">
+                        <h4>General</h4>
+                        <div class="form-group row">
+                            <label for="validationCustom0" class="col-xl-3 col-md-4"><span>*</span> Name</label>
+                            <input class="form-control col-xl-8 col-md-7" id="validationCustom0" type="text" required="">
+                        </div>
+                        <div class="form-group row editor-label">
+                            <label class="col-xl-3 col-md-4"><span>*</span> Description</label>
+                            <div class="col-xl-8 col-md-7 editor-space">
+                                <textarea id="editor1" name="editor1" cols="30" rows="10"></textarea>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-xl-3 col-md-4">Status</label>
+                            <div class="checkbox checkbox-primary col-xl-8 col-md-7">
+                                <input id="checkbox-primary-2" type="checkbox" data-original-title="" title="">
+                                <label for="checkbox-primary-2">Enable the Page</label>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
+                    <form class="needs-validation" novalidate="">
+                        <h4>SEO</h4>
+                        <div class="form-group row">
+                            <label for="validationCustom2" class="col-xl-3 col-md-4">Meta Title</label>
+                            <input class="form-control col-xl-8 col-md-7" id="validationCustom2" type="text" required="" >
+                        </div>
+                        <div class="form-group row">
+                            <label for="validationCustom3" class="col-xl-3 col-md-4">Meta Keywords</label>
+                            <input class="form-control col-xl-8 col-md-7" id="validationCustom3" type="text" required="" >
+                        </div>
+                        <div class="form-group row editor-label">
+                            <label class="col-xl-3 col-md-4">Meta Description</label>
+                            <textarea rows="4" class="col-xl-8 col-md-7"></textarea>
+                        </div>
+                    </form>
+                </div>
+            </div> -->
+            <div class="pull-right">
+                <button type="button" class="btn btn-primary">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/pages/create-page/create-page.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-create-page',
+  templateUrl: './create-page.component.html',
+  styleUrls: ['./create-page.component.scss']
+})
+export class CreatePageComponent implements OnInit {
+  public generalForm: FormGroup;
+  public seoForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.createGeneralForm();
+    this.createSeoForm();
+  }
+
+  createGeneralForm() {
+    this.generalForm = this.formBuilder.group({
+      name: [''],
+      desc: [''],
+      status: ['']
+    })
+  }
+  createSeoForm() {
+    this.seoForm = this.formBuilder.group({
+      title: [''],
+      keyword: [''],
+      meta_desc: ['']
+    })
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/pages/list-page/list-page.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Page Details</h5>
+                </div>
+                <div class="card-body">
+                    <div class="custom-datatable">
+                        <button class="btn btn-primary mr-1 mb-3" style="float: right;">Delete</button>
+                        <div class="clearfix"></div>
+                        <ngx-datatable class="bootstrap" [rows]="list_pages" [columnMode]="'force'" [headerHeight]="50"
+                            [footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected"
+                            [selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'>
+                            <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
+                                [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
+                                [checkboxable]="true">
+                                <button type="button" class="btn btn-primery">Delete</button>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column name="Name"></ngx-datatable-column>
+                            <ngx-datatable-column name="Status"></ngx-datatable-column>
+                            <ngx-datatable-column prop="created on"></ngx-datatable-column>
+                        </ngx-datatable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/pages/list-page/list-page.component.ts

+import { Component, OnInit } from '@angular/core';
+import { listPagesDB } from 'src/app/shared/tables/list-pages';
+
+@Component({
+  selector: 'app-list-page',
+  templateUrl: './list-page.component.html',
+  styleUrls: ['./list-page.component.scss']
+})
+export class ListPageComponent implements OnInit {
+  public list_pages = [];
+  public selected = [];
+
+  constructor() {
+    this.list_pages = listPagesDB.list_pages;
+  }
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/pages/pages-routing.module.ts

+import { NgModule, Component } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListPageComponent } from './list-page/list-page.component';
+import { CreatePageComponent } from './create-page/create-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'list-page',
+        component: ListPageComponent,
+        data: {
+          title: "List Page",
+          breadcrumb: "List Page"
+        }
+      },
+      {
+        path: 'create-page',
+        component: CreatePageComponent,
+        data: {
+          title: "Create Page",
+          breadcrumb: "Create Page"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PagesRoutingModule { }

src/app/components/pages/pages.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CKEditorModule } from 'ngx-ckeditor';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+
+import { PagesRoutingModule } from './pages-routing.module';
+import { ListPageComponent } from './list-page/list-page.component';
+import { CreatePageComponent } from './create-page/create-page.component';
+
+@NgModule({
+  declarations: [ListPageComponent, CreatePageComponent],
+  imports: [
+    CommonModule,
+    PagesRoutingModule,
+    NgbModule,
+    ReactiveFormsModule,
+    CKEditorModule,
+    NgxDatatableModule
+  ]
+})
+export class PagesModule { }

src/app/components/products/digital/digital-add/digital-add.component.html

+<div class="container-fluid">
+    <div class="row product-adding">
+        <div class="col-xl-6">
+            <div class="card">
+                <div class="card-header">
+                    <h5>General</h5>
+                </div>
+                <div class="card-body">
+                    <div class="digital-add needs-validation">
+                        <div class="form-group">
+                            <label for="validationCustom01" class="col-form-label pt-0"><span>*</span> Title</label>
+                            <input class="form-control" id="validationCustom01" type="text" required="">
+                        </div>
+                        <div class="form-group">
+                            <label for="validationCustomtitle" class="col-form-label pt-0"><span>*</span> SKU</label>
+                            <input class="form-control" id="validationCustomtitle" type="text" required="">
+                        </div>
+                        <div class="form-group">
+                            <label class="col-form-label"><span>*</span> Categories</label>
+                            <select class="custom-select" required="">
+                                <option value="">--Select--</option>
+                                <option value="1">eBooks</option>
+                                <option value="2">Graphic Design</option>
+                                <option value="3">3D Impact</option>
+                                <option value="4">Application</option>
+                                <option value="5">Websites</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-form-label">Sort Summary</label>
+                            <textarea rows="5" cols="12"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="validationCustom02" class="col-form-label"><span>*</span> Product Price</label>
+                            <input class="form-control" id="validationCustom02" type="text" required="">
+                        </div>
+                        <div class="form-group">
+                            <label class="col-form-label"><span>*</span> Status</label>
+                            <div class="m-checkbox-inline mb-0 custom-radio-ml d-flex radio-animated">
+                                <label class="d-block" for="edo-ani">
+                                    <input class="radio_animated" id="edo-ani" type="radio" name="rdo-ani">
+                                    Enable
+                                </label>
+                                <label class="d-block" for="edo-ani1">
+                                    <input class="radio_animated" id="edo-ani1" type="radio" name="rdo-ani">
+                                    Disable
+                                </label>
+                            </div>
+                        </div>
+                        <label class="col-form-label pt-0"> Product Upload</label>
+                        <div class="card-body dropzone-custom p-0">
+                            <div class="dropzone dropzone-primary" [dropzone]="config1" (error)="onUploadError($event)"
+                                (success)="onUploadSuccess($event)">
+                                <div class="dz-message needsclick">
+                                    <i class="fa fa-cloud-upload"></i>
+                                    <h4 class="mb-0 f-w-600">Drop files here or click to upload.</h4>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-xl-6">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Add Description</h5>
+                </div>
+                <div class="card-body">
+                    <div class="digital-add needs-validation">
+                        <div class="form-group mb-0">
+                            <div class="description-sm">
+                                <ck-editor id="editor1" language="en" [fullPage]="false"></ck-editor>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-header">
+                    <h5>Meta Data</h5>
+                </div>
+                <div class="card-body">
+                    <div class="digital-add needs-validation">
+                        <div class="form-group">
+                            <label for="validationCustom05" class="col-form-label pt-0"> Meta Title</label>
+                            <input class="form-control" id="validationCustom05" type="text" required="">
+                        </div>
+                        <div class="form-group">
+                            <label class="col-form-label">Meta Description</label>
+                            <textarea rows="4" cols="12"></textarea>
+                        </div>
+                        <div class="form-group mb-0">
+                            <div class="product-buttons text-center">
+                                <button type="button" class="btn btn-primary mr-1">Add</button>
+                                <button type="button" class="btn btn-light">Discard</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/products/digital/digital-add/digital-add.component.ts

+import { Component, OnInit } from '@angular/core';
+import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+
+@Component({
+  selector: 'app-digital-add',
+  templateUrl: './digital-add.component.html',
+  styleUrls: ['./digital-add.component.scss']
+})
+export class DigitalAddComponent implements OnInit {
+
+  constructor() { }
+
+  public config1: DropzoneConfigInterface = {
+    clickable: true,
+    maxFiles: 1,
+    autoReset: null,
+    errorReset: null,
+    cancelReset: null
+  };
+
+  public onUploadInit(args: any): void { }
+
+  public onUploadError(args: any): void { }
+
+  public onUploadSuccess(args: any): void { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/digital/digital-category/digital-category.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Digital Products</h5>
+                </div>
+                <div class="card-body">
+                    <div class="btn-popup pull-right">
+                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-original-title="test"
+                            data-target="#exampleModal" (click)="open(content)">Add Category</button>
+                        <ng-template #content let-modal>
+                            <div class="modal-header">
+                                <h5 class="modal-title f-w-600" id="exampleModalLabel">Add Digital Product</h5>
+                                <button type="button" class="close" aria-label="Close"
+                                    (click)="modal.dismiss('Cross click')">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <form class="needs-validation">
+                                    <div class="form">
+                                        <div class="form-group">
+                                            <label for="validationCustom01" class="mb-1">Category Name :</label>
+                                            <input class="form-control" id="validationCustom01" type="text">
+                                        </div>
+                                        <div class="form-group mb-0">
+                                            <label for="validationCustom02" class="mb-1">Category Image :</label>
+                                            <input class="form-control" id="validationCustom02" type="file">
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-primary" >Save</button>
+                                <button class="btn btn-secondary" type="button" data-dismiss="modal"
+                                    (click)="modal.dismiss('Cross click')">Close</button>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div id="batchDelete" class="category-table custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="digital_categories"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/products/digital/digital-category/digital-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { digitalCategoryDB } from 'src/app/shared/tables/digital-category';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-digital-category',
+  templateUrl: './digital-category.component.html',
+  styleUrls: ['./digital-category.component.scss']
+})
+export class DigitalCategoryComponent implements OnInit {
+  public closeResult: string;
+  public digital_categories = []
+
+  constructor(private modalService: NgbModal) {
+    this.digital_categories = digitalCategoryDB.digital_category;
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      img: {
+        title: 'Image',
+        type: 'html',
+      },
+      product_name: {
+        title: 'Name'
+      },
+      price: {
+        title: 'Price'
+      },
+      status: {
+        title: 'Status',
+        type: 'html',
+      },
+      category: {
+        title: 'Category',
+      }
+    },
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/digital/digital-list/digital-list.component.html

+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Product Lists</h5>
+                </div>
+                <div class="card-body">
+                    <div id="batchDelete" class="custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="digital_list"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/products/digital/digital-list/digital-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { digitalListDB } from 'src/app/shared/tables/digital-list';
+@Component({
+  selector: 'app-digital-list',
+  templateUrl: './digital-list.component.html',
+  styleUrls: ['./digital-list.component.scss']
+})
+export class DigitalListComponent implements OnInit {
+  public digital_list = []
+
+  constructor() {
+    this.digital_list = digitalListDB.digital_list;
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      id: {
+        title: 'Id',
+      },
+      img: {
+        title: 'Product',
+        type: 'html',
+      },
+      title: {
+        title: 'Product Title'
+      },
+      entry_type: {
+        title: 'Entry Type',
+      },
+      quantity: {
+        title: 'Quantity',
+      }
+    },
+  };
+
+  ngOnInit() { }
+
+}

src/app/components/products/digital/digital-sub-category/digital-sub-category.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Digital Sub Category</h5>
+                </div>
+                <div class="card-body">
+                    <div class="btn-popup pull-right">
+                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-original-title="test"
+                            data-target="#exampleModal" (click)="open(content)">Add Sub Category</button>
+                        <ng-template #content let-modal>
+                            <div class="modal-header">
+                                <h5 class="modal-title f-w-600" id="exampleModalLabel">Add Digital Product</h5>
+                                <button type="button" class="close" aria-label="Close"
+                                    (click)="modal.dismiss('Cross click')">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <form class="needs-validation">
+                                    <div class="form">
+                                        <div class="form-group">
+                                            <label for="validationCustom01" class="mb-1">Sub Category Name :</label>
+                                            <input class="form-control" id="validationCustom01" type="text">
+                                        </div>
+                                        <div class="form-group mb-0">
+                                            <label for="validationCustom02" class="mb-1">Sub Category Image :</label>
+                                            <input class="form-control" id="validationCustom02" type="file">
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-primary" >Save</button>
+                                <button class="btn btn-secondary" type="button" data-dismiss="modal"
+                                    (click)="modal.dismiss('Cross click')">Close</button>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div id="batchDelete" class="category-table custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="digital_sub_categories"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/products/digital/digital-sub-category/digital-sub-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { digitalSubCategoryDB } from 'src/app/shared/tables/digital-sub-category';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-digital-sub-category',
+  templateUrl: './digital-sub-category.component.html',
+  styleUrls: ['./digital-sub-category.component.scss']
+})
+export class DigitalSubCategoryComponent implements OnInit {
+  public closeResult: string;
+  public digital_sub_categories = []
+
+  constructor(private modalService: NgbModal) {
+    this.digital_sub_categories = digitalSubCategoryDB.digital_sub_category;
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      img: {
+        title: 'Image',
+        type: 'html',
+      },
+      product_name: {
+        title: 'Name'
+      },
+      price: {
+        title: 'Price'
+      },
+      status: {
+        title: 'Status',
+        type: 'html',
+      },
+      category: {
+        title: 'Sub Category',
+      }
+    },
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/physical/add-product/add-product.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Add Product</h5>
+                </div>
+                <div class="card-body">
+                    <div class="row product-adding">
+                        <div class="col-xl-5">
+                            <div class="add-product">
+                                <div class="row">
+                                    <div class="col-xl-9 xl-50 col-sm-6 col-9">
+                                        <img src="assets/images/pro3/1.jpg" alt="" class="img-fluid image_zoom_1">
+                                    </div>
+                                    <div class="col-xl-3 xl-50 col-sm-6 col-3">
+                                        <ul class="file-upload-product">
+                                            <li *ngFor="let item of url; let i=index">
+                                                <div class="box-input-file">
+                                                    <input class="upload" type="file" (change)="readUrl($event,i)">
+                                                    <img class="imgUpload" alt="" [src]="item.img"></div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-7">
+                            <form class="needs-validation" [formGroup]="productForm" novalidate>
+                                <div class="add-product-form">
+                                    <div class="form-group row">
+                                        <label for="validationCustom01" class="col-xl-3 col-sm-4 mb-0">Title
+                                            :</label>
+                                        <input class="form-control col-xl-8 col-sm-7" id="validationCustom01"
+                                            type="text" [formControl]="productForm.controls['name']" required>
+                                        <div *ngIf="productForm.controls.name.touched && productForm.controls.name.errors?.required"
+                                            class="text text-danger">
+                                            Title Name is required.
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label for="validationCustom02" class="col-xl-3 col-sm-4 mb-0">Price :</label>
+                                        <input class="form-control col-xl-8 col-sm-7" id="validationCustom02"
+                                            type="number" [formControl]="productForm.controls['price']" required="">
+                                        <div *ngIf="productForm.controls.price.touched && productForm.controls.price.errors?.required"
+                                            class="text text-danger">
+                                            Product Price is required.
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label for="validationCustom03" class="col-xl-3 col-sm-4 mb-0">Product Code
+                                            :</label>
+                                        <input class="form-control col-xl-8 col-sm-7" id="validationCustom03"
+                                            type="number" [formControl]="productForm.controls['code']" required="">
+                                        <div *ngIf="productForm.controls.code.touched && productForm.controls.code.errors?.required"
+                                            class="text text-danger">
+                                            Product <Code></Code> is required.
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label for="exampleFormControlSelect1" class="col-xl-3 col-sm-4 mb-0">Select
+                                            Size
+                                            :</label>
+                                        <select class="form-control digits col-xl-8 col-sm-7"
+                                            id="exampleFormControlSelect1">
+                                            <option>Small</option>
+                                            <option>Medium</option>
+                                            <option>Large</option>
+                                            <option>Extra Large</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-sm-4 mb-0">Total Products :</label>
+                                        <div class="qty-box1">
+                                            <div class="input-group">
+                                                <i class="fa fa-minus btnGtr1" (click)=decrement()></i>
+                                                <input class="touchspin1 text-center" name="counter" [value]="counter"
+                                                    type="text">
+                                                <i class="fa fa-plus btnLess1" (click)=increment()></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-xl-3 col-sm-4">Add Description :</label>
+                                        <div class="col-xl-8 col-sm-7 pl-0 description-sm">
+                                            <ck-editor id="editor1" language="en" [fullPage]="false"></ck-editor>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
+                            <div class="form-group row mb-0">
+                                <div class="product-buttons col-sm-8 offset-xl-3 offset-sm-4">
+                                    <button type="button" class="btn btn-primary mr-1">Add</button>
+                                    <button type="button" class="btn btn-light">Discard</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/products/physical/add-product/add-product.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+@Component({
+  selector: 'app-add-product',
+  templateUrl: './add-product.component.html',
+  styleUrls: ['./add-product.component.scss']
+})
+export class AddProductComponent implements OnInit {
+  public productForm: FormGroup;
+  public counter: number = 1;
+  public url = [{
+    img: "assets/images/user.png",
+  },
+  {
+    img: "assets/images/user.png",
+  },
+  {
+    img: "assets/images/user.png",
+  },
+  {
+    img: "assets/images/user.png",
+  },
+  {
+    img: "assets/images/user.png",
+  }
+  ]
+
+
+  constructor(private fb: FormBuilder) {
+    this.productForm = this.fb.group({
+      name: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
+      price: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
+      code: ['', [Validators.required, Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
+      size: ['', Validators.required],
+    })
+  }
+
+  increment() {
+    this.counter += 1;
+  }
+
+  decrement() {
+    this.counter -= 1;
+  }
+
+  //FileUpload
+  readUrl(event: any, i) {
+    if (event.target.files.length === 0)
+      return;
+    //Image upload validation
+    var mimeType = event.target.files[0].type;
+    if (mimeType.match(/image\/*/) == null) {
+      return;
+    }
+    // Image upload
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]);
+    reader.onload = (_event) => {
+      this.url[i].img = reader.result.toString();
+    }
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/physical/category/category.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Products Category</h5>
+                </div>
+                <div class="card-body">
+                    <div class="btn-popup pull-right">
+                        <button type="button" class="btn btn-primary" data-toggle="modal" data-original-title="test"
+                            data-target="#exampleModal" (click)="open(content)">Add Category</button>
+                        <ng-template #content let-modal>
+                            <div class="modal-header">
+                                <h5 class="modal-title f-w-600" id="exampleModalLabel">Add Physical Product</h5>
+                                <button type="button" class="close" aria-label="Close"
+                                    (click)="modal.dismiss('Cross click')">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <form class="needs-validation">
+                                    <div class="form">
+                                        <div class="form-group">
+                                            <label for="validationCustom01" class="mb-1">Category Name :</label>
+                                            <input class="form-control" id="validationCustom01" type="text">
+                                        </div>
+                                        <div class="form-group mb-0">
+                                            <label for="validationCustom02" class="mb-1">Category Image :</label>
+                                            <input class="form-control" id="validationCustom02" type="file">
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-primary">Save</button>
+                                <button class="btn btn-secondary" type="button" data-dismiss="modal"
+                                    (click)="modal.dismiss('Cross click')">Close</button>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div id="batchDelete" class="category-table custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="categories"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/products/physical/category/category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { categoryDB } from '../../../../shared/tables/category';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-category',
+  templateUrl: './category.component.html',
+  styleUrls: ['./category.component.scss']
+})
+export class CategoryComponent implements OnInit {
+  public closeResult: string;
+  public categories = []
+
+  constructor(private modalService: NgbModal) {
+    this.categories = categoryDB.category;
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      img: {
+        title: 'Image',
+        type: 'html',
+      },
+      product_name: {
+        title: 'Name'
+      },
+      price: {
+        title: 'Price'
+      },
+      status: {
+        title: 'Status',
+        type: 'html',
+      },
+      category: {
+        title: 'Category',
+      }
+    },
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/physical/product-detail/product-detail.component.html

+<div class="container-fluid">
+    <div class="card">
+        <div class="row product-page-main card-body">
+            <div class="col-xl-4">
+                <section>
+                    <ks-carousel [id]="100" [images]="imagesRect" [dotsConfig]="{visible: false}"
+                        [carouselConfig]="{maxHeight: '600px', keyboardEnable: true}"
+                        [previewConfig]="{maxHeight: '125px'}">
+                    </ks-carousel>
+                </section>
+            </div>
+            <div class="col-xl-8">
+                <div class="product-page-details product-right mb-0">
+                    <h2>WOMEN PINK SHIRT</h2>
+                    <ngb-rating [rate]="3" class="rating-size-product"></ngb-rating>
+                    <hr>
+                    <h6 class="product-title">product details</h6>
+                    <p class="mb-0">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
+                        doloremque
+                        laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto
+                        beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem,</p>
+                    <div class="product-price digits mt-2">
+                        <h3>$26.00 <del>$350.00</del></h3>
+                    </div>
+                    <ul class="color-variant">
+                        <li class="bg-light0"></li>
+                        <li class="bg-light1"></li>
+                        <li class="bg-light2"></li>
+                    </ul>
+                    <hr>
+                    <h6 class="product-title size-text">select size
+                        <span class="pull-right">
+                            <a data-toggle="modal" (click)="open(content)" class="font-primary">size chart</a>
+                        </span>
+                    </h6>
+                    <ng-template #content let-modal>
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="exampleModalLabel">Sheer Straight Kurta</h5>
+                            <button type="button" class="close" aria-label="Close"
+                                (click)="modal.dismiss('Cross click')">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <img src="assets/images/size-chart.jpg" alt="" class="img-fluid blur-up lazyloaded">
+                        </div>
+                    </ng-template>
+                    <div class="size-box">
+                        <ul>
+                            <li class="active"><a href="javascript:void(0)">s</a></li>
+                            <li><a href="javascript:void(0)">m</a></li>
+                            <li><a href="javascript:void(0)">l</a></li>
+                            <li><a href="javascript:void(0)">xl</a></li>
+                        </ul>
+                    </div>
+                    <div class="add-product-form">
+                        <h6 class="product-title">quantity</h6>
+                        <div class="qty-box1">
+                            <div class="input-group">
+                                <i class="fa fa-minus btnGtr1" (click)=decrement()></i>
+                                <input class="touchspin1 text-center" name="counter" [value]="counter" type="text">
+                                <i class="fa fa-plus btnLess1" (click)=increment()></i>
+                            </div>
+                        </div>
+                    </div>
+                    <hr>
+                    <h6 class="product-title">Time Reminder</h6>
+                    <div class="timer">
+                        <p id="demo"><span>25 <span class="padding-l">:</span> <span class="timer-cal">Days</span>
+                            </span><span>22 <span class="padding-l">:</span> <span class="timer-cal">Hrs</span>
+                            </span><span>13 <span class="padding-l">:</span> <span class="timer-cal">Min</span>
+                            </span><span>57 <span class="timer-cal">Sec</span></span>
+                        </p>
+                    </div>
+                    <div class="m-t-15">
+                        <button class="btn btn-primary m-r-10" type="button">Add To Cart</button>
+                        <button class="btn btn-secondary" type="button">Buy Now</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/products/physical/product-detail/product-detail.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+import { Image } from '@ks89/angular-modal-gallery';
+import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-product-detail',
+  templateUrl: './product-detail.component.html',
+  styleUrls: ['./product-detail.component.scss'],
+  providers: [NgbRatingConfig]
+})
+export class ProductDetailComponent implements OnInit {
+  public closeResult: string;
+  public counter: number = 1;
+
+  public imagesRect: Image[] = [
+    new Image(0, { img: 'assets/images/pro3/2.jpg' }, { img: 'assets/images/pro3/1.jpg' }),
+    new Image(1, { img: 'assets/images/pro3/27.jpg' }, { img: 'assets/images/pro3/27.jpg' }),
+    new Image(2, { img: 'assets/images/pro3/1.jpg' }, { img: 'assets/images/pro3/1.jpg' }),
+    new Image(3, { img: 'assets/images/pro3/2.jpg' }, { img: 'assets/images/pro3/2.jpg' })]
+
+  constructor(private modalService: NgbModal, config: NgbRatingConfig) {
+    config.max = 5;
+    config.readonly = false;
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+  increment() {
+    this.counter += 1;
+  }
+
+  decrement() {
+    this.counter -= 1;
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/physical/product-list/product-list.component.html

+<div class="container-fluid">
+    <div class="row products-admin ratio_asos">
+        <div class="col-xl-3 col-sm-6" *ngFor="let product of product_list">
+            <div class="card">
+                <div class="card-body product-box">
+                    <div class="img-wrapper">
+                        <div class="lable-block"><span class="lable3" *ngIf="product.tag == 'new'">new</span> <span
+                                class="lable4" *ngIf="product.sale == 'on sale'">on sale</span></div>
+                        <div class="front">
+                            <a href="javascript:void(0)"><img [src]="[product.img]"
+                                    class="img-fluid blur-up lazyload bg-img" alt=""></a>
+                            <div class="product-hover">
+                                <ul>
+                                    <li>
+                                        <button class="btn" type="button" data-original-title="" title=""><i
+                                                class="icon-pencil-alt"></i></button>
+                                    </li>
+                                    <li>
+                                        <button class="btn" type="button" data-toggle="modal"
+                                            data-target="#exampleModalCenter" data-original-title="" title=""><i
+                                                class="icon-trash"></i></button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="product-detail">
+                        <div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
+                                class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></div>
+                        <a href="javascript:void(0)">
+                            <h6>{{product.product_title}}</h6>
+                        </a>
+                        <h4>{{product.discount}} <del>{{product.price}}</del></h4>
+                        <ul class="color-variant">
+                            <li class="bg-light0"></li>
+                            <li class="bg-light1"></li>
+                            <li class="bg-light2"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/products/physical/product-list/product-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { productDB } from 'src/app/shared/tables/product-list';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrls: ['./product-list.component.scss']
+})
+export class ProductListComponent implements OnInit {
+
+  public product_list = []
+
+  constructor() {
+    this.product_list = productDB.product;
+  }
+
+  ngOnInit() {}
+
+
+}

src/app/components/products/physical/sub-category/sub-category.component.html

+<!-- Container-fluid starts-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header">
+                    <h5>Products Sub Category</h5>
+                </div>
+                <div class="card-body">
+                    <div class="btn-popup pull-right">
+                        <button type="button" class="btn btn-primary" data-toggle="modal" data-original-title="test"
+                            data-target="#exampleModal" (click)="open(content)">Add Sub Category</button>
+                        <ng-template #content let-modal>
+                            <div class="modal-header">
+                                <h5 class="modal-title f-w-600" id="exampleModalLabel">Add Physical Product</h5>
+                                <button type="button" class="close" aria-label="Close"
+                                    (click)="modal.dismiss('Cross click')">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <form class="needs-validation">
+                                    <div class="form">
+                                        <div class="form-group">
+                                            <label for="validationCustom01" class="mb-1">Sub Category Name :</label>
+                                            <input class="form-control" id="validationCustom01" type="text">
+                                        </div>
+                                        <div class="form-group mb-0">
+                                            <label for="validationCustom02" class="mb-1">Sub Category Image :</label>
+                                            <input class="form-control" id="validationCustom02" type="file">
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-primary" >Save</button>
+                                <button class="btn btn-secondary" type="button" data-dismiss="modal"
+                                    (click)="modal.dismiss('Cross click')">Close</button>
+                            </div>
+                        </ng-template>
+                    </div>
+                    <div id="batchDelete" class="category-table custom-datatable">
+                        <div class="table-responsive">
+                            <ng2-smart-table [settings]="settings" [source]="sub_categories"></ng2-smart-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Container-fluid Ends-->
\ No newline at end of file

src/app/components/products/physical/sub-category/sub-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { categoryDB } from 'src/app/shared/tables/category';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-sub-category',
+  templateUrl: './sub-category.component.html',
+  styleUrls: ['./sub-category.component.scss']
+})
+export class SubCategoryComponent implements OnInit {
+  public closeResult: string;
+  public sub_categories = []
+
+  constructor(private modalService: NgbModal) {
+    this.sub_categories = categoryDB.category;
+  }
+
+  open(content) {
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return `with: ${reason}`;
+    }
+  }
+
+
+  public settings = {
+    actions: {
+      position: 'right'
+    },
+    columns: {
+      img: {
+        title: 'Image',
+        type: 'html',
+      },
+      product_name: {
+        title: 'Name'
+      },
+      price: {
+        title: 'Price'
+      },
+      status: {
+        title: 'Status',
+        type: 'html',
+      },
+      category: {
+        title: 'Sub Category',
+      }
+    },
+  };
+
+  ngOnInit() {
+  }
+
+}

src/app/components/products/products-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CategoryComponent } from './physical/category/category.component';
+import { SubCategoryComponent } from './physical/sub-category/sub-category.component';
+import { ProductListComponent } from './physical/product-list/product-list.component';
+import { AddProductComponent } from './physical/add-product/add-product.component';
+import { DigitalCategoryComponent } from './digital/digital-category/digital-category.component';
+import { DigitalSubCategoryComponent } from './digital/digital-sub-category/digital-sub-category.component';
+import { DigitalListComponent } from './digital/digital-list/digital-list.component';
+import { DigitalAddComponent } from './digital/digital-add/digital-add.component';
+import { ProductDetailComponent } from './physical/product-detail/product-detail.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'physical/category',
+        component: CategoryComponent,
+        data: {
+          title: "Category",
+          breadcrumb: "Category"
+        }
+      },
+      {
+        path: 'physical/sub-category',
+        component: SubCategoryComponent,
+        data: {
+          title: "Sub Category",
+          breadcrumb: "Sub Category"
+        }
+      },
+      {
+        path: 'physical/product-list',
+        component: ProductListComponent,
+        data: {
+          title: "Product List",
+          breadcrumb: "Product List"
+        }
+      },
+      {
+        path: 'physical/product-detail',
+        component: ProductDetailComponent,
+        data: {
+          title: "Product Detail",
+          breadcrumb: "Product Detail"
+        }
+      },
+      {
+        path: 'physical/add-product',
+        component: AddProductComponent,
+        data: {
+          title: "Add Products",
+          breadcrumb: "Add Product"
+        }
+      },
+      {
+        path: 'digital/digital-category',
+        component: DigitalCategoryComponent,
+        data: {
+          title: "Category",
+          breadcrumb: "Category"
+        }
+      },
+      {
+        path: 'digital/digital-sub-category',
+        component: DigitalSubCategoryComponent,
+        data: {
+          title: "Sub Category",
+          breadcrumb: "Sub Category"
+        }
+      },
+      {
+        path: 'digital/digital-product-list',
+        component: DigitalListComponent,
+        data: {
+          title: "Product List",
+          breadcrumb: "Product List"
+        }
+      },
+      {
+        path: 'digital/digital-add-product',
+        component: DigitalAddComponent,
+        data: {
+          title: "Add Products",
+          breadcrumb: "Add Product"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProductsRoutingModule { }

src/app/components/products/products.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { CKEditorModule } from 'ngx-ckeditor';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { ProductsRoutingModule } from './products-routing.module';
+import { CategoryComponent } from './physical/category/category.component';
+import { SubCategoryComponent } from './physical/sub-category/sub-category.component';
+import { ProductListComponent } from './physical/product-list/product-list.component';
+import { AddProductComponent } from './physical/add-product/add-product.component';
+import { DigitalCategoryComponent } from './digital/digital-category/digital-category.component';
+import { DigitalSubCategoryComponent } from './digital/digital-sub-category/digital-sub-category.component';
+import { DigitalListComponent } from './digital/digital-list/digital-list.component';
+import { DigitalAddComponent } from './digital/digital-add/digital-add.component';
+import { ProductDetailComponent } from './physical/product-detail/product-detail.component';
+import { GalleryModule } from '@ks89/angular-modal-gallery';
+import 'hammerjs';
+import 'mousetrap';
+
+import { DropzoneModule } from 'ngx-dropzone-wrapper';
+import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
+import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+
+const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
+  maxFilesize: 50,
+  url: 'https://httpbin.org/post',
+};
+
+
+
+@NgModule({
+  declarations: [CategoryComponent, SubCategoryComponent, ProductListComponent, AddProductComponent, DigitalCategoryComponent, DigitalSubCategoryComponent, DigitalListComponent, DigitalAddComponent, ProductDetailComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CKEditorModule,
+    ProductsRoutingModule,
+    Ng2SmartTableModule,
+    NgbModule,
+    DropzoneModule,
+    GalleryModule.forRoot()
+  ],
+  providers: [
+    {
+      provide: DROPZONE_CONFIG,
+      useValue: DEFAULT_DROPZONE_CONFIG
+    },
+    NgbActiveModal
+  ]
+})
+export class ProductsModule { }

src/app/components/reports/reports-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ReportsComponent } from './reports.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ReportsComponent,
+    data: {
+      title: "Reports",
+      breadcrumb: "Reports"
+    }
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ReportsRoutingModule { }