├── src ├── app │ ├── app.component.scss │ ├── app.component.html │ ├── pages │ │ ├── auth │ │ │ ├── guards │ │ │ │ ├── index.ts │ │ │ │ └── auth.guard.ts │ │ │ ├── pipes │ │ │ │ ├── index.ts │ │ │ │ └── year.pipe.ts │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ └── auth-page │ │ │ │ │ ├── auth-page.component.ts │ │ │ │ │ ├── auth-page.component.html │ │ │ │ │ └── auth-page.component.scss │ │ │ ├── models │ │ │ │ ├── index.ts │ │ │ │ ├── user.ts │ │ │ │ └── email.ts │ │ │ ├── services │ │ │ │ ├── index.ts │ │ │ │ ├── auth.service.ts │ │ │ │ └── email.service.ts │ │ │ ├── components │ │ │ │ ├── index.ts │ │ │ │ ├── sign-form │ │ │ │ │ ├── sign-form.component.scss │ │ │ │ │ ├── sign-form.component.html │ │ │ │ │ └── sign-form.component.ts │ │ │ │ └── login-form │ │ │ │ │ ├── login-form.component.scss │ │ │ │ │ ├── login-form.component.html │ │ │ │ │ └── login-form.component.ts │ │ │ ├── auth-routing.module.ts │ │ │ └── auth.module.ts │ │ ├── ui-elements │ │ │ ├── consts │ │ │ │ ├── index.ts │ │ │ │ └── api.ts │ │ │ ├── components │ │ │ │ ├── pie-chart │ │ │ │ │ ├── pie-chart.component.scss │ │ │ │ │ ├── pie-chart.component.html │ │ │ │ │ └── pie-chart.component.ts │ │ │ │ ├── line-chart │ │ │ │ │ ├── line-chart.component.scss │ │ │ │ │ ├── line-chart.component.html │ │ │ │ │ └── line-chart.component.ts │ │ │ │ ├── heatmap-chart │ │ │ │ │ ├── heatmap-chart.component.scss │ │ │ │ │ ├── heatmap-chart.component.html │ │ │ │ │ └── heatmap-chart.component.ts │ │ │ │ ├── dashed-line-chart │ │ │ │ │ ├── dashed-line-chart.component.scss │ │ │ │ │ ├── dashed-line-chart.component.html │ │ │ │ │ └── dashed-line-chart.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── icons-page │ │ │ │ │ ├── icons-page.component.html │ │ │ │ │ └── icons-page.component.scss │ │ │ ├── services │ │ │ │ ├── index.ts │ │ │ │ └── charts.service.ts │ │ │ ├── containers │ │ │ │ ├── map-page │ │ │ │ │ ├── map-page.component.scss │ │ │ │ │ ├── map-page.component.html │ │ │ │ │ └── map-page.component.ts │ │ │ │ ├── index.ts │ │ │ │ └── charts-page │ │ │ │ │ ├── charts-page.component.scss │ │ │ │ │ ├── charts-page.component.ts │ │ │ │ │ └── charts-page.component.html │ │ │ ├── models │ │ │ │ ├── pie-chart-data.ts │ │ │ │ ├── heatmap-chart-data.ts │ │ │ │ ├── index.ts │ │ │ │ ├── line-chart-data.ts │ │ │ │ └── dashed-line-chart-data.ts │ │ │ ├── ui-elements-routing.module.ts │ │ │ └── ui-elements.module.ts │ │ ├── dashboard │ │ │ ├── consts │ │ │ │ ├── index.ts │ │ │ │ └── custom-tooltip.ts │ │ │ ├── services │ │ │ │ └── index.ts │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ └── dashboard-page │ │ │ │ │ ├── dashboard-page.component.scss │ │ │ │ │ ├── dashboard-page.component.html │ │ │ │ │ └── dashboard-page.component.ts │ │ │ ├── models │ │ │ │ ├── performance-chart-data.ts │ │ │ │ ├── revenue-chart-data.ts │ │ │ │ ├── visits-chart-data.ts │ │ │ │ ├── support-request-data.ts │ │ │ │ ├── server-chart-data.ts │ │ │ │ ├── daily-line-chart-data.ts │ │ │ │ ├── index.ts │ │ │ │ └── project-stat-data.ts │ │ │ ├── components │ │ │ │ ├── index.ts │ │ │ │ ├── performance-chart │ │ │ │ │ ├── performance-chart.component.ts │ │ │ │ │ ├── performance-chart.component.html │ │ │ │ │ └── performance-chart.component.scss │ │ │ │ ├── revenue-chart │ │ │ │ │ ├── revenue-chart.component.html │ │ │ │ │ ├── revenue-chart.component.scss │ │ │ │ │ └── revenue-chart.component.ts │ │ │ │ ├── visits-chart │ │ │ │ │ ├── visits-chart.component.ts │ │ │ │ │ ├── visits-chart.component.html │ │ │ │ │ └── visits-chart.component.scss │ │ │ │ ├── support-requests │ │ │ │ │ ├── support-requests.component.ts │ │ │ │ │ ├── support-requests.component.html │ │ │ │ │ └── support-requests.component.scss │ │ │ │ ├── server-chart │ │ │ │ │ ├── server-chart.component.html │ │ │ │ │ ├── server-chart.component.scss │ │ │ │ │ └── server-chart.component.ts │ │ │ │ ├── daily-line-chart │ │ │ │ │ ├── daily-line-chart.component.html │ │ │ │ │ └── daily-line-chart.component.scss │ │ │ │ └── project-stat-chart │ │ │ │ │ ├── project-stat-chart.component.scss │ │ │ │ │ └── project-stat-chart.component.ts │ │ │ └── dashboard.module.ts │ │ ├── tables │ │ │ ├── services │ │ │ │ ├── index.ts │ │ │ │ └── tables.service.ts │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ └── tables-page │ │ │ │ │ ├── tables-page.component.scss │ │ │ │ │ ├── tables-page.component.html │ │ │ │ │ └── tables-page.component.ts │ │ │ ├── models │ │ │ │ ├── index.ts │ │ │ │ ├── employee.ts │ │ │ │ └── customer.ts │ │ │ ├── components │ │ │ │ ├── index.ts │ │ │ │ ├── material-table │ │ │ │ │ ├── material-table.component.ts │ │ │ │ │ ├── material-table.component.html │ │ │ │ │ └── material-table.component.scss │ │ │ │ └── employee-table │ │ │ │ │ ├── employee-table.component.scss │ │ │ │ │ ├── employee-table.component.ts │ │ │ │ │ └── employee-table.component.html │ │ │ ├── tables-routing.module.ts │ │ │ └── tables.module.ts │ │ ├── typography │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ └── typography-page │ │ │ │ │ ├── typography-page.component.ts │ │ │ │ │ ├── typography-page.component.scss │ │ │ │ │ └── typography-page.component.html │ │ │ ├── typography-routing.module.ts │ │ │ └── typography.module.ts │ │ ├── notification │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ ├── error-toastr │ │ │ │ │ ├── error-toastr.component.html │ │ │ │ │ ├── error-toastr.component.scss │ │ │ │ │ └── error-toastr.component.ts │ │ │ │ ├── success-toast │ │ │ │ │ ├── success-toast.component.html │ │ │ │ │ ├── success-toast.component.scss │ │ │ │ │ └── success-toast.component.ts │ │ │ │ ├── info-toastr │ │ │ │ │ ├── info-toastr.component.html │ │ │ │ │ ├── info-toastr.component.scss │ │ │ │ │ └── info-toastr.component.ts │ │ │ │ └── notification-page │ │ │ │ │ └── notification-page.component.ts │ │ │ ├── notification-routing.module.ts │ │ │ └── notification.module.ts │ │ └── not-found │ │ │ ├── not-found.component.ts │ │ │ ├── not-found.component.html │ │ │ └── not-found.component.scss │ ├── shared │ │ ├── header │ │ │ ├── pipes │ │ │ │ ├── index.ts │ │ │ │ └── short-name.ts │ │ │ ├── containers │ │ │ │ ├── index.ts │ │ │ │ └── header │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.ts │ │ │ │ │ └── header.component.scss │ │ │ ├── components │ │ │ │ ├── index.ts │ │ │ │ ├── search │ │ │ │ │ ├── search.component.html │ │ │ │ │ ├── search.component.ts │ │ │ │ │ └── search.component.scss │ │ │ │ ├── notifications │ │ │ │ │ ├── notifications.component.ts │ │ │ │ │ ├── notifications.component.scss │ │ │ │ │ └── notifications.component.html │ │ │ │ ├── email │ │ │ │ │ ├── email.component.ts │ │ │ │ │ ├── email.component.html │ │ │ │ │ └── email.component.scss │ │ │ │ └── user │ │ │ │ │ ├── user.component.ts │ │ │ │ │ ├── user.component.html │ │ │ │ │ └── user.component.scss │ │ │ └── header.module.ts │ │ ├── ui-elements │ │ │ ├── date-menu │ │ │ │ ├── date-menu.component.scss │ │ │ │ ├── date-menu.component.html │ │ │ │ └── date-menu.component.ts │ │ │ ├── index.ts │ │ │ └── settings-menu │ │ │ │ ├── settings-menu.component.ts │ │ │ │ ├── settings-menu.component.html │ │ │ │ └── settings-menu.component.scss │ │ ├── footer │ │ │ ├── footer.component.ts │ │ │ ├── footer.component.html │ │ │ └── footer.component.scss │ │ ├── sidebar │ │ │ ├── sidebar.component.ts │ │ │ ├── sidebar.component.scss │ │ │ └── sidebar.component.html │ │ ├── layout │ │ │ ├── layout.component.scss │ │ │ ├── layout.component.html │ │ │ └── layout.component.ts │ │ └── shared.module.ts │ ├── consts │ │ ├── index.ts │ │ ├── colors.ts │ │ └── routes.ts │ ├── app.component.ts │ ├── styles │ │ ├── font.scss │ │ ├── colors.scss │ │ ├── toasrt.scss │ │ └── variables.scss │ ├── app.module.ts │ └── app-routing.module.ts ├── favicon.ico ├── environments │ ├── environment.hmr.ts │ ├── environment.prod.ts │ └── environment.ts ├── assets │ ├── auth │ │ ├── logo.svg │ │ └── google.svg │ └── hot-found │ │ └── logo.svg ├── hmr.ts ├── main.ts ├── index.html └── polyfills.ts ├── docs ├── favicon.ico ├── fontawesome-webfont.1e59d2330b4c6deb84b3.ttf ├── fontawesome-webfont.8b43027f47b20503057d.eot ├── fontawesome-webfont.f691f37e57f04c152e23.woff ├── fontawesome-webfont.20fd1704ea223900efa9.woff2 ├── assets │ ├── auth │ │ ├── logo.svg │ │ └── google.svg │ └── hot-found │ │ └── logo.svg ├── runtime-es5.04ef36e01dd49e8130ab.js └── runtime-es2015.04ef36e01dd49e8130ab.js ├── tsconfig.app.json ├── .editorconfig ├── .browserslistrc ├── tsconfig.json ├── .gitignore ├── LICENSE.txt ├── package.json ├── changelog.md ├── angular.json ├── tslint.json └── README.md /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/guards/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auth.guard'; 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/pipes/index.ts: -------------------------------------------------------------------------------- 1 | export * from './year.pipe'; 2 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/consts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './api'; 2 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/pie-chart/pie-chart.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/shared/header/pipes/index.ts: -------------------------------------------------------------------------------- 1 | export * from './short-name'; 2 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/consts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './custom-tooltip'; 2 | -------------------------------------------------------------------------------- /src/app/pages/tables/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tables.service'; 2 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/line-chart/line-chart.component.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/consts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './routes'; 2 | export * from './colors'; 3 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dashboard.service'; 2 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/heatmap-chart/heatmap-chart.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './charts.service'; 2 | -------------------------------------------------------------------------------- /src/app/shared/header/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header/header.component'; 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auth-page/auth-page.component'; 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './user'; 2 | export * from './email'; 3 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/dashed-line-chart/dashed-line-chart.component.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/pages/tables/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tables-page/tables-page.component'; 2 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /src/app/pages/tables/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './employee'; 2 | export * from './customer'; 3 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dashboard-page/dashboard-page.component'; 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/models/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | name: string; 3 | lastName: string; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/pages/auth/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './auth.service'; 2 | export * from './email.service'; 3 | -------------------------------------------------------------------------------- /src/app/pages/typography/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './typography-page/typography-page.component'; 2 | -------------------------------------------------------------------------------- /src/environments/environment.hmr.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false, 3 | hmr: true 4 | }; 5 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | hmr: false 4 | }; 5 | -------------------------------------------------------------------------------- /src/app/pages/tables/containers/tables-page/tables-page.component.scss: -------------------------------------------------------------------------------- 1 | .tables-wrapper { 2 | padding: 0 8px; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/consts/api.ts: -------------------------------------------------------------------------------- 1 | export const googleMapKey: string = 'AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg'; 2 | -------------------------------------------------------------------------------- /src/app/pages/auth/models/email.ts: -------------------------------------------------------------------------------- 1 | export interface Email { 2 | name: string; 3 | time: string; 4 | message: string 5 | } 6 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/map-page/map-page.component.scss: -------------------------------------------------------------------------------- 1 | .agm-map { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/models/pie-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface PieChartData { 2 | series: number[], 3 | labels: string[] 4 | } 5 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './login-form/login-form.component'; 2 | export * from './sign-form/sign-form.component'; 3 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/performance-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface PerformanceChartData { 2 | integration: number; 3 | sdk: number; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './map-page/map-page.component'; 2 | export * from './charts-page/charts-page.component'; 3 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/date-menu/date-menu.component.scss: -------------------------------------------------------------------------------- 1 | .date-menu { 2 | border: none; 3 | width: 55px; 4 | padding: 8px 0 8px 4px; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/index.ts: -------------------------------------------------------------------------------- 1 | export * from './settings-menu/settinds-menu.component'; 2 | export * from './date-menu/date-menu.component'; 3 | -------------------------------------------------------------------------------- /src/app/pages/tables/models/employee.ts: -------------------------------------------------------------------------------- 1 | export interface Employee { 2 | name: string; 3 | company: string; 4 | city: string; 5 | state: string; 6 | } 7 | -------------------------------------------------------------------------------- /docs/fontawesome-webfont.1e59d2330b4c6deb84b3.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/docs/fontawesome-webfont.1e59d2330b4c6deb84b3.ttf -------------------------------------------------------------------------------- /docs/fontawesome-webfont.8b43027f47b20503057d.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/docs/fontawesome-webfont.8b43027f47b20503057d.eot -------------------------------------------------------------------------------- /docs/fontawesome-webfont.f691f37e57f04c152e23.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/docs/fontawesome-webfont.f691f37e57f04c152e23.woff -------------------------------------------------------------------------------- /src/app/pages/tables/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './material-table/material-table.component'; 2 | export * from './employee-table/employee-table.component'; 3 | -------------------------------------------------------------------------------- /docs/fontawesome-webfont.20fd1704ea223900efa9.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flatlogic/angular-material-admin/HEAD/docs/fontawesome-webfont.20fd1704ea223900efa9.woff2 -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/revenue-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface RevenueChartData { 2 | groupA: number; 3 | groupB: number; 4 | groupC: number; 5 | groupD: number; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/models/heatmap-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface HeatmapChartData { 2 | series: Serie[]; 3 | } 4 | 5 | interface Serie { 6 | name: string; 7 | data: number[]; 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/visits-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface VisitsChartData { 2 | data: number[]; 3 | registration: string; 4 | signOut: string; 5 | rate: string; 6 | all: string; 7 | } 8 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './line-chart-data'; 2 | export * from './dashed-line-chart-data'; 3 | export * from './pie-chart-data'; 4 | export * from './heatmap-chart-data'; 5 | -------------------------------------------------------------------------------- /src/app/consts/colors.ts: -------------------------------------------------------------------------------- 1 | export enum colors { 2 | YELLOW = '#ffc260', 3 | BLUE = '#536DFE', 4 | LIGHT_BLUE = '#F8F9FF', 5 | PINK = '#ff4081', 6 | GREEN = '#3CD4A0', 7 | VIOLET = '#9013FE' 8 | } 9 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/models/line-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface LineChartData { 2 | series: Series[], 3 | categories: string[] 4 | } 5 | 6 | interface Series { 7 | name: string, 8 | data: number[] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/tables/models/customer.ts: -------------------------------------------------------------------------------- 1 | export interface Customer { 2 | name: string; 3 | email: string; 4 | product: string; 5 | price: string; 6 | date: string; 7 | city: string; 8 | status: string; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/shared/header/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './user/user.component'; 2 | export * from './email/email.component'; 3 | export * from './notifications/notifications.component'; 4 | export * from './search/search.component'; 5 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/models/dashed-line-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface DashedLineChartData { 2 | series: Series[], 3 | categories: string[] 4 | } 5 | 6 | interface Series { 7 | name: string, 8 | data: number[] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/support-request-data.ts: -------------------------------------------------------------------------------- 1 | export interface SupportRequestData { 2 | name: string; 3 | email: string; 4 | product: string; 5 | price: string; 6 | date: string; 7 | city: string; 8 | status: string; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './notification-page/notification-page.component'; 2 | export * from './success-toast/success-toast.component'; 3 | export * from './error-toastr/error-toastr.component'; 4 | export * from './info-toastr/info-toastr.component'; 5 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/map-page/map-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/styles/font.scss: -------------------------------------------------------------------------------- 1 | $fw-lighter: 400; 2 | $fw-normal: 500; 3 | $fw-bold: 600; 4 | 5 | 6 | $fs-xs: 11.2px; 7 | $fs-small: 14px; 8 | $fs-normal: 16px; 9 | $fs-regular: 18px; 10 | $fs-medium: 21px; 11 | $fs-large: 24px; 12 | $fs-xl: 28px; 13 | $fs-xxl: 38px; 14 | $fs-xxxl: 42px; 15 | -------------------------------------------------------------------------------- /src/app/consts/routes.ts: -------------------------------------------------------------------------------- 1 | export enum routes { 2 | DASHBOARD = '/dashboard', 3 | TYPOGRAPHY = '/typography', 4 | TABLES = '/tables', 5 | NOTIFICATION = '/notification', 6 | UI_ELEMENTS_ICONS = '/ui/icons', 7 | UI_ELEMENTS_CHARTS = '/ui/charts', 8 | UI_ELEMENTS_MAP = '/ui/map', 9 | LOGIN = '/login' 10 | } 11 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/server-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface ServerChartData { 2 | firstServerChartData: number[], 3 | firstDataTitle: string, 4 | secondServerChartData: number[], 5 | secondDataTitle: string, 6 | thirdServerChartData: number[], 7 | thirdDataTitle: string, 8 | dates: string[] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icons-page/icons-page.component'; 2 | export * from './line-chart/line-chart.component'; 3 | export * from './dashed-line-chart/dashed-line-chart.component'; 4 | export * from './heatmap-chart/heatmap-chart.component'; 5 | export * from './pie-chart/pie-chart.component'; 6 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/daily-line-chart-data.ts: -------------------------------------------------------------------------------- 1 | export interface DailyLineChartData { 2 | dailyData: TimeData; 3 | weeklyData: TimeData; 4 | monthlyData: TimeData; 5 | labels: string[]; 6 | } 7 | 8 | export interface TimeData { 9 | mobile: number[]; 10 | desktop: number[]; 11 | tablet: number[]; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './daily-line-chart-data'; 2 | export * from './performance-chart-data'; 3 | export * from './revenue-chart-data'; 4 | export * from './server-chart-data'; 5 | export * from './support-request-data'; 6 | export * from './visits-chart-data'; 7 | export * from './project-stat-data'; 8 | -------------------------------------------------------------------------------- /src/app/shared/header/components/search/search.component.html: -------------------------------------------------------------------------------- 1 |
2 | search 3 | 4 |
5 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/settings-menu/settings-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-settings-menu', 5 | templateUrl: './settings-menu.component.html', 6 | styleUrls: ['./settings-menu.component.scss'] 7 | }) 8 | export class SettingsMenuComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/shared/header/components/notifications/notifications.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-notifications', 5 | templateUrl: './notifications.component.html', 6 | styleUrls: ['./notifications.component.scss'] 7 | }) 8 | export class NotificationsComponent { 9 | } 10 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/heatmap-chart/heatmap-chart.component.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/app/pages/auth/pipes/year.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { DatePipe } from '@angular/common'; 3 | 4 | @Pipe({ 5 | name: 'year' 6 | }) 7 | export class YearPipe extends DatePipe implements PipeTransform { 8 | transform(date: Date): any { 9 | return super.transform(date, 'y'); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/pages/typography/containers/typography-page/typography-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-typography-page', 5 | templateUrl: './typography-page.component.html', 6 | styleUrls: ['./typography-page.component.scss'] 7 | }) 8 | export class TypographyPageComponent { 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": ["node"] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts", 10 | "node_modules/apexcharts/types/apexcharts.d.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /src/app/pages/not-found/not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { routes } from '../../consts'; 4 | 5 | @Component({ 6 | selector: 'app-not-found', 7 | templateUrl: './not-found.component.html', 8 | styleUrls: ['./not-found.component.scss'] 9 | }) 10 | export class NotFoundComponent { 11 | public routes: typeof routes = routes; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/map-page/map-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-map-page', 5 | templateUrl: './map-page.component.html', 6 | styleUrls: ['./map-page.component.scss'] 7 | }) 8 | export class MapPageComponent { 9 | public lat = -37.813179; 10 | public lng = 144.950259; 11 | public zoom = 12; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/shared/header/pipes/short-name.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'shortName' 5 | }) 6 | export class ShortNamePipe implements PipeTransform { 7 | 8 | transform(value: string): string { 9 | 10 | const commaIndex: number = value.search('\\s'); 11 | return '' + value[0].toUpperCase() + value[commaIndex + 1].toUpperCase(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/pie-chart/pie-chart.component.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/app/shared/header/components/search/search.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-search', 5 | templateUrl: './search.component.html', 6 | styleUrls: ['./search.component.scss'] 7 | }) 8 | export class SearchComponent { 9 | public isShowInput = false; 10 | 11 | public showInput(): void { 12 | this.isShowInput = true; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/date-menu/date-menu.component.html: -------------------------------------------------------------------------------- 1 | 2 | Daily 3 | Weekly 4 | Monthly 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/containers/dashboard-page/dashboard-page.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/variables'; 2 | 3 | .charts-wrapper { 4 | display: flex; 5 | margin: 0 8px; 6 | 7 | @media (max-width: $normal) { 8 | flex-wrap: wrap; 9 | } 10 | } 11 | 12 | .chart { 13 | width: 100%; 14 | 15 | @media (max-width: $normal) { 16 | width: 50%; 17 | } 18 | 19 | @media (max-width: $small) { 20 | width: 100%; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/line-chart/line-chart.component.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent { 9 | public flatlogic: string = 'https://flatlogic.com/'; 10 | public flatlogicAbout: string = 'https://flatlogic.com/about'; 11 | public flatlogicBlog: string = 'https://flatlogic.com/blog'; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/error-toastr/error-toastr.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | email 5 |
6 |

Message was not sent!

7 |
8 |
9 | close 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/success-toast/success-toast.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | done 5 |
6 |

The item was shipped

7 |
8 |
9 | close 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './visits-chart/visits-chart.component'; 2 | export * from './performance-chart/performance-chart.component'; 3 | export * from './revenue-chart/revenue-chart.component'; 4 | export * from './server-chart/server-chart.component'; 5 | export * from './daily-line-chart/daily-line-chart.component'; 6 | export * from './support-requests/support-requests.component'; 7 | export * from './project-stat-chart/project-stat-chart.component'; 8 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /src/app/pages/notification/containers/info-toastr/info-toastr.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | announcement 5 |
6 |

New user feedback received

7 |
8 |
9 | close 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/performance-chart/performance-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { PerformanceChartData } from '../../models'; 4 | 5 | @Component({ 6 | selector: 'app-performance-chart', 7 | templateUrl: './performance-chart.component.html', 8 | styleUrls: ['./performance-chart.component.scss'] 9 | }) 10 | export class PerformanceChartComponent { 11 | @Input() performanceChartData: PerformanceChartData; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/pages/tables/containers/tables-page/tables-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Tables

4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/pages/auth/auth-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AuthPageComponent } from './containers'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AuthPageComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes) 16 | ], 17 | exports: [RouterModule] 18 | }) 19 | 20 | export class AuthRoutingModule { 21 | } 22 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/revenue-chart/revenue-chart.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Revenue Breakdown
4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/app/pages/tables/tables-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { TablesPageComponent } from './containers'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: TablesPageComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes) 16 | ], 17 | exports: [RouterModule] 18 | }) 19 | 20 | export class TablesRoutingModule { 21 | } 22 | -------------------------------------------------------------------------------- /src/app/shared/header/components/email/email.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { Email } from '../../../../pages/auth/models'; 4 | 5 | @Component({ 6 | selector: 'app-email', 7 | templateUrl: './email.component.html', 8 | styleUrls: ['./email.component.scss'] 9 | }) 10 | export class EmailComponent { 11 | @Input() emails: Email[]; 12 | public colors: string[] = [ 13 | 'yellow', 14 | 'green', 15 | 'blue', 16 | 'ping' 17 | ]; 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/charts-page/charts-page.component.scss: -------------------------------------------------------------------------------- 1 | @import './src/app/styles/variables'; 2 | @import './src/app/styles/colors'; 3 | 4 | .charts-content { 5 | margin: 0 8px; 6 | 7 | &__charts-wrapper { 8 | display: flex; 9 | 10 | @media (max-width: $small) { 11 | flex-wrap: wrap; 12 | } 13 | } 14 | 15 | &__chart-item { 16 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 17 | width: 100%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/shared/sidebar/sidebar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { routes } from '../../consts/routes'; 3 | 4 | @Component({ 5 | selector: 'app-sidebar', 6 | templateUrl: './sidebar.component.html', 7 | styleUrls: ['./sidebar.component.scss'] 8 | }) 9 | export class SidebarComponent { 10 | public routes: typeof routes = routes; 11 | public isOpenUiElements = false; 12 | 13 | public openUiElements() { 14 | this.isOpenUiElements = !this.isOpenUiElements; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/pages/typography/typography-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { TypographyPageComponent } from './containers'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: TypographyPageComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes) 16 | ], 17 | exports: [RouterModule] 18 | }) 19 | 20 | export class TypographyRoutingModule { 21 | } 22 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/sign-form/sign-form.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | 3 | .form { 4 | width: 100%; 5 | 6 | &__input { 7 | width: 100%; 8 | margin-top: -15px; 9 | } 10 | } 11 | 12 | .form-actions { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | margin-top: 5px; 17 | 18 | &__create { 19 | margin: 0; 20 | width: 95%; 21 | box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/notification/notification-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { NotificationPageComponent } from './containers'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: NotificationPageComponent 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [ 15 | RouterModule.forChild(routes) 16 | ], 17 | exports: [RouterModule] 18 | }) 19 | 20 | export class NotificationRoutingModule { 21 | } 22 | -------------------------------------------------------------------------------- /src/app/shared/layout/layout.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/variables"; 2 | @import "src/app/styles/colors"; 3 | 4 | .layout { 5 | width: 100%; 6 | } 7 | 8 | .layout-sidebar { 9 | height:calc(100vh - 64px); 10 | margin-top: 64px; 11 | 12 | @media (max-width: $small) { 13 | width: 218px; 14 | } 15 | } 16 | 17 | .layout-content { 18 | background-color: $background-color; 19 | height:calc(100vh - 64px); 20 | margin-top: 64px; 21 | 22 | @media (max-width: $small) { 23 | width: 100%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/visits-chart/visits-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { VisitsChartData } from '../../models'; 4 | import { colors } from '../../../../consts'; 5 | 6 | @Component({ 7 | selector: 'app-visits-chart', 8 | templateUrl: './visits-chart.component.html', 9 | styleUrls: ['./visits-chart.component.scss'] 10 | }) 11 | export class VisitsChartComponent { 12 | @Input() visitsChartData: VisitsChartData; 13 | public colors: typeof colors = colors; 14 | } 15 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/error-toastr/error-toastr.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/toasrt'; 3 | 4 | .toastr-wrapper { 5 | @include toastr-wrapper; 6 | } 7 | 8 | .toastr-wrapper-icon { 9 | @include toastr-wrapper-icon; 10 | } 11 | 12 | .toastr-content { 13 | @include toastr-content; 14 | 15 | &__title { 16 | @include toastr-content-title; 17 | } 18 | } 19 | 20 | .toastr-icon { 21 | @include toastr-icon; 22 | } 23 | 24 | :host { 25 | @include toastr($pink); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/info-toastr/info-toastr.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/toasrt'; 3 | 4 | .toastr-wrapper { 5 | @include toastr-wrapper; 6 | } 7 | 8 | .toastr-wrapper-icon { 9 | @include toastr-wrapper-icon; 10 | } 11 | 12 | .toastr-content { 13 | @include toastr-content; 14 | 15 | &__title { 16 | @include toastr-content-title; 17 | } 18 | } 19 | 20 | .toastr-icon { 21 | @include toastr-icon; 22 | } 23 | 24 | :host { 25 | @include toastr($blue); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/success-toast/success-toast.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/toasrt'; 3 | 4 | .toastr-wrapper { 5 | @include toastr-wrapper; 6 | } 7 | 8 | .toastr-wrapper-icon { 9 | @include toastr-wrapper-icon; 10 | } 11 | 12 | .toastr-content { 13 | @include toastr-content; 14 | 15 | &__title { 16 | @include toastr-content-title; 17 | } 18 | } 19 | 20 | .toastr-icon { 21 | @include toastr-icon; 22 | } 23 | 24 | :host { 25 | @include toastr($green); 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/auth/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/assets/auth/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/assets/hot-found/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/login-form/login-form.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | 4 | .form { 5 | width: 100%; 6 | 7 | &__input { 8 | width: 100%; 9 | margin-top: 6px; 10 | } 11 | } 12 | 13 | .form-actions { 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | 18 | &__login { 19 | margin-right: 10px; 20 | } 21 | 22 | &__forget { 23 | font-size: 12px; 24 | font-weight: $fw-lighter; 25 | color: $blue; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/hot-found/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "es2020", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/support-requests/support-requests.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import { SupportRequestData } from '../../models/support-request-data'; 4 | 5 | @Component({ 6 | selector: 'app-support-requests', 7 | templateUrl: './support-requests.component.html', 8 | styleUrls: ['./support-requests.component.scss'] 9 | }) 10 | export class SupportRequestsComponent { 11 | @Input() supportRequestData: SupportRequestData[]; 12 | public displayedColumns: string[] = ['name', 'email', 'product', 'price', 'date', 'city', 'status']; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/dashed-line-chart/dashed-line-chart.component.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/app/shared/layout/layout.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/settings-menu/settings-menu.component.html: -------------------------------------------------------------------------------- 1 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /src/hmr.ts: -------------------------------------------------------------------------------- 1 | import { NgModuleRef, ApplicationRef } from '@angular/core'; 2 | import { createNewHosts } from '@angularclass/hmr'; 3 | 4 | export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => { 5 | let ngModule: NgModuleRef; 6 | module.hot.accept(); 7 | bootstrap().then(mod => ngModule = mod); 8 | module.hot.dispose(() => { 9 | const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef); 10 | const elements = appRef.components.map(c => c.location.nativeElement); 11 | const makeVisible = createNewHosts(elements); 12 | ngModule.destroy(); 13 | makeVisible(); 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /src/app/pages/auth/services/auth.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, of } from 'rxjs'; 3 | 4 | import { User } from '../models'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class AuthService { 10 | public login(): void { 11 | localStorage.setItem('token', 'token'); 12 | } 13 | 14 | public sign(): void { 15 | localStorage.setItem('token', 'token'); 16 | } 17 | 18 | public signOut(): void { 19 | localStorage.removeItem('token'); 20 | } 21 | 22 | public getUser(): Observable { 23 | return of({ 24 | name: 'John', 25 | lastName: 'Smith' 26 | }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/settings-menu/settings-menu.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/variables"; 3 | 4 | .settings-button { 5 | box-shadow: none; 6 | background-color: $settings-button-background-color; 7 | color: $settings-button-color; 8 | 9 | &:hover { 10 | background-color: $blue; 11 | color: $settings-button-color-hover; 12 | } 13 | 14 | &__icon { 15 | color: inherit; 16 | } 17 | } 18 | 19 | .settings-menu { 20 | position: absolute; 21 | 22 | &__item { 23 | color: $dark-grey; 24 | 25 | &:hover { 26 | background-color: $settings-menu-background-color-hover; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/login-form/login-form.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 |
15 | -------------------------------------------------------------------------------- /src/app/pages/auth/services/email.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, of } from 'rxjs'; 3 | 4 | import { Email } from '../models'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class EmailService { 10 | public loadEmails(): Observable { 11 | return of([ 12 | {name: 'Jane Hew', time: '9:32', message: 'Hey! How is it going?'}, 13 | {name: 'Lloyd Brown', time: '9:18', message: 'Check out my new Dashboard'}, 14 | {name: 'Mark Winstein', time: '9:15', message: 'I want rearrange the appointment'}, 15 | {name: 'Liana Dutti', time: '9:09', message: 'Good news from sale department'} 16 | ]) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/tables/components/material-table/material-table.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { Customer } from '../../models'; 4 | 5 | @Component({ 6 | selector: 'app-material-table', 7 | templateUrl: './material-table.component.html', 8 | styleUrls: ['./material-table.component.scss'] 9 | }) 10 | export class MaterialTableComponent implements OnInit { 11 | @Input() materialTableDate: Customer[]; 12 | public displayedColumns: string[] = ['name', 'email', 'product', 'price', 'date', 'city', 'status']; 13 | public dataSource: Customer[]; 14 | 15 | public ngOnInit() { 16 | this.dataSource = this.materialTableDate; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/pages/auth/guards/auth.guard.ts: -------------------------------------------------------------------------------- 1 | import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | import { routes } from '../../../consts'; 5 | 6 | @Injectable() 7 | export class AuthGuard implements CanActivate{ 8 | public routers: typeof routes = routes; 9 | 10 | constructor(private router: Router) { 11 | } 12 | 13 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 14 | const token = localStorage.getItem('token'); 15 | 16 | if (token) { 17 | return true; 18 | } else { 19 | this.router.navigate([this.routers.LOGIN]); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/shared/header/components/user/user.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Input, Output } from '@angular/core'; 2 | 3 | import { routes } from '../../../../consts'; 4 | import { User } from '../../../../pages/auth/models'; 5 | 6 | @Component({ 7 | selector: 'app-user', 8 | templateUrl: './user.component.html', 9 | styleUrls: ['./user.component.scss'] 10 | }) 11 | export class UserComponent { 12 | @Input() user: User; 13 | @Output() signOut: EventEmitter = new EventEmitter(); 14 | public routes: typeof routes = routes; 15 | public flatlogicEmail: string = "https://flatlogic.com"; 16 | 17 | public signOutEmit(): void { 18 | this.signOut.emit(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/typography/typography.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatCardModule } from '@angular/material/card'; 4 | import { MatToolbarModule } from '@angular/material/toolbar'; 5 | 6 | import { TypographyPageComponent } from './containers'; 7 | import { TypographyRoutingModule } from './typography-routing.module'; 8 | import { SharedModule } from '../../shared/shared.module'; 9 | 10 | @NgModule({ 11 | declarations: [TypographyPageComponent], 12 | imports: [ 13 | CommonModule, 14 | TypographyRoutingModule, 15 | MatCardModule, 16 | MatToolbarModule, 17 | SharedModule 18 | ] 19 | }) 20 | export class TypographyModule { } 21 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/models/project-stat-data.ts: -------------------------------------------------------------------------------- 1 | export interface ProjectStatData { 2 | lightBlue: { 3 | daily: ProjectTimeData, 4 | week: ProjectTimeData, 5 | monthly: ProjectTimeData 6 | }, 7 | singApp: { 8 | daily: ProjectTimeData, 9 | week: ProjectTimeData, 10 | monthly: ProjectTimeData 11 | }, 12 | rns: { 13 | daily: ProjectTimeData, 14 | week: ProjectTimeData, 15 | monthly: ProjectTimeData 16 | } 17 | } 18 | 19 | export interface ProjectTimeData { 20 | name: string; 21 | users: string; 22 | percent: number, 23 | registrations: string, 24 | bounce: string, 25 | views: string, 26 | series: [ 27 | { 28 | name: string, 29 | data: number[] 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/ui-elements-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { IconsPageComponent } from './components'; 5 | import { ChartsPageComponent, MapPageComponent } from './containers'; 6 | 7 | const routes: Routes = [ 8 | { 9 | path: 'icons', 10 | component: IconsPageComponent 11 | }, 12 | { 13 | path: 'charts', 14 | component: ChartsPageComponent 15 | }, 16 | { 17 | path: 'map', 18 | component: MapPageComponent 19 | }, 20 | ]; 21 | 22 | @NgModule({ 23 | imports: [ 24 | RouterModule.forChild(routes) 25 | ], 26 | exports: [RouterModule] 27 | }) 28 | 29 | export class UiElementsRoutingModule { 30 | } 31 | -------------------------------------------------------------------------------- /src/app/shared/ui-elements/date-menu/date-menu.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, EventEmitter, Output} from '@angular/core'; 2 | 3 | enum matSelectedFields { 4 | daily = 'Daily', 5 | weekly = 'Weekly', 6 | monthly = 'Monthly' 7 | } 8 | 9 | @Component({ 10 | selector: 'app-date-menu', 11 | templateUrl: './date-menu.component.html', 12 | styleUrls: ['./date-menu.component.scss'] 13 | }) 14 | export class DateMenuComponent { 15 | @Output() changeDateType = new EventEmitter(); 16 | public matSelectFields: typeof matSelectedFields = matSelectedFields; 17 | public selectedMatSelectValue = matSelectedFields.daily; 18 | 19 | public changedMatSelectionValue(dateType: string) { 20 | this.changeDateType.emit(dateType); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Flatlogic 4 | About Us 5 | Blog 6 |
7 |
8 | 11 | 14 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | hmr: false 8 | }; 9 | 10 | /* 11 | * For easier debugging in development mode, you can import the following file 12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 13 | * 14 | * This import should be commented out in production mode because it will have a negative impact 15 | * on performance if an error is thrown. 16 | */ 17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 18 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/sign-form/sign-form.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /src/app/pages/tables/containers/tables-page/tables-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | import { TablesService } from '../../services'; 5 | import { Customer, Employee } from '../../models'; 6 | 7 | @Component({ 8 | selector: 'app-tables-page', 9 | templateUrl: './tables-page.component.html', 10 | styleUrls: ['./tables-page.component.scss'] 11 | }) 12 | export class TablesPageComponent { 13 | public employeeTableData$: Observable 14 | public materialTableData$: Observable 15 | 16 | constructor(private service: TablesService) { 17 | this.employeeTableData$ = service.loadEmployeeTableData(); 18 | this.materialTableData$ = service.loadMaterialTableData(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/consts/custom-tooltip.ts: -------------------------------------------------------------------------------- 1 | export const customTooltip: string = 2 | '
' + 3 | '
' + 'mobile' + '
' + 4 | '
' + 'desktop' + '
' + 5 | '
' + 'tablet' + '
' + 6 | '
'; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/revenue-chart/revenue-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | @import "src/app/styles/variables"; 4 | 5 | .revenue-chart { 6 | height: 192px; 7 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 8 | 9 | &__header { 10 | color: $grey; 11 | display: flex; 12 | justify-content: space-between; 13 | 14 | &-title { 15 | font-size: 20px; 16 | font-weight: $fw-lighter; 17 | margin: 0; 18 | line-height: 40px; 19 | } 20 | } 21 | 22 | &__content { 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | 27 | &-chart { 28 | height: 140px; 29 | width: 100%; 30 | max-width: 218px 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/shared/header/components/notifications/notifications.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/variables'; 3 | 4 | .notification-button { 5 | background-color: $blue; 6 | box-shadow: none; 7 | margin-left: 16px; 8 | 9 | &__icon { 10 | color: $white-35; 11 | } 12 | 13 | &:hover { 14 | background-color: $black-08; 15 | } 16 | 17 | @media (max-width: $small) { 18 | margin-top: 0; 19 | } 20 | } 21 | 22 | .notification-menu { 23 | &__button { 24 | &:hover { 25 | background-color: $blue-white; 26 | } 27 | } 28 | 29 | &__icon { 30 | &_yellow { 31 | color: $yellow; 32 | } 33 | 34 | &_green { 35 | color: $green; 36 | } 37 | 38 | &_pink { 39 | color: $pink; 40 | } 41 | 42 | &_blue { 43 | color: $blue; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | import { hmrBootstrap } from './hmr'; 4 | 5 | import { AppModule } from './app/app.module'; 6 | import { environment } from './environments/environment'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); 13 | if (environment.hmr) { 14 | if (module[ 'hot' ]) { 15 | hmrBootstrap(module, bootstrap); 16 | } else { 17 | console.error('HMR is not enabled for webpack-dev-server!'); 18 | console.log('Are you using the --hmr flag for ng serve?'); 19 | } 20 | } else { 21 | bootstrap().catch(err => console.log(err)); 22 | } 23 | 24 | platformBrowserDynamic().bootstrapModule(AppModule) 25 | .catch(err => console.error(err)); 26 | -------------------------------------------------------------------------------- /src/app/styles/colors.scss: -------------------------------------------------------------------------------- 1 | $yellow: #ffc260; 2 | $blue: #536DFE; 3 | $light-blue: #798DFE; 4 | $white-blue: #B1BCFF; 5 | $blue-white: #F3F5FF; 6 | $pink: #ff4081; 7 | $dark-pink: #ff0f60; 8 | $green: #3CD4A0; 9 | $violet: #9013FE; 10 | $white: white; 11 | $dark-grey: #4A4A4A; 12 | $light-grey: #B9B9B9; 13 | $grey: #6E6E6E; 14 | $sky: #c0caff; 15 | 16 | 17 | $white-35: rgba(255, 255, 255, 0.35); 18 | $white-80: #FFFFFF80; 19 | 20 | $gray-08: rgba(110, 110, 110, 0.8); 21 | $gray-80: #D8D8D880; 22 | $gray-06: rgba(110, 110, 110, 0.6); 23 | 24 | $black-08: rgba(0, 0, 0, 0.08); 25 | 26 | $pink-15: rgba(255, 92, 147, 0.15); 27 | $blue-15: rgba(83, 109, 254, 0.15); 28 | $green-15: rgba(60, 212, 160, 0.15); 29 | $yellow-15: rgba(255, 194, 96, 0.15); 30 | $violet-15: rgba(144, 19, 254, 0.15); 31 | 32 | 33 | $shadow-white: #E8EAFC; 34 | $shadow-grey: #B2B2B21A; 35 | $shadow-dark-grey: #9A9A9A1A; 36 | 37 | $background-color: #F6F7FF; 38 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/sign-form/sign-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, OnInit, Output } from '@angular/core'; 2 | import { FormControl, FormGroup, Validators } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-sign-form', 6 | templateUrl: './sign-form.component.html', 7 | styleUrls: ['./sign-form.component.scss'] 8 | }) 9 | export class SignFormComponent implements OnInit { 10 | @Output() sendSignForm = new EventEmitter(); 11 | public form: FormGroup; 12 | 13 | public ngOnInit(): void { 14 | this.form = new FormGroup({ 15 | name: new FormControl('', [Validators.required]), 16 | email: new FormControl('', [Validators.required, Validators.email]), 17 | password: new FormControl('', [Validators.required]) 18 | }); 19 | } 20 | 21 | public sign(): void { 22 | if (this.form.valid) { 23 | this.sendSignForm.emit(); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/styles/toasrt.scss: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | @mixin toastr-wrapper { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | width: 100%; 8 | } 9 | 10 | @mixin toastr($color) { 11 | position: relative; 12 | overflow: hidden; 13 | margin: 16px 0 6px 0; 14 | pointer-events: all; 15 | cursor: pointer; 16 | width: 257px; 17 | color: $white; 18 | display: flex; 19 | align-items: center; 20 | background-color: $color; 21 | height: 45px; 22 | } 23 | 24 | @mixin toastr-wrapper-icon { 25 | color:$white-80; 26 | height: 45px; 27 | width: 45px; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | 33 | @mixin toastr-content { 34 | display: flex; 35 | align-items: center; 36 | } 37 | 38 | @mixin toastr-content-title { 39 | margin: 0; 40 | } 41 | 42 | @mixin toastr-icon { 43 | padding: 0; 44 | width: auto; 45 | height: auto; 46 | } 47 | -------------------------------------------------------------------------------- /src/app/pages/auth/containers/auth-page/auth-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | import { AuthService } from '../../services'; 5 | import { routes } from '../../../../consts'; 6 | 7 | @Component({ 8 | selector: 'app-auth-page', 9 | templateUrl: './auth-page.component.html', 10 | styleUrls: ['./auth-page.component.scss'] 11 | }) 12 | export class AuthPageComponent { 13 | public todayDate: Date = new Date(); 14 | public routers: typeof routes = routes; 15 | 16 | constructor( 17 | private service: AuthService, 18 | private router: Router 19 | ) { } 20 | 21 | public sendLoginForm(): void { 22 | this.service.login(); 23 | 24 | this.router.navigate([this.routers.DASHBOARD]).then(); 25 | } 26 | 27 | public sendSignForm(): void { 28 | this.service.sign(); 29 | 30 | this.router.navigate([this.routers.DASHBOARD]).then(); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Material Admin - Free Angular Material Template with tens of components. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/pages/not-found/not-found.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | logo 5 |

Material Admin

6 |
7 | 8 | 9 | 10 |

404

11 | 12 |

Oops. Looks like the page you're looking for no longer exists

13 |

But we're here to bring you back to safety

14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/app/shared/header/containers/header/header.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 8 |
Angular Material Admin
9 |
10 | 11 |
12 | Unlock Full Version 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /src/app/pages/auth/components/login-form/login-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, OnInit, Output } from '@angular/core'; 2 | import { FormControl, FormGroup, Validators } from '@angular/forms'; 3 | 4 | @Component({ 5 | selector: 'app-login-form', 6 | templateUrl: './login-form.component.html', 7 | styleUrls: ['./login-form.component.scss'] 8 | }) 9 | export class LoginFormComponent implements OnInit { 10 | @Output() sendLoginForm = new EventEmitter(); 11 | public form: FormGroup; 12 | public flatlogicEmail = 'admin@flatlogic.com'; 13 | public flatlogicPassword = 'admin'; 14 | 15 | public ngOnInit(): void { 16 | this.form = new FormGroup({ 17 | email: new FormControl(this.flatlogicEmail, [Validators.required, Validators.email]), 18 | password: new FormControl(this.flatlogicPassword, [Validators.required]) 19 | }); 20 | } 21 | 22 | public login(): void { 23 | if (this.form.valid) { 24 | this.sendLoginForm.emit(); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/shared/header/components/user/user.component.html: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

{{user.name}} {{user.lastName}}

7 | Flatlogic.com 8 |
9 | 12 | 15 | 18 |
19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/server-chart/server-chart.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Server Overview
4 | 5 | 6 | 7 | 8 | 9 |
10 |

{{serverDataTitles[i]}}

11 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/charts-page/charts-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | import { ChartsService } from '../../services'; 5 | import { 6 | DashedLineChartData, 7 | HeatmapChartData, 8 | LineChartData, 9 | PieChartData 10 | } from '../../models'; 11 | 12 | @Component({ 13 | selector: 'app-charts-page', 14 | templateUrl: './charts-page.component.html', 15 | styleUrls: ['./charts-page.component.scss'] 16 | }) 17 | export class ChartsPageComponent { 18 | public lineChartData$: Observable 19 | public dashedLineChartData$: Observable 20 | public pieChartData$: Observable 21 | public heatmapChartData$: Observable 22 | 23 | constructor(private service: ChartsService) { 24 | this.lineChartData$ = this.service.loadLineChartData(); 25 | this.dashedLineChartData$ = this.service.dashedLineChartData(); 26 | this.pieChartData$ = this.service.loadPieChartData(); 27 | this.heatmapChartData$ = this.service.loadHeatmapChartData(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/shared/header/components/notifications/notifications.component.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 11 | 14 | 17 | 18 | -------------------------------------------------------------------------------- /src/app/pages/notification/notification.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatToolbarModule } from '@angular/material/toolbar'; 4 | import { MatCardModule } from '@angular/material/card'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | import { MatIconModule } from '@angular/material/icon'; 7 | 8 | import { 9 | ErrorToastrComponent, 10 | InfoToastrComponent, 11 | NotificationPageComponent, 12 | SuccessToastComponent 13 | } from './containers'; 14 | import { NotificationRoutingModule } from './notification-routing.module'; 15 | import { SharedModule } from '../../shared/shared.module'; 16 | 17 | 18 | @NgModule({ 19 | declarations: [ 20 | NotificationPageComponent, 21 | SuccessToastComponent, 22 | ErrorToastrComponent, 23 | InfoToastrComponent 24 | ], 25 | imports: [ 26 | CommonModule, 27 | NotificationRoutingModule, 28 | MatToolbarModule, 29 | MatCardModule, 30 | MatButtonModule, 31 | MatIconModule, 32 | SharedModule 33 | ] 34 | }) 35 | export class NotificationModule { } 36 | -------------------------------------------------------------------------------- /src/app/shared/layout/layout.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core'; 2 | import { MediaMatcher } from '@angular/cdk/layout'; 3 | import { MatSidenav } from '@angular/material/sidenav'; 4 | 5 | @Component({ 6 | selector: 'app-layout', 7 | templateUrl: './layout.component.html', 8 | styleUrls: ['./layout.component.scss'] 9 | }) 10 | export class LayoutComponent implements OnDestroy { 11 | @ViewChild('sidenav') sidenav: MatSidenav; 12 | public isShowSidebar: boolean; 13 | public mobileQuery: MediaQueryList; 14 | private mobileQueryListener: () => void; 15 | 16 | constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) { 17 | this.mobileQuery = media.matchMedia('(max-width: 1024px)'); 18 | this.mobileQueryListener = () => changeDetectorRef.detectChanges(); 19 | this.mobileQuery.addListener(this.mobileQueryListener); 20 | 21 | this.isShowSidebar = !this.mobileQuery.matches; 22 | } 23 | 24 | public ngOnDestroy(): void { 25 | this.mobileQuery.removeListener(this.mobileQueryListener); 26 | 27 | this.sidenav.close(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Flatlogic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/info-toastr/info-toastr.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { animate, state, style, transition, trigger } from '@angular/animations'; 3 | import { Toast, ToastPackage, ToastrService } from 'ngx-toastr'; 4 | 5 | @Component({ 6 | selector: 'app-info-toastr', 7 | templateUrl: './info-toastr.component.html', 8 | styleUrls: ['./info-toastr.component.scss'], 9 | animations: [ 10 | trigger('flyInOut', [ 11 | state('inactive', style({ opacity: 0 })), 12 | state('active', style({ opacity: 1 })), 13 | state('removed', style({ opacity: 0 })), 14 | transition( 15 | 'inactive => active', 16 | animate('{{ easeTime }}ms {{ easing }}') 17 | ), 18 | transition( 19 | 'active => removed', 20 | animate('{{ easeTime }}ms {{ easing }}') 21 | ) 22 | ]) 23 | ], 24 | preserveWhitespaces: false 25 | }) 26 | export class InfoToastrComponent extends Toast { 27 | constructor( 28 | protected toastrService: ToastrService, 29 | public toastPackage: ToastPackage, 30 | ) { 31 | super(toastrService, toastPackage); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/error-toastr/error-toastr.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { animate, state, style, transition, trigger } from '@angular/animations'; 3 | import { Toast, ToastPackage, ToastrService } from 'ngx-toastr'; 4 | 5 | @Component({ 6 | selector: 'app-error-toastr', 7 | templateUrl: './error-toastr.component.html', 8 | styleUrls: ['./error-toastr.component.scss'], 9 | animations: [ 10 | trigger('flyInOut', [ 11 | state('inactive', style({ opacity: 0 })), 12 | state('active', style({ opacity: 1 })), 13 | state('removed', style({ opacity: 0 })), 14 | transition( 15 | 'inactive => active', 16 | animate('{{ easeTime }}ms {{ easing }}') 17 | ), 18 | transition( 19 | 'active => removed', 20 | animate('{{ easeTime }}ms {{ easing }}') 21 | ) 22 | ]) 23 | ], 24 | preserveWhitespaces: false 25 | }) 26 | export class ErrorToastrComponent extends Toast { 27 | constructor( 28 | protected toastrService: ToastrService, 29 | public toastPackage: ToastPackage, 30 | ) { 31 | super(toastrService, toastPackage); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/success-toast/success-toast.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { animate, state, style, transition, trigger } from '@angular/animations'; 3 | import { Toast, ToastPackage, ToastrService } from 'ngx-toastr'; 4 | 5 | @Component({ 6 | selector: 'app-success-toast', 7 | templateUrl: './success-toast.component.html', 8 | styleUrls: ['./success-toast.component.scss'], 9 | animations: [ 10 | trigger('flyInOut', [ 11 | state('inactive', style({ opacity: 0 })), 12 | state('active', style({ opacity: 1 })), 13 | state('removed', style({ opacity: 0 })), 14 | transition( 15 | 'inactive => active', 16 | animate('{{ easeTime }}ms {{ easing }}') 17 | ), 18 | transition( 19 | 'active => removed', 20 | animate('{{ easeTime }}ms {{ easing }}') 21 | ) 22 | ]) 23 | ], 24 | preserveWhitespaces: false 25 | }) 26 | export class SuccessToastComponent extends Toast { 27 | constructor( 28 | protected toastrService: ToastrService, 29 | public toastPackage: ToastPackage, 30 | ) { 31 | super(toastrService, toastPackage); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/pages/auth/auth.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatTabsModule } from '@angular/material/tabs'; 4 | import { MatButtonModule } from '@angular/material/button'; 5 | import { MatInputModule } from '@angular/material/input'; 6 | import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 7 | 8 | import { AuthPageComponent } from './containers'; 9 | import { AuthRoutingModule } from './auth-routing.module'; 10 | import { YearPipe } from './pipes'; 11 | import { AuthService, EmailService } from './services'; 12 | import { LoginFormComponent, SignFormComponent } from './components'; 13 | import { AuthGuard } from './guards'; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | AuthPageComponent, 18 | YearPipe, 19 | LoginFormComponent, 20 | SignFormComponent 21 | ], 22 | imports: [ 23 | CommonModule, 24 | AuthRoutingModule, 25 | MatTabsModule, 26 | MatButtonModule, 27 | MatInputModule, 28 | ReactiveFormsModule, 29 | FormsModule 30 | ], 31 | providers: [ 32 | AuthService, 33 | EmailService, 34 | AuthGuard 35 | ] 36 | }) 37 | export class AuthModule { } 38 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/server-chart/server-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | 4 | .server-chart { 5 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 6 | display: flex; 7 | flex-direction: column; 8 | height: 192px; 9 | 10 | &__header { 11 | align-items: center; 12 | color: $grey; 13 | display: flex; 14 | justify-content: space-between; 15 | 16 | &-title { 17 | font-size: $fs-medium; 18 | font-weight: $fw-lighter; 19 | margin: 0; 20 | line-height: 40px; 21 | } 22 | } 23 | 24 | &__content { 25 | display: flex; 26 | flex-direction: column; 27 | height: 100%; 28 | justify-content: space-between; 29 | 30 | &-item { 31 | align-items: center; 32 | display: flex; 33 | height: 50px; 34 | justify-content: space-between; 35 | 36 | &-text { 37 | width: 100%; 38 | color: $grey; 39 | font-weight: $fw-lighter; 40 | font-size: $fs-small; 41 | padding-right: 16px; 42 | margin: 0; 43 | } 44 | } 45 | } 46 | } 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/variables'; 3 | 4 | .footer { 5 | height: $footer-height; 6 | margin-top: 40px; 7 | width: $footer-width; 8 | display: flex; 9 | justify-content: space-between; 10 | padding: 0 24px 24px 24px; 11 | 12 | @media (max-width: $small) { 13 | flex-direction: column; 14 | align-items: start; 15 | } 16 | 17 | &__link { 18 | display: flex; 19 | align-items: center; 20 | 21 | @media (max-width: $small) { 22 | margin-bottom: 8px; 23 | } 24 | } 25 | 26 | &__icon { 27 | @media (max-width: $small) { 28 | margin: 0 0 8px -14px; 29 | } 30 | } 31 | 32 | &__link-item { 33 | margin-right: 16px; 34 | color: $footer-link-color; 35 | text-decoration: none; 36 | 37 | &:hover { 38 | text-decoration: underline; 39 | } 40 | } 41 | } 42 | 43 | .mat-mini-fab { 44 | box-shadow: none; 45 | background-color: inherit; 46 | width: 46px; 47 | height: 46px; 48 | 49 | &:hover { 50 | background-color: $footer-icon-background-color-hover; 51 | } 52 | } 53 | 54 | .mat-icon { 55 | color: $footer-icon-color; 56 | padding: 3px 0 0 0; 57 | } 58 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/icons-page/icons-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Icons

4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | {{toShakeCase(iconName)}} 13 | {{iconName}} 14 |
15 |
16 | 17 | 18 | 19 |
20 |
21 | 22 | {{toFontAwesomeText(iconName)}} 23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/app/shared/header/components/email/email.component.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 |
11 |
12 | 13 | {{email.time}} 14 |
15 |
16 | {{email.name}} 17 | {{email.message}} 18 |
19 |
20 | 21 |
22 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/containers/dashboard-page/dashboard-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Dashboard

4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/app/pages/tables/components/material-table/material-table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Material-UI Table
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 |
{{column}} 12 | {{element[column]}} 13 |
14 | {{element[column]}} 15 |
16 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/daily-line-chart/daily-line-chart.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Daily Line Chart

4 |
5 |
6 |
Tablet 7 |
8 |
9 |
Mobile 10 |
11 |
12 |
Desktop 13 |
14 |
15 | 16 | 17 | Daily 18 | Weekly 19 | Monthly 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/icons-page/icons-page.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | 4 | .icons-wrapper { 5 | padding:0; 6 | margin: 16px 24px 0; 7 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 8 | } 9 | 10 | .icons-header { 11 | display: flex; 12 | justify-content: space-between; 13 | padding: 50px 24px 16px 24px; 14 | 15 | &__title { 16 | font-weight: $fw-lighter; 17 | font-size: $fs-xxxl; 18 | color: $light-grey; 19 | line-height: 1; 20 | letter-spacing: -0.24992px; 21 | } 22 | 23 | &__button { 24 | height: 41.6px; 25 | width: 90.11px; 26 | color: $white; 27 | background-color: $pink; 28 | line-height: 1.75; 29 | font-size: $fs-normal; 30 | font-weight: $fw-lighter; 31 | } 32 | } 33 | 34 | .icons-content { 35 | display: flex; 36 | flex-wrap: wrap; 37 | width: 100%; 38 | overflow: hidden; 39 | padding: 0 16px; 40 | 41 | &__icon-wrapper { 42 | width: 158px; 43 | padding: 8px; 44 | color: $grey; 45 | display: flex; 46 | align-items: center; 47 | } 48 | 49 | &__icon-title { 50 | padding-left: 16px; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/support-requests/support-requests.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Support Requests
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 |
{{column}} 13 | {{element[column]}} 14 |
15 | {{element[column]}} 16 |
17 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/assets/auth/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/auth/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/shared/header/containers/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Input, Output } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { Router } from '@angular/router'; 4 | 5 | import { Email, User } from '../../../../pages/auth/models'; 6 | import { AuthService, EmailService } from '../../../../pages/auth/services'; 7 | import { routes } from '../../../../consts'; 8 | 9 | @Component({ 10 | selector: 'app-header', 11 | templateUrl: './header.component.html', 12 | styleUrls: ['./header.component.scss'] 13 | }) 14 | export class HeaderComponent { 15 | @Input() isMenuOpened: boolean; 16 | @Output() isShowSidebar = new EventEmitter(); 17 | public user$: Observable 18 | public emails$: Observable 19 | public routers: typeof routes = routes; 20 | 21 | constructor( 22 | private userService: AuthService, 23 | private emailService: EmailService, 24 | private router: Router 25 | ) { 26 | this.user$ = this.userService.getUser(); 27 | this.emails$ = this.emailService.loadEmails(); 28 | } 29 | 30 | public openMenu(): void { 31 | this.isMenuOpened = !this.isMenuOpened; 32 | 33 | this.isShowSidebar.emit(this.isMenuOpened); 34 | } 35 | 36 | public signOut(): void { 37 | this.userService.signOut(); 38 | 39 | this.router.navigate([this.routers.LOGIN]); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { RouterModule } from '@angular/router'; 5 | import { ToastrModule } from 'ngx-toastr'; 6 | import { MatCardModule } from '@angular/material/card'; 7 | import { MatButtonModule } from '@angular/material/button'; 8 | 9 | import { AppComponent } from './app.component'; 10 | import { SharedModule } from './shared/shared.module'; 11 | import { AppRoutingModule } from './app-routing.module'; 12 | import { DashboardModule } from './pages/dashboard/dashboard.module'; 13 | import { NotFoundComponent } from './pages/not-found/not-found.component'; 14 | import { AuthModule } from './pages/auth/auth.module'; 15 | import { NgxEchartsModule } from 'ngx-echarts'; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | AppComponent, 20 | NotFoundComponent 21 | ], 22 | imports: [ 23 | BrowserModule, 24 | SharedModule, 25 | AuthModule, 26 | DashboardModule, 27 | BrowserAnimationsModule, 28 | RouterModule, 29 | AppRoutingModule, 30 | ToastrModule.forRoot(), 31 | MatCardModule, 32 | MatButtonModule, 33 | NgxEchartsModule.forRoot({ 34 | echarts: () => import('echarts') 35 | }) 36 | ], 37 | providers: [], 38 | bootstrap: [AppComponent] 39 | }) 40 | export class AppModule { } 41 | -------------------------------------------------------------------------------- /src/app/shared/header/header.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { MatToolbarModule } from '@angular/material/toolbar'; 3 | import { MatFormFieldModule } from '@angular/material/form-field'; 4 | import { CommonModule } from '@angular/common'; 5 | import { MatIconModule } from '@angular/material/icon'; 6 | import { MatMenuModule } from '@angular/material/menu'; 7 | import { MatButtonModule } from '@angular/material/button'; 8 | import { MatInputModule } from '@angular/material/input'; 9 | import { MatBadgeModule } from '@angular/material/badge'; 10 | 11 | import { HeaderComponent } from './containers'; 12 | import { UserComponent, EmailComponent } from './components'; 13 | import { NotificationsComponent } from './components/notifications/notifications.component'; 14 | import { SearchComponent } from './components/search/search.component'; 15 | import { ShortNamePipe } from './pipes'; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | HeaderComponent, 20 | UserComponent, 21 | EmailComponent, 22 | NotificationsComponent, 23 | SearchComponent, 24 | ShortNamePipe 25 | ], 26 | exports: [ 27 | HeaderComponent 28 | ], 29 | imports: [ 30 | CommonModule, 31 | MatToolbarModule, 32 | MatFormFieldModule, 33 | MatIconModule, 34 | MatMenuModule, 35 | MatButtonModule, 36 | MatInputModule, 37 | MatBadgeModule 38 | ] 39 | }) 40 | export class HeaderModule { } 41 | -------------------------------------------------------------------------------- /src/app/shared/header/containers/header/header.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .header { 6 | background-color: $header-background-color; 7 | display: flex; 8 | justify-content: space-between; 9 | position: fixed; 10 | z-index: 2; 11 | height: $header-height; 12 | 13 | &__title { 14 | display: flex; 15 | align-items: center; 16 | } 17 | 18 | &__title-button { 19 | background-color: $header-button-background-color; 20 | box-shadow: none; 21 | 22 | &:hover { 23 | background-color: $header-button-background-color-hover; 24 | } 25 | 26 | @media (max-width: $small) { 27 | margin-top: 0; 28 | } 29 | } 30 | 31 | &__title-button-icon { 32 | color: $header-button-font-color; 33 | } 34 | 35 | &__title-text { 36 | color: $header-title-font-color; 37 | margin-left: 32px; 38 | font-weight: $fw-lighter; 39 | 40 | @media (max-width: $small) { 41 | display: none; 42 | } 43 | } 44 | } 45 | 46 | .header-toolbar { 47 | display: flex; 48 | align-items: center; 49 | 50 | .unlock-button { 51 | border-color: $green; 52 | margin-right: 16px; 53 | text-transform: uppercase; 54 | background-color: $green; 55 | color: white; 56 | 57 | letter-spacing: .0892857143em; 58 | @media (max-width: $small) { 59 | display: none; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/visits-chart/visits-chart.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
Visits Today
4 | 5 | 6 | 7 | 8 | 9 |
10 |
{{visitsChartData.all}}
11 | 19 |
20 | 21 |
22 |
23 |

Registration

24 |

{{visitsChartData.registration}}

25 |
26 | 27 |
28 |

Sign Out

29 |

{{visitsChartData.signOut}}

30 |
31 | 32 |
33 |

Rate

34 |

{{visitsChartData.rate}}%

35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /src/app/shared/header/components/user/user.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .user-button { 6 | background-color: $blue; 7 | box-shadow: none; 8 | margin-left: 16px; 9 | 10 | &__icon { 11 | color: $white-35; 12 | } 13 | 14 | &:hover { 15 | background-color: $black-08; 16 | } 17 | 18 | @media (max-width: $small) { 19 | margin-top: 0; 20 | } 21 | } 22 | 23 | .user-menu-title { 24 | padding: 16px 48px 0 16px; 25 | margin-bottom: 4px; 26 | 27 | &__name { 28 | margin-bottom: 4px; 29 | font-weight: $fw-lighter; 30 | font-size: $fs-large; 31 | color: $dark-grey; 32 | } 33 | 34 | &__link { 35 | color: $blue; 36 | font-weight: $fw-lighter; 37 | font-size: $fs-small; 38 | text-decoration: none; 39 | } 40 | } 41 | 42 | .user-menu-icon { 43 | color: $light-grey; 44 | margin-right: 16px; 45 | opacity: .8; 46 | } 47 | 48 | .sign-button-wrapper { 49 | text-align: center; 50 | padding: 8px 0 16px 0; 51 | width: 100%; 52 | } 53 | 54 | .sign-button { 55 | border: 1px solid; 56 | color: $blue; 57 | width: 80%; 58 | } 59 | 60 | .user-menu { 61 | &__item-title { 62 | color: $light-grey; 63 | 64 | &:hover { 65 | color: $dark-grey; 66 | background-color: $blue-white; 67 | 68 | & .user-menu-icon { 69 | color: #536DFE; 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app/shared/header/components/search/search.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | @import "src/app/styles/variables"; 4 | 5 | .search { 6 | display: flex; 7 | height: 36px; 8 | border-radius: 32px; 9 | box-sizing: border-box; 10 | align-items: center; 11 | width: 36px; 12 | padding-left: 4px; 13 | cursor: pointer; 14 | flex-direction: row-reverse; 15 | 16 | &:hover { 17 | background-color: $black-08; 18 | } 19 | 20 | @media (max-width: $small) { 21 | display: none; 22 | } 23 | } 24 | 25 | .show-search-input { 26 | animation: 0.3s open_search; 27 | width: 250px; 28 | padding-left: 22.4px; 29 | background-color: $black-08; 30 | } 31 | 32 | .search-input { 33 | color: $white; 34 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; 35 | line-height: 19px; 36 | font-size: $fs-small; 37 | background-color: transparent; 38 | border: none; 39 | outline: none; 40 | height: 36px; 41 | width: 100%; 42 | 43 | &::-webkit-input-placeholder { 44 | color: $white-35; 45 | } 46 | } 47 | 48 | .search-icon { 49 | padding: 0 7px 3px 0; 50 | color: $white-35; 51 | } 52 | 53 | .open-search { 54 | animation: 0.3s move_search-icon; 55 | padding-right: 16px; 56 | padding-left: 4px; 57 | } 58 | 59 | @keyframes open_search { from { width: 36px; } to { width: 250px; } } 60 | @keyframes open_search_large { from { width: 36px; } to { width: 150px; } } 61 | @keyframes move_search-icon { from { padding: 0 7px 3px 0; } to { padding-right: 16px; } } 62 | -------------------------------------------------------------------------------- /src/app/pages/tables/tables.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatCardModule} from '@angular/material/card'; 4 | import { MatIconModule } from '@angular/material/icon'; 5 | import { MatMenuModule } from '@angular/material/menu'; 6 | import { MatTableModule } from '@angular/material/table'; 7 | import { MatButtonModule } from '@angular/material/button'; 8 | import { MatCheckboxModule } from '@angular/material/checkbox'; 9 | import { MatToolbarModule } from '@angular/material/toolbar'; 10 | import { MatPaginatorModule } from '@angular/material/paginator'; 11 | import { MatFormFieldModule } from '@angular/material/form-field'; 12 | 13 | import { TablesPageComponent } from './containers'; 14 | import { TablesRoutingModule } from './tables-routing.module'; 15 | import { SharedModule } from '../../shared/shared.module'; 16 | import { EmployeeTableComponent, MaterialTableComponent } from './components'; 17 | import { TablesService } from './services'; 18 | 19 | @NgModule({ 20 | declarations: [ 21 | TablesPageComponent, 22 | MaterialTableComponent, 23 | EmployeeTableComponent 24 | ], 25 | imports: [ 26 | CommonModule, 27 | TablesRoutingModule, 28 | MatCardModule, 29 | MatIconModule, 30 | MatMenuModule, 31 | MatTableModule, 32 | MatButtonModule, 33 | MatCheckboxModule, 34 | MatToolbarModule, 35 | MatPaginatorModule, 36 | MatFormFieldModule, 37 | SharedModule 38 | ], 39 | providers: [ 40 | TablesService 41 | ] 42 | }) 43 | export class TablesModule { } 44 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/performance-chart/performance-chart.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
App Performance
4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | Integration 13 |
14 |
15 |
16 | SDK 17 |
18 |
19 | 20 |
21 |
Integration
22 | 27 |
SDK
28 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/containers/charts-page/charts-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Charts Page - Data Display

4 | 5 | 6 | 7 |
8 |
9 | 10 | 11 | 12 |

Apex Line Chart

13 | 14 | 15 | 16 | 17 | 18 | 19 |

Apex Heatmap Chart

20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 |

Apex Dashed Line Chart

29 | 30 | 31 | 32 | 33 | 34 | 35 |

Apex Pie Chart

36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-admin", 3 | "version": "1.0.6", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build --prod", 8 | "lint": "ng lint", 9 | "hmr": "ng serve --configuration hmr" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@agm/core": "^1.1.0", 14 | "@angular/animations": "^11.2.13", 15 | "@angular/cdk": "^11.2.12", 16 | "@angular/common": "~11.2.13", 17 | "@angular/compiler": "~11.2.13", 18 | "@angular/core": "~11.2.13", 19 | "@angular/forms": "~11.2.13", 20 | "@angular/material": "^11.2.12", 21 | "@angular/platform-browser": "~11.2.13", 22 | "@angular/platform-browser-dynamic": "~11.2.13", 23 | "@angular/router": "~11.2.13", 24 | "apexcharts": "3.26.2", 25 | "echarts": "5.1.1", 26 | "font-awesome": "^4.7.0", 27 | "ng-apexcharts": "1.5.9", 28 | "ngx-echarts": "6.0.1", 29 | "ngx-toastr": "13.2.1", 30 | "ngx-trend": "6.1.1", 31 | "rxjs": "7.0.0", 32 | "tslib": "^2.0.0", 33 | "zone.js": "~0.10.3" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "~0.1102.12", 37 | "@angular/cli": "~11.2.12", 38 | "@angular/compiler-cli": "~11.2.13", 39 | "@angular/language-service": "~11.2.13", 40 | "@angularclass/hmr": "^2.1.3", 41 | "@types/echarts": "^4.9.7", 42 | "@types/jasmine": "~3.6.0", 43 | "@types/jasminewd2": "~2.0.8", 44 | "@types/node": "^12.12.64", 45 | "codelyzer": "^6.0.0", 46 | "resize-observer-polyfill": "^1.5.1", 47 | "ts-node": "~8.3.0", 48 | "tslint": "~6.1.0", 49 | "typescript": "4.1.5" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/containers/dashboard-page/dashboard-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | 4 | import { DashboardService } from '../../services'; 5 | import { 6 | DailyLineChartData, 7 | PerformanceChartData, 8 | ProjectStatData, 9 | RevenueChartData, 10 | ServerChartData, 11 | SupportRequestData, 12 | VisitsChartData 13 | } from '../../models'; 14 | 15 | @Component({ 16 | selector: 'app-dashboard-page', 17 | templateUrl: './dashboard-page.component.html', 18 | styleUrls: ['./dashboard-page.component.scss'] 19 | }) 20 | export class DashboardPageComponent { 21 | public dailyLineChartData$: Observable; 22 | public performanceChartData$: Observable; 23 | public revenueChartData$: Observable; 24 | public serverChartData$: Observable; 25 | public supportRequestData$: Observable; 26 | public visitsChartData$: Observable; 27 | public projectsStatsData$: Observable; 28 | 29 | constructor(private service: DashboardService) { 30 | this.dailyLineChartData$ = this.service.loadDailyLineChartData(); 31 | this.performanceChartData$ = this.service.loadPerformanceChartData(); 32 | this.revenueChartData$ = this.service.loadRevenueChartData(); 33 | this.serverChartData$ = this.service.loadServerChartData(); 34 | this.supportRequestData$ = this.service.loadSupportRequestData(); 35 | this.visitsChartData$ = this.service.loadVisitsChartData(); 36 | this.projectsStatsData$ = this.service.loadProjectsStatsData(); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { MatListModule } from '@angular/material/list'; 3 | import { MatIconModule } from '@angular/material/icon'; 4 | import { RouterModule } from '@angular/router'; 5 | import { MatButtonModule } from '@angular/material/button'; 6 | import { CommonModule } from '@angular/common'; 7 | import { MatMenuModule } from '@angular/material/menu'; 8 | import { MatSelectModule } from '@angular/material/select'; 9 | import { FormsModule } from '@angular/forms'; 10 | import { MatSidenavModule } from '@angular/material/sidenav'; 11 | 12 | import { HeaderModule } from './header/header.module'; 13 | import { SidebarComponent } from './sidebar/sidebar.component'; 14 | import { FooterComponent } from './footer/footer.component'; 15 | import { SettingsMenuComponent } from './ui-elements/settings-menu/settings-menu.component'; 16 | import { DateMenuComponent } from './ui-elements/date-menu/date-menu.component'; 17 | import { LayoutComponent } from './layout/layout.component'; 18 | 19 | 20 | @NgModule({ 21 | declarations: [ 22 | SidebarComponent, 23 | FooterComponent, 24 | SettingsMenuComponent, 25 | DateMenuComponent, 26 | LayoutComponent 27 | ], 28 | imports: [ 29 | HeaderModule, 30 | MatListModule, 31 | MatIconModule, 32 | RouterModule, 33 | MatButtonModule, 34 | CommonModule, 35 | MatMenuModule, 36 | MatSelectModule, 37 | FormsModule, 38 | MatSidenavModule 39 | ], 40 | exports: [ 41 | HeaderModule, 42 | SidebarComponent, 43 | FooterComponent, 44 | SettingsMenuComponent, 45 | DateMenuComponent, 46 | LayoutComponent 47 | ] 48 | }) 49 | export class SharedModule { } 50 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/visits-chart/visits-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | 4 | .visits-chart { 5 | display: flex; 6 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 7 | height: 192px; 8 | flex-direction: column; 9 | justify-content: space-between; 10 | 11 | &__header { 12 | align-items: center; 13 | color: $grey; 14 | display: flex; 15 | justify-content: space-between; 16 | } 17 | 18 | &__title { 19 | font-size: 20px; 20 | font-weight: $fw-lighter; 21 | margin: 0; 22 | line-height: 40px; 23 | } 24 | 25 | &__content { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: space-between; 29 | height: 75%; 30 | 31 | &-info { 32 | align-items: center; 33 | display: flex; 34 | height: 96px; 35 | justify-content: space-between; 36 | 37 | &-title { 38 | margin:0; 39 | font-weight: $fw-lighter; 40 | font-size: $fs-large; 41 | line-height: 1.5; 42 | letter-spacing: 0.15px; 43 | color: $dark-grey; 44 | } 45 | 46 | &-chart { 47 | margin-left: 16px; 48 | } 49 | } 50 | 51 | &-stats { 52 | display: flex; 53 | justify-content: space-between; 54 | 55 | &-title { 56 | margin:0; 57 | color: $grey; 58 | font-weight: $fw-lighter; 59 | font-size: $fs-small; 60 | } 61 | 62 | &-data { 63 | margin:0; 64 | line-height: 1.5; 65 | font-weight: $fw-lighter; 66 | font-size: $fs-medium; 67 | color: $dark-grey; 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/performance-chart/performance-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/variables'; 3 | @import 'src/app/styles/font'; 4 | 5 | .performance-chart { 6 | box-shadow: 0 3px 11px 0 #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A; 7 | display: flex; 8 | flex-direction: column; 9 | height: 192px; 10 | justify-content: space-between; 11 | 12 | &__header { 13 | align-items: center; 14 | color: $grey; 15 | display: flex; 16 | justify-content: space-between; 17 | 18 | &-title { 19 | font-size: 20px; 20 | font-weight: 400; 21 | margin: 0; 22 | line-height: 40px; 23 | } 24 | } 25 | 26 | &__content { 27 | display: flex; 28 | height: 70%; 29 | flex-direction: column; 30 | justify-content: space-between; 31 | 32 | &-header { 33 | display: flex; 34 | 35 | &-item { 36 | align-items: center; 37 | display: flex; 38 | margin-right: 16px; 39 | 40 | &-icon_blue { 41 | background-color: $blue; 42 | border-radius: 50%; 43 | width: 5px; 44 | height: 5px; 45 | } 46 | 47 | &-icon_yellow { 48 | background-color: $yellow; 49 | border-radius: 50%; 50 | width: 5px; 51 | height: 5px; 52 | } 53 | 54 | &-text { 55 | margin-left: 8px; 56 | color: $grey; 57 | } 58 | } 59 | } 60 | } 61 | 62 | &__progress-title { 63 | margin: 20px 0 5px 0; 64 | font-weight: 400; 65 | font-size: $fs-medium; 66 | color: $grey; 67 | } 68 | 69 | &__progress-bar { 70 | margin-bottom: 8px; 71 | 72 | @media ($small) { 73 | margin-bottom: 10px; 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/heatmap-chart/heatmap-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { 3 | ApexAxisChartSeries, 4 | ApexChart, 5 | ApexDataLabels, ApexFill, ApexGrid, 6 | ApexLegend, ApexMarkers, 7 | ApexNonAxisChartSeries, ApexResponsive, 8 | ApexStroke, 9 | ApexTooltip, 10 | ApexXAxis 11 | } from 'ng-apexcharts'; 12 | 13 | import { HeatmapChartData } from '../../models'; 14 | import { colors } from '../../../../consts'; 15 | 16 | type ChartOptions = { 17 | series: ApexAxisChartSeries | ApexNonAxisChartSeries; 18 | chart: ApexChart; 19 | xaxis: ApexXAxis; 20 | stroke: ApexStroke; 21 | tooltip: ApexTooltip; 22 | dataLabels: ApexDataLabels; 23 | legend: ApexLegend; 24 | colors: string[]; 25 | markers: ApexMarkers; 26 | grid: ApexGrid; 27 | labels: string[]; 28 | responsive: ApexResponsive[]; 29 | fill: ApexFill; 30 | }; 31 | 32 | @Component({ 33 | selector: 'app-heatmap-chart', 34 | templateUrl: './heatmap-chart.component.html', 35 | styleUrls: ['./heatmap-chart.component.scss'] 36 | }) 37 | export class HeatmapChartComponent implements OnInit { 38 | @Input() heatmapChartData: HeatmapChartData; 39 | public apexHeatmapChartOptions: Partial; 40 | 41 | public ngOnInit(): void { 42 | this.initChart() 43 | } 44 | 45 | public initChart(): void { 46 | this.apexHeatmapChartOptions = { 47 | series: this.heatmapChartData.series, 48 | chart: { 49 | height: 350, 50 | type: 'heatmap', 51 | toolbar: { 52 | show: false 53 | } 54 | }, 55 | dataLabels: { 56 | enabled: false 57 | }, 58 | colors: [colors.BLUE], 59 | xaxis: { 60 | labels: { 61 | rotate: 0 62 | } 63 | } 64 | }; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/ui-elements.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatButtonModule } from '@angular/material/button'; 4 | import { MatCardModule } from '@angular/material/card'; 5 | import { MatTabsModule } from '@angular/material/tabs'; 6 | import { MatIconModule } from '@angular/material/icon'; 7 | import { MatToolbarModule } from '@angular/material/toolbar'; 8 | import { NgApexchartsModule } from 'ng-apexcharts'; 9 | import { AgmCoreModule } from '@agm/core'; 10 | 11 | import { 12 | DashedLineChartComponent, 13 | HeatmapChartComponent, 14 | IconsPageComponent, 15 | LineChartComponent, 16 | PieChartComponent 17 | } from './components'; 18 | import { 19 | ChartsPageComponent, 20 | MapPageComponent 21 | } from './containers'; 22 | import { UiElementsRoutingModule } from './ui-elements-routing.module'; 23 | import { SharedModule } from '../../shared/shared.module'; 24 | import { ChartsService } from './services'; 25 | import { DashboardModule } from '../dashboard/dashboard.module'; 26 | import { googleMapKey } from './consts'; 27 | 28 | @NgModule({ 29 | declarations: [ 30 | IconsPageComponent, 31 | ChartsPageComponent, 32 | MapPageComponent, 33 | LineChartComponent, 34 | DashedLineChartComponent, 35 | PieChartComponent, 36 | HeatmapChartComponent 37 | ], 38 | imports: [ 39 | CommonModule, 40 | UiElementsRoutingModule, 41 | MatButtonModule, 42 | MatCardModule, 43 | MatTabsModule, 44 | MatIconModule, 45 | NgApexchartsModule, 46 | AgmCoreModule, 47 | AgmCoreModule.forRoot({ 48 | apiKey: googleMapKey 49 | }), 50 | MatToolbarModule, 51 | SharedModule, 52 | DashboardModule, 53 | ], 54 | providers: [ 55 | ChartsService 56 | ] 57 | }) 58 | export class UiElementsModule { } 59 | -------------------------------------------------------------------------------- /src/app/shared/sidebar/sidebar.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | @import "src/app/styles/variables"; 4 | 5 | .mat-list-base { 6 | border-bottom: 1px solid $gray-80; 7 | width: $sidebar-width; 8 | padding-bottom: 16px; 9 | 10 | & .mat-list-item { 11 | display: flex; 12 | cursor: pointer; 13 | color: $sidebar-font-color; 14 | width: auto; 15 | padding-left: 4px; 16 | 17 | &.active { 18 | color: $sidebar-font-color-active; 19 | background-color: $sidebar-background-color-active; 20 | outline: none; 21 | 22 | & .mat-icon { 23 | color: $sidebar-icon-color-active; 24 | } 25 | 26 | & .circle { 27 | background-color: $sidebar-icon-color-active; 28 | } 29 | } 30 | 31 | &:hover { 32 | background-color: $sidebar-background-color-hover; 33 | } 34 | 35 | &:focus { 36 | outline: none; 37 | } 38 | } 39 | } 40 | 41 | .mat-icon { 42 | margin-right: 15px; 43 | color: $sidebar-icon-color; 44 | } 45 | 46 | 47 | .sidebar-title { 48 | color: $sidebar-title-color; 49 | font-size: $fs-normal; 50 | text-transform: uppercase; 51 | margin-top: 32px; 52 | margin-left: 24px; 53 | margin-bottom: 16px; 54 | } 55 | 56 | .mat-list-base .mat-list-item.ui-element { 57 | padding-left: 40px; 58 | } 59 | 60 | .circle { 61 | width: 5px; 62 | height: 5px; 63 | border-radius: 50%; 64 | background-color: $sidebar-circle-color; 65 | margin-right: 30px; 66 | } 67 | 68 | .project-circle { 69 | width: 8px; 70 | height: 8px; 71 | border-radius: 50%; 72 | margin-right: 15px; 73 | margin-left: 8px; 74 | 75 | &_yellow { 76 | background-color: $yellow; 77 | } 78 | 79 | &_blue { 80 | background-color: $blue; 81 | } 82 | 83 | &_pink { 84 | background-color: $pink; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/app/pages/not-found/not-found.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | 4 | .not-found-page { 5 | background-color: $blue; 6 | display: flex; 7 | justify-content: center; 8 | height: 100vh; 9 | 10 | &__content { 11 | width: 355px; 12 | } 13 | 14 | &__title { 15 | display: flex; 16 | align-items: center; 17 | justify-content: space-between; 18 | margin-top: 42px; 19 | margin-bottom: 67px; 20 | 21 | &-img { 22 | width: 48px; 23 | margin-left: 20px; 24 | margin-top: -6px; 25 | } 26 | 27 | &-text { 28 | color: $white; 29 | margin: 1px 30px 0 0; 30 | font-weight: 500; 31 | font-size: 32px; 32 | letter-spacing: 0.6px; 33 | } 34 | } 35 | 36 | &__card { 37 | box-sizing: border-box; 38 | width: 100%; 39 | height: 70vh; 40 | padding: 56px 0 36px 0; 41 | margin: 0; 42 | 43 | &-content { 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | justify-content: center; 48 | } 49 | 50 | &-title { 51 | font-size: 107px; 52 | font-weight: 500; 53 | color: $blue; 54 | line-height: 108px; 55 | text-align: center; 56 | } 57 | 58 | &-sub-title { 59 | margin-top: 30px; 60 | font-size: $fs-normal; 61 | font-weight: 400; 62 | letter-spacing: -0.05px; 63 | color: $blue; 64 | text-align: center; 65 | } 66 | 67 | &-sub-title-second { 68 | margin-top: 30px; 69 | font-size: $fs-normal; 70 | font-weight: 400; 71 | letter-spacing: -0.2px; 72 | color: $grey; 73 | text-align: center; 74 | } 75 | 76 | &-button { 77 | margin-top: 40px; 78 | margin-left: 36px; 79 | width: 150px; 80 | line-height: 40px; 81 | letter-spacing: 1px; 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {PreloadAllModules, RouterModule, Routes} from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { DashboardPageComponent } from './pages/dashboard/containers'; 4 | import { NotFoundComponent } from './pages/not-found/not-found.component'; 5 | import {AuthGuard} from './pages/auth/guards'; 6 | 7 | const routes: Routes = [ 8 | { 9 | path: 'dashboard', 10 | pathMatch: 'full', 11 | canActivate: [AuthGuard], 12 | component: DashboardPageComponent 13 | }, 14 | { 15 | path: 'typography', 16 | pathMatch: 'full', 17 | canActivate: [AuthGuard], 18 | loadChildren: () => import('./pages/typography/typography.module').then(m => m.TypographyModule) 19 | }, 20 | { 21 | path: 'tables', 22 | pathMatch: 'full', 23 | canActivate: [AuthGuard], 24 | loadChildren: () => import('./pages/tables/tables.module').then(m => m.TablesModule) 25 | }, 26 | { 27 | path: 'notification', 28 | pathMatch: 'full', 29 | canActivate: [AuthGuard], 30 | loadChildren: () => import('./pages/notification/notification.module').then(m => m.NotificationModule) 31 | }, 32 | { 33 | path: 'ui', 34 | canActivate: [AuthGuard], 35 | loadChildren: () => import('./pages/ui-elements/ui-elements.module').then(m => m.UiElementsModule) 36 | }, 37 | { 38 | path: '404', 39 | component: NotFoundComponent 40 | }, 41 | { 42 | path: 'login', 43 | loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthModule) 44 | }, 45 | { 46 | path: '**', 47 | redirectTo: '404' 48 | } 49 | ]; 50 | 51 | @NgModule({ 52 | imports: [ 53 | RouterModule.forRoot(routes, { 54 | useHash: true, 55 | preloadingStrategy: PreloadAllModules, 56 | relativeLinkResolution: 'legacy' 57 | }) 58 | ], 59 | exports: [RouterModule] 60 | }) 61 | 62 | export class AppRoutingModule { 63 | } 64 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/pie-chart/pie-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { 3 | ApexAxisChartSeries, 4 | ApexChart, 5 | ApexDataLabels, ApexFill, ApexGrid, 6 | ApexLegend, ApexMarkers, 7 | ApexNonAxisChartSeries, ApexResponsive, 8 | ApexStroke, 9 | ApexTooltip, 10 | ApexXAxis 11 | } from 'ng-apexcharts'; 12 | 13 | import { PieChartData } from '../../models'; 14 | import { colors } from '../../../../consts'; 15 | 16 | type ChartOptions = { 17 | series: ApexAxisChartSeries | ApexNonAxisChartSeries; 18 | chart: ApexChart; 19 | xaxis: ApexXAxis; 20 | stroke: ApexStroke; 21 | tooltip: ApexTooltip; 22 | dataLabels: ApexDataLabels; 23 | legend: ApexLegend; 24 | colors: string[]; 25 | markers: ApexMarkers; 26 | grid: ApexGrid; 27 | labels: string[]; 28 | responsive: ApexResponsive[]; 29 | fill: ApexFill; 30 | }; 31 | 32 | @Component({ 33 | selector: 'app-pie-chart', 34 | templateUrl: './pie-chart.component.html', 35 | styleUrls: ['./pie-chart.component.scss'] 36 | }) 37 | export class PieChartComponent implements OnInit { 38 | @Input() pieChartData: PieChartData; 39 | public apexPieChartOptions: Partial; 40 | public colors: typeof colors = colors; 41 | 42 | public ngOnInit(): void { 43 | this.initChart(); 44 | } 45 | 46 | public initChart(): void { 47 | this.apexPieChartOptions = { 48 | series: this.pieChartData.series, 49 | chart: { 50 | type: 'donut', 51 | height: 400 52 | }, 53 | colors: [ 54 | colors.BLUE, 55 | colors.YELLOW, 56 | colors.PINK, 57 | colors.GREEN, 58 | colors.VIOLET 59 | ], 60 | legend: { 61 | position: 'bottom', 62 | itemMargin: { 63 | horizontal: 5, 64 | vertical: 30 65 | }, 66 | }, 67 | labels: this.pieChartData.labels 68 | }; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/app/pages/typography/containers/typography-page/typography-page.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/variables'; 3 | @import 'src/app/styles/font'; 4 | 5 | .typography-content { 6 | 7 | &__wrapper { 8 | display: flex; 9 | padding: 0 8px; 10 | 11 | @media (max-width: $small) { 12 | flex-wrap: wrap; 13 | } 14 | } 15 | 16 | &__item-wrapper { 17 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A; 18 | width: 100%; 19 | margin: 16px; 20 | } 21 | 22 | &__headings, &__colors, &__settings, &__size { 23 | margin-top: 8px; 24 | border: 1px dashed $blue; 25 | padding: 32px 16px; 26 | 27 | h1 { 28 | @media (max-width: $small) { 29 | line-height: 46px; 30 | } 31 | } 32 | } 33 | 34 | &__colors { 35 | &_blue { 36 | color: $blue; 37 | } 38 | 39 | &_green { 40 | color: $green; 41 | } 42 | 43 | &_pink { 44 | color: $pink; 45 | } 46 | 47 | &_yellow { 48 | color: $yellow; 49 | } 50 | 51 | &_light-blue { 52 | color: $light-blue; 53 | } 54 | 55 | &_violet { 56 | color: $violet; 57 | } 58 | } 59 | } 60 | 61 | .fw-light { 62 | font-weight: $fw-lighter; 63 | } 64 | 65 | .fw-medium { 66 | font-weight: $fw-normal; 67 | } 68 | 69 | .fw-bold { 70 | font-weight: $fw-bold; 71 | } 72 | 73 | .font-uppercase { 74 | text-transform: uppercase; 75 | } 76 | 77 | .font-lowercase { 78 | text-transform: lowercase; 79 | } 80 | 81 | .fst-italic { 82 | font-style: italic; 83 | } 84 | 85 | .fs-sm { 86 | font-size: $fs-xs; 87 | } 88 | 89 | .fs-regular { 90 | font-size: $fs-small; 91 | } 92 | 93 | .fs-md { 94 | font-size: $fs-medium; 95 | } 96 | 97 | .fs-xl { 98 | font-size: $fs-xl; 99 | } 100 | 101 | .fs-xxl { 102 | font-size: $fs-xxxl; 103 | } 104 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.0.6] - 07/09/2021 4 | ### Updated 5 | - Added MIT License 6 | 7 | ## [1.0.5] - 05/10/2021 8 | ### Fixed 9 | - Fixed ngx-echarts error 10 | 11 | ## [1.0.4] - 05/10/2021 12 | ### Updated 13 | 14 | - Updated the Angular builder; 15 | - Updated the Angular CLI; 16 | - Update Angular Material; 17 | - Added new package "resize-observer-polyfill" which is dependency of "ngx-echarts" 18 | 19 | ###Updated packages 20 | @angular/animations: 9.1.12 -> 11.2.13 21 | @angular/cdk: 9.2.4 -> 11.2.11 22 | @angular/common: 9.1.12 -> 11.2.13 23 | @angular/compiler: 9.1.12 -> 11.2.13 24 | @angular/core: 9.1.12 -> 11.2.13 25 | @angular/forms: 9.1.12 -> 11.2.13 26 | @angular/material: 9.2.4 -> 11.2.12 27 | @angular/platform-browser: 9.1.12 -> 11.2.13 28 | @angular/platform-browser-dynamic: 9.1.12 -> 11.2.13 29 | @angular/router: 9.1.12 -> 11.2.13 30 | @angular-devkit/build-angular: 0.901.12 -> 0.1102.12 31 | @angular/cli: 9.1.12 -> 11.2.12 32 | @angular/compiler-cli: 9.1.12 -> 11.2.13 33 | @angular/language-service: 9.1.12 -> 11.2.13 34 | @types/echarts: 4.6.7 -> 4.9.7 35 | @types/jasmine: 3.5.14 -> 3.6.0 36 | tslib: 1.10.0 -> 2.0.0 37 | codelyzer: 5.1.2 -> 6.0.0 38 | typescript: 3.8.3 -> 4.1.5 39 | apexcharts: 3.19.3 -> 3.26.2 40 | echarts: 4.7.0 -> 5.1.1 41 | ng-apexcharts: 1.2.3 -> 1.5.9 42 | ngx-echarts: 4.2.2 -> 6.0.1 43 | ngx-toastr: 12.0.1 -> 13.2.1 44 | ngx-trend: 5.0.1 -> 6.1.1 45 | rxjs: 6.5.5 -> 7.0.0 46 | 47 | ###Added packages 48 | resize-observer-polyfill: 1.5.1 49 | 50 | ## [1.0.3] 51 | 52 | ### Fixed 53 | - Notifications: fix titles 54 | - Tables add more padding 55 | - Add unlock-button 56 | - Clear code 57 | 58 | ## [1.0.2] 59 | 60 | ### Update 61 | - Minor package updates 62 | 63 | ## [1.0.1] 64 | 65 | ### Added 66 | - The added configuration for router module. 67 | 68 | ## [1.0.0] 69 | 70 | ### Added 71 | - Added Angular Material Admin v1.0.0 72 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/revenue-chart/revenue-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { RevenueChartData } from '../../models'; 4 | import {colors} from '../../../../consts'; 5 | 6 | @Component({ 7 | selector: 'app-revenue-chart', 8 | templateUrl: './revenue-chart.component.html', 9 | styleUrls: ['./revenue-chart.component.scss'] 10 | }) 11 | export class RevenueChartComponent implements OnInit { 12 | @Input() revenueCharData: RevenueChartData; 13 | public revenueChart: any; 14 | public colors: typeof colors = colors; 15 | 16 | public ngOnInit(): void { 17 | this.initChart(); 18 | } 19 | 20 | public initChart(): void { 21 | this.revenueChart = { 22 | color: [colors.GREEN, colors.PINK, colors.YELLOW, colors.BLUE], 23 | tooltip: { 24 | trigger: 'item' 25 | }, 26 | legend: { 27 | top: 'center', 28 | right: 'right', 29 | data: ['Group A', 'Group B', 'Group C', 'Group D'], 30 | textStyle: { 31 | color: '#6E6E6E' 32 | } 33 | }, 34 | series: [{ 35 | type: 'pie', 36 | radius: ['50%', '70%'], 37 | center: ['24%', '50%'], 38 | label: { 39 | show: false 40 | }, 41 | labelLine: { 42 | normal: { 43 | show: false 44 | } 45 | }, 46 | hoverAnimation: false, 47 | avoidLabelOverlap: false, 48 | data: [ 49 | { 50 | name: 'Group A', 51 | value: this.revenueCharData.groupA 52 | }, 53 | { 54 | name: 'Group B', 55 | value: this.revenueCharData.groupB 56 | }, 57 | { 58 | name: 'Group C', 59 | value: this.revenueCharData.groupC 60 | }, 61 | { 62 | name: 'Group D', 63 | value: this.revenueCharData.groupD 64 | }, 65 | ] 66 | }] 67 | }; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/daily-line-chart/daily-line-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/font"; 3 | @import "src/app/styles/variables"; 4 | 5 | .chart { 6 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 7 | margin: 16px 24px; 8 | 9 | &__header { 10 | display: flex; 11 | justify-content: space-between; 12 | padding: 8px; 13 | 14 | @media (max-width: $small) { 15 | flex-wrap: wrap; 16 | } 17 | } 18 | 19 | &__title { 20 | margin: 0; 21 | display: flex; 22 | align-items: center; 23 | color: $grey; 24 | font-weight: $fw-normal; 25 | font-size: $fs-regular; 26 | text-transform: none; 27 | line-height: 1.6; 28 | letter-spacing: 0.12px; 29 | order: 1; 30 | } 31 | 32 | &__content { 33 | height: 380px; 34 | width: 100%; 35 | @media (max-width: $small) { 36 | overflow-x: scroll; 37 | } 38 | } 39 | 40 | &__content-item { 41 | @media (max-width: $small) { 42 | width: 600px; 43 | } 44 | } 45 | } 46 | 47 | .chart-legend { 48 | display: flex; 49 | order: 2; 50 | 51 | &__item { 52 | display: flex; 53 | align-items: center; 54 | margin-top: 2.24px; 55 | margin-right: 24px; 56 | } 57 | 58 | &__icon { 59 | width: 5px; 60 | height: 5px; 61 | border-radius: 50%; 62 | } 63 | 64 | &__title { 65 | text-transform: none; 66 | font-weight: $fw-normal; 67 | font-size: $fs-regular; 68 | color: $grey; 69 | margin-left: 8px; 70 | } 71 | 72 | @media (max-width: $small) { 73 | margin-top: 20px; 74 | order: 3; 75 | } 76 | } 77 | 78 | .chart-select { 79 | order: 3; 80 | 81 | @media (max-width: $small) { 82 | order: 2; 83 | } 84 | } 85 | 86 | .yellow { 87 | background-color: $yellow; 88 | } 89 | 90 | .blue { 91 | background-color: $blue; 92 | } 93 | 94 | .light-blue { 95 | background-color: $white-blue; 96 | } 97 | 98 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/support-requests/support-requests.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .support-requests { 6 | margin: 0 24px; 7 | padding: 0; 8 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 9 | 10 | &__header { 11 | color: $grey; 12 | display: flex; 13 | justify-content: space-between; 14 | padding: 24px 24px 8px; 15 | margin-bottom: 0; 16 | } 17 | 18 | &__title { 19 | font-size: $fs-medium; 20 | font-weight: $fw-lighter; 21 | margin: 0; 22 | line-height: 40px; 23 | } 24 | 25 | &__content { 26 | height: 427px; 27 | overflow-y: hidden; 28 | overflow-x: scroll; 29 | 30 | @media (max-width: $small) { 31 | height: auto; 32 | } 33 | } 34 | 35 | &__table { 36 | width: 100%; 37 | } 38 | 39 | &__table-row { 40 | height: 64px; 41 | } 42 | 43 | &__table-row-title { 44 | color: $dark-grey; 45 | font-size: $fs-small; 46 | font-weight: $fw-lighter; 47 | line-height: 24px; 48 | text-transform: uppercase; 49 | padding: 18.4px; 50 | } 51 | 52 | &__table-content { 53 | color: $dark-grey; 54 | font-size: $fs-small; 55 | padding: 20px; 56 | } 57 | 58 | &__content-badge { 59 | width: fit-content; 60 | border-radius: 32px; 61 | color: $white; 62 | text-align: center; 63 | padding: 5px 10px; 64 | font-size: 13px; 65 | box-sizing: border-box; 66 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; 67 | font-weight: $fw-lighter; 68 | line-height: 1.75; 69 | letter-spacing: 0.45px; 70 | 71 | &::first-letter { 72 | text-transform: uppercase; 73 | } 74 | } 75 | } 76 | 77 | mat-menu { 78 | position: absolute; 79 | } 80 | 81 | .send { 82 | background-color: $green; 83 | } 84 | 85 | .pending { 86 | background-color: $yellow; 87 | } 88 | 89 | .declined { 90 | background-color: $pink; 91 | } 92 | -------------------------------------------------------------------------------- /src/app/pages/tables/components/material-table/material-table.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .material-table { 6 | margin-top: 24px; 7 | padding: 0; 8 | overflow: hidden; 9 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 10 | 11 | &__header { 12 | color: $grey; 13 | display: flex; 14 | justify-content: space-between; 15 | padding: 24px 24px 8px; 16 | margin-bottom: 0; 17 | } 18 | 19 | &__title { 20 | font-size: $fs-medium; 21 | font-weight: $fw-lighter; 22 | margin: 0; 23 | line-height: 40px; 24 | } 25 | 26 | &__content { 27 | height: 424px; 28 | overflow-y: hidden; 29 | overflow-x: scroll; 30 | 31 | @media (max-width: $small) { 32 | height: auto; 33 | } 34 | } 35 | 36 | &__table { 37 | width: 100%; 38 | } 39 | 40 | &__table-row { 41 | height: 64px; 42 | } 43 | 44 | &__table-row-title { 45 | color: $dark-grey; 46 | font-size: $fs-small; 47 | font-weight: $fw-lighter; 48 | line-height: 24px; 49 | text-transform: uppercase; 50 | padding: 16px; 51 | } 52 | 53 | &__table-content { 54 | color: $dark-grey; 55 | font-size: $fs-small; 56 | padding: 20px; 57 | } 58 | 59 | &__content-badge { 60 | width: fit-content; 61 | border-radius: 32px; 62 | color: $white; 63 | text-align: center; 64 | padding: 5px 10px; 65 | font-size: 13px; 66 | box-sizing: border-box; 67 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; 68 | font-weight: $fw-lighter; 69 | line-height: 1.75; 70 | letter-spacing: 0.457px; 71 | 72 | &::first-letter { 73 | text-transform: uppercase; 74 | } 75 | } 76 | } 77 | 78 | mat-menu { 79 | position: absolute; 80 | } 81 | 82 | .send { 83 | background-color: $green; 84 | } 85 | 86 | .pending { 87 | background-color: $yellow; 88 | } 89 | 90 | .declined { 91 | background-color: $pink; 92 | } 93 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/line-chart/line-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { 3 | ApexAxisChartSeries, 4 | ApexChart, 5 | ApexDataLabels, 6 | ApexFill, 7 | ApexGrid, 8 | ApexLegend, 9 | ApexMarkers, 10 | ApexNonAxisChartSeries, 11 | ApexResponsive, 12 | ApexStroke, 13 | ApexTooltip, 14 | ApexXAxis 15 | } from 'ng-apexcharts'; 16 | 17 | import { LineChartData } from '../../models'; 18 | import { colors } from '../../../../consts'; 19 | 20 | 21 | export type ChartOptions = { 22 | series: ApexAxisChartSeries | ApexNonAxisChartSeries; 23 | chart: ApexChart; 24 | xaxis: ApexXAxis; 25 | stroke: ApexStroke; 26 | tooltip: ApexTooltip; 27 | dataLabels: ApexDataLabels; 28 | legend: ApexLegend; 29 | colors: string[]; 30 | markers: ApexMarkers; 31 | grid: ApexGrid; 32 | labels: string[]; 33 | responsive: ApexResponsive[]; 34 | fill: ApexFill; 35 | }; 36 | 37 | @Component({ 38 | selector: 'app-line-chart', 39 | templateUrl: './line-chart.component.html', 40 | styleUrls: ['./line-chart.component.scss'] 41 | }) 42 | export class LineChartComponent implements OnInit { 43 | @Input() lineChartData: LineChartData; 44 | public apexLineChartOptions: Partial; 45 | public colors: typeof colors = colors; 46 | 47 | public ngOnInit(): void { 48 | this.initChart(); 49 | } 50 | 51 | public initChart(): void { 52 | this.apexLineChartOptions = { 53 | series: this.lineChartData.series, 54 | chart: { 55 | height: 350, 56 | type: 'area', 57 | toolbar: { 58 | show: false 59 | } 60 | }, 61 | legend: { 62 | show: false 63 | }, 64 | dataLabels: { 65 | enabled: false 66 | }, 67 | colors: [colors.BLUE, colors.GREEN], 68 | stroke: { 69 | curve: 'smooth', 70 | }, 71 | xaxis: { 72 | type: 'datetime', 73 | categories: this.lineChartData.categories 74 | }, 75 | tooltip: { 76 | x: { 77 | format: 'dd/MM/yy HH:mm' 78 | } 79 | } 80 | }; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/app/pages/tables/components/employee-table/employee-table.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .employee-table-wrapper { 6 | padding-left: 0; 7 | padding-right: 0; 8 | margin: 16px 16px 32px 16px; 9 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 10 | 11 | &__header { 12 | padding: 0 24px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | 17 | @media (max-width: $small) { 18 | padding: 0 16px; 19 | } 20 | } 21 | 22 | &__title { 23 | margin: 0; 24 | } 25 | 26 | &__search { 27 | display: flex; 28 | align-items: center; 29 | } 30 | 31 | &__icon-wrapper { 32 | height: 46px; 33 | width: 46px; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | } 38 | 39 | &__icon { 40 | color: inherit; 41 | } 42 | 43 | &__search-input { 44 | font-size: $fs-normal; 45 | height: 32px; 46 | border: 0; 47 | border-bottom: 1px solid $grey; 48 | outline: none; 49 | 50 | @media (max-width: $small) { 51 | width: 150px; 52 | } 53 | 54 | &:focus { 55 | border-bottom: 2px solid $blue; 56 | } 57 | } 58 | 59 | &__button { 60 | box-shadow: none; 61 | background-color: inherit; 62 | width: 46px; 63 | height: 46px; 64 | color: $grey; 65 | 66 | &:hover { 67 | background-color: $black-08; 68 | color: $blue; 69 | } 70 | } 71 | } 72 | 73 | .employee-table { 74 | &__content { 75 | @media (max-width: $small) { 76 | overflow-x: scroll; 77 | } 78 | } 79 | 80 | &__table { 81 | width:100%; 82 | box-shadow: none; 83 | 84 | @media (max-width: $small) { 85 | width: 200%; 86 | } 87 | } 88 | 89 | &__table-checkbox { 90 | width: 32px; 91 | padding-left: 24px; 92 | } 93 | 94 | &__table-header { 95 | padding: 1rem; 96 | font-size: $fs-small; 97 | } 98 | 99 | &__table-body { 100 | padding: 1rem; 101 | font-size: $fs-small; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/dashboard.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { MatTableModule } from '@angular/material/table'; 4 | import { NgxEchartsModule } from 'ngx-echarts'; 5 | import { TrendModule } from 'ngx-trend'; 6 | import { MatCardModule } from '@angular/material/card'; 7 | import { MatIconModule } from '@angular/material/icon'; 8 | import { MatMenuModule } from '@angular/material/menu'; 9 | import { MatButtonModule } from '@angular/material/button'; 10 | import { MatProgressBarModule } from '@angular/material/progress-bar'; 11 | import { MatToolbarModule } from '@angular/material/toolbar'; 12 | import { MatGridListModule } from '@angular/material/grid-list'; 13 | import { MatSelectModule } from '@angular/material/select'; 14 | import { MatInputModule } from '@angular/material/input'; 15 | import { NgApexchartsModule } from 'ng-apexcharts'; 16 | import { FormsModule } from '@angular/forms'; 17 | 18 | import { DashboardPageComponent } from './containers'; 19 | import { 20 | VisitsChartComponent, 21 | PerformanceChartComponent, 22 | ServerChartComponent, 23 | RevenueChartComponent, 24 | DailyLineChartComponent, 25 | SupportRequestsComponent, 26 | ProjectStatChartComponent 27 | } from './components'; 28 | import { SharedModule } from '../../shared/shared.module'; 29 | import { DashboardService } from './services'; 30 | 31 | 32 | @NgModule({ 33 | declarations: [ 34 | DashboardPageComponent, 35 | VisitsChartComponent, 36 | PerformanceChartComponent, 37 | ServerChartComponent, 38 | RevenueChartComponent, 39 | DailyLineChartComponent, 40 | SupportRequestsComponent, 41 | ProjectStatChartComponent 42 | ], 43 | imports: [ 44 | CommonModule, 45 | MatTableModule, 46 | NgxEchartsModule, 47 | TrendModule, 48 | MatCardModule, 49 | MatIconModule, 50 | MatMenuModule, 51 | MatButtonModule, 52 | MatProgressBarModule, 53 | MatToolbarModule, 54 | MatGridListModule, 55 | MatSelectModule, 56 | MatInputModule, 57 | NgApexchartsModule, 58 | FormsModule, 59 | SharedModule 60 | ], 61 | exports: [ 62 | DailyLineChartComponent 63 | ], 64 | providers: [ 65 | DashboardService 66 | ] 67 | }) 68 | export class DashboardModule { } 69 | -------------------------------------------------------------------------------- /src/app/pages/notification/containers/notification-page/notification-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ToastrService } from 'ngx-toastr'; 3 | 4 | import { SuccessToastComponent } from '../success-toast/success-toast.component'; 5 | import { ErrorToastrComponent } from '../error-toastr/error-toastr.component'; 6 | import { InfoToastrComponent } from '../info-toastr/info-toastr.component'; 7 | 8 | enum ToastPositionTypes { 9 | bottomCenter = 'toast-bottom-center', 10 | bottomRight = 'toast-bottom-right', 11 | bottomLeft = 'toast-bottom-left', 12 | topCenter = 'toast-top-center', 13 | topRight = 'toast-top-right', 14 | topLeft = 'toast-top-left' 15 | } 16 | 17 | @Component({ 18 | selector: 'app-notification-page', 19 | templateUrl: './notification-page.component.html', 20 | styleUrls: ['./notification-page.component.scss'] 21 | }) 22 | export class NotificationPageComponent { 23 | public toastrPositionTypes: typeof ToastPositionTypes = ToastPositionTypes; 24 | public toastrPosition: string = this.toastrPositionTypes.topRight; 25 | public timeOut = 3000; 26 | public toastrLink: string = 'https://github.com/scttcper/ngx-toastr'; 27 | 28 | constructor(private toastrService: ToastrService) { 29 | } 30 | 31 | public setToastrPosition(position: string): void { 32 | this.toastrPosition = position; 33 | } 34 | 35 | public showSuccess(): void { 36 | this.toastrService.show( 37 | null, 38 | null, 39 | { 40 | positionClass: this.toastrPosition, 41 | toastComponent: SuccessToastComponent, 42 | timeOut: this.timeOut, 43 | tapToDismiss: false 44 | } 45 | ); 46 | } 47 | 48 | public showErrorToastr(): void { 49 | this.toastrService.show( 50 | null, 51 | null, 52 | { 53 | positionClass: this.toastrPosition, 54 | toastComponent: ErrorToastrComponent, 55 | timeOut: this.timeOut, 56 | tapToDismiss: false 57 | } 58 | ); 59 | } 60 | 61 | public showInfoToastr(): void { 62 | this.toastrService.show( 63 | null, 64 | null, 65 | { 66 | positionClass: this.toastrPosition, 67 | toastComponent: InfoToastrComponent, 68 | timeOut: this.timeOut, 69 | tapToDismiss: false 70 | } 71 | ); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app/pages/auth/containers/auth-page/auth-page.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |

Good Morning, User

7 |
8 | 11 |
12 | 13 |
14 |
15 |

or

16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 |

Welcome!

24 |

Create you account

25 | 26 | 27 | 28 |
29 |
30 |

or

31 |
32 |
33 | 34 |
35 | 38 |
39 | 40 | 41 | 42 |

© 2014-{{todayDate | year}} Flatlogic, LLC. All rights reserved.

43 |
44 |
45 | 51 |
52 | -------------------------------------------------------------------------------- /docs/runtime-es5.04ef36e01dd49e8130ab.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p; 17 | public selection = new SelectionModel(true, []); 18 | 19 | public isShowFilterInput = false; 20 | 21 | @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; 22 | 23 | public ngOnInit(): void { 24 | this.dataSource = new MatTableDataSource(this.employeeTableData); 25 | 26 | this.dataSource.paginator = this.paginator; 27 | } 28 | 29 | /** Whether the number of selected elements matches the total number of rows. */ 30 | public isAllSelected(): boolean { 31 | const numSelected = this.selection.selected.length; 32 | const numRows = this.dataSource.data.length; 33 | return numSelected === numRows; 34 | } 35 | 36 | /** Selects all rows if they are not all selected; otherwise clear selection. */ 37 | public masterToggle(): void { 38 | this.isAllSelected() ? 39 | this.selection.clear() : 40 | this.dataSource.data.forEach(row => this.selection.select(row)); 41 | } 42 | 43 | /** The label for the checkbox on the passed row */ 44 | public checkboxLabel(row?: any): string { 45 | if (!row) { 46 | return `${this.isAllSelected() ? 'select' : 'deselect'} all`; 47 | } 48 | return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`; 49 | } 50 | 51 | public applyFilter(event: Event): void { 52 | const filterValue = (event.target as HTMLInputElement).value; 53 | this.dataSource.filter = filterValue.trim().toLowerCase(); 54 | } 55 | 56 | public showFilterInput(): void { 57 | this.isShowFilterInput = !this.isShowFilterInput; 58 | this.dataSource = new MatTableDataSource(this.employeeTableData); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/app/shared/sidebar/sidebar.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | home Dashboard 4 | 5 | 6 | text_fields Typography 7 | 8 | 9 | border_all Tables 10 | 11 | 12 | notifications_none Notification 13 | 14 | 15 | filter_none UI Elements 16 | 17 |
18 | 19 |
Icons 20 | 21 | 22 |
Charts 23 | 24 | 25 |
Map 26 | 27 |
28 | 29 | 30 |

Help

31 | 32 | 33 | 34 | 35 | library_books Library 36 | 37 | 38 | 39 | 40 | question_answer Support 41 | 42 | 43 | 44 | 45 | help_outline FAQ 46 | 47 | 48 | 49 | 50 |

Projects

51 | 52 | 53 |
My resend 54 |
Starred 55 |
Background 56 | 57 | -------------------------------------------------------------------------------- /src/app/shared/header/components/email/email.component.scss: -------------------------------------------------------------------------------- 1 | @import 'src/app/styles/colors'; 2 | @import 'src/app/styles/font'; 3 | @import 'src/app/styles/variables'; 4 | 5 | .email-button { 6 | background-color: $blue; 7 | box-shadow: none; 8 | margin-left: 16px; 9 | 10 | &__icon { 11 | color: $white-35; 12 | } 13 | 14 | &:hover { 15 | background-color: $black-08; 16 | } 17 | 18 | @media (max-width: $small) { 19 | margin-top: 0; 20 | } 21 | } 22 | 23 | .email-menu-header { 24 | padding: 16px 16px 0 16px; 25 | 26 | &__title { 27 | margin: 0; 28 | font-weight: $fw-lighter; 29 | font-size: $fs-large; 30 | color: $dark-grey; 31 | } 32 | 33 | &__subtitle { 34 | color: $pink; 35 | font-weight: $fw-lighter; 36 | font-size: $fs-small; 37 | margin: 4px 0 16px 0; 38 | } 39 | } 40 | 41 | .mail-wrapper { 42 | cursor: pointer; 43 | display: flex; 44 | padding: 6px 16px; 45 | 46 | &:hover { 47 | background-color: $blue-white; 48 | } 49 | 50 | &__icon-wrapper { 51 | display: flex; 52 | flex-direction: column; 53 | } 54 | 55 | &__icon { 56 | font-weight: $fw-lighter; 57 | font-size: $fs-small; 58 | color: $white; 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | box-shadow: none; 63 | width: 30px; 64 | height: 30px; 65 | } 66 | 67 | &__time { 68 | text-align: center; 69 | color: $grey; 70 | font-weight: $fw-lighter; 71 | font-size: $fs-xs; 72 | } 73 | } 74 | 75 | .mail-content { 76 | display: flex; 77 | flex-direction: column; 78 | overflow: hidden; 79 | padding-left: 16px; 80 | justify-content: space-between; 81 | 82 | &__user { 83 | margin-top: 3px; 84 | font-weight: $fw-normal; 85 | font-size: $fs-small; 86 | color: $dark-grey; 87 | } 88 | 89 | &__message { 90 | color: $grey; 91 | font-weight: $fs-small; 92 | font-size: $fs-small; 93 | white-space: nowrap; 94 | text-overflow: ellipsis; 95 | overflow: hidden; 96 | } 97 | } 98 | 99 | .send-message-button-wrapper { 100 | margin: 16px 0; 101 | text-align: center; 102 | padding: 0 16px; 103 | } 104 | 105 | .send-message-button { 106 | width: 224px; 107 | height: 48px; 108 | padding: 0 16px; 109 | border-radius: 32px; 110 | color: $white; 111 | background-color: $blue; 112 | 113 | & .mat-button-wrapper { 114 | padding: 0; 115 | } 116 | 117 | &__icon { 118 | color: $white; 119 | margin-left: 16px; 120 | } 121 | } 122 | 123 | .yellow { 124 | background-color: $yellow; 125 | } 126 | 127 | .green { 128 | background-color: $green; 129 | } 130 | 131 | .blue { 132 | background-color: $blue; 133 | } 134 | 135 | .ping { 136 | background-color: $pink; 137 | } 138 | -------------------------------------------------------------------------------- /src/app/pages/typography/containers/typography-page/typography-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Typography

4 | 5 | 6 | 7 |
8 | 9 | 10 |

Headings

11 | 12 |
13 |

h1. Heading

14 |

h2. Heading

15 |

h3. Heading

16 |

h4. Heading

17 |
h5. Heading
18 |
h6. Heading
19 |
20 | 21 | 22 | 23 |

Typography Colors

24 | 25 |
26 |

h1. Heading

27 |

h2. Heading

28 |

h3. Heading

29 |

h4. Heading

30 |
h5. Heading
31 |
h6. Heading
32 |
33 | 34 |
35 |
36 | 37 | 38 |

Basic Text Settings

39 | 40 |
41 |

Basic text

42 |

Basic light text

43 |

Basic medium text

44 |

Basic bold text

45 |

basic lowercase text

46 |

basic lowercase text

47 |

Basic Capitalized Text

48 |

Basic Cursive Text

49 |
50 | 51 | 52 | 53 |

Text Size

54 | 55 |
56 |

Heading Typography SM Font Size

57 |

Heading Typography Regular Font Size

58 |

Heading Typography MD Font Size

59 |

Heading Typography XL Font Size

60 |

Heading Typography XXL Font Size

61 |
62 | 63 |
64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/project-stat-chart/project-stat-chart.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/variables"; 3 | @import "src/app/styles/font"; 4 | 5 | .project-stat { 6 | display: flex; 7 | justify-content: space-around; 8 | width: calc(100% - 16px); 9 | margin: 16px 8px; 10 | 11 | &__item { 12 | height: 208px; 13 | margin: 16px; 14 | width: 100%; 15 | box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 16 | 17 | @media (min-width: $small) and (max-width: $large) { 18 | width: 41.4%; 19 | } 20 | 21 | @media (min-width: $large) and (max-width: $normal) { 22 | width: 43.6%; 23 | } 24 | } 25 | 26 | &__title { 27 | padding: 8px; 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | } 32 | 33 | &__title-text { 34 | font-weight: $fw-lighter; 35 | font-size: $fs-medium; 36 | color: $dark-grey; 37 | margin: 0; 38 | } 39 | 40 | @media (min-width: $small) and (max-width: $normal) { 41 | justify-content: start; 42 | } 43 | 44 | @media (max-width: $normal) { 45 | flex-wrap: wrap; 46 | } 47 | } 48 | 49 | .project-stat-content { 50 | padding: 8px; 51 | 52 | &__total-info-wrapper { 53 | display: flex; 54 | justify-content: space-between; 55 | align-items: center; 56 | height: 70px; 57 | } 58 | 59 | &__total-info { 60 | display: flex; 61 | justify-content: space-between; 62 | align-items: flex-end; 63 | } 64 | 65 | &__total-info-users { 66 | color: $grey; 67 | font-weight: $fw-lighter; 68 | font-size: $fs-xxxl; 69 | margin: 0; 70 | height: 45px; 71 | letter-spacing: 0.15px; 72 | } 73 | 74 | &__total-info-percent { 75 | color: $green; 76 | font-weight: $fw-lighter; 77 | font-size: $fs-small; 78 | margin: 0 0 0 5px; 79 | } 80 | 81 | &__total-info-percent-warn { 82 | color: $pink; 83 | font-weight: $fw-lighter; 84 | font-size: $fs-small; 85 | margin: 0 0 0 5px; 86 | } 87 | 88 | &__total-info-chart { 89 | position: relative; 90 | right: -9px; 91 | top: -2px; 92 | } 93 | 94 | &__stat-wrapper { 95 | display: flex; 96 | justify-content: space-between; 97 | margin-top: 24px; 98 | } 99 | 100 | &__stat-value-wrapper { 101 | display: flex; 102 | align-items: center; 103 | } 104 | 105 | &__stat-value { 106 | font-weight: $fw-lighter; 107 | font-size: $fs-regular; 108 | color: $dark-grey; 109 | margin: 0; 110 | } 111 | 112 | &__stat-icon { 113 | transform: rotate(45deg); 114 | color: $green; 115 | } 116 | 117 | &__stat-icon-warn { 118 | transform: rotate(135deg); 119 | color: $pink; 120 | } 121 | 122 | &__stat-item-title { 123 | color: $grey; 124 | font-weight: $fw-lighter; 125 | font-size: $fs-xs; 126 | margin: 0; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/app/pages/ui-elements/components/dashed-line-chart/dashed-line-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { 3 | ApexAxisChartSeries, 4 | ApexChart, 5 | ApexDataLabels, ApexFill, ApexGrid, 6 | ApexLegend, ApexMarkers, 7 | ApexNonAxisChartSeries, ApexResponsive, 8 | ApexStroke, 9 | ApexTooltip, 10 | ApexXAxis 11 | } from 'ng-apexcharts'; 12 | 13 | import { DashedLineChartData } from '../../models'; 14 | import {colors} from '../../../../consts'; 15 | 16 | type ChartOptions = { 17 | series: ApexAxisChartSeries | ApexNonAxisChartSeries; 18 | chart: ApexChart; 19 | xaxis: ApexXAxis; 20 | stroke: ApexStroke; 21 | tooltip: ApexTooltip; 22 | dataLabels: ApexDataLabels; 23 | legend: ApexLegend; 24 | colors: string[]; 25 | markers: ApexMarkers; 26 | grid: ApexGrid; 27 | labels: string[]; 28 | responsive: ApexResponsive[]; 29 | fill: ApexFill; 30 | }; 31 | 32 | @Component({ 33 | selector: 'app-dashed-line-chart', 34 | templateUrl: './dashed-line-chart.component.html', 35 | styleUrls: ['./dashed-line-chart.component.scss'] 36 | }) 37 | export class DashedLineChartComponent implements OnInit { 38 | @Input() dashedLineChartData: DashedLineChartData; 39 | public apexDashedLineChartOptions: Partial; 40 | public colors: typeof colors = colors; 41 | 42 | public ngOnInit(): void { 43 | this.initChart(); 44 | } 45 | 46 | public initChart(): void { 47 | this.apexDashedLineChartOptions = { 48 | series: this.dashedLineChartData.series, 49 | chart: { 50 | height: 350, 51 | type: 'line', 52 | toolbar: { 53 | show: false 54 | } 55 | }, 56 | colors: [colors.BLUE, colors.YELLOW, colors.PINK], 57 | dataLabels: { 58 | enabled: false 59 | }, 60 | stroke: { 61 | width: 2, 62 | curve: 'smooth', 63 | dashArray: [0, 8, 5] 64 | }, 65 | legend: { 66 | show: false 67 | }, 68 | markers: { 69 | size: 0, 70 | hover: { 71 | sizeOffset: 6 72 | } 73 | }, 74 | xaxis: { 75 | labels: { 76 | trim: false, 77 | rotate: -45 78 | }, 79 | categories: this.dashedLineChartData.categories, 80 | }, 81 | tooltip: { 82 | y: [ 83 | { 84 | title: { 85 | formatter(val) { 86 | return val + ' (mins)'; 87 | } 88 | } 89 | }, 90 | { 91 | title: { 92 | formatter(val) { 93 | return val + ' per session'; 94 | } 95 | } 96 | }, 97 | { 98 | title: { 99 | formatter(val) { 100 | return val; 101 | } 102 | } 103 | } 104 | ] 105 | }, 106 | grid: { 107 | borderColor: colors.LIGHT_BLUE 108 | } 109 | }; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/app/pages/tables/services/tables.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, of } from 'rxjs'; 3 | 4 | import {Customer, Employee} from '../models'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class TablesService { 10 | public loadEmployeeTableData(): Observable { 11 | return of([ 12 | {name: 'Joe James', company: 'Example Inc.', city: 'Yonkers', state: 'NY'}, 13 | {name: 'John Walsh', company: 'Example Inc.', city: 'Hartford', state: 'CT'}, 14 | {name: 'Bob Herm', company: 'Example Inc.', city: 'Tampa', state: 'FL'}, 15 | {name: 'James Houston', company: 'Example Inc.', city: 'Dallas', state: 'TX'}, 16 | {name: 'Prabhakar Linwood', company: 'Example Inc.', city: 'Hartford', state: 'CT'}, 17 | {name: 'Kaui Ignace', company: 'Example Inc.', city: 'Yonkers', state: 'NY'}, 18 | {name: 'Esperanza Susanne', company: 'Example Inc.', city: 'Hartford', state: 'CT'}, 19 | {name: 'Christian Birgitte', company: 'Example Inc.', city: 'Tampa', state: 'FL'}, 20 | {name: 'Meral Elias', company: 'Example Inc.', city: 'Hartford', state: 'CT'}, 21 | {name: 'Deep Pau', company: 'Example Inc.', city: 'Yonkers', state: 'NY'}, 22 | {name: 'Sebastiana Hani', company: 'Example Inc.', city: 'Dallas', state: 'TX'}, 23 | {name: 'Marciano Oihana', company: 'Example Inc.', city: 'Yonkers', state: 'NY'}, 24 | {name: 'Brigid Ankur', company: 'Example Inc.', city: 'Dallas', state: 'TX'}, 25 | {name: 'Anna Siranush', company: 'Example Inc.', city: 'Yonkers', state: 'NY'}, 26 | {name: 'Avram Sylva', company: 'Example Inc.', city: 'Hartford', state: 'CT'}, 27 | {name: 'Serafima Babatunde', company: 'Example Inc.', city: 'Tampa', state: 'FL'}, 28 | {name: 'Gaston Festus', company: 'Example Inc.', city: 'Tampa', state: 'FL'} 29 | ]); 30 | } 31 | 32 | public loadMaterialTableData(): Observable { 33 | return of([ 34 | { 35 | name: 'Mark Otto', 36 | email: 'ottoto@wxample.com', 37 | product: 'ON the Road', 38 | price: '$25 224.2', 39 | date: '11 May 2017', 40 | city: 'Otsego', 41 | status: 'send' 42 | }, 43 | { 44 | name: 'Jacob Thornton', 45 | email: 'thornton@wxample.com', 46 | product: 'HP Core i7', 47 | price: '$1 254.2', 48 | date: '4 Jun 2017', 49 | city: 'Fivepointville', 50 | status: 'send' 51 | }, 52 | { 53 | name: 'Larry the Bird', 54 | email: 'bird@wxample.com', 55 | product: 'Air Pro', 56 | price: '$1 570.0', 57 | date: '27 Aug 2017', 58 | city: 'Leadville North', 59 | status: 'pending' 60 | }, 61 | { 62 | name: 'Joseph May', 63 | email: 'josephmay@wxample.com', 64 | product: 'Version Control', 65 | price: '$5 224.5', 66 | date: '19 Feb 2018', 67 | city: 'Seaforth', 68 | status: 'declined' 69 | }, 70 | { 71 | name: 'Peter Horadnia', 72 | email: 'horadnia@wxample.com', 73 | product: 'Let\'s Dance', 74 | price: '$43 594.7', 75 | date: '1 Mar 2018', 76 | city: 'Hanoverton', 77 | status: 'send' 78 | } 79 | ]); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/server-chart/server-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { 3 | ApexAxisChartSeries, 4 | ApexChart, 5 | ApexXAxis, 6 | ApexDataLabels, 7 | ApexStroke, 8 | ApexYAxis, 9 | ApexTitleSubtitle, 10 | ApexLegend, ApexGrid 11 | } from 'ng-apexcharts'; 12 | 13 | import { ServerChartData } from '../../models'; 14 | import {colors} from '../../../../consts'; 15 | 16 | type ChartOptions = { 17 | series: ApexAxisChartSeries; 18 | chart: ApexChart; 19 | xaxis: ApexXAxis; 20 | stroke: ApexStroke; 21 | dataLabels: ApexDataLabels; 22 | yaxis: ApexYAxis; 23 | title: ApexTitleSubtitle; 24 | labels: string[]; 25 | legend: ApexLegend; 26 | subtitle: ApexTitleSubtitle; 27 | grid: ApexGrid; 28 | tooltip: any; 29 | colors: string[]; 30 | fill: ApexFill; 31 | }; 32 | 33 | @Component({ 34 | selector: 'app-server-chart', 35 | templateUrl: './server-chart.component.html', 36 | styleUrls: ['./server-chart.component.scss'] 37 | }) 38 | export class ServerChartComponent implements OnInit { 39 | @Input() serverChartData: ServerChartData; 40 | public charts: Partial[]; 41 | public serverDataTitles: string[]; 42 | public colors: typeof colors = colors; 43 | 44 | public ngOnInit(): void { 45 | this.charts = [ 46 | this.initChart(this.serverChartData.firstServerChartData, colors.PINK), 47 | this.initChart(this.serverChartData.secondServerChartData, colors.BLUE), 48 | this.initChart(this.serverChartData.thirdServerChartData, colors.YELLOW) 49 | ]; 50 | 51 | this.serverDataTitles = [ 52 | this.serverChartData.firstDataTitle, 53 | this.serverChartData.secondDataTitle, 54 | this.serverChartData.thirdDataTitle, 55 | ] 56 | } 57 | 58 | public initChart(data: number[], color: string): Partial { 59 | return { 60 | chart: { 61 | type: 'area', 62 | height: 80, 63 | zoom: { 64 | enabled: false 65 | }, 66 | toolbar: { 67 | show: false 68 | } 69 | }, 70 | series: [ 71 | { 72 | name: 'STOCK ABC', 73 | data: data 74 | } 75 | ], 76 | colors: [color], 77 | fill: { 78 | type: 'solid', 79 | opacity: 0.3 80 | }, 81 | dataLabels: { 82 | enabled: false 83 | }, 84 | stroke: { 85 | curve: 'smooth', 86 | width: 2 87 | }, 88 | labels: this.serverChartData.dates, 89 | xaxis: { 90 | type: 'datetime', 91 | labels: { 92 | show: false 93 | }, 94 | axisBorder: { 95 | show: false 96 | }, 97 | axisTicks: { 98 | show: false 99 | } 100 | }, 101 | yaxis: { 102 | max: 50000, 103 | show: false 104 | }, 105 | legend: { 106 | show: false 107 | }, 108 | grid: { 109 | show: false, 110 | padding: { 111 | bottom: 0, 112 | left: 0, 113 | right: 0, 114 | top: 0 115 | } 116 | }, 117 | tooltip: { 118 | enabled: false 119 | } 120 | }; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/app/pages/auth/containers/auth-page/auth-page.component.scss: -------------------------------------------------------------------------------- 1 | @import "src/app/styles/colors"; 2 | @import "src/app/styles/variables"; 3 | @import "src/app/styles/font"; 4 | 5 | .auth-page { 6 | width: 100%; 7 | height: 100%; 8 | display: flex; 9 | 10 | @media (max-width: $medium) { 11 | flex-direction: column; 12 | } 13 | 14 | &__content-block { 15 | width: 37%; 16 | height: 100%; 17 | background-color: $white; 18 | display: flex; 19 | align-items: center; 20 | flex-direction: column; 21 | 22 | @media (max-width: $medium) { 23 | width: 100%; 24 | } 25 | } 26 | 27 | &__content-wrapper { 28 | width: 45%; 29 | height: 100%; 30 | padding: 16px; 31 | display: flex; 32 | justify-content: space-between; 33 | flex-direction: column; 34 | 35 | @media (max-width: $small) { 36 | width: 70%; 37 | } 38 | 39 | @media (min-width: $medium) and (max-width: $large){ 40 | width: 45%; 41 | } 42 | } 43 | 44 | &__group { 45 | margin-top: 28px; 46 | } 47 | 48 | &__group-title { 49 | font-size: 32px; 50 | font-weight: $fw-normal; 51 | margin-top: 37px; 52 | letter-spacing: -0.7px; 53 | text-align: center; 54 | line-height: 37px; 55 | color: $dark-grey; 56 | } 57 | 58 | &__group-sub-title { 59 | font-size: $fs-large; 60 | font-weight: $fw-normal; 61 | margin-bottom: 60px; 62 | letter-spacing: -0.5px; 63 | text-align: center; 64 | line-height: 24px; 65 | color: $dark-grey; 66 | } 67 | 68 | &__google-button-wrapper { 69 | margin-top: 32px; 70 | margin-bottom: 10px; 71 | width: 100%; 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | } 76 | 77 | &__google-button { 78 | width: 95%; 79 | padding: 0; 80 | box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; 81 | } 82 | 83 | &__google-button-icon { 84 | width: 20px; 85 | margin-right: 16px; 86 | } 87 | 88 | &__border-wrapper { 89 | align-items: center; 90 | display: flex; 91 | justify-content: center; 92 | margin: 32px 0; 93 | } 94 | 95 | &__border-line { 96 | height: 1px; 97 | width: 100%; 98 | background-color: $light-grey; 99 | opacity: 0.3; 100 | } 101 | 102 | &__border-title { 103 | font-size: $fs-xs; 104 | padding: 0 16px; 105 | margin: 0; 106 | color: $dark-grey 107 | } 108 | 109 | &__logo { 110 | width: 63%; 111 | height: 100%; 112 | background-color: $blue; 113 | display: flex; 114 | align-items: center; 115 | 116 | @media (max-width: $medium) { 117 | display: none; 118 | } 119 | } 120 | 121 | &__logo-wrapper { 122 | width: 100%; 123 | display: flex; 124 | justify-content: center; 125 | flex-direction: column; 126 | align-items: center; 127 | } 128 | 129 | &__logo-img { 130 | margin-bottom: 50px; 131 | } 132 | 133 | &__logo-title { 134 | font-size: 62px; 135 | color: $white; 136 | font-weight: 500; 137 | letter-spacing: -1.5px; 138 | line-height: 62px; 139 | } 140 | 141 | &__footer-title { 142 | color: $blue; 143 | font-size: 10px; 144 | opacity: 0.7; 145 | a { 146 | text-decoration: none; 147 | color: $blue; 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/app/pages/tables/components/employee-table/employee-table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Employee List

4 |
5 |
6 | search 7 |
8 | 9 | 12 |
13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 31 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 69 | 70 |
23 | 29 | 30 | 32 | 38 | 39 | Name {{element.name}} Company {{element.company}} City {{element.city}} State {{element.state}}
71 | 72 | 75 | 76 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "cli": { 4 | "analytics": false 5 | }, 6 | "version": 1, 7 | "newProjectRoot": "projects", 8 | "projects": { 9 | "angular-material-admin": { 10 | "projectType": "application", 11 | "schematics": {}, 12 | "root": "", 13 | "sourceRoot": "src", 14 | "prefix": "app", 15 | "architect": { 16 | "build": { 17 | "builder": "@angular-devkit/build-angular:browser", 18 | "options": { 19 | "outputPath": "dist", 20 | "index": "src/index.html", 21 | "main": "src/main.ts", 22 | "polyfills": "src/polyfills.ts", 23 | "tsConfig": "tsconfig.app.json", 24 | "aot": true, 25 | "assets": [ 26 | "src/favicon.ico", 27 | "src/assets" 28 | ], 29 | "styles": [ 30 | "./node_modules/font-awesome/scss/font-awesome.scss", 31 | "./node_modules/ngx-toastr/toastr.css", 32 | "src/custom-theme.scss" 33 | ], 34 | "scripts": [] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "namedChunks": false, 48 | "extractLicenses": true, 49 | "vendorChunk": false, 50 | "buildOptimizer": true, 51 | "budgets": [ 52 | { 53 | "type": "initial", 54 | "maximumWarning": "2mb", 55 | "maximumError": "5mb" 56 | }, 57 | { 58 | "type": "anyComponentStyle", 59 | "maximumWarning": "6kb", 60 | "maximumError": "10kb" 61 | } 62 | ] 63 | }, 64 | "hmr": { 65 | "fileReplacements": [ 66 | { 67 | "replace": "src/environments/environment.ts", 68 | "with": "src/environments/environment.hmr.ts" 69 | } 70 | ] 71 | } 72 | } 73 | }, 74 | "serve": { 75 | "builder": "@angular-devkit/build-angular:dev-server", 76 | "options": { 77 | "browserTarget": "angular-material-admin:build" 78 | }, 79 | "configurations": { 80 | "production": { 81 | "browserTarget": "angular-material-admin:build:production" 82 | }, 83 | "hmr": { 84 | "hmr": true, 85 | "browserTarget": "angular-material-admin:build:hmr" 86 | } 87 | } 88 | }, 89 | "extract-i18n": { 90 | "builder": "@angular-devkit/build-angular:extract-i18n", 91 | "options": { 92 | "browserTarget": "angular-material-admin:build" 93 | } 94 | }, 95 | "lint": { 96 | "builder": "@angular-devkit/build-angular:tslint", 97 | "options": { 98 | "tsConfig": [ 99 | "tsconfig.app.json", 100 | "tsconfig.spec.json", 101 | "e2e/tsconfig.json" 102 | ], 103 | "exclude": [ 104 | "**/node_modules/**" 105 | ] 106 | } 107 | } 108 | } 109 | } 110 | }, 111 | "defaultProject": "angular-material-admin" 112 | } 113 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "align": { 5 | "options": [ 6 | "parameters", 7 | "statements" 8 | ] 9 | }, 10 | "array-type": false, 11 | "arrow-return-shorthand": true, 12 | "curly": true, 13 | "deprecation": { 14 | "severity": "warning" 15 | }, 16 | "component-class-suffix": true, 17 | "contextual-lifecycle": true, 18 | "directive-class-suffix": true, 19 | "directive-selector": [ 20 | true, 21 | "attribute", 22 | "app", 23 | "camelCase" 24 | ], 25 | "component-selector": [ 26 | true, 27 | "element", 28 | "app", 29 | "kebab-case" 30 | ], 31 | "eofline": true, 32 | "import-blacklist": [ 33 | true, 34 | "rxjs/Rx" 35 | ], 36 | "import-spacing": true, 37 | "indent": { 38 | "options": [ 39 | "spaces" 40 | ] 41 | }, 42 | "max-classes-per-file": false, 43 | "max-line-length": [ 44 | true, 45 | 140 46 | ], 47 | "member-ordering": [ 48 | true, 49 | { 50 | "order": [ 51 | "static-field", 52 | "instance-field", 53 | "static-method", 54 | "instance-method" 55 | ] 56 | } 57 | ], 58 | "no-console": [ 59 | true, 60 | "debug", 61 | "info", 62 | "time", 63 | "timeEnd", 64 | "trace" 65 | ], 66 | "no-empty": false, 67 | "no-inferrable-types": [ 68 | true, 69 | "ignore-params" 70 | ], 71 | "no-non-null-assertion": true, 72 | "no-redundant-jsdoc": true, 73 | "no-switch-case-fall-through": true, 74 | "no-var-requires": false, 75 | "object-literal-key-quotes": [ 76 | true, 77 | "as-needed" 78 | ], 79 | "quotemark": [ 80 | true, 81 | "single" 82 | ], 83 | "semicolon": { 84 | "options": [ 85 | "always" 86 | ] 87 | }, 88 | "space-before-function-paren": { 89 | "options": { 90 | "anonymous": "never", 91 | "asyncArrow": "always", 92 | "constructor": "never", 93 | "method": "never", 94 | "named": "never" 95 | } 96 | }, 97 | "typedef-whitespace": { 98 | "options": [ 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | }, 106 | { 107 | "call-signature": "onespace", 108 | "index-signature": "onespace", 109 | "parameter": "onespace", 110 | "property-declaration": "onespace", 111 | "variable-declaration": "onespace" 112 | } 113 | ] 114 | }, 115 | "variable-name": { 116 | "options": [ 117 | "ban-keywords", 118 | "check-format", 119 | "allow-pascal-case" 120 | ] 121 | }, 122 | "whitespace": { 123 | "options": [ 124 | "check-branch", 125 | "check-decl", 126 | "check-operator", 127 | "check-separator", 128 | "check-type", 129 | "check-typecast" 130 | ] 131 | }, 132 | "no-conflicting-lifecycle": true, 133 | "no-host-metadata-property": true, 134 | "no-input-rename": true, 135 | "no-inputs-metadata-property": true, 136 | "no-output-native": true, 137 | "no-output-on-prefix": true, 138 | "no-output-rename": true, 139 | "no-outputs-metadata-property": true, 140 | "template-banana-in-box": true, 141 | "template-no-negated-async": true, 142 | "use-lifecycle-interface": true, 143 | "use-pipe-transform-interface": true 144 | }, 145 | "rulesDirectory": [ 146 | "codelyzer" 147 | ] 148 | } -------------------------------------------------------------------------------- /src/app/pages/ui-elements/services/charts.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable, of } from 'rxjs'; 3 | 4 | import { 5 | DashedLineChartData, 6 | HeatmapChartData, 7 | LineChartData, 8 | PieChartData 9 | } from '../models'; 10 | 11 | @Injectable({ 12 | providedIn: 'root' 13 | }) 14 | export class ChartsService { 15 | public loadLineChartData(): Observable{ 16 | return of({ 17 | series: [ 18 | { 19 | name: 'series1', 20 | data: [31, 40, 28, 51, 42, 109, 100] 21 | }, 22 | { 23 | name: 'series2', 24 | data: [11, 32, 45, 32, 34, 52, 41] 25 | } 26 | ], 27 | categories: [ 28 | '2018-09-19T00:00:00.000Z', 29 | '2018-09-19T01:30:00.000Z', 30 | '2018-09-19T02:30:00.000Z', 31 | '2018-09-19T03:30:00.000Z', 32 | '2018-09-19T04:30:00.000Z', 33 | '2018-09-19T05:30:00.000Z', 34 | '2018-09-19T06:30:00.000Z' 35 | ] 36 | }); 37 | } 38 | 39 | public dashedLineChartData(): Observable{ 40 | return of({ 41 | series: [ 42 | { 43 | name: 'Session Duration', 44 | data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10] 45 | }, 46 | { 47 | name: 'Page Views', 48 | data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35] 49 | }, 50 | { 51 | name: 'Total Visits', 52 | data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47] 53 | } 54 | ], 55 | categories: [ 56 | '01 Jan', 57 | '02 Jan', 58 | '03 Jan', 59 | '04 Jan', 60 | '05 Jan', 61 | '06 Jan', 62 | '07 Jan', 63 | '08 Jan', 64 | '09 Jan', 65 | '10 Jan', 66 | '11 Jan', 67 | '12 Jan' 68 | ] 69 | }); 70 | } 71 | 72 | public loadPieChartData(): Observable { 73 | return of({ 74 | series: [ 75 | Math.round(Math.random() * 100), 76 | Math.round(Math.random() * 100), 77 | Math.round(Math.random() * 100), 78 | Math.round(Math.random() * 100), 79 | Math.round(Math.random() * 100) 80 | ], 81 | labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'] 82 | }); 83 | } 84 | 85 | public loadHeatmapChartData(): Observable { 86 | return of({ 87 | series: [ 88 | { 89 | name: 'Metric1', 90 | data: this.generateApexHeatmapChartData(18, { 91 | min: 0, 92 | max: 90 93 | }) 94 | }, 95 | { 96 | name: 'Metric2', 97 | data: this.generateApexHeatmapChartData(18, { 98 | min: 0, 99 | max: 90 100 | }) 101 | }, 102 | { 103 | name: 'Metric3', 104 | data: this.generateApexHeatmapChartData(18, { 105 | min: 0, 106 | max: 90 107 | }) 108 | }, 109 | { 110 | name: 'Metric4', 111 | data: this.generateApexHeatmapChartData(18, { 112 | min: 0, 113 | max: 90 114 | }) 115 | }, 116 | { 117 | name: 'Metric5', 118 | data: this.generateApexHeatmapChartData(18, { 119 | min: 0, 120 | max: 90 121 | }) 122 | }, 123 | { 124 | name: 'Metric6', 125 | data: this.generateApexHeatmapChartData(18, { 126 | min: 0, 127 | max: 90 128 | }) 129 | }, 130 | { 131 | name: 'Metric7', 132 | data: this.generateApexHeatmapChartData(18, { 133 | min: 0, 134 | max: 90 135 | }) 136 | }, 137 | { 138 | name: 'Metric8', 139 | data: this.generateApexHeatmapChartData(18, { 140 | min: 0, 141 | max: 90 142 | }) 143 | }, 144 | { 145 | name: 'Metric9', 146 | data: this.generateApexHeatmapChartData(18, { 147 | min: 0, 148 | max: 90 149 | }) 150 | } 151 | ], 152 | }); 153 | } 154 | 155 | private generateApexHeatmapChartData(count, yrange): number[] { 156 | let i = 0; 157 | const series = []; 158 | while (i < count) { 159 | const x = 'w' + (i + 1).toString(); 160 | const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; 161 | 162 | series.push({x, y}); 163 | i++; 164 | } 165 | return series; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/app/pages/dashboard/components/project-stat-chart/project-stat-chart.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | import { ProjectStatData, ProjectTimeData } from '../../models'; 4 | import { colors } from '../../../../consts'; 5 | 6 | type ChartOptions = { 7 | series: ApexAxisChartSeries; 8 | chart: ApexChart; 9 | dataLabels: ApexDataLabels; 10 | plotOptions: ApexPlotOptions; 11 | yaxis: ApexYAxis; 12 | xaxis: ApexXAxis; 13 | fill: ApexFill; 14 | tooltip: ApexTooltip; 15 | stroke: ApexStroke; 16 | legend: ApexLegend; 17 | grid: ApexGrid; 18 | }; 19 | 20 | enum ProjectsType { 21 | lightBlue = 'lightBlue', 22 | SingApp = 'SingApp', 23 | RNS = 'RNS' 24 | } 25 | 26 | @Component({ 27 | selector: 'app-project-stat-chart', 28 | templateUrl: './project-stat-chart.component.html', 29 | styleUrls: ['./project-stat-chart.component.scss'] 30 | }) 31 | export class ProjectStatChartComponent implements OnInit { 32 | @Input() projectsStatsData: ProjectStatData; 33 | public selectedStatsLightBlueData: ProjectTimeData; 34 | public selectedStatsSingAppData: ProjectTimeData; 35 | public selectedStatsRNSData: ProjectTimeData; 36 | public chartOptions: Partial; 37 | public projectsType: typeof ProjectsType = ProjectsType; 38 | public colors: typeof colors = colors; 39 | 40 | public ngOnInit(): void { 41 | this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.daily; 42 | this.selectedStatsSingAppData = this.projectsStatsData.singApp.daily; 43 | this.selectedStatsRNSData = this.projectsStatsData.rns.daily; 44 | 45 | this.initChart(); 46 | } 47 | 48 | public initChart(): void { 49 | this.chartOptions = { 50 | chart: { 51 | type: 'bar', 52 | height: 100, 53 | width: 130, 54 | toolbar: { 55 | show: false 56 | } 57 | }, 58 | legend: { 59 | show: false 60 | }, 61 | grid: { 62 | show: false 63 | }, 64 | plotOptions: { 65 | bar: { 66 | horizontal: false, 67 | columnWidth: '70%', 68 | } 69 | }, 70 | dataLabels: { 71 | enabled: false 72 | }, 73 | stroke: { 74 | show: true, 75 | width: 2, 76 | colors: ['transparent'] 77 | }, 78 | xaxis: { 79 | categories: [ 80 | 'Feb', 81 | 'Mar', 82 | 'Apr', 83 | 'May', 84 | 'Jun', 85 | 'Jul', 86 | 'Aug' 87 | ], 88 | labels: { 89 | show: false 90 | }, 91 | axisTicks: { 92 | show: false 93 | }, 94 | axisBorder: { 95 | show: false 96 | } 97 | }, 98 | yaxis: { 99 | show: false 100 | }, 101 | tooltip: { 102 | y: { 103 | formatter(val) { 104 | return '$ ' + val + ' thousands'; 105 | } 106 | } 107 | } 108 | }; 109 | } 110 | 111 | public changeDateType(dateType: string, projectType: string): void { 112 | switch (projectType) { 113 | case this.projectsType.lightBlue: 114 | switch (dateType) { 115 | case 'Weekly': 116 | this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.week; 117 | break; 118 | case 'Monthly': 119 | this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.monthly; 120 | break; 121 | default: 122 | this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.daily; 123 | } 124 | break; 125 | case this.projectsType.SingApp: 126 | switch (dateType) { 127 | case 'Weekly': 128 | this.selectedStatsSingAppData = this.projectsStatsData.singApp.week; 129 | break; 130 | case 'Monthly': 131 | this.selectedStatsSingAppData = this.projectsStatsData.singApp.monthly; 132 | break; 133 | default: 134 | this.selectedStatsSingAppData = this.projectsStatsData.singApp.daily; 135 | } 136 | break; 137 | case this.projectsType.RNS: 138 | switch (dateType) { 139 | case 'Weekly': 140 | this.selectedStatsRNSData = this.projectsStatsData.rns.week; 141 | break; 142 | case 'Monthly': 143 | this.selectedStatsRNSData = this.projectsStatsData.rns.monthly; 144 | break; 145 | default: 146 | this.selectedStatsRNSData = this.projectsStatsData.rns.daily; 147 | } 148 | break; 149 | } 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Material Admin Lite - free and open source angular admin dashboard template 2 | Angular Material Admin Lite, a free and open-source Angular admin dashboard template, features a responsive layout and high-quality UI constructed using Angular Material. This repository offers a limited free version, providing developers with a solid foundation for creating [business software](https://flatlogic.com/) that requires an efficient, visually appealing admin interface. 3 | 4 | [Demo](https://flatlogic.com/templates/angular-material-admin/demo) | [Download](https://github.com/flatlogic/angular-material-admin/archive/master.zip) | [Available versions](https://demo.flatlogic.com/angular-material-admin/) | [More templates](https://flatlogic.com/admin-dashboards) | [Support forum](https://flatlogic.com/forum) 5 | 6 | ![1 (1)](https://user-images.githubusercontent.com/17360676/84912599-41a99c00-b0c2-11ea-8d9b-6c05a398b8ca.jpg) 7 | 8 | ## Features 9 | 10 | Using this template you will be able to leverage lots of built-in components and thus focus on building features that set you apart from competitors rather than bulding everything from scratch. Lite version of Angular Material Admin includes following features and pages: 11 | * Angular Material & SCSS 12 | * Responsive layout 13 | * Styled Angular Material components like buttons, cards, etc 14 | * Dashboard sample 15 | * Typography 16 | * Tables 17 | * Notifications 18 | * Base charts 19 | * Icons 20 | * Maps 21 | * Hover sidebar 22 | * Login 23 | * 404 24 | 25 | ![2 (1)](https://user-images.githubusercontent.com/17360676/84912752-6b62c300-b0c2-11ea-9ff0-f92bad33f2b0.jpg) 26 | 27 | Building a project from scratch means that there is a lot of things to keep track of all at once: analytics, dynamic forms data, UI and UX elements, and much more. This simple admin template is well suited for web apps or any other website or project that requires admin dashboard. This template will serve as a solid foundation for your upcoming project and will save you a lot of time and, hence, money. 28 | 29 | ## Quick Start 30 | 31 | #### 1. Get the latest version 32 | 33 | You can start by cloning the latest version of Angular Material Admin on your local machine by running: 34 | 35 | ```shell 36 | $ git clone -o angular-material-admin -b master --single-branch \ 37 | https://github.com/flatlogic/angular-material-admin.git MyApp 38 | $ cd MyApp 39 | ``` 40 | 41 | #### 2. Run `yarn install` 42 | 43 | This will install both run-time project dependencies and developer tools listed 44 | in [package.json](../package.json) file. 45 | 46 | #### 3. Run `yarn start` 47 | 48 | This command will build the app from the source files. Then open `localhost:4200` in your browser. 49 | 50 | Now you can open your web app in a browser, on mobile devices and start 51 | hacking. The page must be served from a web server, e.g. apache, nginx, WebStorm built-in web server, etc., otherwise some features may not work properly. 52 | 53 | ## Integration 54 | ![3 (1)](https://user-images.githubusercontent.com/17360676/84912873-8b928200-b0c2-11ea-9e72-5aac8e8f339e.jpg) 55 | 56 | Angular Material Admin is a part of admin dashboard solution provided by Flatlogic. We can integrate admin dashboards with such systems as your accounting software, customer relationship management (CRM) system, email management, marketing automation, website analytics program, etc. Customized Angular Material Admin can be a great way to learn about your products usability and extendability. With this dashboard, the owner of the website (platform) can easily track orders and their success rate, track social metrics such as the most popular referring social media sites and their appropriate URLs, monitor sales states and periods of growth to better understand what makes users tick. [Contact us](https://flatlogic.com/contact) to learn more. 57 | 58 | ## Support 59 | For any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation! 60 | 61 | ## How can I support developers? 62 | - Star our GitHub repo :star: 63 | - [Tweet about it](https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/sing-app&via=flatlogic). 64 | - Create pull requests, submit bugs, suggest new features or documentation updates :wrench: 65 | - Follow [@flatlogic on Twitter](https://twitter.com/flatlogic). 66 | - Subscribe to Flatlogic newsletter at [flatlogic.com](https://flatlogic.com/) 67 | - Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup: 68 | 69 | ## More from Flatlogic 70 | - [Awesome Bootstrap Checkboxes & Radios](https://github.com/flatlogic/awesome-bootstrap-checkbox) - ✔️Pure css way to make inputs look prettier 71 | - [React Native Starter](https://github.com/flatlogic/react-native-starter) - 🚀 A powerful react native starter template that bootstraps development of your mobile application 72 | 73 | ## Premium themes 74 | Looking for premium themes and templates? Check out our other templates at [flatlogic.com](https://flatlogic.com/templates). 75 | 76 | ## License 77 | The source code for the template is licensed under the MIT license, which you can find in 78 | the LICENSE.txt file. 79 | --------------------------------------------------------------------------------