1
0
Форкнуть 0

Added the sample into the repository

This commit is contained in:
ROOT\soundarapandianr 2018-03-07 17:26:06 +05:30
Коммит 44982cf38e
75 изменённых файлов: 19729 добавлений и 0 удалений

5
README.md Normal file
Просмотреть файл

@ -0,0 +1,5 @@
# Essential JS 2 for TypeScript - Expense Tracker
This expense tracker demo application showcases using several Essential JS 2 components together in
a real-world application scenario. You can further explore the source code of this application and
use it as a reference for integrating Essential JS 2 components into your applications.

7
config.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"sasslint": ["./styles/**/*.scss"],
"tslint": ["./src/**/*.ts", "!./src/common/common.data.ts"],
"styleDependency": ["ej2"],
"ts": ["./src/**/*.ts"],
"isShowCase": true
}

Двоичные данные
favicon.ico Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 6.4 KiB

80
gulpfile.js Normal file
Просмотреть файл

@ -0,0 +1,80 @@
var fs = require('fs');
var gulp = require('gulp');
var webpack = require('webpack');
var webpackGulp = require('webpack-stream');
/**
* Compile script files
*/
gulp.task('scripts', function (done) {
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });
var tsResult = gulp.src(['./src/**/*.ts', './spec/**/*.ts'], { base: '.' })
.pipe(ts(tsProject));
tsResult.js
.pipe(gulp.dest('./'))
.on('end', function () {
done();
});
});
/**
* Compile scss files
*/
gulp.task('styles', function () {
var sass = require('gulp-sass');
return gulp.src(['./styles/**/*.scss'], { base: './' })
.pipe(sass({
outputStyle: 'expanded',
includePaths: './node_modules/@syncfusion/'
}))
.pipe(gulp.dest('.'));
});
/**
* Bundle all module using webpack
*/
gulp.task('bundle', function () {
var webpackConfig = require(fs.realpathSync('./webpack.config.js'));
return gulp.src('')
.pipe(webpackGulp(webpackConfig, webpack))
.pipe(gulp.dest('.'));
});
/**
* Build ts and scss files
*/
gulp.task('build', function (done) {
var runSequence = require('run-sequence');
runSequence('scripts', 'styles', 'bundle', done);
});
/**
* Run test for samplebrowser
*/
gulp.task('test', function (done) {
var karma = require('karma');
new karma.Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true,
browsers: ['ChromeHeadless'],
browserNoActivityTimeout: 30000
}, function (e) {
done(e === 0 ? null : 'karma exited with status ' + e);
}).start();
});
/**
* Load the samples
*/
gulp.task('serve', ['build'], function (done) {
var browserSync = require('browser-sync');
var bs = browserSync.create('Essential JS 2');
var options = {
server: {
baseDir: './'
},
ui: false
};
bs.init(options, done);
});

78
index.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for TypeScript - Expense Tracker</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Essential JS 2 for TypeScript - Expense Tracker">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="shortcut icon" href="./styles/favicon.ico" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="./styles/styles.css" rel="stylesheet" />
<link href="./styles/index.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
<script type="text/javascript">
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
}
</script>
</head>
<div id="dialog" class="expense-dialog">
</div>
<div id="confirmDialog" style='min-width: 260px;'></div>
<body>
<div id="addexpenseDialog" class="expense-dialog"></div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<span id="menu-toggle" href="#" class="navbar-toggle e-icon" style="float:left"></span>
<div class="navbar-brand samplenameheader"></div>
<span id="filter-toggle" href="#" class="navbar-toggle filter-toggle e-icon" style="float:right"></span>
</div>
</div>
</nav>
<div id="sidebar-wrapper" class="sidebar-toggle">
<div class='samplename-header'>
<div class='samplename'></div>
</div>
<div class="info align-center">
<div class="image"></div>
<div class="content nameContent">
<p class='name' id='user-name'>Nicholas Delacruz</p>
<div class='wallet-container'>
<span style='height: 27px;' class='balance-align'><img src="./styles/images/cash-wallet.svg" /></span>
<span id="current-balance" class='balance-align'>$ 0</span>
</div>
</div>
</div>
<div class="page-list align-center nav-list">
<div class='nav-item'>
<a class="overview ripple-element" id="nav-overview" href="#/dashboard">Dashboard</a>
</div>
<div class='nav-item'>
<a class="expense ripple-element" id="nav-expense" href="#/expense">Transactions</a>
</div>
<div class='nav-item'>
<a class="about ripple-element" id="nav-about" href="#/about">About</a>
</div>
</div>
</div>
<div class="content container-fluid rightpane">
<div class="content-wrapper">
<div id="content"></div>
</div>
</div>
<div id="overlay"></div>
</body>
<script src="./dist/common.js "></script>
<script>
function retDate(DateTime) {
return window.getDate(DateTime)
}
</script>
</html>

10
license Normal file
Просмотреть файл

@ -0,0 +1,10 @@
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusions terms and conditions.
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusions license containing all terms and conditions.
The Syncfusion license that contains the terms and conditions can be found at
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

57
package.json Normal file
Просмотреть файл

@ -0,0 +1,57 @@
{
"name": "@syncfusion/ej2-ts-expense-tracker",
"version": "0.0.1",
"description": "Essential JS 2 - Expense Tracker",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",
"dependencies": {
"@syncfusion/ej2-base": "*",
"@syncfusion/ej2-buttons": "*",
"@syncfusion/ej2-calendars": "*",
"@syncfusion/ej2-charts": "*",
"@syncfusion/ej2-data": "*",
"@syncfusion/ej2-dropdowns": "*",
"@syncfusion/ej2-grids": "*",
"@syncfusion/ej2-inputs": "*",
"@syncfusion/ej2-popups": "*",
"browser-sync": "^2.23.6",
"crossroads": "^0.12.2",
"hasher": "^1.2.0"
},
"devDependencies": {
"@types/chai": "^3.4.28",
"@types/hasher": "0.0.27",
"@types/crossroads": "0.0.28",
"@types/jasmine": "^2.2.29",
"@types/jasmine-ajax": "^3.1.27",
"@types/requirejs": "^2.1.26",
"gulp": "^3.9.0",
"gulp-sass": "^3.1.0",
"gulp-print": "^2.0.1",
"gulp-tslint": "^7.0.1",
"gulp-sass-lint": "^1.1.1",
"gulp-typescript": "^2.13.0",
"tslint": "4.0.2",
"run-sequence": "2.2.0",
"typescript": "2.3.3",
"webpack": "2.5.1",
"webpack-stream": "^3.2.0"
},
"keywords": [
"ej2",
"syncfusion",
"Expense Tracker"
],
"scripts": {
"compile": "gulp ci-compile",
"ci-publish": "gulp publish-samples",
"build": "gulp lint && gulp build"
},
"config": {
"ghooks": {
"pre-commit": "gulp pre-commit",
"pre-push": "gulp pre-push",
"commit-msg": "gulp commit-msg"
}
}
}

59
src/about/about.html Normal file
Просмотреть файл

@ -0,0 +1,59 @@
<div>
<div class='about-heading'>About this sample</div>
<div class='about-description'>This expense tracker demo application showcases using several Essential JS 2 components together in a real-world application scenario. You can further explore the source code of this application and use it as a reference for integrating Essential JS 2 components into your applications.</div>
<div class='list-heading'>List of EJ2 components used in this sample</div>
<div class='about-component'>
<div class='control-item'>
<span class="icon-button e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/button/getting-started.html" target="_blank">Button</a>
</div>
<div class='control-item'>
<span class="icon-chart e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/chart/getting-started.html" target="_blank">Chart</a>
</div>
<div class='control-item'>
<span class="icon-checkbox e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/check-box/getting-started.html" target="_blank">CheckBox</a>
</div>
<div class='control-item'>
<span class="icon-datepicker e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/datepicker/getting-started.html" target="_blank">DatePicker</a>
</div>
<div class='control-item'>
<span class="icon-daterangepicker e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/daterangepicker/getting-started.html" target="_blank">DateRangePicker</a>
</div>
<div class='control-item'>
<span class="icon-dialog e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/dialog/getting-started.html" target="_blank">Dialog</a>
</div>
<div class='control-item'>
<span class="icon-dropdownlist e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/drop-down-list/getting-started.html" target="_blank">DropDownList</a>
</div>
<div class='control-item'>
<span class="icon-grid e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/grid/getting-started.html" target="_blank">Grid</a>
</div>
<div class='control-item'>
<span class="icon-multiselect e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/multi-select/getting-started.html" target="_blank">MultiSelect</a>
</div>
<div class='control-item'>
<span class="icon-numerictextbox e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html" target="_blank">NumericTextBox</a>
</div>
<div class='control-item'>
<span class="icon-radiobutton e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/radio-button/getting-started.html" target="_blank">RadioButton</a>
</div>
<div class='control-item'>
<span class="icon-textboxes e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/textbox/getting-started.html" target="_blank">TextBoxes</a>
</div>
<div class='control-item'>
<span class="icon-timepicker e-sb-icon control-icon"></span>
<a class='control-name' href="http://ej2.syncfusion.com/documentation/timepicker/getting-started.html" target="_blank">TimePicker</a>
</div>
</div>
</div>

12
src/about/about.ts Normal file
Просмотреть файл

@ -0,0 +1,12 @@
/**
* About handler
*/
import { MyWindow } from '../index';
import { cardUpdate } from '../dashboard/dashboard';
declare let window: MyWindow;
window.about = (): void => {
cardUpdate();
};

14159
src/common/common.data.ts Normal file

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -0,0 +1,181 @@
<div class="row" style="margin-bottom: 16px;">
<div class="page-title">
<div style="display: inline-block">Dashboard</div>
</div>
<div class="col-md-3 col-xs-12 col-xl-6 col-lg-3 daterange overview-range-picker">
<input id="daterange" />
</div>
</div>
<div>
<div class="row">
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
<div class="card">
<div class="card-body income-card">
<div class="card-block">
<div class="media">
<div class="media-body text-xs-left float-right">
<h3 class="card-value" id="tolincome">$0</h3>
<span class="card-text">Income</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
<div class="card">
<div class="card-body expense-card">
<div class="card-block">
<div class="media">
<div class="media-body text-xs-left float-right">
<h3 class="card-value" id='tolexpense'>$0</h3>
<span class="card-text">Expenses</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
<div class="card">
<div class="card-body balance">
<div class="card-block">
<div class="media">
<div class="media-body text-xs-left float-right">
<h3 class="card-value" id="tolbalance">$0</h3>
<span class="card-text">Balance</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 card-container">
<div class="card">
<div class="card-body transaction">
<div class="card-block">
<div class="media">
<div class="media-body text-xs-left float-right">
<h3 class="card-value" id="toltransaction">0</h3>
<span class="card-text">Transactions</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='pie-chart-container'>
<div class="row pie-chart" id='totalExpense'>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="pane col-xs-12 col-sm-12 col-md-12 pie-container">
<div class="pieChartHeader">
<p class="chart-title">Total Expenses</p>
<p id="rangeDate" class="chart-value"></p>
</div>
<div class="row">
<div class="pieChart">
<div id="total-expense"></div>
</div>
<div class="chartLegend" style="margin: 0 auto;">
<div style="position: relative">
<div class="legend-waitingpopup" id="grid-popup" style="display:none">
<span class="legend-image">
<svg class="e-spin-material" viewBox="0 0 30 30" >
<path class="e-path-circle" stroke-width="3" d="M15,1.5A13.5,13.5 0 1 1 1.5,15" stroke-dasharray="63.61725123519331" stroke-dashoffset="190.0035236891107" transform="rotate(-90 15 15)"></path>
</svg>
</span>
</div>
</div>
<div class="pane legendGrid" style="box-shadow: none; min-width: 250px;" id="legend-grid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="line-chart-area">
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
<div class="chart-padding">
<div id="balance" class="line-chart" style="width:100%; max-width: 494px;"></div>
</div>
</div>
</div>
<div class="column-chart-area">
<div class="col-xs-12 col-sm-6 col-md-6 chart-container">
<div class="chart-padding">
<div class="column-chart" id="account-balance" style="width:100% "></div>
</div>
</div>
</div>
</div>
<div class="row recent-expense-grid">
<div class="col-xs-6 col-sm-6 col-md-12" style="width:100%">
<div id="recentexpense-grid"></div>
</div>
</div>
</div>
<script id="rowtemplate" type="text/x-template">
<tr style="height: 30px;">
<td>
<div style="width: 16px; height: 16px; margin-left: 1px; border-radius: 16px; background:${color}"></div>
</td>
<td> ${text} </td>
<td> ${getCurrencyVal(data.y)} </td>
<td style="text-align:right;"> ${x} </td>
</tr>
</script>
<script id="template" type="text/x-template">
<div class="normalRes">
<div class="category-icon ${Category}"></div>
<div class='category-text'>${Category}</div>
</div>
<div class="mediumRes">
<div>
<div class="category-icon ${Category}"></div>
</div>
<div>
<div> ${Category} </div>
<div class="description-section"> ${Description} </div>
</div>
</div>
<div class="smallRes">
<div class='sm-category sm-icon'>
<div class="category-icon ${Category}"></div>
</div>
<div class='sm-category category-content'>
<div> ${Category} </div>
<div class="description-section"> ${Description} </div>
<div> ${PaymentMode} </div>
</div>
</div>
</script>
<script id="amtTemplate" type="text/x-template">
<div class="normalRes">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
</div>
<div class="mediumRes">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
<div>${getDate(data.DateTime)}</div>
</div>
<div class="smallRes">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
<div>${getDate(data.DateTime)}</div>
</div>
</script>
<script id="dateTemplate" type="text/x-template">
${getDate(data.DateTime)}
</script>

743
src/dashboard/dashboard.ts Normal file
Просмотреть файл

@ -0,0 +1,743 @@
/**
* Dashboard handler
*/
import { DateRangePicker, RangeEventArgs } from '@syncfusion/ej2-calendars';
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
import { Internationalization, isNullOrUndefined as isNOU, extend } from '@syncfusion/ej2-base';
import {
AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
IAccTextRenderEventArgs, AccumulationSelection, IAccAnimationCompleteEventArgs,
Chart, ColumnSeries, Category, Legend, Tooltip, ChartAnnotation,
LineSeries, AreaSeries, DateTime, Logarithmic, Crosshair
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection, ChartAnnotation);
Chart.Inject(ColumnSeries, Category, Legend, Tooltip, ChartAnnotation, DateTime, Crosshair);
Chart.Inject(LineSeries, AreaSeries, DateTime, Logarithmic, Legend, Tooltip);
import { Grid, Page, Toolbar } from '@syncfusion/ej2-grids';
Grid.Inject(Page, Toolbar);
import { MyWindow, dataSource } from '../index';
export interface IExpense {
UniqueId: string;
DateTime: Date;
Category: string;
PaymentMode: string;
TransactionType: string;
Description: string;
Amount: number;
}
interface IExpenseData {
x: string;
y: number;
text: string;
}
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', window.endDate);
let predicate: Predicate = predicateStart.and(predicateEnd);
declare let window: MyWindow;
let chartDS: { [key: string]: Object[] };
let pieChartDS: { [key: string]: Object[] };
let gridDS: { [key: string]: Object[] };
let linechartObj: Chart;
let columnChartObj: Chart;
let gridObj: Grid;
let pie: AccumulationChart;
let grid: Grid;
let pieLegendData: Object[] = [];
let pieRenderData: IExpenseData[] = [];
let tempData: IExpense[] = <IExpense[]>dataSource;
let legendData: IExpense[] = [];
let pieRenderingData: Object[] = [];
export let category: string[] = [];
let expTotal: number = 0;
let dateRangePickerObject: DateRangePicker;
let groupValue: number = 0;
let renderData: Object[];
let hiGridData: Object[];
export function cardUpdate(toUpdate?: boolean): void {
if (toUpdate) {
updatePredicate();
}
let intl: Internationalization = new Internationalization();
let nFormatter: Function = intl.getNumberFormat({ skeleton: 'C0', currency: 'USD' });
let incomeRS: number = 0;
let expenseRS: number = 0;
/* tslint:disable-next-line */
let incomeD: any[];
/* tslint:disable-next-line */
let expenseD: any[];
new DataManager(window.expenseDS).executeQuery((new Query()
.where((predicateStart.and(predicateEnd)).and('TransactionType', 'equal', 'Income'))))
/* tslint:disable-next-line */
.then(function (e: any) {
incomeD = objectAssign(e);
for (let i: number = 0; i < incomeD.length - 1; i++) {
incomeRS += parseInt(incomeD[i].Amount, 0);
}
if (document.getElementById('tolincome')) {
document.getElementById('tolincome').textContent = window.getCurrencyVal(incomeRS ? incomeRS : 0);
}
});
new DataManager(window.expenseDS)
.executeQuery(new Query().where((predicateStart.and(predicateEnd)).and('TransactionType', 'equal', 'Expense')))
/* tslint:disable-next-line */
.then(function (e: any) {
expenseD = objectAssign(e);
for (let i: number = 0; i < expenseD.length - 1; i++) {
expenseRS += parseInt(expenseD[i].Amount, 0);
}
if (document.getElementById('tolexpense')) {
document.getElementById('tolexpense').textContent = window.getCurrencyVal(expenseRS ? expenseRS : 0);
}
if (document.getElementById('current-balance')) {
document.getElementById('current-balance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
}
if (document.getElementById('tolbalance')) {
document.getElementById('tolbalance').textContent = window.getCurrencyVal(incomeRS - expenseRS);
}
});
/* tslint:disable-next-line */
let transaction: any = new DataManager(window.expenseDS)
.executeLocal((new Query().where(predicateStart.and(predicateEnd))));
if (document.getElementById('toltransaction')) {
document.getElementById('toltransaction').textContent = window.getNumberVal(transaction.length);
}
}
/* tslint:disable-next-line */
let columnIncomeDS: any = [];
/* tslint:disable-next-line */
let columnExpenseDS: any = [];
/* tslint:disable-next-line */
let lineDS: any = [];
/* tslint:disable-next-line */
let tempChartIncomeDS: any = {};
/* tslint:disable-next-line */
let tempChartExpenseDS: any = {};
/* tslint:disable-next-line */
let tempChartLineDS: any = {};
/* tslint:disable-next-line */
let curDateTime: any;
/* tslint:disable-next-line */
let lineD: any = [];
function updatePredicate(): void {
predicateStart = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
predicateEnd = new Predicate('DateTime', 'lessthanorequal', window.endDate);
predicate = predicateStart.and(predicateEnd);
}
function getLineChartDS(): void {
lineD = [];
lineDS = [];
tempChartLineDS = [];
tempChartLineDS = columnIncomeDS.concat(columnExpenseDS);
for (let i: number = 0; i < tempChartLineDS.length; i++) {
/* tslint:disable-next-line */
let cur: any = tempChartLineDS[i];
if (cur.DateTime.getMonth() in lineD) {
curDateTime = lineD[cur.DateTime.getMonth()];
lineD[cur.DateTime.getMonth()].Amount = Math.abs((parseInt(curDateTime.Amount, 0) - parseInt(cur.Amount, 0)));
} else {
lineD[cur.DateTime.getMonth()] = cur;
}
}
/* tslint:disable-next-line */
for (let data: number = 0; data <= lineD.length; data++) {
if (lineD[data]) {
lineDS.push(lineD[data]);
}
}
}
/* tslint:disable-next-line */
function objectAssign(e: any): Object[] {
let result: Object[] = [];
/* tslint:disable-next-line */
let obj: any;
obj = extend(obj, e.result, {}, true);
for (let data: number = 0; data <= Object.keys(e.result).length; data++) {
result.push(obj[data]);
}
return result;
}
/* tslint:disable-next-line */
function getCoulmnChartExpenseDS(e: any): void {
columnExpenseDS = [];
tempChartExpenseDS = [];
let result: Object[] = objectAssign(e);
for (let i: number = 0; i < result.length - 1; i++) {
/* tslint:disable-next-line */
let cur: any = result[i];
if (cur.DateTime.getMonth() in tempChartExpenseDS) {
curDateTime = tempChartExpenseDS[cur.DateTime.getMonth()];
tempChartExpenseDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
} else {
tempChartExpenseDS[cur.DateTime.getMonth()] = cur;
/* tslint:disable-next-line */
tempChartExpenseDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartExpenseDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));
}
}
/* tslint:disable-next-line */
for (let data in tempChartExpenseDS) {
columnExpenseDS.push(tempChartExpenseDS[data]);
}
}
/* tslint:disable-next-line */
function getCoulmnChartIncomeDS(e: any): void {
columnIncomeDS = [];
tempChartIncomeDS = [];
let result: Object[] = objectAssign(e);
for (let i: number = 0; i < result.length - 1; i++) {
/* tslint:disable-next-line */
let cur: any = result[i];
if (cur.DateTime.getMonth() in tempChartIncomeDS) {
curDateTime = tempChartIncomeDS[cur.DateTime.getMonth()];
tempChartIncomeDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
} else {
tempChartIncomeDS[cur.DateTime.getMonth()] = cur;
/* tslint:disable-next-line */
tempChartIncomeDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartIncomeDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));;
}
}
/* tslint:disable-next-line */
for (let data in tempChartIncomeDS) {
columnIncomeDS.push(tempChartIncomeDS[data]);
}
}
// tslint:disable-next-line:max-func-body-length
function onDateRangeChange(args: RangeEventArgs): void {
window.startDate = args.startDate;
window.endDate = args.endDate;
lineDS = [];
lineD = [];
columnIncomeDS = [];
columnExpenseDS = [];
tempChartExpenseDS = [];
tempChartIncomeDS = [];
lineD = [];
predicateStart = new Predicate('DateTime', 'greaterthanorequal', args.startDate);
predicateEnd = new Predicate('DateTime', 'lessthanorequal', args.endDate);
predicate = predicateStart.and(predicateEnd);
cardUpdate();
/* tslint:disable */
new DataManager(window.expenseDS)
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Expense')))
.then((e: any) => {
getCoulmnChartExpenseDS(e);
});
/* tslint:enable */
/* tslint:disable */
new DataManager(window.expenseDS)
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Income')))
.then((e: any) => {
getCoulmnChartIncomeDS(e);
columnChartObj.setProperties({
//Initializing Chart Series
primaryXAxis: {
labelFormat: 'MMM',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'Amount',
labelFormat: 'c0'
},
useGroupingSeparator: true,
series: [
{
type: 'Column',
dataSource: columnIncomeDS,
legendShape: 'Circle',
xName: 'DateTime',
width: 2,
yName: 'Amount',
name: 'Income',
marker: {
visible: true, height: 10, width: 10
},
fill: '#A16EE5',
border: { width: 0.5, color: '#A16EE5' },
animation: { enable: false },
},
{
type: 'Column',
dataSource: columnExpenseDS,
legendShape: 'Circle',
xName: 'DateTime',
width: 2,
yName: 'Amount',
name: 'Expense',
marker: {
visible: true, height: 10, width: 10
},
fill: '#4472C4',
animation: { enable: false },
},
]
});
columnChartObj.refresh();
lineD = [];
getLineChartDS();
linechartObj.setProperties({
//Initializing Chart Series
series: [
{
type: 'Area',
dataSource: lineDS,
xName: 'DateTime', width: 2, marker: {
visible: true,
width: 10,
height: 10,
fill: 'white',
border: { width: 2, color: '#0470D8' },
},
legendShape: 'Circle',
yName: 'Amount', name: 'Amount',
fill: 'rgba(4, 112, 216, 0.3)',
border: { width: 0.5, color: '#0470D8' }
}]
});
linechartObj.refresh();
});
/* tslint:enable */
gridObj.setProperties({
dataSource: window.expenseDS,
//Initializing Chart Series
query: new Query().where(predicate).sortByDesc('DateTime').take(5)
});
gridObj.refresh();
getTotalExpense();
pie.series = [{
dataSource: pieRenderingData,
xName: 'text',
yName: 'y',
radius: '83%',
startAngle: 0,
endAngle: 360,
innerRadius: '50%',
dataLabel: {
name: 'x',
visible: true,
position: 'Outside',
connectorStyle: { length: '10%' },
font: {
color: 'Black',
size: '14px'
}
},
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2',
'#8854D9', '#3D4EB8', '#00BCD7']
}];
pie.dataBind();
pie.refresh();
createLegendData('pieUpdate');
grid.dataSource = pieRenderData;
grid.dataBind();
grid.refresh();
formatRangeDate();
}
function DateRange(): void {
dateRangePickerObject = new DateRangePicker({
format: 'MM/dd/yyyy', change: onDateRangeChange,
startDate: window.startDate,
endDate: window.endDate,
showClearButton: false,
readonly: true,
presets: [
{ label: 'Last Month', start: new Date('10/1/2017'), end: new Date('10/31/2017') },
{ label: 'Last 3 Months', start: new Date('9/1/2017'), end: new Date('11/30/2017') },
{ label: 'All Time', start: new Date('6/1/2017'), end: new Date('11/30/2017') }
]
});
dateRangePickerObject.appendTo('#daterange');
window.startDate = dateRangePickerObject.startDate;
window.endDate = dateRangePickerObject.endDate;
}
let centerTitle: HTMLDivElement = document.createElement('div') as HTMLDivElement;
centerTitle.innerHTML = 'Expenses <br> Year 2013';
centerTitle.style.position = 'absolute';
centerTitle.style.visibility = 'hidden';
function getFontSize(width: number): string {
if (width > 300) {
return '13px';
} else if (width > 250) {
return '8px';
} else {
return '6px';
}
}
function createLegendData(initiate: string): void {
if (pieRenderingData.length > 10) {
pie.series[0].groupTo = groupValue.toString();
pie.dataBind();
pie.refresh();
}
if (initiate === 'pieUpdate' || pieLegendData.length === 0) {
pieLegendData = [];
pieLegendData = pie.visibleSeries[0].points;
}
pie.legendSettings.visible = false;
pie.dataBind();
pieRenderData = [];
for (let i: number = 0; i < pieLegendData.length; i++) {
/* tslint:disable-next-line */
let data: IExpenseData = <IExpenseData>pieLegendData[i];
/* tslint:enable-next-line */
if (data.text.indexOf('Others') > -1) {
data.x = ((data.y / expTotal) * 100).toFixed(2).toString() + '%';
}
pieRenderData.push(data);
}
}
// tslint:disable-next-line:max-func-body-length
function InitializeComponet(): void {
interface Result {
result: Object;
}
if (document.getElementById('user-name')) {
document.getElementById('user-name').textContent = window.userName;
}
cardUpdate();
/* tslint:disable-next-line */
new DataManager(window.expenseDS)
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Expense')))
/* tslint:disable-next-line */
.then((e: any) => {
getCoulmnChartExpenseDS(e);
});
new DataManager(window.expenseDS)
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Income')))
/* tslint:disable-next-line */
.then((e: any) => {
getCoulmnChartIncomeDS(e);
columnChartObj = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
labelFormat: 'MMM',
valueType: 'DateTime',
intervalType: 'Months',
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis: {
minimum: 3000,
maximum: 9000,
labelFormat: 'c0'
},
useGroupingSeparator: true,
series: [
{
type: 'Column',
dataSource: columnIncomeDS,
legendShape: 'Circle',
xName: 'DateTime',
width: 2,
yName: 'Amount',
name: 'Income',
marker: {
visible: true, height: 10, width: 10
},
fill: '#A16EE5',
border: { width: 0.5, color: '#A16EE5' },
animation: { enable: false },
},
{
type: 'Column',
dataSource: columnExpenseDS,
legendShape: 'Circle',
xName: 'DateTime',
width: 2,
yName: 'Amount',
name: 'Expense',
marker: {
visible: true, height: 10, width: 10
},
fill: '#4472C4',
animation: { enable: false },
},
],
annotations: [{
// tslint:disable-next-line:max-line-length
content: '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Income - Expense</p>',
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
}],
margin: { top: 90 },
legendSettings: { visible: true },
titleStyle: {
textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000'
},
tooltip: {
fill: '#707070',
enable: true,
shared: true,
format: '${series.name} : ${point.y}',
header: 'Month - ${point.x} ',
}
});
columnChartObj.appendTo('#account-balance');
getLineChartDS();
/* tslint:disable */
let content: string = '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Account - Balance</p>';
/* tslint:eanble */
linechartObj = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'MMM',
majorGridLines: { width: 0 },
intervalType: 'Months'
},
//Initializing Primary Y Axis
primaryYAxis: {
maximum: 1800,
interval: 300,
labelFormat: 'c0',
},
useGroupingSeparator: true,
chartArea: {
border: {
width: 0
}
},
annotations: [{
content: content,
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
}],
series: [
{
type: 'Area',
dataSource: lineDS,
xName: 'DateTime', width: 2, marker: {
visible: true,
width: 10,
height: 10,
fill: 'white',
border: { width: 2, color: '#0470D8' },
},
yName: 'Amount', name: 'Amount',
fill: 'rgba(4, 112, 216, 0.3)',
border: { width: 0.5, color: '#0470D8' }
},
],
margin: { top: 90 },
tooltip: {
fill: '#707070',
enable: true, shared: true,
format: '${series.name} : ${point.y}',
header: 'Month - ${point.x} '
}
});
linechartObj.appendTo('#balance');
});
pie = new AccumulationChart({
enableSmartLabels: true,
width: '100%',
height: '350px',
series: [
{
dataSource: pieRenderingData,
xName: 'text',
yName: 'y',
radius: '83%',
startAngle: 0,
endAngle: 360,
innerRadius: '50%',
dataLabel: {
name: 'x',
visible: true,
position: 'Outside',
connectorStyle: { length: '10%' },
font: {
color: 'Black',
size: '14px',
fontFamily: 'Roboto'
}
},
animation: { enable: false },
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2',
'#8854D9', '#3D4EB8', '#00BCD7']
}
],
legendSettings: {
visible: true
},
textRender: (args: IAccTextRenderEventArgs) => {
args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);
pie.animateSeries = true;
if (args.text.indexOf('Others') > -1) {
args.text = 'Others';
}
},
animationComplete: (args: IAccAnimationCompleteEventArgs) => {
let element: HTMLElement = document.getElementById('total-expense_datalabel_Series_0');
if (!isNOU(element)) { element.style.visibility = 'visible'; }
}
});
pie.appendTo('#total-expense');
createLegendData('pie');
grid = new Grid({
width: '100%',
dataSource: pieRenderData,
rowTemplate: '#rowtemplate',
columns: [
{ field: 'color', width: '10%', textAlign: 'Center' },
{ field: 'text', width: '50%' },
{ field: 'y', width: '20%' },
{ field: 'x', width: '20%' }
],
load: (args: any) => {
if (document.getElementById('grid-popup')) {
document.getElementById('grid-popup').style.display = "block";
}
},
dataBound: (args: Object) => {
if (document.getElementById('grid-popup')) {
document.getElementById('grid-popup').style.display = "none";
}
}
});
grid.appendTo('#legend-grid');
gridObj = new Grid({
dataSource: dataSource,
allowSorting: true,
enableHover: false,
allowKeyboard: true,
allowPaging: false,
query: new Query().where(predicate).sortByDesc('DateTime').take(5),
width: '100%',
toolbar: [{ text: 'Recent Transactions' }],
pageSettings: {
pageCount: 4,
pageSize: 14
},
columns: [
{
field: 'DateTime',
headerText: 'Date',
width: 120,
format: 'yMd',
hideAtMedia: '(min-width: 600px)',
template: '#dateTemplate'
}, {
field: 'Category',
headerText: 'Category',
template: '#template',
width: 170,
},
{
field: 'PaymentMode',
headerText: 'Payment Mode',
width: 160,
hideAtMedia: '(min-width: 600px)'
},
{
field: 'Description',
headerText: 'Description',
hideAtMedia: '(min-width: 1050px)'
},
{
field: 'Amount',
headerText: 'Amount',
width: 120,
textAlign: 'right',
template: '#amtTemplate',
}
]
});
gridObj.appendTo('#recentexpense-grid');
}
window.dashboard = (): void => {
predicateStart = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
predicateEnd = new Predicate('DateTime', 'lessthanorequal', window.endDate);
predicate = predicateStart.and(predicateEnd);
getTotalExpense();
InitializeComponet();
// DateRangePicker Initialization.
DateRange();
formatRangeDate();
updateChart();
window.addEventListener('resize', () => {
setTimeout(() => {
updateChart();
}, 1000);
});
};
function updateChart(): void {
let pieContainerObj: HTMLElement = document.getElementById('totalExpense');
if (!isNOU(pieContainerObj) && pieContainerObj.offsetWidth < 480) {
disableChartLabel();
} else {
enableChartLabel();
}
}
function disableChartLabel(): void {
pie.series[0].dataLabel.visible = false;
pie.dataBind();
pie.refresh();
}
function enableChartLabel(): void {
pie.series[0].dataLabel.visible = true;
pie.dataBind();
pie.refresh();
}
function formatRangeDate(): void {
let intl: Internationalization = new Internationalization();
let dateStart: string = intl.formatDate(dateRangePickerObject.startDate, { skeleton: 'MMMd' });
let dateEnd: string = intl.formatDate(dateRangePickerObject.endDate, { skeleton: 'MMMd' });
document.getElementById('rangeDate').textContent = dateStart + ' - ' + dateEnd;
}
export function getTotalExpense(): void {
expTotal = 0;
category = [];
legendData = [];
let renderingData: IExpenseData[] = [];
/* tslint:disable-next-line */
tempData.forEach(item => {
if (item.TransactionType === 'Expense' && window.startDate.valueOf() <= item.DateTime.valueOf()
&& window.endDate.valueOf() >= item.DateTime.valueOf()) {
expTotal += Number(item.Amount);
legendData.push(item);
if (category.indexOf(item.Category) < 0) {
category.push(item.Category);
}
}
});
/* tslint:disable */
category.forEach(str => {
let total: number = 0;
legendData.forEach(item => {
if (str === item.Category) {
total += Number(item.Amount);
}
});
let percent: string = ((total / expTotal) * 100).toFixed(2) + '%';
renderingData.push({ x: str, y: total, text: percent });
});
pieRenderingData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y')));
if (pieRenderingData.length > 10) {
let temp: IExpenseData = <IExpenseData>new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').range(0, 9)))[8];
groupValue = temp.y - 1;
hiGridData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').skip(9)));
}
}

61
src/expense/dialog.html Normal file
Просмотреть файл

@ -0,0 +1,61 @@
<div class='dlg-content'>
<div class="transaction-dialog">
<div class='dlg-radio-btn-section'>
<div class='dlg-income-radio-section'>
<input id="incomeradio" />
</div>
<div class='dlg-expense-radio-section'>
<input id="expenseradio" />
</div>
</div>
<div class='dlg-date-section'>
<div class='dlg-date-picker-container'>
<div>
<input id="datepicker" />
</div>
</div>
<div class='dlg-time-picker-container'>
<div>
<input id="timepicker" />
</div>
</div>
</div>
<div class='category-section'>
<div class='dlg-category-container'>
<div>
<input type="text" id="category">
</div>
</div>
<div class='dlg-amount-container'>
<div>
<input id="amount" />
</div>
</div>
</div>
<div class='description-container'>
<div>
<div class="e-float-input">
<input type='text' id="description" class="e-input required readonly" />
<span class="e-float-line"></span>
<label class="e-float-text e-label-top">Descriptions</label>
</div>
</div>
</div>
<div>
<div class='payment-label'>
<label class="">Payment Mode</label>
</div>
<div class='payment-radio-container'>
<div class='dlg-cash-payment'>
<input id="cashradio" />
</div>
<div class='dlg-debit-payment'>
<input id="debitradio" />
</div>
<div class='dlg-credit-payment'>
<input id="creditradio" />
</div>
</div>
</div>
</div>
</div>

125
src/expense/expense.html Normal file
Просмотреть файл

@ -0,0 +1,125 @@
<div class='exp-content-container'>
<div>
<h1 class="page-title"> All Transactions </h1>
</div>
<div>
<div class="col-md-12 margin-top col-lg-12">
<div class="expense-grid-container">
<div class="expense-head-padding">
<div class="search-wrapper search-section">
<div id="search">
<input id="txt" type="search" placeholder="Search" class="search e-input">
<span id="searchbtn" class="e-search-icon expense-search-icon e-icons"></span>
</div>
<div class="button-section search-section">
<button id="addexpense" class="e-btn small e-info">Add Transaction</button>
<button id="filterExpense" class="e-btn small e-info">Filter</button>
<div id="add-btn" class='e-btn'>
<span class='e-icons add-icon add-head-item'></span>
</div>
</div>
</div>
</div>
<div id='grid' class="margin-top-10 expense-grid-margin pane" style="height:100%;width:100%"></div>
</div>
</div>
</div>
</div>
<div>
<div class='filter-container'>
<div class="filter pane sidebar-wrapper-filter">
<div class="filter-head">
<span class="e-icon filter-icon filter-head-item"></span>
<span class="filter-txt filter-head-item">Filters</span>
</div>
<div class="expense-filter-container">
<label class="label-font">Select a range</label>
<div class='filter-item'>
<input type="text" id="daterange" class="DateTime" />
</div>
<label class="label-font">Category</label>
<div class="treeview filter-item">
<input type="text" id="expense-category">
</div>
<label class="label-font bottom-align">Cashflow</label>
<div class="cashflow filter-item">
<input id="income" class="cashflow-section" type="checkbox">
<input id="expenses" class="cashflow-section" type="checkbox">
</div>
<label class="label-font bottom-align">Payment Mode</label>
<div class="paymentModes filter-item">
<input id="cash" class="cashflow-section" type="checkbox">
<input id="debitcard" class="cashflow-section" type="checkbox">
<br/><br/>
<input id="creditcard" class="cashflow-section" type="checkbox">
</div>
<div>
<label class="label-font">Amount</label>
<div class='amount-filter'>
<div class='min-numeric amt-filter'>
<label class="inlineAlign minLabel">Min :</label>
<input id="filterMinAmount" type="tel" />
</div>
<span class='amt-filter separateLine'></span>
<div class='max-numeric amt-filter'>
<label class="inlineAlign maxLabel">Max :</label>
<input id="filterMaxAmount" type="tel" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="template" type="text/x-template">
<div class="normalRes">
<div class="category-icon ${Category}"></div>
<div class='category-text'>${Category}</div>
</div>
<div class="mediumRes">
<div>
<div class="category-icon ${Category}"></div>
</div>
<div>
<div> ${Category} </div>
<div class="description-section"> ${Description} </div>
</div>
</div>
<div class="smallRes">
<div class='sm-category sm-icon'>
<div class="category-icon ${Category}"></div>
</div>
<div class='sm-category category-content'>
<div> ${Category} </div>
<div class="description-section"> ${Description} </div>
<div> ${PaymentMode} </div>
</div>
</div>
</script>
<script id="amtTemplate" type="text/x-template">
<div class="normalRes">
<div class="lg-amount">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
</div>
</div>
<div class="mediumRes">
<div class="res-amount">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
<div> ${getDate(data.DateTime)} </div>
</div>
</div>
<div class="smallRes">
<div class="res-amount">
<div class='amt-payment ${TransactionType}'>
<span>$</span> <span>${Amount}</span>
</div>
<div> ${getDate(data.DateTime)} </div>
</div>
</div>
</script>

719
src/expense/expense.ts Normal file
Просмотреть файл

@ -0,0 +1,719 @@
/**
* Expense handler
*/
import { DateRangePicker, DatePicker, TimePicker, RangeEventArgs } from '@syncfusion/ej2-calendars';
import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
import { Grid, Page, Edit, Toolbar, CommandColumn, ContextMenu, Resize, CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
import { Button, CheckBox, RadioButton, ChangeArgs } from '@syncfusion/ej2-buttons';
import { Dialog, Tooltip } from '@syncfusion/ej2-popups';
import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
import { NumericTextBox, Input } from '@syncfusion/ej2-inputs';
import { Ajax, KeyboardEventArgs, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
Grid.Inject(Edit, Toolbar, Page, CommandColumn, ContextMenu, Resize, );
import { cardUpdate, IExpense } from '../dashboard/dashboard';
import { MyWindow, dataSource, toggleFilterMenu } from '../index';
import { Category } from '@syncfusion/ej2-charts';
import { categoryIncomeData, categoryExpenseData } from '../common/common.data';
declare let window: MyWindow;
let incomeRadio: RadioButton;
let expenseRadio: RadioButton;
let cashRadio: RadioButton;
let creditRadio: RadioButton;
let debitRadio: RadioButton;
let datepicker: DatePicker;
let timepicker: TimePicker;
let amount: NumericTextBox;
let category: DropDownList;
let paymentmode: DropDownList;
let subCategory: DropDownList;
let income: CheckBox;
let cash: CheckBox;
let creditcard: CheckBox;
let debitcard: CheckBox;
let expense: CheckBox;
let dateRangePickerObject: DateRangePicker;
let addExpenseDialog: Dialog;
let editExpenseDialog: Dialog;
let confirmDialogObj: Dialog;
let tooltipEdit: Tooltip;
let tooltipDelete: Tooltip;
let tooltipHover: boolean;
let gridDS: { [key: string]: Object[] };
let multiSelectFilter: MultiSelect;
let grid: Grid;
let filterMinAmount: NumericTextBox;
let filterMaxAmount: NumericTextBox;
let tempData: IExpense[] = <IExpense[]>dataSource;
let filterCategory: string[] = [];
let numMinValue: number;
let numMaxValue: number;
/* tslint:disable */
let editRowData: any;
let minAmount: any;
let maxAmount: any;
let editValue: number;
let deleteValue: number;
/* tslint:enable */
let defaultGrigColumns: Object[] = [
{ type: 'checkbox', width: 40, },
{
field: 'Category',
headerText: 'Category',
template: '#template',
width: 178,
editType: 'dropdownedit',
validationRules: { required: true },
clipMode: 'ellipsiswithtooltip'
}, {
field: 'DateTime',
headerText: 'Date',
format: 'yMd',
width: 112,
editType: 'datepickeredit',
validationRules: { required: true },
hideAtMedia: '(min-width: 1050px)'
},
{
field: 'PaymentMode',
headerText: 'Payment Mode',
width: 140,
editType: 'dropdownedit',
validationRules: { required: true },
hideAtMedia: '(min-width: 600px)'
},
{
field: 'Description',
headerText: 'Description',
clipMode: 'ellipsis',
validationRules: { required: true },
hideAtMedia: '(min-width: 1050px)'
},
{
field: 'UniqueId',
headerText: 'Unique Id',
isPrimaryKey: true,
visible: false
},
{
field: 'Amount',
headerText: 'Amount',
editType: 'numericedit',
width: 120,
format: 'C0',
template: '#amtTemplate',
validationRules: { required: true },
textAlign: 'right'
}
];
function onGridRender(): void {
if (grid) {
let editElement: HTMLElement = document.getElementById('grid_edit');
let deleteElement: HTMLElement = document.getElementById('grid_delete');
if (editElement) {
grid.toolbarModule.toolbar.enableItems(editElement.parentElement, false);
editElement.parentElement.title = ' ';
}
if (deleteElement) {
grid.toolbarModule.toolbar.enableItems(deleteElement.parentElement, false);
deleteElement.parentElement.title = ' ';
}
editValue = 0;
deleteValue = 0;
}
}
function onGridCheckBoxChange(args: CheckBoxChangeEventArgs): void {
if (grid.getSelectedRowIndexes().length > 1) {
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
editValue = 2;
deleteValue = 2;
} else if (grid.getSelectedRowIndexes().length === 0) {
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, false);
editValue = 0;
deleteValue = 0;
} else if (grid.getSelectedRowIndexes().length === 1) {
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, true);
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
editValue = 1;
deleteValue = 1;
}
}
// tslint:disable-next-line:max-func-body-length
window.expense = (): void => {
cardUpdate();
let predicateSt: Predicate = new Predicate('Spent', 'equal', 10);
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', window.endDate);
let predicate: Predicate = predicateStart.and(predicateEnd);
let query: Query = new Query().where(predicate).select(['Category', 'Budget', 'DateTime', 'Items', 'PaymentMode', 'Spent']).take(5);
minMaxAmount(window.startDate, window.endDate);
function minMaxAmount(start: Date, end: Date): void {
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', start);
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', end);
minAmount = new DataManager(window.expenseDS).executeLocal((new Query()
.where((predicateStart.and(predicateEnd))))
.requiresCount().aggregate('min', 'Amount'));
maxAmount = new DataManager(window.expenseDS).executeLocal((new Query()
.where((predicateStart.and(predicateEnd))))
.requiresCount().aggregate('max', 'Amount'));
numMinValue = minAmount.aggregates['Amount - min'];
numMaxValue = maxAmount.aggregates['Amount - max'];
}
/* tslint:disable */
function onGridEditBegin(e: any): void {
if (e.requestType == 'beginEdit') {
editRowData = e;
e.cancel = true;
}
}
/* tslint:enable */
let rowDiv: HTMLElement;
let incomeElem: HTMLElement;
let expenseElem: HTMLElement;
let gridColumns: Object[] = defaultGrigColumns;
grid = new Grid({
dataSource: window.expenseDS,
height: '100%',
width: '100%',
allowSelection: true,
rowSelected: onGridCheckBoxChange,
rowDeselected: onGridCheckBoxChange,
created: onGridRender,
editSettings: { allowEditing: true },
allowPaging: true,
pageSettings: { pageSize: 11 },
query: new Query().where(predicate).sortByDesc('DateTime'),
cellSave: onGridSave,
allowTextWrap: false,
toolbar: ['Edit', 'Delete'],
actionBegin: onGridEditBegin,
columns: gridColumns,
actionComplete: onGridActionComplete
});
grid.appendTo('#grid');
if (document.getElementById('grid_edit')) {
document.getElementById('grid_edit').onclick = (): void => {
let ajax: Ajax = new Ajax('./src/expense/dialog.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (data: string): void => {
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_delete').parentElement, true);
if (editExpenseDialog) {
editExpenseDialog.show();
} else {
editExpenseDialog = new Dialog({
header: 'Edit Transaction',
content: data,
visible: false,
showCloseIcon: true,
closeOnEscape: false,
isModal: true,
target: document.body,
buttons: [{
click: onSaveTransaction, buttonModel: { content: 'Save', cssClass: 'e-info e-save', isPrimary: true }
}, { click: onNewDialogCancel, buttonModel: { cssClass: 'e-outline e-cancel', content: 'Cancel' } }],
width: '100%',
height: '85%',
animationSettings: { effect: 'None' },
open: onEditDialogOpen,
close: onEditDialogClose,
overlayClick: dlgOverlayClicked
});
editExpenseDialog.appendTo('#dialog');
editExpenseDialog.show();
}
};
};
}
if (document.getElementById('grid_delete')) {
document.getElementById('grid_delete').onclick = (): void => {
confirmDialogObj = new Dialog({
header: 'Delete',
visible: false,
width: '40%',
isModal: true,
content: '<span>Are you sure you want to delete the selected transaction(s)?</span>',
showCloseIcon: true, closeOnEscape: false,
buttons: [{
click: confirmDlgYesBtnClick,
buttonModel: { content: 'Yes', cssClass: 'e-ok e-flat', isPrimary: true }
},
{ click: confirmDlgNoBtnClick, buttonModel: { cssClass: 'e-flat e-no', content: 'No' } }],
target: document.body,
animationSettings: { effect: 'None' },
open: alertDialogOpen, close: dialogClose,
overlayClick: dlgOverlayClicked
});
confirmDialogObj.appendTo('#confirmDialog');
confirmDialogObj.show();
};
}
function dialogClose(): void {
confirmDialogObj.destroy();
confirmDialogObj = null;
}
function confirmDlgNoBtnClick(): void {
confirmDialogObj.hide();
}
function confirmDlgYesBtnClick(): void {
let selectedRecords: Object[] = grid.getSelectedRecords();
for (let i: number = 0; i < selectedRecords.length; i++) {
new DataManager(window.expenseDS).remove('UniqueId', selectedRecords[i]);
}
grid.setProperties({
dataSource: window.expenseDS,
query: new Query().where(predicate).sortByDesc('DateTime')
});
grid.refresh();
cardUpdate();
confirmDialogObj.hide();
}
let searchKey: HTMLInputElement = document.getElementById('txt') as HTMLInputElement;
Input.createInput({
element: searchKey,
properties: {
showClearButton: true
}
});
document.getElementById('searchbtn').onclick = () => {
grid.search(searchKey.value);
};
/** Performs search operation when press Enter key */
searchKey.onkeyup = (e: KeyboardEventArgs) => {
if (e.keyCode === 13) { grid.search(searchKey.value); }
};
searchKey.onblur = () => {
grid.search(searchKey.value);
};
(document.getElementsByClassName('e-clear-icon')[0] as HTMLElement).onmousedown = (): void => {
searchKey.value = '';
};
// Initializing the add expense button
let button: Button = new Button({});
button.appendTo('#addexpense');
function onCheckBoxChange(): void {
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
}
document.getElementById('add-btn').onclick = (): void => {
showAddDialog();
};
document.getElementById('addexpense').onclick = (): void => {
showAddDialog();
};
/** Disables edit toolbar item in the Expense Grid on the initial load */
/* tslint:disable */
function onGridActionComplete(e: any): void {
setTimeout(() => {
grid.toolbarModule.toolbar.enableItems(document.getElementById('grid_edit').parentElement, false);
}, 0);
}
/* tslint:enable */
function showAddDialog(): void {
let ajax: Ajax = new Ajax('./src/expense/dialog.html', 'GET', true);
ajax.send().then();
ajax.onSuccess = (data: string): void => {
if (addExpenseDialog) {
addExpenseDialog.show();
} else {
addExpenseDialog = new Dialog({
header: 'New Transaction',
content: data,
visible: false,
showCloseIcon: true,
closeOnEscape: false,
isModal: true,
target: document.body,
buttons: [{
click: addNewTransaction, buttonModel: { content: 'Add', cssClass: 'e-info e-add', isPrimary: true }
},
{
click: onNewDialogCancel, buttonModel: { cssClass: 'e-outline e-cancel', content: 'Cancel' }
}
],
width: '100%',
height: '85%',
animationSettings: { effect: 'None' },
open: onNewDialogOpen,
close: onNewDialogClose,
overlayClick: dlgOverlayClicked
});
addExpenseDialog.appendTo('#addexpenseDialog');
addExpenseDialog.show();
}
};
}
function dlgOverlayClicked(): void {
if (addExpenseDialog) {
addExpenseDialog.hide();
}
if (confirmDialogObj) {
confirmDialogObj.hide();
}
if (editExpenseDialog) {
editExpenseDialog.hide();
}
}
/* tslint:disable-next-line */
function onSaveTransaction(args: any): void {
let newExpense: NewExpense = {
'UniqueId': editRowData.rowData.UniqueId,
'DateTime': new Date(datepicker.value.setHours(timepicker.value.getHours())),
'Category': <string>category.value,
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
'TransactionType': (incomeRadio.checked && incomeRadio.label) || (expenseRadio.checked && expenseRadio.label),
'Description': (<HTMLInputElement>document.getElementById('description')).value,
'Amount': '' + amount.value
};
new DataManager(window.expenseDS).update('UniqueId', newExpense);
grid.setProperties({
dataSource: window.expenseDS,
query: new Query().where(predicate).sortByDesc('DateTime')
});
grid.refresh();
cardUpdate();
editExpenseDialog.hide();
}
function addNewTransaction(): void {
let newExpense: NewExpense = {
'UniqueId': 'T' + ('' + (+new Date())).substring(5, 10),
'DateTime': new Date(datepicker.value.setHours(timepicker.value.getHours())),
'Category': <string>category.value,
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
'TransactionType': (incomeRadio.checked && incomeRadio.label) || (expenseRadio.checked && expenseRadio.label),
'Description': (<HTMLInputElement>document.getElementById('description')).value,
'Amount': '' + amount.value
};
new DataManager(window.expenseDS).insert(newExpense);
new DataManager(window.expenseDS).update('UniqueId', {
UniqueId: newExpense.UniqueId,
'DateTime': (datepicker.value),
'Category': newExpense.Category,
'PaymentMode': (cashRadio.checked && cashRadio.label) ||
(creditRadio.checked && creditRadio.label) || (debitRadio.checked && debitRadio.label),
'TransactionType': newExpense.TransactionType,
'Description': newExpense.Description,
'Amount': '' + newExpense.Amount
});
grid.setProperties({
dataSource: window.expenseDS,
query: new Query().where(predicate).sortByDesc('DateTime')
});
grid.refresh();
addExpenseDialog.hide();
cardUpdate();
}
function onNewDialogCancel(): void {
(<HTMLElement>document.querySelector('.e-dlg-closeicon-btn')).click();
}
function onNewDialogClose(): void {
this.dlgContainer.style.zIndex = '100';
addExpenseDialog.destroy();
addExpenseDialog = null;
}
function onChange(args: ChangeArgs): void {
if (this.element.value === 'Income') {
category.dataSource = categoryIncomeData;
} else {
category.dataSource = categoryExpenseData;
}
}
function createDialogComponent(): void {
incomeRadio = new RadioButton({ value: 'Income', label: 'Income', name: 'dlgTransactionType', change: onChange });
incomeRadio.appendTo('#incomeradio');
expenseRadio = new RadioButton({ value: 'Expense', label: 'Expense', name: 'dlgTransactionType', checked: true, change: onChange });
expenseRadio.appendTo('#expenseradio');
datepicker = new DatePicker({
placeholder: 'Choose a Date', width: '100%', value: window.endDate,
floatLabelType: 'Always'
});
datepicker.appendTo('#datepicker');
timepicker = new TimePicker({
placeholder: 'Choose a Time', width: '100%', floatLabelType: 'Always', value: new Date()
});
timepicker.appendTo('#timepicker');
category = new DropDownList({
placeholder: 'Select a Category',
cssClass: 'Category',
floatLabelType: 'Always',
dataSource: categoryExpenseData,
fields: { text: 'Category', iconCss: 'Class', value: 'Category' },
});
category.appendTo('#category');
creditRadio = new RadioButton({ value: 'Credit Card', label: 'Credit Card', name: 'dlgPaymentMode' });
creditRadio.appendTo('#creditradio');
debitRadio = new RadioButton({ value: 'Debit Card', label: 'Debit Card', name: 'dlgPaymentMode' });
debitRadio.appendTo('#debitradio');
cashRadio = new RadioButton({ value: 'Cash', label: 'Cash', checked: true, name: 'dlgPaymentMode' });
cashRadio.appendTo('#cashradio');
amount = new NumericTextBox({
placeholder: 'Enter a Amount',
floatLabelType: 'Always',
format: 'c2',
min: 0
});
amount.appendTo('#amount');
}
function alertDialogOpen(): void {
this.dlgContainer.style.zIndex = '1000000';
}
function onEditDialogClose(): void {
document.body.style.overflowY = 'auto';
editExpenseDialog.destroy();
editExpenseDialog = null;
}
function onEditDialogOpen(): void {
this.dlgContainer.style.zIndex = '1000000';
document.body.style.overflowY = 'hidden';
createDialogComponent();
if (editRowData.rowData.TransactionType === 'Income') {
incomeRadio.checked = true;
category.dataSource = categoryIncomeData;
}
if (editRowData.rowData.TransactionType === 'expense') {
expenseRadio.checked = true;
category.dataSource = categoryExpenseData;
}
datepicker.value = editRowData.rowData.DateTime;
timepicker.value = editRowData.rowData.DateTime;
if (editRowData.rowData.PaymentMode === 'Credit Card') {
creditRadio.checked = true;
} else if (editRowData.rowData.PaymentMode === 'Debit Card') {
debitRadio.checked = true;
} else if (editRowData.rowData.PaymentMode === 'Cash') {
cashRadio.checked = true;
}
(<HTMLInputElement>document.getElementById('description')).value = editRowData.rowData.Description;
category.value = editRowData.rowData.Category;
amount.value = editRowData.rowData.Amount;
}
function onNewDialogOpen(): void {
this.dlgContainer.style.zIndex = '1000000';
createDialogComponent();
}
function generatePredicate(start: Date, end: Date, updater: string): void {
let predicates: Predicate;
let predicatesStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', start);
let predicatesEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', end);
predicates = predicatesStart.and(predicatesEnd);
let predIncome: Predicate;
let predExpense: Predicate;
let predCash: Predicate;
let predDebit: Predicate;
let preCredit: Predicate;
let preCategory: Predicate;
let preCategorys: Predicate;
minMaxAmount(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
if (updater === 'dateChange') {
if (!isNOU(numMinValue) && !isNOU(numMaxValue)) {
filterMinAmount.setProperties({
min: numMinValue,
value: numMinValue
});
filterMaxAmount.setProperties({
max: numMaxValue,
value: numMaxValue
});
}
}
/* tslint:disable */
let val: any = [filterMinAmount.value, filterMaxAmount.value];
/* tslint:enable */
let predMinAmt: Predicate = new Predicate('Amount', 'greaterthanorequal', val[0]);
let predMaxAmt: Predicate = new Predicate('Amount', 'lessthanorequal', val[1]);
predicates = predicates.and(predMinAmt).and(predMaxAmt);
if (income.checked || expense.checked) {
if (income.checked) {
predIncome = new Predicate('TransactionType', 'equal', 'Income');
}
if (expense.checked) {
predExpense = new Predicate('TransactionType', 'equal', 'Expense');
}
if (expense.checked && income.checked) {
predIncome = predIncome.or(predExpense);
predicates = predicates.and(predIncome);
} else if (income.checked) {
predicates = predicates.and(predIncome);
} else if (expense.checked) {
predicates = predicates.and(predExpense);
}
}
if (cash.checked || debitcard.checked || creditcard.checked) {
if (cash.checked) {
predCash = new Predicate('PaymentMode', 'equal', 'Cash');
}
if (creditcard.checked) {
preCredit = new Predicate('PaymentMode', 'equal', 'Credit Card');
}
if (debitcard.checked) {
predDebit = new Predicate('PaymentMode', 'equal', 'Debit Card');
}
if (cash.checked && creditcard.checked && debitcard.checked) {
predIncome = preCredit.or(predDebit).or(predCash);
predicates = predicates.and(predIncome);
} else if (cash.checked && creditcard.checked) {
predIncome = predCash.or(preCredit);
predicates = predicates.and(predIncome);
} else if (cash.checked && debitcard.checked) {
predIncome = predCash.or(predDebit);
predicates = predicates.and(predIncome);
} else if (creditcard.checked && debitcard.checked) {
predIncome = preCredit.or(predDebit);
predicates = predicates.and(predIncome);
} else if (cash.checked) {
predicates = predicates.and(predCash);
} else if (debitcard.checked) {
predicates = predicates.and(predDebit);
} else if (creditcard.checked) {
predicates = predicates.and(preCredit);
}
}
if (!isNOU(multiSelectFilter.value) && multiSelectFilter.value.length > 0) {
let list: string[] = <string[]>multiSelectFilter.value;
for (let i: number = 0; i < list.length; i++) {
preCategory = new Predicate('Category', 'equal', list[i]);
if (i === 0) {
preCategorys = preCategory;
} else {
preCategorys = preCategorys.or(preCategory);
}
}
predicates = predicates.and(preCategorys);
}
grid.setProperties({
dataSource: window.expenseDS,
query: new Query().where(predicates).sortByDesc('DateTime')
});
grid.refresh();
getCategory(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
multiSelectFilter.dataSource = filterCategory;
multiSelectFilter.dataBind();
}
function amountChanged(): void {
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
}
function dateRangeChanged(args?: RangeEventArgs): void {
window.startDate = args.startDate;
window.endDate = args.endDate;
cardUpdate(true);
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, 'dateChange');
}
dateRangePickerObject = new DateRangePicker({
startDate: window.startDate,
endDate: window.endDate,
cssClass: 'DateTime',
format: 'MM/dd/yyyy',
showClearButton: false,
readonly: true,
change: dateRangeChanged
});
dateRangePickerObject.appendTo('#daterange');
getCategory(dateRangePickerObject.startDate, dateRangePickerObject.endDate);
multiSelectFilter = new MultiSelect({
dataSource: filterCategory,
placeholder: 'Select Categories',
mode: 'Box',
hideSelectedItem: true,
closePopupOnSelect: false,
select: categoryUpdated,
removed: categoryUpdated
});
multiSelectFilter.appendTo('#expense-category');
let searchEle: Element = document.getElementsByClassName('e-searcher')[0];
searchEle.querySelector('input').setAttribute('readonly', 'true');
filterMinAmount = new NumericTextBox({
cssClass: 'inlineAlign',
width: '55px',
showSpinButton: false,
format: 'c0',
min: numMinValue,
value: numMinValue,
change: amountChanged
});
filterMinAmount.appendTo('#filterMinAmount');
filterMaxAmount = new NumericTextBox({
cssClass: 'inlineAlign',
width: '60px',
showSpinButton: false,
format: 'c0',
max: numMaxValue,
value: numMaxValue,
change: amountChanged,
});
filterMaxAmount.appendTo('#filterMaxAmount');
income = new CheckBox({ label: 'Income', checked: true, cssClass: 'TransactionType', change: onCheckBoxChange });
income.appendTo('#income');
expense = new CheckBox({ label: 'Expense', checked: true, cssClass: 'TransactionType', change: onCheckBoxChange });
expense.appendTo('#expenses');
cash = new CheckBox({ label: 'Cash', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
cash.appendTo('#cash');
creditcard = new CheckBox({ label: 'Credit Card', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
creditcard.appendTo('#creditcard');
debitcard = new CheckBox({ label: 'Debit Card', checked: true, cssClass: 'PaymentMode', change: onCheckBoxChange });
debitcard.appendTo('#debitcard');
/* tslint:disable-next-line */
function onGridSave(args: any): void {
new DataManager(window.expenseDS).update('UniqueId', args.rowData);
}
function categoryUpdated(): void {
setTimeout(() => {
generatePredicate(dateRangePickerObject.startDate, dateRangePickerObject.endDate, '');
/* tslint:disable-next-line */
}, 10);
}
document.getElementById('filterExpense').onclick = (): void => {
toggleFilterMenu();
};
};
export function getCategory(start: Date, end: Date): void {
filterCategory = [];
/* tslint:disable-next-line */
tempData.forEach(item => {
/* tslint:enable-next-line */
if (start.valueOf() <= item.DateTime.valueOf() && end.valueOf() >= item.DateTime.valueOf()) {
if (filterCategory.indexOf(item.Category) < 0) {
filterCategory.push(item.Category);
}
}
});
}
interface NewExpense {
UniqueId: string;
DateTime: Date;
Category: string;
Amount: string;
PaymentMode: number | string;
TransactionType: string;
Description: string;
}

266
src/index.ts Normal file
Просмотреть файл

@ -0,0 +1,266 @@
/**
* Expense Tracker
*/
import { addRoute, bypassed, parse } from 'crossroads';
import { Ajax, rippleEffect, enableRipple } from '@syncfusion/ej2-base';
import * as hasher from 'hasher';
import { isNullOrUndefined, Browser, Internationalization } from '@syncfusion/ej2-base';
import { expenseData, userInfo, startDate, endDate } from './common/common.data';
enableRipple(true);
window.expenseDS = expenseData;
window.userName = userInfo.FullName;
window.userFirstName = userInfo.FirstName;
let intl: Internationalization = new Internationalization();
window.getDate = (value: Date): string => {
return intl.formatDate(value, { skeleton: 'yMd', type: 'date' });
};
window.getCurrencyVal = (value: number): string => {
return intl.formatNumber(value, { format: 'C0' });
};
window.getNumberVal = (value: number): string => {
return intl.getNumberFormat({ skeleton: 'C0', currency: 'USD' })(value);
};
export let dataSource: Object[] = [];
let menu: HTMLElement;
let overlay: HTMLElement;
declare let window: MyWindow;
enum ExpensePage {
dashboard, about, expense
}
if (isNullOrUndefined(window.startDate)) {
window.startDate = startDate;
window.endDate = endDate;
}
/* tslint:disable-next-line */
function updateDate(list: any) {
dataSource = list;
}
/* tslint:disable-next-line */
function parseDate(date: any) {
return new Date((date).match(/\d+/)[0] * 1);
}
updateDate(expenseData);
handleResize();
function getCurrentPage(): string {
let currentPage: string;
if ((window.location.hash === '#/' + ExpensePage[ExpensePage.dashboard])) {
currentPage = ExpensePage[ExpensePage.dashboard];
} else if ((window.location.hash === '#/' + ExpensePage[ExpensePage.expense])) {
currentPage = ExpensePage[ExpensePage.expense];
} else if ((window.location.hash === '#/' + ExpensePage[ExpensePage.about])) {
currentPage = ExpensePage[ExpensePage.about];
}
return currentPage;
}
rippleEffect(document.body, { selector: '.ripple-element', rippleFlag: true });
routeDefault();
let currentPage: string;
addRoute('/:lang:', () => {
let sample: string = currentPage || getCurrentPage();
if ((currentPage && currentPage !== '') || (window.location.hash === '#/' + getCurrentPage())) {
if (!isNullOrUndefined(document.querySelector('.expense-active-page'))) {
document.querySelector('.expense-active-page').classList.remove('expense-active-page');
}
let ajaxHTML: Ajax = new Ajax('src/' + sample + '/' + sample + '.html', 'GET', true);
ajaxHTML.send().then((value: Object): void => {
document.getElementById('content').innerHTML = '';
document.getElementById('content').innerHTML = value.toString();
document.body.className = '';
if ((currentPage === ExpensePage[ExpensePage.dashboard]) ||
('#/' + ExpensePage[ExpensePage.dashboard] === window.location.hash)) {
window.dashboard();
document.querySelectorAll('.overview')[0].classList.add('expense-active-page');
document.body.classList.add('dashboard-page');
} else if ((currentPage === ExpensePage[ExpensePage.expense]) ||
('#/' + ExpensePage[ExpensePage.expense] === window.location.hash)) {
window.expense();
document.querySelectorAll('.expense')[0].classList.add('expense-active-page');
document.body.classList.add('expense-page');
} else if ((currentPage === ExpensePage[ExpensePage.about]) ||
('#/' + ExpensePage[ExpensePage.about] === window.location.hash)) {
document.querySelectorAll('.about')[0].classList.add('expense-active-page');
document.body.classList.add('about-page');
}
});
}
}).rules = { lang: ['dashboard', 'about', 'expense'] };
bypassed.add((request: string) => {
let samplePath: string[] = ['dashboard', 'about', 'expense'];
let hash: string = request.split(' ')[0];
if (samplePath.indexOf(hash) === -1) {
location.hash = '#/' + samplePath[0];
}
});
for (let i: number = 0; i < document.querySelectorAll('li').length; i++) {
document.querySelectorAll('li')[i].addEventListener('click', hash, false);
}
function hash(args: MouseEvent): void {
document.getElementById('sidebar-wrapper').classList.remove('close');
document.getElementById('overlay').classList.remove('dialog');
document.getElementById('overlay').style.background = 'none';
if (!isNullOrUndefined(document.querySelector('.expense-active-page'))) {
document.querySelector('.expense-active-page').classList.remove('expense-active-page');
}
(<HTMLElement>args.currentTarget).firstElementChild.classList.add('expense-active-page');
hasher.setHash((<HTMLElement>args.currentTarget).firstElementChild.getAttribute('href').split('/')[1]);
}
function routeDefault(): void {
addRoute('', () => {
window.location.href = '#/dashboard';
});
}
hasher.initialized.add((hashValue: string) => {
parse(hashValue);
});
hasher.changed.add((hashValue: string) => {
currentPage = hashValue;
parse(hashValue);
});
hasher.init();
window.onresize = (args: MouseEvent): void => {
handleResize();
if (!Browser.isDevice) {
if (document.getElementById('sidebar-wrapper') &&
document.getElementById('sidebar-wrapper').classList.contains('open')) {
document.getElementById('sidebar-wrapper').classList.remove('open');
}
if (document.getElementById('sidebar-wrapper') &&
document.getElementById('sidebar-wrapper').classList.contains('close')) {
document.getElementById('sidebar-wrapper').classList.remove('close');
}
if (document.getElementById('overlay') &&
document.getElementById('overlay').classList.contains('dialog')) {
document.getElementById('overlay').classList.remove('dialog');
}
if ((<HTMLElement>document.getElementsByClassName('filter')[0]) &&
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.contains('filter-open')) {
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.remove('filter-open');
}
if ((<HTMLElement>document.getElementsByClassName('filter')[0]) &&
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.contains('filter-close')) {
(<HTMLElement>document.getElementsByClassName('filter')[0]).classList.remove('filter-close');
}
}
};
document.getElementById('menu-toggle').onclick = (): void => {
menu = document.getElementById('sidebar-wrapper');
overlay = document.getElementById('overlay');
toggleMenu();
};
document.getElementById('filter-toggle').onclick = (): void => {
toggleFilterMenu();
};
document.getElementById('overlay').onclick = (): void => {
menu = document.getElementById('sidebar-wrapper');
overlay = document.getElementById('overlay');
handleOverlay();
};
(document.getElementsByClassName('nav-list')[0] as HTMLElement).onclick = (args: MouseEvent): void => {
if ((args.target as HTMLElement).nodeName === 'A') {
menu = document.getElementById('sidebar-wrapper');
overlay = document.getElementById('overlay');
handleOverlay();
}
};
function toggleMenu(): void {
if (menu.classList.contains('open')) {
removeToggleClass();
menu.classList.add('close');
disableOverlay();
} else if (menu.classList.contains('close')) {
removeToggleClass();
menu.classList.add('open');
enableOverlay();
} else {
menu.classList.add('open');
enableOverlay();
}
}
function removeToggleClass(): void {
menu.classList.remove('open');
menu.classList.remove('close');
}
function enableOverlay(): void {
overlay.classList.add('dialog');
overlay.style.background = '#383838';
}
function disableOverlay(): void {
overlay.classList.remove('dialog');
overlay.style.background = 'none';
}
export function toggleFilterMenu(): void {
menu = document.getElementById('sidebar-wrapper');
overlay = document.getElementById('overlay');
menu.style.zIndex = '10000';
let filterMenu: Element = document.getElementsByClassName('sidebar-wrapper-filter')[0];
if (filterMenu.classList.contains('filter-open')) {
filterMenu.classList.remove('filter-open');
filterMenu.classList.add('filter-close');
disableOverlay();
} else if (filterMenu.classList.contains('filter-close')) {
filterMenu.classList.remove('filter-close');
filterMenu.classList.add('filter-open');
enableOverlay();
} else {
filterMenu.classList.add('filter-open');
enableOverlay();
}
}
function handleOverlay(): void {
disableOverlay();
removeToggleClass();
removeFilterToggleClass();
}
function removeFilterToggleClass(): void {
menu.style.zIndex = '100001';
let filterMenu: Element = document.getElementsByClassName('sidebar-wrapper-filter')[0];
if (!isNullOrUndefined(filterMenu)) {
filterMenu.classList.remove('filter-open');
filterMenu.classList.remove('filter-close');
}
}
function handleResize(): void {
if (document.documentElement.offsetWidth > 1400) {
document.body.style.minHeight = 'auto';
document.body.style.minHeight = document.documentElement.offsetHeight + 'px';
}
}
export interface ResultData {
result: { [key: string]: Object[] }[];
}
export interface MyWindow extends Window {
expense: () => void;
about: () => void;
settings: () => void;
dashboard: () => void;
getDate: (value: Date) => string;
getCurrencyVal: (value: number) => string;
getNumberVal: (value: number) => string;
expenseDS: Object;
startDate: Date;
endDate: Date;
userName: string;
userFirstName: string;
}

Просмотреть файл

Просмотреть файл

@ -0,0 +1,30 @@
$accent: #ff4081;
$accent-font: #fff;
$primary: #3f51b5;
$primary-50: lighten($primary, 38%);
$primary-100: lighten($primary, 31%);
$primary-200: lighten($primary, 19%);
$primary-300: lighten($primary, 8%);
$primary-font: #fff;
$primary-50-font: #000;
$primary-100-font: #000;
$primary-200-font: #000;
$primary-300-font: #fff;
$grey-white: #fff;
$grey-black: #000;
$grey-50: #fafafa;
$grey-100: #f5f5f5;
$grey-200: #eee;
$grey-300: #e0e0e0;
$grey-400: #bdbdbd;
$grey-500: #9e9e9e;
$grey-600: #757575;
$grey-700: #616161;
$grey-800: #424242;
$grey-900: #212121;
$grey-dark: #303030;
$grey-light-font: #000;
$grey-dark-font: #fff;
$base-font: #000;
$error-font: #f44336;

Двоичные данные
styles/favicon.ico Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 6.4 KiB

15
styles/images/About.svg Normal file
Просмотреть файл

@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: #494949;
fill-rule: evenodd;
}
</style>
</defs>
<title>03 About</title>
<g>
<path class="cls-1" d="M13.19,17.81V9.45a1.19,1.19,0,0,0-2.39,0v8.37a1.19,1.19,0,0,0,2.39,0Z"/>
<path class="cls-1" d="M12,7.36h0a1.18,1.18,0,1,0-1.19-1.17A1.18,1.18,0,0,0,12,7.36Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 473 B

Просмотреть файл

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="1.37" y1="37.95" x2="39.99" y2="6.56" gradientTransform="translate(0.04 -1.02) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04af7a"/><stop offset="1" stop-color="#04cd93"/></linearGradient></defs><title>Available Cash</title><path class="cls-1" d="M31,19.5h0l0,0a2.18,2.18,0,0,1,1.48-.6,2.15,2.15,0,0,1,1.54.65l0,0a2.16,2.16,0,0,1,.6,1.5,2.26,2.26,0,0,1-.63,1.51,2.18,2.18,0,0,1-1.54.63,2.06,2.06,0,0,1-1.5-.64A2.13,2.13,0,0,1,30.4,21,2.05,2.05,0,0,1,31,19.5Zm1.49,5.62h0a4.09,4.09,0,0,0,3-6.92l0-.07a4.2,4.2,0,0,0-2.92-1.19,4,4,0,0,0-2.83,1.14l-.06,0a4.1,4.1,0,0,0,0,5.81A4.13,4.13,0,0,0,32.54,25.12Zm6.25-11.3-12.18,0A2.61,2.61,0,0,0,24,16.34l0,9.31a2.52,2.52,0,0,0,.75,1.81v0a2.72,2.72,0,0,0,1.83.77l12.18,0v4.23A2.45,2.45,0,0,1,38,34.3a2.48,2.48,0,0,1-1.77.75L5.73,35a2.59,2.59,0,0,1-2.54-2.55L3.25,9.48A2.57,2.57,0,0,1,4,7.68,2.52,2.52,0,0,1,5.8,7L36.28,7A2.53,2.53,0,0,1,38.8,9.57Zm0,12.49-12.18,0a.59.59,0,0,1-.46-.17.67.67,0,0,1-.19-.46l0-9.31a.66.66,0,0,1,.65-.63l12.18,0ZM40.39,5.52h0a5.66,5.66,0,0,0-4.06-1.7L5.81,3.73A5.77,5.77,0,0,0,0,9.47L0,32.41a5.79,5.79,0,0,0,1.65,4.05l0,0a5.78,5.78,0,0,0,4.07,1.68l30.48.07A5.69,5.69,0,0,0,42,32.52L42,9.57A5.83,5.83,0,0,0,40.39,5.52Z"/></svg>

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

12
styles/images/Home.svg Normal file
Просмотреть файл

@ -0,0 +1,12 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: #494949;
fill-rule: evenodd;
}
</style>
</defs>
<title>01 Home</title>
<path class="cls-1" d="M21.92,7.56a2.33,2.33,0,0,0-2.24-1.73,2.46,2.46,0,0,0-.61.08A2.35,2.35,0,0,0,17.66,7a2.27,2.27,0,0,0-.24,1.73L15.8,10.34a4.5,4.5,0,0,1-2.25,1.11h0a3.59,3.59,0,0,1-1-1.89,2.55,2.55,0,0,0-.06-.29,2.34,2.34,0,0,0-2.26-1.72A2.32,2.32,0,0,0,8,10.46l-2,2a4.38,4.38,0,0,1-2.22,1.12l-.09,0a2.33,2.33,0,0,0-1.42,1.08,2.38,2.38,0,0,0-.24,1.76,2.23,2.23,0,0,0,1,1.37l.06.05h0a2.4,2.4,0,0,0,1.16.3,2.28,2.28,0,0,0,.55-.07h.06A2.44,2.44,0,0,0,6.35,17a2.37,2.37,0,0,0,.23-1.73l2-2a3.63,3.63,0,0,1,2-1.07l.25-.05a4.51,4.51,0,0,1,1,2.1l0,.08a2.29,2.29,0,0,0,1.09,1.41,2.33,2.33,0,0,0,1.75.24l.09,0h0a2.28,2.28,0,0,0,1.33-1.06,2.25,2.25,0,0,0,.25-1.74L18,11.53a4.32,4.32,0,0,1,2.21-1.1l.07,0a2.35,2.35,0,0,0,1.41-1.08l0-.09A2.25,2.25,0,0,0,21.92,7.56ZM5.16,16.32h0a.93.93,0,0,1-.58.45h0a1,1,0,0,1-.71-.1h0a1,1,0,0,1-.42-.58.9.9,0,0,1,.09-.72,1,1,0,0,1,.59-.45h0a1,1,0,0,1,.71.08,1.06,1.06,0,0,1,.45.59A1,1,0,0,1,5.16,16.32Zm5.94-5.93a1,1,0,0,1-1.31.35,1,1,0,0,1-.45-.59,1,1,0,0,1,.1-.73h0A1,1,0,0,1,10,9a.93.93,0,0,1,.72.1.89.89,0,0,1,.45.59A1,1,0,0,1,11.1,10.38Zm3.83,3.83a.88.88,0,0,1-.58.44h0a1.06,1.06,0,0,1-.69-.07l-.06,0a1,1,0,0,1-.42-.58.94.94,0,0,1,.08-.69l0,0a.89.89,0,0,1,.57-.43h0a1,1,0,0,1,.72.1l0,0a1,1,0,0,1,.42.57A1,1,0,0,1,14.94,14.21Zm5.59-5.59,0,.06a1,1,0,0,1-.58.42A1,1,0,0,1,19.23,9l-.06,0a1.05,1.05,0,0,1-.42-.57h0a.92.92,0,0,1,.08-.69l0-.06a1,1,0,0,1,.57-.42.9.9,0,0,1,.69.08l.06,0a1,1,0,0,1,.44.58A1,1,0,0,1,20.52,8.61Z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.7 KiB

Просмотреть файл

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="1.01" y1="21.61" x2="41.01" y2="21.61" gradientTransform="translate(0.04 -0.66) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#666"/><stop offset="1" stop-color="#515151"/></linearGradient></defs><title>Overall Transactions</title><path class="cls-1" d="M21,37.94h0A16.92,16.92,0,1,1,37.94,21,17,17,0,0,1,21,37.94ZM21,1h0A20,20,0,1,0,41,21.05,20,20,0,0,0,21,1ZM17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19ZM33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/></svg>

После

Ширина:  |  Высота:  |  Размер: 1.2 KiB

Двоичные данные
styles/images/Profile-img-Desktop Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 18 KiB

Двоичные данные
styles/images/Profile-img-Mobile Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 8.2 KiB

11
styles/images/Search.svg Normal file
Просмотреть файл

@ -0,0 +1,11 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<title>Search</title>
<path class="cls-1" d="M15.76,14.26H15L14.69,14a6.51,6.51,0,1,0-.7.7l.27.28v.79l5,5,1.49-1.49Zm-6,0a4.5,4.5,0,1,1,4.5-4.5A4.49,4.49,0,0,1,9.76,14.26Z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 398 B

Просмотреть файл

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" y1="21.69" x2="42" y2="21.69" gradientTransform="translate(0.04 -0.77) rotate(0.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f14d52"/><stop offset="1" stop-color="#d64954"/></linearGradient></defs><title>Total Expenses</title><path class="cls-1" d="M22.49,32.9h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.89A1,1,0,0,0,22.49,32.9Zm2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.9A1,1,0,0,0,25.19,32.91Zm2.71,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.9A1,1,0,0,0,27.91,32.92Zm10.83,4.31h0a.39.39,0,0,1-.06.19l-27.45-.07a.41.41,0,0,1,0-.19l0-19.06V18h0l27.45.07a.44.44,0,0,1,.06.19ZM8,18.19l0,8.44L3.27,18.42s0-.13,0-.19h0l0,0L27,4.57a.28.28,0,0,1,.15.15l0,0L33,14.83l-21.7-.05A3.38,3.38,0,0,0,8,18.19ZM41.1,15.91h0a3.15,3.15,0,0,0-2.35-1.06H36.68L30,3.24a1.13,1.13,0,0,0-.19-.32A3.5,3.5,0,0,0,28,1.51a3.13,3.13,0,0,0-2.41.18,1,1,0,0,0-.28.14L1.67,15.41l-.07,0A3.17,3.17,0,0,0,.07,17.55v0A3.49,3.49,0,0,0,.48,20l7.46,13v4.08a3.56,3.56,0,0,0,.91,2.36,3.13,3.13,0,0,0,2.36,1.06l27.49.07A3.11,3.11,0,0,0,41,39.59,3.49,3.49,0,0,0,42,37.24l0-19A3.53,3.53,0,0,0,41.1,15.91Zm-4,17h0a1,1,0,0,0-1,1v1.79a1,1,0,1,0,1.93,0V33.93A1,1,0,0,0,37.08,32.94Zm-2.71,0h0a1,1,0,0,0-1,1V35.7a1,1,0,0,0,1.94,0V33.92A1,1,0,0,0,34.37,32.93Zm-2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1.93,0V33.91A1,1,0,0,0,31.66,32.92ZM16,32.89h0a1,1,0,0,0-1,1v1.79a1,1,0,1,0,1.93,0V33.88A1,1,0,0,0,16,32.89Zm2.7,0h0a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1.95,0V33.88A1,1,0,0,0,18.71,32.89Zm-4.39-3.78h4.27V24.86H14.33Zm5.28-6.19-6.21,0a1,1,0,0,0-1,1l0,6.2a1,1,0,0,0,1,1l6.21,0a1,1,0,0,0,1-1l0-6.2A1,1,0,0,0,19.59,22.92Zm-6.27,10a1,1,0,0,0-1,1v1.79a1,1,0,0,0,1,1,1,1,0,0,0,1-1V33.87A1,1,0,0,0,13.32,32.88Z"/></svg>

После

Ширина:  |  Высота:  |  Размер: 1.9 KiB

Просмотреть файл

@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
</style>
<linearGradient id="linear-gradient" x1="15.2" y1="21.88" x2="27.41" y2="21.88" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#497df2"/>
<stop offset="1" stop-color="#6890fb"/>
</linearGradient>
</defs>
<title>Total Income_1</title>
<path class="cls-1" d="M22.25,30.24v2.19H20.77V30.27a7.83,7.83,0,0,1-5.57-2.55l1.22-1.53a6.75,6.75,0,0,0,4.35,2.26V22.53c-2.48-.66-5.06-1.51-5.06-4.5,0-2.53,2.14-4.31,5.06-4.5V11.32h1.48v2.26A7.22,7.22,0,0,1,27,15.8l-1.22,1.48a5.76,5.76,0,0,0-3.58-1.85v5.28c2.5.71,5.16,1.63,5.16,4.82C27.41,27.71,26,30,22.25,30.24Zm-1.48-9.92v-5c-1.75.1-3,1.12-3,2.55S19.14,19.86,20.77,20.32Zm4.57,5.38c0-1.65-1.41-2.26-3.09-2.77v5.5C24.59,28.22,25.34,26.81,25.34,25.7Z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 992 B

Просмотреть файл

@ -0,0 +1,27 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1, .cls-2 {
fill-rule: evenodd;
}
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
</style>
<linearGradient id="linear-gradient" x1="8.98" y1="14.94" x2="24.62" y2="14.94" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#666"/>
<stop offset="1" stop-color="#515151"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="17.38" y1="27.06" x2="33.02" y2="27.06" xlink:href="#linear-gradient"/>
</defs>
<title>Overall Transactions_1</title>
<g>
<path class="cls-1" d="M17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19Z"/>
<path class="cls-2" d="M33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

16
styles/images/balance.svg Normal file
Просмотреть файл

@ -0,0 +1,16 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
fill: url(#linear-gradient);
}
</style>
<linearGradient id="linear-gradient" x1="5.76" y1="34.27" x2="35.49" y2="10.11" gradientTransform="translate(0.17 -1.02) rotate(0.14)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#04af7a"/>
<stop offset="1" stop-color="#04cd93"/>
</linearGradient>
</defs>
<title>Available Cash_1</title>
<path class="cls-1" d="M28.73,19.85h0l0,0a1.68,1.68,0,0,1,1.14-.46,1.65,1.65,0,0,1,1.18.5l0,0A1.66,1.66,0,0,1,31.55,21a1.74,1.74,0,0,1-.48,1.16,1.68,1.68,0,0,1-1.19.49,1.59,1.59,0,0,1-1.16-.49A1.64,1.64,0,0,1,28.23,21,1.58,1.58,0,0,1,28.73,19.85Zm1.15,4.32h0a3.14,3.14,0,0,0,2.28-5.33l0-.05a3.23,3.23,0,0,0-2.25-.92,3.07,3.07,0,0,0-2.18.88l0,0a3.15,3.15,0,0,0,0,4.47A3.18,3.18,0,0,0,29.88,24.17Zm4.81-8.7-9.37,0a2,2,0,0,0-2,2l0,7.17A1.94,1.94,0,0,0,23.88,26v0a2.09,2.09,0,0,0,1.41.59l9.37,0v3.25a1.89,1.89,0,0,1-.58,1.38,1.91,1.91,0,0,1-1.37.58L9.25,31.76a2,2,0,0,1-2-2l0-17.66a2,2,0,0,1,.59-1.38,1.94,1.94,0,0,1,1.38-.56l23.46.06A1.94,1.94,0,0,1,34.7,12.2Zm0,9.62-9.37,0a.46.46,0,0,1-.35-.13.52.52,0,0,1-.14-.35l0-7.17a.51.51,0,0,1,.5-.49l9.37,0Zm1.26-16h0a4.35,4.35,0,0,0-3.12-1.31L9.31,7.71a4.44,4.44,0,0,0-4.45,4.42l0,17.66a4.45,4.45,0,0,0,1.27,3.12l0,0a4.45,4.45,0,0,0,3.13,1.29l23.46.06a4.38,4.38,0,0,0,4.44-4.43l0-17.66A4.48,4.48,0,0,0,35.93,9.08Z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Просмотреть файл

@ -0,0 +1,7 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38">
<title>Wallet</title>
<g>
<path d="M5.34,33.24h24.2a3.13,3.13,0,0,0,3.12-3.12V26.57A2.73,2.73,0,0,0,35,23.88V19.2a2.73,2.73,0,0,0-2.34-2.69V13a3.13,3.13,0,0,0-3.12-3.12H26.3l-.66-4.41a.76.76,0,0,0-.35-.55.72.72,0,0,0-.62-.08L6.9,9.83H5.34A2.35,2.35,0,0,0,3,12.17V30.9A2.35,2.35,0,0,0,5.34,33.24Zm28.1-14v4.68A1.15,1.15,0,0,1,32.27,25H26.41a2.35,2.35,0,0,1-2.34-2.34V20.37A2.35,2.35,0,0,1,26.41,18h5.85A1.15,1.15,0,0,1,33.44,19.2ZM24.23,6.51l.51,3.32H12.6ZM4.56,12.17a.78.78,0,0,1,.78-.78h24.2A1.57,1.57,0,0,1,31.1,13v3.51H26.41a3.91,3.91,0,0,0-3.9,3.9v2.34a3.91,3.91,0,0,0,3.9,3.9H31.1v3.51a1.57,1.57,0,0,1-1.56,1.56H5.34a.78.78,0,0,1-.78-.78Z"/>
<path d="M27.59,19.2a2.34,2.34,0,1,0,2.34,2.34A2.35,2.35,0,0,0,27.59,19.2Zm0,3.12a.78.78,0,1,1,.78-.78A.78.78,0,0,1,27.59,22.32Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 922 B

Двоичные данные
styles/images/category/bills.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 855 B

Двоичные данные
styles/images/category/business.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1007 B

Двоичные данные
styles/images/category/clothing.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 911 B

Двоичные данные
styles/images/category/education.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.0 KiB

Двоичные данные
styles/images/category/entertainment.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 891 B

Двоичные данные
styles/images/category/extra.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
styles/images/category/food.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
styles/images/category/health.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.0 KiB

Двоичные данные
styles/images/category/house.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 879 B

Двоичные данные
styles/images/category/insurance.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 945 B

Двоичные данные
styles/images/category/interest.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.0 KiB

Двоичные данные
styles/images/category/miscellaneous.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 892 B

Двоичные данные
styles/images/category/personal.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 919 B

Двоичные данные
styles/images/category/rent.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.2 KiB

Двоичные данные
styles/images/category/salary.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.0 KiB

Двоичные данные
styles/images/category/shopping.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.3 KiB

Двоичные данные
styles/images/category/tax.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 976 B

Двоичные данные
styles/images/category/transport.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.0 KiB

Двоичные данные
styles/images/category/utilities.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
styles/images/exp-track.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.1 KiB

37
styles/images/expense.svg Normal file
Просмотреть файл

@ -0,0 +1,37 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
.cls-3 {
fill: url(#linear-gradient-3);
}
.cls-4 {
fill: url(#linear-gradient-4);
}
</style>
<linearGradient id="linear-gradient" x1="14.44" y1="26.57" x2="37.99" y2="7.42" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f14d52"/>
<stop offset="1" stop-color="#d64954"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="29.6" y1="21.49" x2="34.5" y2="17.51" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="4.59" y1="32.6" x2="18.08" y2="21.69" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-4" x1="7.84" y1="27.15" x2="14.84" y2="27.15" xlink:href="#linear-gradient"/>
</defs>
<title>Total Expenses_1</title>
<g>
<g>
<path class="cls-1" d="M38.08,7.56h0a4.35,4.35,0,0,0-3.12-1.31L11.46,6.18A4.44,4.44,0,0,0,7,10.6L7,17.4a10.58,10.58,0,0,1,2.48-.76v-6a2,2,0,0,1,.59-1.38,1.94,1.94,0,0,1,1.38-.56l23.46.06a1.94,1.94,0,0,1,1.94,1.95v3.27l-9.37,0a2,2,0,0,0-2,2l0,7.17A1.94,1.94,0,0,0,26,24.44v0a2.09,2.09,0,0,0,1.41.59l9.37,0v3.25a1.89,1.89,0,0,1-.58,1.38,1.91,1.91,0,0,1-1.37.58l-13.32,0a10.6,10.6,0,0,1-1.13,2.47l14.44,0a4.38,4.38,0,0,0,4.44-4.43l0-17.66A4.48,4.48,0,0,0,38.08,7.56Zm-1.26,16-9.37,0a.46.46,0,0,1-.35-.13.52.52,0,0,1-.14-.35l0-7.17a.51.51,0,0,1,.5-.49l9.37,0Z"/>
<path class="cls-2" d="M32,22.64a3.14,3.14,0,0,0,2.28-5.33l0-.05A3.23,3.23,0,0,0,32,16.34a3.07,3.07,0,0,0-2.18.88l0,0a3.15,3.15,0,0,0,0,4.47A3.18,3.18,0,0,0,32,22.64Zm-1.15-4.32,0,0A1.68,1.68,0,0,1,32,17.83a1.65,1.65,0,0,1,1.18.5l0,0a1.66,1.66,0,0,1,.46,1.16,1.74,1.74,0,0,1-.48,1.16,1.68,1.68,0,0,1-1.19.49,1.59,1.59,0,0,1-1.16-.49,1.64,1.64,0,0,1-.49-1.17A1.58,1.58,0,0,1,30.89,18.32Z"/>
</g>
<path class="cls-3" d="M11.34,21a6.17,6.17,0,1,1-6.17,6.17A6.18,6.18,0,0,1,11.34,21m0-2.5A8.67,8.67,0,1,0,20,27.15a8.67,8.67,0,0,0-8.67-8.67Z"/>
<rect class="cls-4" x="7.84" y="26.4" width="7" height="1.5"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 2.2 KiB

Двоичные данные
styles/images/fonts/Expense-Analysis-Sample.eot Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -0,0 +1,12 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="Expense-Analysis-Sample" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="Filters" d="M118.187 686.507h484.267v-37.547c0.233-10.744 8.882-19.393 19.605-19.626h141.675c10.744 0.233 19.393 8.882 19.626 19.605v37.569h122.88c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0h-123.307v37.12c-0.233 10.744-8.882 19.393-19.605 19.626h-141.675c-10.84 0-19.627-8.787-19.627-19.627v0-37.547h-483.84c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853v0zM640 770.133h101.547v-101.547h-101.547zM905.813 480.427h-484.267v37.547c0.003 0.128 0.005 0.28 0.005 0.431 0 10.691-8.548 19.386-19.183 19.622h-141.249c-0.001 0-0.003 0-0.005 0-10.84 0-19.627-8.787-19.627-19.627 0-0.15 0.002-0.3 0.005-0.449v0.022-37.547h-123.307c-1.122 0.136-2.421 0.213-3.738 0.213-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853c1.317 0 2.616 0.078 3.893 0.228l-0.155-0.015h123.307v-37.973c0-10.84 8.787-19.627 19.627-19.627h141.227c10.654 0.239 19.2 8.933 19.2 19.622 0 0.002 0 0.003 0 0.005v0 37.973h484.267c1.122-0.136 2.421-0.213 3.738-0.213 18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853c-1.317 0-2.616-0.078-3.893-0.228l0.155 0.015zM384 397.227h-103.253v101.547h103.253zM905.813 209.493h-303.36v37.547c0 0.001 0 0.003 0 0.005 0 10.604-8.596 19.2-19.2 19.2-0.15 0-0.3-0.002-0.449-0.005h-140.778c-0.001 0-0.003 0-0.005 0-10.689 0-19.383-8.546-19.622-19.178v-37.569h-304.213c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853h303.36v-37.12c0.233-10.744 8.882-19.393 19.605-19.626h140.822c10.84 0 19.627 8.787 19.627 19.627v0 37.547h303.787c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0zM564.48 124.16h-103.253v103.68h101.973z" />
<glyph unicode="&#xe901;" glyph-name="Mobile-Menu" d="M938.667 746.667h-853.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h853.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM796.587 490.667h-711.253c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h711.253c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM654.080 234.667h-568.747c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h568.747c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z" />
</font></defs></svg>

После

Ширина:  |  Высота:  |  Размер: 2.6 KiB

Двоичные данные
styles/images/fonts/Expense-Analysis-Sample.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
styles/images/fonts/Expense-Analysis-Sample.woff Normal file

Двоичный файл не отображается.

Двоичные данные
styles/images/fonts/controls.eot Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -0,0 +1,59 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="Controls" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="Accordion" d="M981.333 892.16h-938.667c-17.673 0-32-14.327-32-32v0-277.333c0-17.673 14.327-32 32-32v0h938.667c17.673 0 32 14.327 32 32v0 277.333c0 17.673-14.327 32-32 32v0zM949.333 614.827h-874.24v213.333h873.813zM893.44 757.76h-142.080l70.827-72.533 71.253 72.533zM100.267 762.88h423.68v-85.333h-423.68v85.333zM981.333 513.28h-938.667c-17.673 0-32-14.327-32-32v0-445.44c0-17.673 14.327-32 32-32v0h938.667c17.673 0 32 14.327 32 32v0 445.44c0 17.673-14.327 32-32 32v0zM949.333 67.84h-874.24v380.16h873.813zM822.187 377.173l-70.827-72.107h142.080l-71.253 72.107zM100.267 384h423.68v-85.333h-423.68v85.333zM100.267 217.173h793.173v-85.333h-793.173v85.333z" />
<glyph unicode="&#xe901;" glyph-name="API-Configuration" d="M760.747 428.8c1.584 11.494 2.513 24.815 2.56 38.344v0.056c-0.047 13.585-0.976 26.906-2.732 39.966l0.172-1.566 82.347 64.427c4.497 3.627 7.35 9.137 7.35 15.313 0 3.632-0.987 7.034-2.707 9.952l0.050-0.092-79.787 135.253c-3.46 5.895-9.767 9.79-16.984 9.79-2.483 0-4.858-0.461-7.044-1.302l0.134 0.045-95.573-39.253c-19.087 14.944-40.878 27.83-64.255 37.696l-1.878 0.704-14.933 103.68c-1.306 9.446-9.327 16.641-19.029 16.641-0.060 0-0.12 0-0.181-0.001h-156.151c-0.051 0-0.111 0.001-0.171 0.001-9.701 0-17.722-7.195-19.017-16.54l-0.011-0.101-14.933-103.68c-25.248-10.735-47.023-23.608-66.823-38.913l0.69 0.513-97.28 39.253c-2.102 0.861-4.543 1.361-7.099 1.361-7.188 0-13.453-3.95-16.744-9.798l-0.050-0.096-78.080-135.253c-1.751-2.84-2.788-6.281-2.788-9.964 0-6.172 2.912-11.664 7.438-15.176l0.044-0.033 82.347-64.427c-1.569-11.479-2.497-24.799-2.56-38.325v-0.075c0.063-13.601 0.991-26.921 2.733-39.985l-0.173 1.585-82.347-66.133c-4.497-3.627-7.35-9.137-7.35-15.313 0-3.632 0.987-7.034 2.707-9.952l-0.050 0.092 78.080-133.547c3.46-5.895 9.767-9.79 16.984-9.79 2.483 0 4.858 0.461 7.044 1.302l-0.134-0.045 97.28 39.253c19.087-14.944 40.878-27.83 64.255-37.696l1.878-0.704 14.933-103.68c1.306-9.446 9.327-16.641 19.029-16.641 0.060 0 0.12 0 0.181 0.001h156.578c0.051 0 0.111-0.001 0.171-0.001 9.701 0 17.722 7.195 19.017 16.54l0.011 0.101 14.933 103.68c25.083 10.767 46.714 23.634 66.384 38.906l-0.678-0.506 97.28-39.253c2.102-0.861 4.543-1.361 7.099-1.361 7.188 0 13.453 3.95 16.744 9.798l0.050 0.096 78.080 135.253c1.67 2.826 2.657 6.228 2.657 9.86 0 6.176-2.853 11.686-7.312 15.284l-0.038 0.029zM469.333 330.24c-75.641 0-136.96 61.319-136.96 136.96s61.319 136.96 136.96 136.96c75.641 0 136.96-61.319 136.96-136.96v0c0-75.641-61.319-136.96-136.96-136.96v0z" />
<glyph unicode="&#xe902;" glyph-name="API" d="M685.653 595.627l-113.493 110.933-302.080-295.68v-110.933h113.92zM775.253 680.96c5.757 5.318 9.35 12.906 9.35 21.333s-3.593 16.015-9.33 21.315l-0.020 0.018-70.827 70.4c-5.518 5.331-13.042 8.616-21.333 8.616s-15.816-3.285-21.342-8.624l0.009 0.008-58.88-58.027 113.493-110.933zM149.333 211.627h725.333v-118.187h-725.333v118.187z" />
<glyph unicode="&#xe903;" glyph-name="Autocomplete" d="M983.893 436.053h-943.787c-17.673 0-32 14.327-32 32v0 278.613c0 17.673 14.327 32 32 32v0h943.787c17.673 0 32-14.327 32-32v0-277.333c0.016-0.382 0.026-0.83 0.026-1.28 0-17.673-14.327-32-32-32-0.009 0-0.018 0-0.027 0h0.001zM72.107 500.053h879.787v213.333h-879.787zM87.893 648.107h341.333v-85.333h-341.333v85.333zM981.333 366.080v-226.133h-951.040v226.133h951.040zM1002.667 387.413h-993.707v-268.8h993.28v268.8z" />
<glyph unicode="&#xe904;" glyph-name="Button" d="M987.733 202.667h-951.467c-17.673 0-32 14.327-32 32v0 426.667c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-426.667c0-17.673-14.327-32-32-32v0zM68.267 266.667h887.467v362.667h-887.467zM206.507 551.68h610.56c23.564 0 42.667-19.103 42.667-42.667v-122.453c0-23.564-19.103-42.667-42.667-42.667h-610.56c-23.564 0-42.667 19.103-42.667 42.667v122.453c0 23.564 19.103 42.667 42.667 42.667z" />
<glyph unicode="&#xe905;" glyph-name="Calendar" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6zM339.2 505.6h150.613v-115.2h-150.613v115.2zM534.187 505.6h150.613v-115.2h-150.613v115.2zM339.2 323.413h150.613v-115.2h-150.613v115.2zM534.187 323.413h150.613v-115.2h-150.613v115.2z" />
<glyph unicode="&#xe906;" glyph-name="Chart" d="M822.187 758.187h-124.16c-17.202 0-31.147-13.945-31.147-31.147v-558.507c0-17.202 13.945-31.147 31.147-31.147v0h124.16c17.202 0 31.147 13.945 31.147 31.147v0 558.933c-0.241 17.017-14.092 30.72-31.144 30.72-0.001 0-0.002 0-0.003 0v0zM791.040 199.68h-61.867v496.64h61.867zM573.867 603.307h-123.733c-17.202 0-31.147-13.945-31.147-31.147v0-403.2c0-17.202 13.945-31.147 31.147-31.147v0h124.16c17.202 0 31.147 13.945 31.147 31.147v403.2c0 0.001 0 0.002 0 0.003 0 17.202-13.945 31.147-31.147 31.147-0.15 0-0.3-0.001-0.449-0.003h0.023zM542.72 200.107h-61.867v341.333h61.867zM325.973 448h-124.16c-17.202 0-31.147-13.945-31.147-31.147v0-248.32c0-17.202 13.945-31.147 31.147-31.147h124.16c17.202 0 31.147 13.945 31.147 31.147v0 248.32c0 17.202-13.945 31.147-31.147 31.147v0zM294.827 199.68h-62.293v186.453h62.293z" />
<glyph unicode="&#xe907;" glyph-name="Checkbox" d="M810.667 832h-597.333c-47.128 0-85.333-38.205-85.333-85.333v0-597.333c0-47.128 38.205-85.333 85.333-85.333v0h597.333c47.128 0 85.333 38.205 85.333 85.333v0 597.333c0 47.128-38.205 85.333-85.333 85.333v0zM753.92 570.88l-275.2-322.56c-10.829-12.773-26.866-20.844-44.789-20.907h-0.011c-17.934 0.063-33.971 8.133-44.729 20.821l-0.071 0.085-119.467 141.653c-8.601 10.19-13.828 23.471-13.828 37.973 0 32.615 26.44 59.054 59.054 59.054 18.113 0 34.321-8.155 45.154-20.993l0.073-0.088 73.813-87.893 229.973 269.653c10.918 12.743 27.029 20.767 45.013 20.767 32.677 0 59.167-26.49 59.167-59.167 0-14.693-5.355-28.134-14.221-38.48l0.067 0.080z" />
<glyph unicode="&#xe908;" glyph-name="Circular-Gauge" d="M512 733.013c-259.206 0-469.333-210.128-469.333-469.333v0c0-13.227 0-27.733 0-42.667 0-32.519 26.361-58.88 58.88-58.88v0h194.133v76.8h-177.493c0 8.533 0 16.213 0 23.893 0 216.79 175.743 392.533 392.533 392.533s392.533-175.743 392.533-392.533v0c0-7.68 0-15.36 0-24.32-17.067 0-42.667 0-74.24 0h-103.68v-76.8h194.56c0.644-0.025 1.4-0.039 2.159-0.039 32.754 0 59.307 26.552 59.307 59.307 0 0.614-0.009 1.226-0.028 1.835l0.002-0.089c0 14.933 0 28.16 0 42.667-0.97 258.471-210.725 467.627-469.33 467.627-0.001 0-0.002 0-0.003 0h-0.001zM384 538.027l76.8-346.027c1.945-8.259 5.185-15.533 9.536-21.996l-0.15 0.236c12.060-15.297 30.59-25.027 51.393-25.027 36.053 0 65.28 29.227 65.28 65.28 0 11.7-3.078 22.681-8.468 32.177l0.169-0.323z" />
<glyph unicode="&#xe909;" glyph-name="Code" d="M341.333 704l-256-256 256-256 59.733 59.733-196.267 196.267 196.267 196.267-59.733 59.733zM682.667 704l-59.733-59.733 196.267-196.267-196.267-196.267 59.733-59.733 256 256-256 256z" />
<glyph unicode="&#xe90a;" glyph-name="Combobox" d="M981.333 436.053h-938.667c-17.673 0-32 14.327-32 32v0 278.613c0.706 17.114 14.751 30.72 31.974 30.72 0.009 0 0.018 0 0.027 0h938.665c17.673 0 32-14.327 32-32v0-277.333c0-17.673-14.327-32-32-32v0zM75.093 500.053h873.813v213.333h-873.813zM822.187 570.453l-70.827 72.533h142.080l-71.253-72.533zM100.267 648.107h588.373v-85.333h-588.373v85.333zM983.893 366.080v-226.133h-950.613v226.133h950.613zM1005.227 387.413h-993.28v-268.8h993.28v268.8z" />
<glyph unicode="&#xe90b;" glyph-name="Context-menu" d="M241.493 572.587h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM241.493 424.96h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM241.493 277.333h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM957.44 797.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 635.733c0 17.673-14.327 32-32 32v0zM925.44 162.133h-826.88v571.733h826.88z" />
<glyph unicode="&#xe90c;" glyph-name="Copy-to-clipboard" d="M669.013 762.027h-418.987v-488.533h-69.547v488.533c0 0 0 0.001 0 0.001 0 38.495 31.085 69.73 69.547 69.972h418.987zM773.973 692.48v0c38.645 0 69.973-31.328 69.973-69.973v-488.533c0-38.645-31.328-69.973-69.973-69.973h-384c-38.645 0-69.973 31.328-69.973 69.973v488.533c0 0 0 0.001 0 0.001 0 38.495 31.085 69.73 69.547 69.972h384zM389.547 133.973h384v488.533h-384z" />
<glyph unicode="&#xe90d;" glyph-name="Currency" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM572.16 188.16v-81.493h-113.92v82.347c-74.965 9.152-133.342 69.431-139.483 144.499l-0.037 0.568h85.333c4.267-42.667 34.987-79.787 113.067-79.787s102.4 42.667 102.4 67.84c0 35.413-18.773 68.693-113.92 91.307-105.813 25.6-178.347 69.12-178.347 156.587-1.707 73.387 56.747 121.173 130.987 136.96v82.347h113.92v-85.333c68.668-13.986 119.884-73.091 121.597-144.458l0.003-0.182h-85.333c0 47.36-27.307 79.787-94.72 79.787s-102.4-29.013-102.4-69.973 27.733-59.307 113.92-81.493 178.347-59.307 178.347-166.827c1.28-75.947-57.173-118.613-131.413-132.693z" />
<glyph unicode="&#xe90e;" glyph-name="date-range-picker" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6v-422.4zM300.8 511.147h422.827v-105.813h-422.827v105.813zM300.8 340.48h211.2v-105.813h-211.2v105.813z" />
<glyph unicode="&#xe90f;" glyph-name="Datepicker" d="M780.8 755.2h-38.4v76.8h-76.8v-76.8h-307.2v76.8h-76.8v-76.8h-38.4c-42.318-0.241-76.559-34.482-76.8-76.777v-537.623c0.241-42.318 34.482-76.559 76.777-76.8h537.623c42.318 0.241 76.559 34.482 76.8 76.777v537.623c-0.241 42.318-34.482 76.559-76.777 76.8h-0.023zM780.8 140.8h-537.6v422.4h537.6v-422.4zM300.8 511.147h170.667v-170.667h-170.667v170.667z" />
<glyph unicode="&#xe910;" glyph-name="Demo" d="M810.667 832h-597.333c-47.128 0-85.333-38.205-85.333-85.333v0-597.333c0-47.128 38.205-85.333 85.333-85.333v0h597.333c47.128 0 85.333 38.205 85.333 85.333v0 597.333c0 47.128-38.205 85.333-85.333 85.333v0zM384 234.667h-85.333v298.667h85.333zM554.667 234.667h-85.333v426.667h85.333zM725.333 234.667h-85.333v170.667h85.333z" />
<glyph unicode="&#xe911;" glyph-name="Dialog" d="M938.667 853.333h-853.333c-11.782 0-21.333-9.551-21.333-21.333v0-768c0-11.782 9.551-21.333 21.333-21.333v0h853.333c11.782 0 21.333 9.551 21.333 21.333v0 768c0 11.782-9.551 21.333-21.333 21.333v0zM917.333 810.667v-356.267h-810.667v356.267zM106.667 433.067h394.667v-347.733h-394.667zM522.667 85.333v347.733h394.667v-347.733zM413.013 353.28c-2.87 2.944-6.875 4.769-11.307 4.769s-8.436-1.826-11.303-4.766l-0.003-0.003-134.4-157.867-49.067 60.16c-2.935 3.469-7.292 5.657-12.16 5.657-8.78 0-15.897-7.117-15.897-15.897 0-3.912 1.413-7.494 3.757-10.263l-0.019 0.023 62.72-74.667c2.988-3.408 7.349-5.547 12.211-5.547 0.057 0 0.114 0 0.171 0.001h-1.716c0.048-0.001 0.105-0.001 0.162-0.001 4.862 0 9.224 2.14 12.195 5.529l0.016 0.019 145.493 170.667c2.57 2.799 4.144 6.546 4.144 10.662 0 4.542-1.918 8.637-4.989 11.517l-0.009 0.008zM816.213 352.427c-2.917 2.841-6.907 4.593-11.307 4.593s-8.389-1.752-11.31-4.596l0.004 0.003-73.813-75.093-73.813 73.813c-2.976 4.139-7.778 6.803-13.203 6.803-8.954 0-16.213-7.259-16.213-16.213 0-5.424 2.664-10.227 6.755-13.17l0.048-0.033 73.813-73.813-74.24-72.96c-1.882-2.614-3.011-5.881-3.011-9.411 0-8.954 7.259-16.213 16.213-16.213 3.53 0 6.797 1.128 9.459 3.044l-0.048-0.033 74.24 75.52 73.813-73.813c2.976-4.139 7.778-6.803 13.203-6.803 8.954 0 16.213 7.259 16.213 16.213 0 5.424-2.664 10.227-6.755 13.17l-0.048 0.033-73.813 72.533 73.813 73.813c2.841 2.917 4.593 6.907 4.593 11.307s-1.752 8.389-4.596 11.31l0.003-0.004zM220.587 675.413h590.080c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-590.080c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM220.587 555.947h344.747c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-344.747c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0z" />
<glyph unicode="&#xe912;" glyph-name="Dropdown" d="M321.28 576l190.72-256 190.72 256h-381.44z" />
<glyph unicode="&#xe913;" glyph-name="Dropdownlist" d="M977.493 436.053h-930.987c-17.673 0-32 14.327-32 32v0 278.613c0 17.673 14.327 32 32 32v0h930.987c17.673 0 32-14.327 32-32v0-277.333c0.016-0.382 0.026-0.83 0.026-1.28 0-17.673-14.327-32-32-32-0.009 0-0.018 0-0.027 0h0.001zM78.507 500.053h866.987v213.333h-866.987zM987.307 366.080v-226.133h-950.613v226.133h950.613zM1008.64 387.413h-993.28v-268.8h993.28v268.8zM819.2 570.453l-71.253 72.533h142.080l-70.827-72.533z" />
<glyph unicode="&#xe914;" glyph-name="Editinplunkr" d="M192 261.12v-133.12h133.12l393.387 393.387-133.12 133.12-393.387-393.387zM821.76 624.213c6.36 6.4 10.292 15.221 10.292 24.96s-3.931 18.56-10.293 24.962l-85.331 85.331c-6.4 6.36-15.221 10.292-24.96 10.292s-18.56-3.931-24.962-10.293l0.002 0.002-63.147-66.987 133.547-133.547z" />
<glyph unicode="&#xe915;" glyph-name="Form-validator" d="M621.653 759.040h-581.12c-17.673 0-32-14.327-32-32v0-213.333c0-17.673 14.327-32 32-32v0h581.12c17.673 0 32 14.327 32 32v0 213.333c0 17.673-14.327 32-32 32v0zM589.653 545.707h-517.12v149.333h517.12zM621.653 414.293h-581.12c-17.673 0-32-14.327-32-32v0-213.333c0-17.673 14.327-32 32-32v0h581.12c17.673 0 32 14.327 32 32v0 213.333c0 17.673-14.327 32-32 32v0zM589.653 200.96h-517.12v149.333h517.12zM814.507 512.427c5.855-6.995 14.56-11.435 24.306-11.52h0.014c0.028 0 0.061 0 0.094 0 9.663 0 18.325 4.283 24.193 11.054l0.034 0.040 148.907 174.933c4.987 5.663 8.031 13.143 8.031 21.333 0 17.867-14.484 32.351-32.351 32.351-9.676 0-18.361-4.248-24.289-10.982l-0.031-0.036-124.16-147.2-40.107 47.787c-5.993 6.865-14.759 11.178-24.533 11.178-17.956 0-32.511-14.556-32.511-32.511 0-8.182 3.022-15.657 8.011-21.372l-0.033 0.038zM926.293 277.333l85.333 85.333c7.537 5.911 12.335 15.017 12.335 25.244 0 17.673-14.327 32-32 32-11.196 0-21.048-5.749-26.767-14.457l-0.075-0.121-85.333-85.333-85.333 85.333c-5.699 5.321-13.376 8.588-21.815 8.588-17.673 0-32-14.327-32-32 0-8.44 3.267-16.116 8.606-21.834l-0.017 0.019 85.333-85.333-85.333-85.333c-6.274-5.858-10.185-14.178-10.185-23.412 0-17.673 14.327-32 32-32 9.234 0 17.554 3.911 23.394 10.166l0.017 0.019 85.333 85.333 85.333-85.333c5.882-5.576 13.847-9.004 22.613-9.004 18.169 0 32.898 14.729 32.898 32.898 0 9.403-3.945 17.884-10.269 23.879l-0.015 0.014z" />
<glyph unicode="&#xe916;" glyph-name="Grid" d="M170.667 789.333v-682.667h682.667v682.667zM472.747 168.533h-232.533v128h232.533zM472.747 352.427h-232.533v128h232.533zM472.747 536.32h-232.533v128h232.533zM776.96 168.533h-239.36v128h239.36zM776.96 352.427h-239.36v128h239.36zM776.96 536.32h-239.36v128h239.36z" />
<glyph unicode="&#xe917;" glyph-name="Hamburger" d="M128 277.333h768v-85.333h-768v85.333zM128 490.667h768v-85.333h-768v85.333zM128 704h768v-85.333h-768v85.333z" />
<glyph unicode="&#xe918;" glyph-name="Home" d="M433.92 115.627v234.667h156.16v-234.667h195.84v312.747h117.333l-391.253 352-391.253-352h117.333v-312.747h195.84z" />
<glyph unicode="&#xe919;" glyph-name="Linear-gauge" d="M682.667 326.4l-160 298.667h320l-160-298.667zM981.333 526.933h-167.253l-45.653-85.333h170.667v-128h-239.36l-17.067-32-17.067 32h-580.267v128h512l-45.653 85.333h-509.013c-23.564 0-42.667-19.103-42.667-42.667v0-213.333c0-23.564 19.103-42.667 42.667-42.667v0h938.667c23.564 0 42.667 19.103 42.667 42.667v0 213.333c0 23.564-19.103 42.667-42.667 42.667v0z" />
<glyph unicode="&#xe91a;" glyph-name="Listview" d="M418.56 789.333v-60.587h498.773v60.587zM106.667 853.333v-186.88h186.88v186.88zM170.667 789.333v-60.587h60.587v60.587zM106.667 541.44v-186.88h186.88v186.88zM170.667 479.147v-62.293h60.587v62.293zM420.267 479.147v-62.293h497.067v62.293zM106.667 229.547v-186.88h186.88v186.88zM170.667 167.253v-60.587h60.587v60.587zM420.267 167.253v-60.587h497.067v60.587z" />
<glyph unicode="&#xe91b;" glyph-name="Localization" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM807.68 618.667h-125.013c-14.76 57.735-34.919 108.279-60.616 155.367l1.736-3.474c78.598-27.913 142.316-81.406 182.594-150.278l0.873-1.615zM512 789.333c34.171-48.97 61.956-105.654 80.383-166.409l1.11-4.258h-162.987c19.56 65.011 47.344 121.693 82.794 172.641l-1.3-1.974zM181.76 362.667c-7.019 25.601-11.053 54.996-11.053 85.333s4.033 59.733 11.593 87.679l-0.54-2.345h144.213c-3.525-25.38-5.687-54.959-5.971-84.987l-0.003-0.347c0.287-30.374 2.449-59.953 6.376-88.971l-0.403 3.638zM216.747 277.333h124.587c14.832-57.754 34.986-108.292 60.631-155.409l-1.751 3.516c-78.598 27.913-142.316 81.406-182.594 150.278l-0.873 1.615zM341.333 618.667h-124.587c41.447 70.693 105.637 124.242 182.355 151.162l2.392 0.731c-24.319-43.604-44.888-94.108-59.094-147.212l-1.066-4.681zM512 106.667c-34.149 48.974-61.933 105.656-80.38 166.4l-1.114 4.266h162.987c-19.537-65.012-47.323-121.696-82.789-172.633l1.296 1.966zM611.84 362.667h-199.68c-4.018 25.4-6.488 54.931-6.824 84.974l-0.003 0.36c0.321 30.385 2.791 59.917 7.267 88.785l-0.441-3.452h199.68c4.014-25.397 6.483-54.927 6.823-84.969l0.003-0.364c-0.363-30.424-2.832-59.954-7.269-88.834l0.443 3.501zM622.507 125.44c24.387 43.616 44.96 94.127 59.11 147.257l1.050 4.636h128c-42.232-71.252-107.687-124.949-185.752-151.191l-2.408-0.702zM698.027 362.667c3.525 25.38 5.687 54.959 5.971 84.987l0.003 0.347c-0.287 30.374-2.449 59.953-6.376 88.971l0.403-3.638h144.213c7.047-25.599 11.097-54.993 11.097-85.333s-4.050-59.734-11.638-87.671l0.541 2.338z" />
<glyph unicode="&#xe91c;" glyph-name="Maskedtextbox" d="M987.733 481.707h-951.467c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM68.267 545.707h887.467v149.333h-887.467zM987.733 136.96h-951.467c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM68.267 200.96h887.467v149.333h-887.467zM224.853 599.040h-89.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h89.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM857.6 599.040h-138.667c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h138.667c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM626.773 599.040h-313.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h313.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM224.853 254.293h-89.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h89.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM857.6 254.293h-138.667c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h138.667c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0zM626.773 254.293h-313.173c-11.782 0-21.333 9.551-21.333 21.333s9.551 21.333 21.333 21.333v0h313.173c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.333-21.333-21.333v0z" />
<glyph unicode="&#xe91d;" glyph-name="Multiselect" d="M986.88 695.893h-949.76c-17.673 0-32-14.327-32-32v0-431.787c0-17.673 14.327-32 32-32v0h949.76c17.673 0 32 14.327 32 32v0 431.787c0 17.673-14.327 32-32 32v0zM954.88 264.533h-885.76v367.36h885.76zM127.147 566.613h185.173v-85.333h-185.173v85.333zM127.147 413.44h413.44v-85.333h-413.44v85.333zM581.547 413.44h308.48v-85.333h-308.48v85.333zM360.533 566.613h221.013v-85.333h-221.013v85.333zM635.307 566.613h255.147v-85.333h-255.147v85.333z" />
<glyph unicode="&#xe91e;" glyph-name="Next" d="M298.667 186.88l263.68 261.12-263.68 261.12 81.067 80.213 345.6-341.333-345.6-341.333-81.067 80.213z" />
<glyph unicode="&#xe91f;" glyph-name="Numeric-Textbox" d="M987.733 160h-951.467c-17.673 0-32 14.327-32 32v0 512c0 17.673 14.327 32 32 32v0h951.467c17.673 0 32-14.327 32-32v0-512c0-17.673-14.327-32-32-32v0zM68.267 224h887.467v448h-887.467zM803.413 276.053l-96 115.627h191.573l-95.573-115.627zM801.28 619.947l96-115.627h-191.573l95.573 115.627zM132.693 512h381.867v-128h-381.867v128z" />
<glyph unicode="&#xe920;" glyph-name="Palette" d="M512 832c-212.077 0-384-171.923-384-384s171.923-384 384-384v0c0.013 0 0.027 0 0.042 0 35.346 0 64 28.654 64 64 0 16.623-6.337 31.765-16.727 43.143l0.045-0.050c-10.202 11.235-16.448 26.223-16.448 42.67 0 35.111 28.463 63.573 63.573 63.573 0.232 0 0.464-0.001 0.696-0.004h75.485c117.821 0 213.333 95.513 213.333 213.333v0c0 188.587-170.667 341.333-384 341.333zM277.333 448c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM405.333 618.667c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM618.667 618.667c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM746.667 448c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0z" />
<glyph unicode="&#xe921;" glyph-name="Popout" d="M777.387 182.613h-530.773v530.773h265.387v75.947h-265.387c-41.944 0-75.947-34.002-75.947-75.947v0-530.773c0-41.944 34.002-75.947 75.947-75.947v0h530.773c41.944 0 75.947 34.002 75.947 75.947v0 265.387h-75.947zM587.947 789.333v-75.947h136.107l-372.907-372.907 53.333-53.333 372.907 372.907v-136.107h75.947v265.387h-265.387z" />
<glyph unicode="&#xe922;" glyph-name="Popup" d="M957.44 797.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 635.733c0 17.673-14.327 32-32 32v0zM925.44 162.133h-826.88v571.733h826.88zM597.333 448c3.867-3.898 9.225-6.31 15.147-6.31s11.28 2.413 15.145 6.309l80.641 80.641 78.933-80.64c3.876-3.876 9.232-6.274 15.147-6.274 11.83 0 21.421 9.59 21.421 21.421 0 5.915-2.398 11.27-6.274 15.147v0l-81.067 78.507 80.64 80.64c3.876 3.876 6.274 9.232 6.274 15.147 0 11.83-9.59 21.421-21.421 21.421-5.915 0-11.27-2.398-15.147-6.274v0l-80.213-80.64-80.64 80.64c-3.876 3.876-9.232 6.274-15.147 6.274-11.83 0-21.421-9.59-21.421-21.421 0-5.915 2.398-11.27 6.274-15.147l80.64-80.64-78.933-80.64c-3.295-3.736-5.306-8.673-5.306-14.080s2.011-10.344 5.326-14.103l-0.020 0.023z" />
<glyph unicode="&#xe923;" glyph-name="Previous" d="M725.333 186.88l-263.68 261.12 263.68 261.12-81.067 80.213-345.6-341.333 345.6-341.333 81.067 80.213z" />
<glyph unicode="&#xe924;" glyph-name="Radio-button" d="M512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM512 106.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM723.627 448c0-116.878-94.748-211.627-211.627-211.627s-211.627 94.748-211.627 211.627c0 116.878 94.748 211.627 211.627 211.627s211.627-94.748 211.627-211.627z" />
<glyph unicode="&#xe925;" glyph-name="Responsive" d="M170.667 704h768v85.333h-768c-47.128 0-85.333-38.205-85.333-85.333v0-469.333h-85.333v-128h597.333v128h-426.667zM981.333 618.667h-256c-23.564 0-42.667-19.103-42.667-42.667v0-426.667c0-23.564 19.103-42.667 42.667-42.667v0h256c23.564 0 42.667 19.103 42.667 42.667v0 426.667c0 23.564-19.103 42.667-42.667 42.667v0zM938.667 234.667h-170.667v298.667h170.667z" />
<glyph unicode="&#xe926;" glyph-name="Search" d="M672.427 351.573h-32.427l-13.227 11.093c41.633 48.289 66.989 111.635 66.989 180.904 0 153.403-124.357 277.76-277.76 277.76s-277.76-124.357-277.76-277.76c0-153.403 124.357-277.76 277.76-277.76 69.269 0 132.615 25.356 181.264 67.293l-0.36-0.304 11.52-11.947v-33.707l213.333-213.333 63.573 63.573zM416.427 351.573c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192v0c0-0.127 0-0.277 0-0.427 0-105.803-85.77-191.573-191.573-191.573-0.15 0-0.3 0-0.45 0.001h0.023z" />
<glyph unicode="&#xe927;" glyph-name="Selection" d="M387.84 299.093l-162.987 160.427-54.187-53.333 217.173-214.187 465.493 458.667-54.187 53.333-411.307-404.907z" />
<glyph unicode="&#xe928;" glyph-name="Settings-Preferences" d="M554.667 661.333c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667zM981.333 618.667c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-384c2.741-12.827 4.31-27.563 4.31-42.667s-1.569-29.84-4.554-44.056l0.244 1.389zM42.667 618.667h128c-2.686 12.827-4.224 27.567-4.224 42.667s1.538 29.839 4.466 44.072l-0.242-1.406h-128c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0zM981.333 277.333h-128c2.686-12.827 4.224-27.567 4.224-42.667s-1.538-29.839-4.466-44.072l0.242 1.406h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM42.667 277.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h384c-2.741 12.827-4.31 27.563-4.31 42.667s1.569 29.84 4.554 44.056l-0.244-1.389zM810.667 234.667c0-94.257-76.41-170.667-170.667-170.667s-170.667 76.41-170.667 170.667c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667z" />
<glyph unicode="&#xe929;" glyph-name="Slider" d="M653.653 618.667c-0.137 0-0.299 0.001-0.462 0.001-92.371 0-167.253-74.882-167.253-167.253 0-1.2 0.013-2.398 0.038-3.592l-0.003 0.178c2.143-94.428 78.974-170.213 173.609-170.667h0.044c0.137 0 0.299-0.001 0.462-0.001 92.371 0 167.253 74.882 167.253 167.253 0 1.2-0.013 2.398-0.038 3.592l0.003-0.178c-2.143 94.428-78.974 170.213-173.609 170.667h-0.044zM971.947 490.667h-106.667c2.792-12.826 4.391-27.56 4.391-42.667s-1.599-29.841-4.637-44.041l0.246 1.374h105.813c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM447.147 490.667h-395.093c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h396.373c-2.78 12.826-4.373 27.56-4.373 42.667s1.592 29.84 4.618 44.044l-0.246-1.377z" />
<glyph unicode="&#xe92a;" glyph-name="Tab" d="M163.84 435.627c0-11.782 9.551-21.333 21.333-21.333v0h615.253c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-615.253c-11.782 0-21.333-9.551-21.333-21.333v0zM697.173 309.333h-512c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0h512c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0zM957.44 614.827v119.040c0 23.564-19.103 42.667-42.667 42.667v0h-170.667c-23.564 0-42.667-19.103-42.667-42.667v0-118.613h-47.787v118.613c0 23.564-19.103 42.667-42.667 42.667v0h-170.667c-23.564 0-42.667-19.103-42.667-42.667v0-118.613h-61.867v139.52c0 17.673-14.327 32-32 32v0h-237.227c-17.673 0-32-14.327-32-32v0-635.307c0-17.673 14.327-32 32-32v0h890.88c17.673 0 32 14.327 32 32v0 463.36c0 17.673-14.327 32-32 32v0zM925.44 149.333h-826.88v573.867h174.080v-139.52c0-17.673 14.327-32 32-32v0h620.8z" />
<glyph unicode="&#xe92b;" glyph-name="Textboxes" d="M989.44 481.707h-954.88c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h954.88c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM66.56 545.707h890.88v149.333h-890.88zM989.44 136.96h-954.88c-17.673 0-32 14.327-32 32v0 213.333c0 17.673 14.327 32 32 32v0h954.88c17.673 0 32-14.327 32-32v0-213.333c0-17.673-14.327-32-32-32v0zM66.56 200.96h890.88v149.333h-890.88zM101.973 307.627h264.107v-64h-264.107v64zM101.973 652.373h524.8v-64h-524.8v64z" />
<glyph unicode="&#xe92c;" glyph-name="Timepicker" d="M657.067 354.987l-114.773 64.853v236.8c0 17.202-13.945 31.147-31.147 31.147s-31.147-13.945-31.147-31.147v0-256c-0.030-0.51-0.047-1.106-0.047-1.707s0.017-1.197 0.051-1.789l-0.004 0.082v-18.773h4.693l130.56-73.813c4.42-2.531 9.716-4.024 15.36-4.024 17.303 0 31.33 14.027 31.33 31.33 0 11.659-6.368 21.83-15.816 27.226l-0.154 0.081zM512 874.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0zM539.307 90.453v62.293h-54.613v-62.293c-168.46 13.295-303.456 140.995-327.866 304.806l-0.241 1.968h64.427v54.187h-67.84c2.175 186.935 146.792 339.412 330.26 354.052l1.26 0.081v-62.293h54.187v62.293c184.728-14.721 329.345-167.198 331.518-353.917l0.002-0.216h-64v-54.187h61.013c-24.65-165.779-159.647-293.479-326.856-306.694l-1.251-0.079z" />
<glyph unicode="&#xe92d;" glyph-name="Toolbar" d="M983.893 778.667h-943.787c-17.673 0-32-14.327-32-32v0-597.333c0-17.673 14.327-32 32-32v0h943.787c17.673 0 32 14.327 32 32v0 597.333c0 17.673-14.327 32-32 32v0zM951.893 181.333h-879.787v533.333h879.787zM165.547 666.88h170.667v-170.667h-170.667v170.667zM426.667 666.88h170.667v-170.667h-170.667v170.667zM688.213 666.88h170.667v-170.667h-170.667v170.667zM165.547 404.48h170.667v-170.667h-170.667v170.667zM426.667 404.48h170.667v-170.667h-170.667v170.667zM688.213 404.48h170.667v-170.667h-170.667v170.667z" />
<glyph unicode="&#xe92e;" glyph-name="Tooltip" d="M252.16 641.707h519.68c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-519.68c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM252.16 513.707h519.68c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-519.68c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM252.16 385.707h302.507c11.782 0 21.333 9.551 21.333 21.333s-9.551 21.333-21.333 21.333v0h-302.507c-11.782 0-21.333-9.551-21.333-21.333s9.551-21.333 21.333-21.333v0zM957.44 861.867h-890.88c-17.673 0-32-14.327-32-32v0-635.733c0-17.673 14.327-32 32-32v0h294.827l128-119.467c5.635-5.057 13.123-8.149 21.333-8.149s15.698 3.092 21.363 8.175l-0.030-0.026 125.013 119.040h298.667c17.673 0 32 14.327 32 32v0 636.16c0 0.014 0 0.030 0 0.046 0 17.073-13.37 31.023-30.211 31.951l-0.082 0.004zM925.44 226.133h-279.467c-8.622-0.006-16.445-3.42-22.196-8.969l0.010 0.009-111.787-107.093-116.053 107.52c-5.692 5.288-13.345 8.533-21.756 8.533-0.001 0-0.003 0-0.004 0h-275.626v571.733h826.88z" />
<glyph unicode="&#xe92f;" glyph-name="Tree-Down" d="M768 546.133l-256-256.427-256 256.427 60.16 60.16 195.84-195.84 195.84 195.84 60.16-60.16z" />
<glyph unicode="&#xe930;" glyph-name="Treeview" d="M640 320v-64h-128v128h64v256h-256v-64h-128v128h64v192h-192v-192h64v-192h192v-128h128v-192h192v-192h320v320h-320z" />
</font></defs></svg>

После

Ширина:  |  Высота:  |  Размер: 30 KiB

Двоичные данные
styles/images/fonts/controls.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
styles/images/fonts/controls.woff Normal file

Двоичный файл не отображается.

Двоичные данные
styles/images/fonts/icons.eot Normal file

Двоичный файл не отображается.

Просмотреть файл

@ -0,0 +1,13 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icons" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xa999;" glyph-name="Search" d="M672.427 351.573h-32.427l-13.227 11.093c41.633 48.289 66.989 111.635 66.989 180.904 0 153.403-124.357 277.76-277.76 277.76s-277.76-124.357-277.76-277.76c0-153.403 124.357-277.76 277.76-277.76 69.269 0 132.615 25.356 181.264 67.293l-0.36-0.304 11.52-11.947v-33.707l213.333-213.333 63.573 63.573zM416.427 351.573c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192v0c0-0.127 0-0.277 0-0.427 0-105.803-85.77-191.573-191.573-191.573-0.15 0-0.3 0-0.45 0.001h0.023z" />
<glyph unicode="&#xe901;" glyph-name="Filters" d="M118.187 686.507h484.267v-37.547c0.233-10.744 8.882-19.393 19.605-19.626h141.675c10.744 0.233 19.393 8.882 19.626 19.605v37.569h122.88c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0h-123.307v37.12c-0.233 10.744-8.882 19.393-19.605 19.626h-141.675c-10.84 0-19.627-8.787-19.627-19.627v0-37.547h-483.84c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853v0zM640 770.133h101.547v-101.547h-101.547zM905.813 480.427h-484.267v37.547c0.003 0.128 0.005 0.28 0.005 0.431 0 10.691-8.548 19.386-19.183 19.622h-141.249c-0.001 0-0.003 0-0.005 0-10.84 0-19.627-8.787-19.627-19.627 0-0.15 0.002-0.3 0.005-0.449v0.022-37.547h-123.307c-1.122 0.136-2.421 0.213-3.738 0.213-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853c1.317 0 2.616 0.078 3.893 0.228l-0.155-0.015h123.307v-37.973c0-10.84 8.787-19.627 19.627-19.627h141.227c10.654 0.239 19.2 8.933 19.2 19.622 0 0.002 0 0.003 0 0.005v0 37.973h484.267c1.122-0.136 2.421-0.213 3.738-0.213 18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853c-1.317 0-2.616-0.078-3.893-0.228l0.155 0.015zM384 397.227h-103.253v101.547h103.253zM905.813 209.493h-303.36v37.547c0 0.001 0 0.003 0 0.005 0 10.604-8.596 19.2-19.2 19.2-0.15 0-0.3-0.002-0.449-0.005h-140.778c-0.001 0-0.003 0-0.005 0-10.689 0-19.383-8.546-19.622-19.178v-37.569h-304.213c-18.144 0-32.853-14.709-32.853-32.853s14.709-32.853 32.853-32.853h303.36v-37.12c0.233-10.744 8.882-19.393 19.605-19.626h140.822c10.84 0 19.627 8.787 19.627 19.627v0 37.547h303.787c18.144 0 32.853 14.709 32.853 32.853s-14.709 32.853-32.853 32.853v0zM564.48 124.16h-103.253v103.68h101.973z" />
<glyph unicode="&#xe902;" glyph-name="Mobile-Menu" d="M938.667 746.667h-853.333c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h853.333c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM796.587 490.667h-711.253c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h711.253c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0zM654.080 234.667h-568.747c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h568.747c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z" />
</font></defs></svg>

После

Ширина:  |  Высота:  |  Размер: 3.1 KiB

Двоичные данные
styles/images/fonts/icons.ttf Normal file

Двоичный файл не отображается.

Двоичные данные
styles/images/fonts/icons.woff Normal file

Двоичный файл не отображается.

15
styles/images/i.svg Normal file
Просмотреть файл

@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
</style>
<linearGradient id="linear-gradient" x1="15.2" y1="21.88" x2="27.41" y2="21.88" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#497df2"/>
<stop offset="1" stop-color="#6890fb"/>
</linearGradient>
</defs>
<title>Total Income_1</title>
<path class="cls-1" d="M22.25,30.24v2.19H20.77V30.27a7.83,7.83,0,0,1-5.57-2.55l1.22-1.53a6.75,6.75,0,0,0,4.35,2.26V22.53c-2.48-.66-5.06-1.51-5.06-4.5,0-2.53,2.14-4.31,5.06-4.5V11.32h1.48v2.26A7.22,7.22,0,0,1,27,15.8l-1.22,1.48a5.76,5.76,0,0,0-3.58-1.85v5.28c2.5.71,5.16,1.63,5.16,4.82C27.41,27.71,26,30,22.25,30.24Zm-1.48-9.92v-5c-1.75.1-3,1.12-3,2.55S19.14,19.86,20.77,20.32Zm4.57,5.38c0-1.65-1.41-2.26-3.09-2.77v5.5C24.59,28.22,25.34,26.81,25.34,25.7Z"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 992 B

39
styles/images/income.svg Normal file
Просмотреть файл

@ -0,0 +1,39 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
.cls-3 {
fill: url(#linear-gradient-3);
}
.cls-4 {
fill: url(#linear-gradient-4);
}
</style>
<linearGradient id="linear-gradient" x1="18.23" y1="15.16" x2="23.12" y2="15.16" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#497df2"/>
<stop offset="1" stop-color="#6890fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="9.77" y1="15.16" x2="14.66" y2="15.16" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="14" y1="10.76" x2="18.89" y2="10.76" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-4" x1="4.84" y1="25.96" x2="38.76" y2="25.96" xlink:href="#linear-gradient"/>
</defs>
<title>Total Income_1</title>
<g>
<g>
<g>
<path class="cls-1" d="M21.68,13.72a1.44,1.44,0,1,1,0,2.88h-2a1.44,1.44,0,1,1,0-2.88Z"/>
<path class="cls-2" d="M13.22,13.72a1.44,1.44,0,0,1,0,2.88h-2a1.44,1.44,0,0,1,0-2.88Z"/>
</g>
<path class="cls-3" d="M17.45,9.33a1.44,1.44,0,1,1,0,2.88h-2a1.44,1.44,0,0,1,0-2.88Z"/>
</g>
<path class="cls-4" d="M5.2,22.81a2.83,2.83,0,0,0,1.51,4c15.34,5.82,15.55,5.82,15.72,5.82s.34,0,13.34-2.46c2.36-.37,3.19-3.61,3-6.66-.16-2.08-.88-4.31-2.42-4.31H24.61a2.82,2.82,0,0,0-2.78,3.29,2.91,2.91,0,0,0,2.9,2.36h1.51l-3.87,1.56L8.73,21.57a3,3,0,0,0-1-.18A2.83,2.83,0,0,0,5.2,22.81Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.7 KiB

Двоичные данные
styles/images/no-records.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.1 KiB

15
styles/images/t.svg Normal file
Просмотреть файл

@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
<defs>
<style>
.cls-1 {
fill: #34d3eb;
fill-rule: evenodd;
}
</style>
</defs>
<title>Overall Transactions_1</title>
<g>
<path class="cls-1" d="M17.23,19.46h0l-3-3,8.86,0a1.54,1.54,0,0,0,0-3.08l-8.87,0,3-3a1.53,1.53,0,1,0-2.14-2.19L9.52,13.75v0l-.06.07-.07.06,0,0L9.3,14l0,0a.72.72,0,0,0-.1.18l-.06.12,0,0L9,14.49v0l0,.13v.13l0,.11v.06L9,15v.16l0,.11v0l.06.12,0,.07.06.11a.42.42,0,0,0,.1.17l0,.06.06,0,0,0,.07.07L15,21.65a1.55,1.55,0,1,0,2.2-2.19Z"/>
<path class="cls-1" d="M33,27v-.15l0-.15v0a1.36,1.36,0,0,0-.08-.19l-.06-.11a.57.57,0,0,0-.1-.18l0,0,0-.06-.1-.09-.06-.06,0,0-5.53-5.56a1.54,1.54,0,0,0-2.17,2.18l3,3-8.86,0a1.54,1.54,0,0,0,0,3.08l8.86,0-3,3a1.55,1.55,0,0,0,2.19,2.19l5.62-5.62.07-.07,0,0,0,0,0-.06a.72.72,0,0,0,.1-.18l0-.07,0,0a1,1,0,0,0,.08-.19v0l0-.13v-.13l0-.1V27Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 969 B

80
styles/images/title.svg Normal file
Просмотреть файл

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 179.6 30.5" style="enable-background:new 0 0 179.6 30.5;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:url(#SVGID_3_);}
.st2{fill:none;}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:#F7F7F7;}
</style>
<g>
<defs>
<path id="SVGID_1_" d="M41.8,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9v1.8h-4.6v2.9h3.9L41.8,16z M48,13.5L48,13.5l1.6-4.1h2.6l-2.8,5.8
l3,5.9h-2.7L48.1,17l0,0l-1.6,4.1h-2.7l2.9-5.9l-2.8-5.8h2.6L48,13.5z M56.6,16.9v4.2h-2.3V9.5h4c1.9-0.1,3.6,1.3,3.8,3.2
c0,0.2,0,0.3,0,0.5c0.1,1.9-1.3,3.6-3.3,3.7c-0.2,0-0.3,0-0.5,0L56.6,16.9z M56.6,15.1h1.8c0.4,0,0.9-0.2,1.1-0.5
c0.3-0.4,0.4-0.9,0.4-1.4c0-0.5-0.1-1-0.4-1.4c-0.2-0.4-0.7-0.6-1.1-0.6h-1.8V15.1z M70.6,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9v1.8
h-4.6v2.9h3.9L70.6,16z M81.4,21.1h-2.3l-3.6-7.4l0,0v7.4h-2.3V9.5h2.3l3.6,7.4l0,0V9.5h2.3L81.4,21.1z M89.2,18.1
c0-0.4-0.1-0.8-0.4-1.1c-0.4-0.3-0.8-0.6-1.2-0.8c-1-0.3-1.9-0.8-2.7-1.4c-0.6-0.6-1-1.4-0.9-2.2c0-0.9,0.4-1.8,1.1-2.3
c0.8-0.6,1.7-0.9,2.7-0.9c1,0,2,0.3,2.7,1c0.7,0.7,1,1.6,1,2.5l0,0h-2.2c0-0.5-0.1-0.9-0.4-1.3c-0.6-0.6-1.6-0.7-2.2-0.1
c-0.2,0.3-0.4,0.6-0.4,1c0,0.4,0.1,0.7,0.4,0.9c0.4,0.3,0.9,0.6,1.5,0.8c0.9,0.3,1.8,0.8,2.5,1.4c0.6,0.6,0.9,1.5,0.8,2.3
c0,0.9-0.3,1.8-1,2.4c-0.8,0.6-1.7,0.9-2.7,0.9c-1,0-2.1-0.3-2.9-1c-0.8-0.7-1.3-1.7-1.2-2.8l0,0h2.2C85.8,18,86,18.6,86.3,19
c0.4,0.3,0.9,0.5,1.4,0.5c0.4,0,0.8-0.1,1.1-0.4C89,18.8,89.1,18.4,89.2,18.1L89.2,18.1z M99.8,16h-3.9v3.3h4.6v1.8h-6.9V9.5h6.9
v1.8h-4.6v2.9h3.9L99.8,16z M113.8,11.3h-2.6v9.8h-2.3v-9.8h-2.6V9.5h7.5V11.3z M118,16.5v4.6h-2.3V9.5h3.8c1-0.1,2,0.3,2.7,0.9
c0.7,0.7,1,1.6,1,2.5c0,0.6-0.1,1.1-0.4,1.6c-0.3,0.5-0.7,0.8-1.2,1.1c0.5,0.2,1,0.5,1.3,1c0.3,0.5,0.4,1.1,0.4,1.8v0.8
c0,0.3,0,0.7,0.1,1c0,0.3,0.2,0.6,0.4,0.8v0.2h-2.3c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.4-0.1-0.8-0.1-1.2v-0.8c0-0.5-0.1-1-0.4-1.4
c-0.2-0.3-0.6-0.5-1-0.5L118,16.5z M118,14.7h1.5c0.4,0,0.8-0.1,1.1-0.4c0.3-0.4,0.4-0.8,0.3-1.3c0-0.5-0.1-0.9-0.4-1.3
c-0.2-0.3-0.6-0.5-1-0.5H118V14.7z M131.1,18.7H128l-0.6,2.5H125l3.3-11.6h2.4l3.3,11.6h-2.3L131.1,18.7z M128.5,16.9h2.1l-1-4.1
l0,0L128.5,16.9z M142.9,17.4L142.9,17.4c0.1,1-0.2,2.1-0.9,2.9c-0.7,0.7-1.7,1.1-2.7,1c-1.1,0-2.1-0.4-2.9-1.1
c-0.8-0.9-1.2-2-1.1-3.2v-3.4c-0.1-1.1,0.3-2.3,1-3.1c0.7-0.8,1.7-1.2,2.8-1.1c1-0.1,2,0.3,2.8,1c0.7,0.8,1.1,1.9,1,2.9l0,0h-2.2
c0.1-0.6,0-1.1-0.3-1.6c-0.3-0.4-0.8-0.6-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.6c-0.3,0.6-0.5,1.2-0.4,1.8V17c0,0.6,0.1,1.3,0.4,1.8
c0.3,0.4,0.8,0.6,1.3,0.6c0.4,0.1,0.8-0.1,1.1-0.4c0.3-0.5,0.4-1.1,0.3-1.6L142.9,17.4z M148.4,16.3h-1v4.8h-2.3V9.5h2.3v4.7h0.7
l2.3-4.7h2.8l-3.2,5.3l3.4,6.3h-2.8L148.4,16.3z M161.2,16h-3.9v3.3h4.6v1.8H155V9.5h6.9v1.8h-4.6v2.9h3.9L161.2,16z M166.2,16.5
v4.6h-2.3V9.5h3.8c1-0.1,2,0.3,2.7,0.9c0.7,0.7,1,1.6,1,2.5c0,0.6-0.1,1.1-0.4,1.6c-0.3,0.5-0.7,0.8-1.2,1.1c0.5,0.2,1,0.5,1.3,1
c0.3,0.5,0.4,1.1,0.4,1.8v0.8c0,0.3,0,0.7,0.1,1c0,0.3,0.2,0.6,0.4,0.8v0.2h-2.4c-0.2-0.2-0.3-0.5-0.4-0.8c0-0.4-0.1-0.8-0.1-1.2
v-0.8c0-0.5-0.1-1-0.4-1.4c-0.2-0.3-0.6-0.5-1-0.5L166.2,16.5z M166.2,14.7h1.5c0.4,0,0.8-0.1,1.1-0.4c0.3-0.3,0.4-0.8,0.4-1.2
c0-0.5-0.1-0.9-0.4-1.3c-0.2-0.3-0.6-0.5-1-0.5h-1.5L166.2,14.7z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="191.97" y1="16.77" x2="-12.39" y2="16.77" gradientTransform="matrix(1 0 0 -1 0 32)">
<stop offset="0" style="stop-color:#00C6FB"/>
<stop offset="0.2" style="stop-color:#00C2FA"/>
<stop offset="0.39" style="stop-color:#00B7F9"/>
<stop offset="0.58" style="stop-color:#00A3F5"/>
<stop offset="0.77" style="stop-color:#0088F1"/>
<stop offset="0.95" style="stop-color:#0065EC"/>
<stop offset="1" style="stop-color:#005BEA"/>
</linearGradient>
<rect x="-12.4" y="-7" class="st1" width="204.4" height="44.5"/>
</g>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="31.3333" y1="15.23" x2="-17.3436" y2="15.23">
<stop offset="0" style="stop-color:#00C6FB"/>
<stop offset="1" style="stop-color:#005BEA"/>
</linearGradient>
<path class="st3" d="M16.7,0.7C9.6,0.7,3.8,6.5,3.8,13.6c0,5.7,3.7,10.5,8.8,12.2l3.8,3.8c0.1,0.1,0.2,0.1,0.3,0.1
c0.1,0,0.2,0,0.3-0.1l3.8-3.8c5.1-1.7,8.8-6.5,8.8-12.2C29.6,6.5,23.8,0.7,16.7,0.7z M20.3,24.6l-0.3,0.1l-0.2,0.2l-3.2,3.2
l-3.2-3.2l-0.2-0.2L13,24.6c-4.7-1.6-7.9-6-7.9-11C5.1,7.2,10.3,2,16.7,2c6.4,0,11.6,5.2,11.6,11.6C28.3,18.6,25.1,23,20.3,24.6z"
/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="31.3333" y1="13.6002" x2="-17.3436" y2="13.6002">
<stop offset="0" style="stop-color:#00C6FB"/>
<stop offset="1" style="stop-color:#005BEA"/>
</linearGradient>
<circle class="st4" cx="16.7" cy="13.6" r="8.5"/>
</g>
<g>
<path class="st5" d="M19,15.1c0,0.6-0.2,1.1-0.5,1.5c-0.3,0.4-0.8,0.6-1.5,0.7v1.2h-0.7v-1.2c-0.7,0-1.4-0.2-2-0.5v-1.4
c0.3,0.2,0.6,0.3,1,0.4c0.3,0.1,0.7,0.2,1,0.2v-2l-0.2-0.1c-0.7-0.3-1.1-0.6-1.4-1c-0.3-0.3-0.4-0.8-0.4-1.3c0-0.6,0.2-1,0.5-1.4
c0.3-0.4,0.8-0.6,1.5-0.6V8.7H17v0.9c0.6,0,1.2,0.2,1.8,0.5l-0.5,1.2C17.8,11.2,17.4,11,17,11v1.8c0.1,0,0.2,0.1,0.2,0.1
c0.5,0.2,0.9,0.4,1.1,0.6c0.2,0.2,0.4,0.4,0.5,0.7C18.9,14.5,19,14.8,19,15.1z M15.7,11.7c0,0.2,0,0.4,0.1,0.5
c0.1,0.1,0.2,0.2,0.5,0.3V11C15.9,11,15.7,11.3,15.7,11.7z M17.6,15.2c0-0.2,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.5-0.4V16
C17.4,15.9,17.6,15.6,17.6,15.2z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 5.6 KiB

Просмотреть файл

@ -0,0 +1,15 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>
.cls-1 {
fill: #494949;
fill-rule: evenodd;
}
</style>
</defs>
<title>02 Overall Transactions</title>
<g>
<path class="cls-1" d="M9.71,11.07h0L7.9,9.27h5.36a.93.93,0,0,0,0-1.86H7.89L9.7,5.59A.93.93,0,1,0,8.4,4.27L5,7.63H5l0,0,0,0v0l0,0h0a.44.44,0,0,0-.06.11L4.8,8V8l0,.09h0l0,.08V8.5l0,.07v0l0,.07v0l0,.07a.26.26,0,0,0,.06.1v0l0,0H5L5,9,8.39,12.4a.94.94,0,0,0,1.33-1.33Z"/>
<path class="cls-1" d="M19.28,15.59V15.5l0-.09h0l0-.12,0-.07a.34.34,0,0,0-.06-.11v0l0,0L19,15l0,0h0L15.6,11.6a.93.93,0,0,0-1.31,1.32l1.82,1.82H10.74a.93.93,0,0,0,0,1.86h5.36l-1.82,1.82a.94.94,0,0,0,1.33,1.32L19,16.32l0,0h0v0a.44.44,0,0,0,.06-.11l0,0v0a.59.59,0,0,0,0-.12h0l0-.08v-.24Z"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 860 B

22
styles/images/user.svg Normal file

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 224 KiB

2596
styles/index.scss Normal file

Разница между файлами не показана из-за своего большого размера Загрузить разницу

69
styles/styles.scss Normal file
Просмотреть файл

@ -0,0 +1,69 @@
//sass-lint:disable-all
@import 'definition/material.scss';
$accent: #4273F9;
$accent-font: #fff;
@import 'ej2-base/styles/material-definition.scss';
@import 'ej2-base/styles/all.scss';
@import 'ej2-buttons/styles/button/definition.scss';
@import 'ej2-buttons/styles/button/material-definition.scss';
@import 'ej2-buttons/styles/button/all.scss';
@import 'ej2-calendars/styles/calendar/definition.scss';
@import 'ej2-calendars/styles/calendar/material-definition.scss';
@import 'ej2-calendars/styles/calendar/all.scss';
@import 'ej2-buttons/styles/check-box/definition.scss';
@import 'ej2-buttons/styles/check-box/material-definition.scss';
@import 'ej2-buttons/styles/check-box/all.scss';
@import 'ej2-navigations/styles/context-menu/definition.scss';
@import 'ej2-navigations/styles/context-menu/material-definition.scss';
@import 'ej2-navigations/styles/context-menu/all.scss';
@import 'ej2-calendars/styles/datepicker/definition.scss';
@import 'ej2-calendars/styles/datepicker/material-definition.scss';
@import 'ej2-calendars/styles/datepicker/all.scss';
@import 'ej2-calendars/styles/daterangepicker/material-definition.scss';
@import 'ej2-calendars/styles/daterangepicker/all.scss';
@import 'ej2-popups/styles/dialog/definition.scss';
@import 'ej2-popups/styles/dialog/material-definition.scss';
@import 'ej2-popups/styles/dialog/all.scss';
@import 'ej2-dropdowns/styles/drop-down-base/definition.scss';
@import 'ej2-dropdowns/styles/drop-down-base/material-definition.scss';
@import 'ej2-dropdowns/styles/drop-down-base/all.scss';
@import 'ej2-dropdowns/styles/drop-down-list/definition.scss';
@import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
@import 'ej2-dropdowns/styles/drop-down-list/all.scss';
@import 'ej2-grids/styles/grid/definition.scss';
@import 'ej2-grids/styles/grid/material-definition.scss';
@import 'ej2-grids/styles/grid/all.scss';
@import 'ej2-navigations/styles/h-scroll/definition.scss';
@import 'ej2-navigations/styles/h-scroll/material-definition.scss';
@import 'ej2-navigations/styles/h-scroll/all.scss';
@import 'ej2-inputs/styles/input/definition.scss';
@import 'ej2-inputs/styles/input/material-definition.scss';
@import 'ej2-inputs/styles/input/all.scss';
@import 'ej2-lists/styles/list-view/definition.scss';
@import 'ej2-lists/styles/list-view/material-definition.scss';
@import 'ej2-lists/styles/list-view/all.scss';
@import 'ej2-dropdowns/styles/multi-select/definition.scss';
@import 'ej2-dropdowns/styles/multi-select/material-definition.scss';
@import 'ej2-dropdowns/styles/multi-select/all.scss';
@import 'ej2-inputs/styles/numerictextbox/definition.scss';
@import 'ej2-inputs/styles/numerictextbox/material-definition.scss';
@import 'ej2-inputs/styles/numerictextbox/all.scss';
@import 'ej2-grids/styles/pager/definition.scss';
@import 'ej2-grids/styles/pager/material-definition.scss';
@import 'ej2-grids/styles/pager/all.scss';
@import 'ej2-popups/styles/popup/all.scss';
@import 'ej2-buttons/styles/radio-button/definition.scss';
@import 'ej2-buttons/styles/radio-button/material-definition.scss';
@import 'ej2-buttons/styles/radio-button/all.scss';
@import 'ej2-popups/styles/spinner/definition.scss';
@import 'ej2-popups/styles/spinner/material-definition.scss';
@import 'ej2-popups/styles/spinner/all.scss';
@import 'ej2-calendars/styles/timepicker/definition.scss';
@import 'ej2-calendars/styles/timepicker/material-definition.scss';
@import 'ej2-calendars/styles/timepicker/all.scss';
@import 'ej2-navigations/styles/toolbar/definition.scss';
@import 'ej2-navigations/styles/toolbar/material-definition.scss';
@import 'ej2-navigations/styles/toolbar/all.scss';
@import 'ej2-popups/styles/tooltip/definition.scss';
@import 'ej2-popups/styles/tooltip/material-definition.scss';
@import 'ej2-popups/styles/tooltip/all.scss';

31
tsconfig.json Normal file
Просмотреть файл

@ -0,0 +1,31 @@
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"declaration": true,
"removeComments": true,
"noLib": false,
"experimentalDecorators": true,
"sourceMap": true,
"pretty": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noFallthroughCasesInSwitch": true,
"allowJs": false,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"lib": ["es5", "es2015.promise", "dom"],
"types": ["jasmine","jasmine-ajax","requirejs","chai"]
},
"exclude": [
"node_modules",
"dist",
"public",
"coverage",
"test-report"
],
"compileOnSave": false
}

28
webpack.config.js Normal file
Просмотреть файл

@ -0,0 +1,28 @@
var fs = require('fs');
var glob = require('glob');
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
js: glob.sync("./src/**/*.js"),
},
output: {
path: __dirname + '/',
filename: "./dist/common.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
dead_code: true,
unused: true
},
output: {
beautify: true,
comments: false
},
sourceMap: true
})
]
}