2 |
--------------------------------------------------------------------------------
/src/app/dashboard/cards/cards.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 |
3 | import { Internationalization } from '@syncfusion/ej2-base';
4 | import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
5 |
6 | import { AppComponent } from '../../app.component';
7 |
8 | import { CommonService } from '../../common/common.service';
9 |
10 | @Component({
11 | selector: 'cards',
12 | templateUrl: 'cards.component.html',
13 | encapsulation: ViewEncapsulation.None,
14 | providers: [CommonService]
15 | })
16 | export class CardsComponent implements OnInit {
17 | public predicate: Predicate;
18 | public predicateEnd: Predicate;
19 | public predicateStart: Predicate;
20 | public totalIncome: string = '$0';
21 | public totalExpense: string = '$0';
22 | public totalBalance: string = '$0';
23 | public totalTransactions: string = '0';
24 |
25 | constructor(public common: CommonService, public app: AppComponent) {}
26 |
27 | public ngOnInit(): void {
28 |
29 | /** Updates each card values on the initial load */
30 | this.updateCardValues();
31 | }
32 |
33 | public updateCardValues(): void {
34 | let predicate: Predicate = this.common.getPredicate(this.app.startDate, this.app.endDate);
35 | let intl: Internationalization = new Internationalization();
36 | let incomeRS: number = 0;
37 | let expenseRS: number = 0;
38 | let incomeD: any;
39 | let expenseD: any;
40 |
41 | /** Calulates total income and sets to the Income card */
42 | new DataManager(
3 |
16 |
4 |
15 |
5 |
14 |
6 |
13 |
7 |
12 |
8 |
11 | {{totalIncome}}
9 | Income 10 |
17 |
30 |
18 |
29 |
19 |
28 |
20 |
27 |
21 |
26 |
22 |
25 | {{totalExpense}}
23 | Expenses 24 |
31 |
44 |
32 |
43 |
33 |
42 |
34 |
41 |
35 |
40 |
36 |
39 | {{totalBalance}}
37 | Balance 38 |
45 |
58 |
46 |
57 |
47 |
56 |
48 |
55 |
49 |
54 |
50 |
53 | {{totalTransactions}}
51 | Transactions 52 |
2 |
--------------------------------------------------------------------------------
/src/app/dashboard/column-chart/column-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
2 |
3 | import { ChartComponent, ILoadedEventArgs} from '@syncfusion/ej2-angular-charts';
4 |
5 | import { DashBoardComponent } from '../dashboard.component';
6 |
7 | @Component({
8 | selector: 'column-chart',
9 | templateUrl: 'column-chart.component.html',
10 | encapsulation: ViewEncapsulation.None
11 | })
12 | export class ColumnChartComponent implements OnInit {
13 | @ViewChild('columnChart') colChart: ChartComponent;
14 |
15 | public lineObj: any;
16 | public marker: Object;
17 | public margin: Object;
18 | public cBorder: Object;
19 | public tooltip: Object;
20 | public titleStyle: Object;
21 | public incomeDS: any = [];
22 | public expenseDS: any = [];
23 | public primaryXAxis: Object;
24 | public primaryYAxis: Object;
25 | public legendSettings: Object;
26 | public initialRender: boolean = true;
27 | public animation: Object;
28 |
29 | constructor(public dashBoard: DashBoardComponent) {}
30 |
31 | public ngOnInit(): void {
32 |
33 | /** Configurations for the Column chart (Income vs Expense) component */
34 | this.primaryXAxis = {
35 | labelFormat: 'MMM',
36 | valueType: 'DateTime',
37 | intervalType: 'Months',
38 | edgeLabelPlacement: 'Shift'
39 | };
40 | this.primaryYAxis = {
41 | minimum: 3000,
42 | maximum: 9000,
43 | labelFormat: 'c0'
44 | };
45 | this.titleStyle = { textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000' };
46 | this.legendSettings = { visible: true };
47 | this.tooltip = {
48 | fill: '#707070',
49 | enable: true,
50 | shared: true,
51 | format: '${series.name} : ${point.y}',
52 | header: 'Month - ${point.x} ',
53 | };
54 | this.marker = { visible: true, height: 10, width: 10 };
55 | this.margin = { top: 90 };
56 | this.cBorder = { width: 0.5, color: '#A16EE5' };
57 | this.animation = { enable: false };
58 | }
59 |
60 | public onChartLoaded(args: ILoadedEventArgs): void {
61 | if (this.initialRender) {
62 | this.initialRender = false;
63 | this.lineObj.line.refresh();
64 | } else {
65 | this.initialRender = false;
66 | }
67 | }
68 | }
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
7 |
8 |
11 |
12 |
13 |
2 |
--------------------------------------------------------------------------------
/src/app/dashboard/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
2 |
3 | import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
4 | import { DateRangePickerComponent, RangeEventArgs } from '@syncfusion/ej2-angular-calendars';
5 |
6 | import { AppComponent } from '../app.component';
7 | import { MenuComponent } from '../menu/menu.component';
8 | import { CardsComponent } from './cards/cards.component';
9 | import { PieChartComponent } from './pie-chart/pie-chart.component';
10 | import { LineChartComponent } from './line-chart/line-chart.component';
11 | import { ColumnChartComponent } from './column-chart/column-chart.component';
12 | import { RecentExpGridComponent } from './recent-exp-grid/recent-exp-grid.component';
13 |
14 | import { DashBoardService } from './dashboard.service';
15 | import { CommonService } from '../common/common.service';
16 |
17 | @Component({
18 | templateUrl: 'dashboard.component.html',
19 | encapsulation: ViewEncapsulation.None,
20 | providers: [DashBoardService, CommonService]
21 | })
22 | export class DashBoardComponent implements OnInit {
23 | @ViewChild('cards') cards: CardsComponent;
24 | @ViewChild('pieChart') pieChart: PieChartComponent;
25 | @ViewChild('lineChart') lineChart: LineChartComponent;
26 | @ViewChild('columnChart') columnChart: ColumnChartComponent;
27 | @ViewChild('recentGrid') recentGrid: RecentExpGridComponent;
28 | @ViewChild('dateRangePicker') dateRangePicker: DateRangePickerComponent;
29 |
30 | public predicate: Predicate;
31 | public datePresets: Object[];
32 | public lineChartData: Object[];
33 | public predicateEnd: Predicate;
34 | public predicateStart: Predicate;
35 | public colChartIncomeData: Object[];
36 | public colChartExpenseData: Object[];
37 |
38 | constructor(
39 | public app: AppComponent,
40 | public dashService: DashBoardService,
41 | public common: CommonService,
42 | public menu: MenuComponent
43 | ) {
44 | this.common.removeRootClass();
45 | this.common.addRootClass('dashboard-page');
46 | }
47 |
48 | public ngOnInit(): void {
49 |
50 | /** Configurations for the components in the DashBoard page */
51 | this.menu.removeToggleClass();
52 | this.menu.disableOverlay();
53 | this.datePresets = [
54 | { label: 'Last Month', start: new Date('10/1/2017'), end: new Date('10/31/2017') },
55 | { label: 'Last 3 Months', start: new Date('9/1/2017'), end: new Date('11/30/2017') },
56 | { label: 'All Time', start: new Date('6/1/2017'), end: new Date('11/30/2017') }
57 | ];
58 | this.predicateStart = new Predicate('DateTime', 'greaterthanorequal', this.app.startDate);
59 | this.predicateEnd = new Predicate('DateTime', 'lessthanorequal', this.app.endDate);
60 | this.predicate = this.predicateStart.and(this.predicateEnd);
61 | this.updateChartData();
62 | }
63 |
64 | public ngAfterViewInit(): void {
65 | this.columnChart.lineObj = this.lineChart;
66 | }
67 |
68 | /** Updates chart data during the DateRangePicker filtering operation */
69 | public updateChartData(): void {
70 | new DataManager(
3 |
8 | Dashboard
4 |
5 |
7 |
9 |
11 |
12 |
14 |
15 |
24 |
16 |
23 |
17 |
19 |
20 |
22 |
25 |
27 |
2 |
--------------------------------------------------------------------------------
/src/app/dashboard/line-chart/line-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
2 |
3 | import { ChartComponent } from '@syncfusion/ej2-angular-charts';
4 |
5 | import { DashBoardComponent } from '../dashboard.component';
6 |
7 | @Component({
8 | selector: 'line-chart',
9 | templateUrl: 'line-chart.component.html',
10 | encapsulation: ViewEncapsulation.None
11 | })
12 | export class LineChartComponent implements OnInit {
13 | @ViewChild('lineChart') line: ChartComponent;
14 |
15 | public marker: Object;
16 | public margin: Object;
17 | public tooltip: Object;
18 | public lBorder: Object;
19 | public lineDS: any = [];
20 | public crossHair: Object;
21 | public chartArea: Object;
22 | public dataSource: Object;
23 | public primaryXAxis: Object;
24 | public primaryYAxis: Object;
25 | public animation: Object;
26 |
27 | constructor(public dashBoard: DashBoardComponent) {}
28 |
29 | public ngOnInit(): void {
30 |
31 | /** Configurations for the Line chart component */
32 | this.primaryXAxis = {
33 | valueType: 'DateTime',
34 | labelFormat: 'MMM',
35 | majorGridLines: { width: 0 },
36 | intervalType: 'Months'
37 | };
38 | this.primaryYAxis = {
39 | maximum: 1800,
40 | interval: 300,
41 | labelFormat: 'c0'
42 | };
43 | this.tooltip = {
44 | fill: '#707070',
45 | enable: true,
46 | shared: true,
47 | format: '${series.name} : ${point.y}',
48 | header: 'Month - ${point.x} '
49 | };
50 | this.chartArea = {
51 | border: { width: 0 }
52 | };
53 | this.margin = { top: 90 };
54 | this.lBorder = { width: 0.5, color: '#0470D8' };
55 | this.marker = {
56 | visible: true,
57 | width: 10,
58 | height: 10,
59 | fill: 'white',
60 | border: { width: 2, color: '#0470D8' },
61 | };
62 | this.animation = { enable: false };
63 | }
64 | }
--------------------------------------------------------------------------------
/src/app/dashboard/pie-chart/pie-chart.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
11 |
12 |
2 |
--------------------------------------------------------------------------------
/src/app/dashboard/pie-chart/pie-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit, ViewChild, HostListener } from '@angular/core';
2 |
3 | import { GridComponent } from '@syncfusion/ej2-angular-grids';
4 | import { Query, DataManager } from '@syncfusion/ej2-data';
5 | import { isNullOrUndefined as isNOU, Browser } from '@syncfusion/ej2-base';
6 | import { IAccTextRenderEventArgs, IAccLoadedEventArgs, AccumulationChartComponent,
7 | IAccAnimationCompleteEventArgs } from '@syncfusion/ej2-angular-charts';
8 |
9 | import { AppComponent } from '../../app.component';
10 |
11 | @Component({
12 | selector: 'pie-chart',
13 | templateUrl: 'pie-chart.component.html',
14 | encapsulation: ViewEncapsulation.None
15 | })
16 | export class PieChartComponent {
17 | @ViewChild('pie') pie: AccumulationChartComponent;
18 | @ViewChild('legendGrid') lGrid: GridComponent;
19 |
20 | public dataLabel: Object;
21 | public groupValue: string;
22 | public hiGridData: Object[];
23 | public expTotal: number = 0;
24 | public legendSettings: Object;
25 | public colorPalettes: Object[];
26 | public category: string[] = [];
27 | public tempData: IExpenseData[];
28 | public legendData: Object[] = [];
29 | public pieLegendData: Object[] = [];
30 | public pieRenderData: Object[] = [];
31 | public enableLegend: boolean = false;
32 | public pieRenderingData: Object[] = [];
33 | public animation: Object;
34 | public showWaitingPopup: boolean = false;
35 |
36 | constructor(public app: AppComponent) {}
37 |
38 | public ngOnInit(): void {
39 |
40 | /** Configurations for the Pie chart component */
41 | this.legendSettings = { visible: true };
42 | this.colorPalettes = ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2', '#8854D9', '#3D4EB8',
43 | '#00BCD7'];
44 | this.dataLabel = {
45 | name: 'x', visible: true,
46 | position: 'Outside', connectorStyle: { length: '10%' },
47 | font: { color: 'Black', size: '14px', fontFamily: 'Roboto' }
48 | };
49 | this.getTotalExpense();
50 | this.animation = { enable: false };
51 | }
52 |
53 | public ngAfterViewInit(): void {
54 | this.handleDataLabel();
55 | }
56 |
57 | @HostListener('window:resize', ['$event'])
58 | onResize(event: any): void {
59 | /** Pie chart label disable at mobile mode handle at here */
60 | this.handleDataLabel();
61 | }
62 |
63 | public handleDataLabel(): void {
64 | if (Browser.isDevice || window.innerWidth < 400) {
65 | this.pie.series[0].dataLabel.visible = false;
66 | } else {
67 | this.pie.series[0].dataLabel.visible = true;
68 | }
69 | }
70 |
71 | /** Sets the pie chart's font size based on its size */
72 | public getFontSize(width: number): string {
73 | if (width > 300) {
74 | return '13px';
75 | } else if (width > 250) {
76 | return '8px';
77 | } else {
78 | return '6px';
79 | }
80 | }
81 |
82 | public onChartLoaded(args: IAccLoadedEventArgs): void {
83 | this.createLegendData('pie');
84 | this.enableLegend = true;
85 | }
86 |
87 | public onTextRender(args: IAccTextRenderEventArgs): void {
88 | args.series.dataLabel.font.size = this.getFontSize(this.pie.initialClipRect.width);
89 | this.pie.animateSeries = true;
90 | if (args.text.indexOf('Others') > -1) {
91 | args.text = 'Others';
92 | }
93 | }
94 |
95 | public onAnimateCompleted(args: IAccAnimationCompleteEventArgs): void {
96 | let element: HTMLElement = document.getElementById('total-expense_datalabel_Series_0');
97 | if (!isNOU(element)) { element.style.visibility = 'visible'; }
98 | }
99 |
100 | public getTotalExpense(): void {
101 | this.tempData =
3 |
55 |
4 |
54 |
5 |
53 |
6 |
9 | Total Expenses
7 | 8 |
10 |
52 |
11 |
14 |
15 |
17 |
18 |
19 |
20 |
21 |
22 |
33 |
34 |
39 |
40 |
41 |
42 |
43 |
44 | {{data.text}}
45 | {{data.y | currency:'USD'}}
46 | {{data.x}}
47 |
48 |
49 |
50 |
51 |
23 |
31 |
24 |
25 |
28 |
29 |
30 |
2 |
--------------------------------------------------------------------------------
/src/app/dashboard/recent-exp-grid/recent-exp-grid.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2 |
3 | import { Query, Predicate } from '@syncfusion/ej2-data';
4 |
5 | import { AppComponent } from '../../app.component';
6 |
7 | @Component({
8 | selector: 'recent-exp-grid',
9 | templateUrl: 'recent-exp-grid.component.html',
10 | encapsulation: ViewEncapsulation.None
11 | })
12 | export class RecentExpGridComponent implements OnInit {
13 | public query: Query;
14 | public gridToolbar: Object[];
15 | public predicate: Predicate;
16 | public predicateEnd: Predicate;
17 | public predicateStart: Predicate;
18 |
19 | constructor(public app: AppComponent) {}
20 |
21 | public ngOnInit(): void {
22 | this.predicateStart = new Predicate('DateTime', 'greaterthanorequal', this.app.startDate);
23 | this.predicateEnd = new Predicate('DateTime', 'lessthanorequal', this.app.endDate);
24 | this.predicate = this.predicateStart.and(this.predicateEnd);
25 |
26 | /** Query to takes last 5 lows to show the recent records only */
27 | this.query = new Query().where(this.predicate).sortByDesc('DateTime').take(5);
28 | this.gridToolbar = [{ text: 'Recent Transactions' }];
29 | }
30 | }
--------------------------------------------------------------------------------
/src/app/expense/content/content.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 | {{data.DateTime | date:'M/d/yyyy'}}
8 |
9 |
10 |
11 |
12 |
36 |
37 |
40 |
41 |
59 |
60 |
61 |
62 |
63 |
13 |
14 |
16 | {{data.Category}}
15 |
17 |
25 |
18 |
19 |
20 |
21 |
24 | {{data.Category}}
22 | {{data.Description}}
23 |
26 |
29 |
35 |
30 |
34 | {{data.Category}}
31 | {{data.Description}}
32 | {{data.PaymentMode}}
33 |
42 |
46 |
43 | {{data.Amount | currency:'USD'}}
44 |
45 |
47 |
52 |
48 | {{data.Amount | currency:'USD'}}
49 |
50 | {{data.DateTime | date:'M/d/yyyy'}}
51 |
53 |
58 |
54 | {{data.Amount | currency:'USD'}}
55 |
56 | {{data.DateTime | date:'M/d/yyyy'}}
57 |
2 |
--------------------------------------------------------------------------------
/src/app/expense/content/content.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, OnInit, ElementRef, ViewChild } from '@angular/core';
2 |
3 | import { KeyboardEventArgs } from '@syncfusion/ej2-base';
4 | import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
5 | import { Input } from '@syncfusion/ej2-inputs';
6 | import { GridComponent, RowSelectEventArgs, RowDeselectEventArgs, CheckBoxChangeEventArgs,
7 | PageService, EditService, CommandColumnService, ToolbarService, ContextMenuService,
8 | ResizeService } from '@syncfusion/ej2-angular-grids';
9 |
10 | import { AppComponent } from '../../app.component';
11 | import { MenuComponent } from '../../menu/menu.component';
12 | import { DialogsComponent } from '../dialogs/dialogs.component';
13 |
14 | import { expenseData, categoryIncomeData, categoryExpenseData } from '../../common/common.data';
15 |
16 | @Component({
17 | selector: 'content-section',
18 | templateUrl: 'content.component.html',
19 | encapsulation: ViewEncapsulation.None,
20 | providers: [DialogsComponent, AppComponent, PageService, EditService, CommandColumnService, ToolbarService, ContextMenuService, ResizeService],
21 | })
22 | export class ContentComponent implements OnInit {
23 | @ViewChild('transactGrid') grid: GridComponent;
24 |
25 | public query: Query;
26 | public dlgCompObj: any;
27 | public filterCompObj: any;
28 | public predicate: Predicate;
29 | public dataSource: Object[];
30 | public pageSettings: Object;
31 | public editSettings: Object;
32 | public validateRule: Object;
33 | public toolbarValue: Object[];
34 | public predicateEnd: Predicate;
35 | public transactionTitle: string;
36 | public predicateStart: Predicate;
37 | public searchInput: HTMLInputElement;
38 | public clearIcon: HTMLElement;
39 |
40 | constructor(
41 | public app: AppComponent,
42 | public eleRef: ElementRef,
43 | public menu: MenuComponent) {}
44 |
45 | public ngOnInit(): void {
46 | this.transactionTitle = 'All Transactions';
47 |
48 | /** Configurations for the Expense Grid component */
49 | this.predicateStart = new Predicate('DateTime', 'greaterthanorequal', this.app.startDate);
50 | this.predicateEnd = new Predicate('DateTime', 'lessthanorequal', this.app.endDate);
51 | this.predicate = this.predicateStart.and(this.predicateEnd);
52 | this.toolbarValue = ['Edit', 'Delete'];
53 | this.query = new Query().where(this.predicate).sortByDesc('DateTime');
54 | this.pageSettings = { pageSize: 11 };
55 | this.validateRule = { required: true };
56 | this.editSettings = { allowEditing: true };
57 | }
58 |
59 | public ngAfterViewInit(): void {
60 | this.searchInput = this.eleRef.nativeElement.querySelector('#txt');
61 | Input.createInput({
62 | element: this.searchInput,
63 | properties: {
64 | showClearButton: true
65 | }
66 | });
67 | this.clearIcon = this.eleRef.nativeElement.querySelector('.e-clear-icon');
68 | this.clearIcon.onmousedown = () => {
69 | this.searchInput.value = '';
70 | };
71 | }
72 |
73 | public onGridCreated(): void {
74 | /** Edit and Delete toolbar items customization on the grid's created event */
75 | let ele: any = this.eleRef.nativeElement.querySelector('#grid_edit');
76 | let el: any = this.eleRef.nativeElement.querySelector('#grid_delete');
77 | if (ele) {
78 | ele.addEventListener('click', this.showEditTransactDialog.bind(this));
79 | }
80 | if (el) {
81 | el.addEventListener('click', this.showDeleteDialog.bind(this));
82 | }
83 | }
84 |
85 | public onGridCellSaved(args: any): void {
86 | new DataManager(
3 |
5 | {{transactionTitle}}
4 |
6 |
89 |
7 |
88 |
8 |
24 |
25 |
27 |
28 |
52 |
53 |
58 |
59 |
83 |
84 |
85 |
86 |
87 |
9 |
23 |
10 |
22 |
11 |
12 |
13 |
14 |
21 |
29 |
30 |
32 | {{data.Category}}
31 |
33 |
41 |
34 |
35 |
36 |
37 |
40 | {{data.Category}}
38 | {{data.Description}}
39 |
42 |
45 |
51 |
46 |
50 | {{data.Category}}
47 | {{data.Description}}
48 | {{data.PaymentMode}}
49 |
60 |
66 |
61 |
65 |
62 | {{data.Amount | currency:'USD'}}
63 |
64 |
67 |
74 |
68 |
73 |
69 | {{data.Amount | currency:'USD'}}
70 |
71 | {{data.DateTime | date:'M/d/yyyy'}}
72 |
75 |
82 |
76 |
81 |
77 | {{data.Amount | currency:'USD'}}
78 |
79 | {{data.DateTime | date:'M/d/yyyy'}}
80 |
2 |
3 |
5 |
6 |
68 |
--------------------------------------------------------------------------------
/src/app/expense/dialogs/dialogs.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, ViewChild, OnInit, ElementRef } from '@angular/core';
2 |
3 | import { DialogComponent } from '@syncfusion/ej2-angular-popups';
4 | import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
5 | import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
6 | import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
7 | import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
8 | import { ChangeEventArgs, RadioButtonComponent } from '@syncfusion/ej2-angular-buttons';
9 | import { DatePickerComponent, TimePickerComponent } from '@syncfusion/ej2-angular-calendars';
10 |
11 | import { AppComponent } from '../../app.component';
12 | import { CardsComponent } from '../../dashboard/cards/cards.component';
13 |
14 | import { categoryIncomeData, categoryExpenseData } from '../../common/common.data';
15 |
16 | @Component({
17 | selector: 'dialog-section',
18 | templateUrl: 'dialogs.component.html',
19 | encapsulation: ViewEncapsulation.None,
20 | providers: [ CardsComponent]
21 | })
22 | export class DialogsComponent implements OnInit {
23 | @ViewChild('dialog') dialog: DialogComponent;
24 | @ViewChild('confirmDialog') alertDialog: DialogComponent;
25 | @ViewChild('dlgAmount') dlgAmount: NumericTextBoxComponent;
26 | @ViewChild('dlgDropDown') dlgDropDown: DropDownListComponent;
27 | @ViewChild('dlgCashRadio') dlgCashRadio: RadioButtonComponent;
28 | @ViewChild('dlgDatePicker') dlgDatePicker: DatePickerComponent;
29 | @ViewChild('dlgTimePicker') dlgTimePicker: TimePickerComponent;
30 | @ViewChild('dlgDebitRadio') dlgDebitRadio: RadioButtonComponent;
31 | @ViewChild('dlgCreditRadio') dlgCreditRadio: RadioButtonComponent;
32 | @ViewChild('dlgIncomeRadio') dlgIncomeRadio: RadioButtonComponent;
33 | @ViewChild('dlgExpenseRadio') dlgExpenseRadio: RadioButtonComponent;
34 |
35 | public dateValue: Date;
36 | public cntCompObj: any;
37 | public isModal: boolean;
38 | public proxy: any = this;
39 | public predicate: Predicate;
40 | public dlgTarget: HTMLElement;
41 | public dropDownFields: Object;
42 | public predicateEnd: Predicate;
43 | public addDlgButtons: Object[];
44 | public editDlgButtons: Object[];
45 | public enableCloseIcon: boolean;
46 | public predicateStart: Predicate;
47 | public animationSettings: Object;
48 | public deleteDlgButtons: Object[];
49 | public enableCloseOnEscape: boolean;
50 | public categoryDataSource: Object[];
51 | public description: HTMLInputElement;
52 |
53 | constructor(public app: AppComponent, public eleRef: ElementRef, public cards: CardsComponent) {
54 | this.predicateStart = new Predicate('DateTime', 'greaterthanorequal', this.app.startDate);
55 | this.predicateEnd = new Predicate('DateTime', 'lessthanorequal', this.app.endDate);
56 | this.predicate = this.predicateStart.and(this.predicateEnd);
57 | this.isModal = true;
58 | this.dlgTarget = document.body;
59 | this.enableCloseIcon = true;
60 | this.enableCloseOnEscape = false;
61 | this.animationSettings = { effect: 'None' };
62 |
63 | /** Functionalities for the buttons of "Add Dialog" window */
64 | this.addDlgButtons = [{
65 | click: (() => {
66 | let newExpense: IExpenseData = {
67 | 'UniqueId': 'T' + ('' + (+new Date())).substring(5, 10),
68 | 'DateTime': new Date(this.dlgDatePicker.value.setHours(this.dlgTimePicker.value.getHours())),
69 | 'Category': Are you sure you want to delete the selected transaction(s)?
4 |
7 |
67 |
8 |
66 |
9 |
16 |
10 |
12 |
13 |
15 |
17 |
28 |
18 |
22 |
19 |
21 |
23 |
27 |
24 |
26 |
29 |
40 |
30 |
34 |
31 |
33 |
35 |
39 |
36 |
38 |
41 |
49 |
42 |
48 |
43 |
44 |
45 |
46 |
47 |
50 |
65 |
51 |
52 |
53 |
54 |
64 |
55 |
57 |
58 |
60 |
61 |
63 |
2 |
--------------------------------------------------------------------------------
/src/app/expense/expense.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, ViewChild, OnInit, HostListener } from '@angular/core';
2 |
3 | import { Browser } from '@syncfusion/ej2-base';
4 |
5 | import { MenuComponent } from '../menu/menu.component';
6 | import { FilterComponent } from './filter/filter.component';
7 | import { DialogsComponent } from './dialogs/dialogs.component';
8 | import { ContentComponent } from './content/content.component';
9 | import { CardsComponent } from '../dashboard/cards/cards.component';
10 |
11 | import { CommonService } from '../common/common.service';
12 |
13 | @Component({
14 | templateUrl: 'expense.component.html',
15 | encapsulation: ViewEncapsulation.None,
16 | providers: [CommonService, CardsComponent]
17 | })
18 | export class ExpenseComponent implements OnInit {
19 | @ViewChild('filterSection') filterObj: FilterComponent;
20 | @ViewChild('dialogSection') dialogObj: DialogsComponent;
21 | @ViewChild('contentSection') contentObj: ContentComponent;
22 |
23 | constructor(
24 | public common: CommonService,
25 | public cards: CardsComponent,
26 | public menu: MenuComponent
27 | ) {
28 | this.common.removeRootClass();
29 | this.common.addRootClass('expense-page');
30 | }
31 |
32 | public ngOnInit(): void {
33 | /** On initial load, update the sidebar selections and overlay */
34 | this.menu.removeToggleClass();
35 | this.menu.disableOverlay();
36 | this.cards.updateCardValues();
37 | }
38 |
39 | public ngAfterViewInit(): void {
40 | this.contentObj.filterCompObj = this.filterObj;
41 | this.filterObj.cntCompObj = this.contentObj;
42 | this.contentObj.dlgCompObj = this.dialogObj;
43 | this.dialogObj.cntCompObj = this.contentObj;
44 | }
45 | }
--------------------------------------------------------------------------------
/src/app/expense/filter/filter.component.html:
--------------------------------------------------------------------------------
1 |
2 |
44 |
--------------------------------------------------------------------------------
/src/app/expense/filter/filter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
2 |
3 | import { Query, Predicate } from '@syncfusion/ej2-data';
4 | import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
5 | import { CheckBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
6 | import { DateRangePickerComponent, RangeEventArgs } from '@syncfusion/ej2-angular-calendars';
7 | import { MultiSelectComponent, SelectEventArgs, RemoveEventArgs } from '@syncfusion/ej2-angular-dropdowns';
8 |
9 | import { AppComponent } from '../../app.component';
10 |
11 | import { FilterService } from './filter.service';
12 |
13 | @Component({
14 | selector: 'filter-section',
15 | templateUrl: 'filter.component.html',
16 | encapsulation: ViewEncapsulation.None,
17 | providers: [FilterService, AppComponent]
18 | })
19 | export class FilterComponent implements OnInit {
20 | @ViewChild('filterCash') cashFilter: CheckBoxComponent;
21 | @ViewChild('filterDebit') debitFilter: CheckBoxComponent;
22 | @ViewChild('filterCredit') creditFilter: CheckBoxComponent;
23 | @ViewChild('filterIncome') incomeFilter: CheckBoxComponent;
24 | @ViewChild('filterExpense') expenseFilter: CheckBoxComponent;
25 | @ViewChild('filterMinAmount') minAmtFilter: CheckBoxComponent;
26 | @ViewChild('filterMaxAmount') maxAmtFilter: CheckBoxComponent;
27 | @ViewChild('filterMultiSelect') multiSelectFilter: MultiSelectComponent;
28 | @ViewChild('filterDateRange') dateRangeFilter: DateRangePickerComponent;
29 |
30 | public cntCompObj: any;
31 | public minValue: number;
32 | public maxValue: number;
33 | public predicate: Predicate;
34 | public predicateEnd: Predicate;
35 | public tempData: IExpenseData[];
36 | public filterCategory: string[];
37 | public cashPredicate: Predicate;
38 | public predicateStart: Predicate;
39 | public debitPredicate: Predicate;
40 | public minAmtPredicate: Predicate;
41 | public maxAmtPredicate: Predicate;
42 | public incomePredicate: Predicate;
43 | public creditPredicate: Predicate;
44 | public expensePredicate: Predicate;
45 | public categoryPredicate: Predicate;
46 | public categoryPredicates: Predicate;
47 |
48 | constructor(
49 | public app: AppComponent,
50 | public filter: FilterService,
51 | private chgRef: ChangeDetectorRef
52 | ) {
53 | this.filterCategory = [];
54 | }
55 |
56 | public ngOnInit(): void {
57 | this.minValue = 0;
58 | this.maxValue = 0;
59 | this.tempData =
11 |
36 |
12 |
13 |
14 |
15 |
16 |
24 |
17 |
23 | {{userName}}
18 |
19 | 
20 | $ 0
21 |
22 |
20 | $ 0
21 |
25 |
28 |
31 |
34 |
35 |
37 |
41 |
--------------------------------------------------------------------------------
/src/app/menu/menu.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Directive, ElementRef } from '@angular/core';
2 |
3 | import { Browser, rippleEffect, isNullOrUndefined as isNOU, enableRipple } from '@syncfusion/ej2-base';
4 |
5 | import { userInfo } from '../common/common.data';
6 | enableRipple(true);
7 |
8 | @Component({
9 | selector: 'ng-app',
10 | templateUrl: 'menu.component.html'
11 | })
12 |
13 | export class MenuComponent {
14 | public menu: HTMLElement;
15 | public userName: string;
16 | public filterMenu: HTMLElement;
17 | public overlay: HTMLElement;
18 |
19 | constructor(public eleRef: ElementRef) {
20 | /** Loads the user data in the profile from the sidebar */
21 | this.userName = userInfo.FullName;
22 | rippleEffect(document.body, { selector: '.ripple-element', rippleFlag: true });
23 | }
24 |
25 | public ngAfterViewInit(): void {
26 | /** Holds the sidebar elements for later use */
27 | this.menu = this.eleRef.nativeElement.querySelector('#sidebar-wrapper');
28 | this.overlay = this.eleRef.nativeElement.querySelector('#overlay');
29 | }
30 |
31 | /** Toggles the sidebar open and close actions - for small resoultion */
32 | public toggleMenu(): void {
33 | if (this.menu.classList.contains('open')) {
34 | this.removeToggleClass();
35 | this.menu.classList.add('close');
36 | this.disableOverlay();
37 | } else if (this.menu.classList.contains('close')) {
38 | this.removeToggleClass();
39 | this.menu.classList.add('open');
40 | this.enableOverlay();
41 | } else {
42 | this.menu.classList.add('open');
43 | this.enableOverlay();
44 | }
45 | }
46 |
47 | public removeToggleClass(): void {
48 | this.menu.classList.remove('open');
49 | this.menu.classList.remove('close');
50 | }
51 |
52 | public enableOverlay(): void {
53 | this.overlay.classList.add('dialog');
54 | this.overlay.style.background = '#383838';
55 | }
56 |
57 | public disableOverlay(): void {
58 | this.overlay.classList.remove('dialog');
59 | this.overlay.style.background = 'none';
60 | }
61 |
62 | public handleOverlay(): void {
63 | this.disableOverlay();
64 | this.removeToggleClass();
65 | this.removeFilterToggleClass();
66 | }
67 |
68 | public removeFilterToggleClass(): void {
69 | this.menu.style.zIndex = '100001';
70 | this.filterMenu = this.eleRef.nativeElement.querySelector('.sidebar-wrapper-filter');
71 | if (!isNOU(this.filterMenu)) {
72 | this.filterMenu.classList.remove('filter-open');
73 | this.filterMenu.classList.remove('filter-close');
74 | }
75 | }
76 |
77 | /** Toggles the filter bar open and close actions */
78 | public toggleFilterMenu(): void {
79 | this.menu.style.zIndex = '10000';
80 | this.filterMenu = this.eleRef.nativeElement.querySelector('.sidebar-wrapper-filter');
81 | if (this.filterMenu.classList.contains('filter-open')) {
82 | this.filterMenu.classList.remove('filter-open');
83 | this.filterMenu.classList.add('filter-close');
84 | this.disableOverlay();
85 | } else if (this.filterMenu.classList.contains('filter-close')) {
86 | this.filterMenu.classList.remove('filter-close');
87 | this.filterMenu.classList.add('filter-open');
88 | this.enableOverlay();
89 | } else {
90 | this.filterMenu.classList.add('filter-open');
91 | this.enableOverlay();
92 | }
93 | }
94 |
95 | public onNavigationClick(args: MouseEvent): void {
96 | if ((args.target as HTMLElement).nodeName === 'A') {
97 | this.handleOverlay();
98 | }
99 | }
100 | }
--------------------------------------------------------------------------------
/src/assets/definition/material.scss:
--------------------------------------------------------------------------------
1 | $accent: #ff4081;
2 | $accent-font: #fff;
3 |
4 | $primary: #3f51b5;
5 | $primary-50: lighten($primary, 38%);
6 | $primary-100: lighten($primary, 31%);
7 | $primary-200: lighten($primary, 19%);
8 | $primary-300: lighten($primary, 8%);
9 | $primary-font: #fff;
10 | $primary-50-font: #000;
11 | $primary-100-font: #000;
12 | $primary-200-font: #000;
13 | $primary-300-font: #fff;
14 | $grey-white: #fff;
15 | $grey-black: #000;
16 | $grey-50: #fafafa;
17 | $grey-100: #f5f5f5;
18 | $grey-200: #eee;
19 | $grey-300: #e0e0e0;
20 | $grey-400: #bdbdbd;
21 | $grey-500: #9e9e9e;
22 | $grey-600: #757575;
23 | $grey-700: #616161;
24 | $grey-800: #424242;
25 | $grey-900: #212121;
26 | $grey-dark: #303030;
27 | $grey-light-font: #000;
28 | $grey-dark-font: #fff;
29 | $base-font: #000;
30 | $error-font: #f44336;
31 |
--------------------------------------------------------------------------------
/src/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/favicon.ico
--------------------------------------------------------------------------------
/src/assets/images/About.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/images/AvailableCash.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/images/Home.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/assets/images/OverallTransactions.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/images/Profile-img-Desktop:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/Profile-img-Desktop
--------------------------------------------------------------------------------
/src/assets/images/Profile-img-Mobile:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/Profile-img-Mobile
--------------------------------------------------------------------------------
/src/assets/images/Search.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/assets/images/TotalExpenses.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/images/TotalIncome.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/images/Transactions.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/src/assets/images/balance.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/assets/images/cash-wallet.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/assets/images/category/bills.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/bills.png
--------------------------------------------------------------------------------
/src/assets/images/category/business.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/business.png
--------------------------------------------------------------------------------
/src/assets/images/category/clothing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/clothing.png
--------------------------------------------------------------------------------
/src/assets/images/category/education.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/education.png
--------------------------------------------------------------------------------
/src/assets/images/category/entertainment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/entertainment.png
--------------------------------------------------------------------------------
/src/assets/images/category/extra.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/extra.png
--------------------------------------------------------------------------------
/src/assets/images/category/food.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/food.png
--------------------------------------------------------------------------------
/src/assets/images/category/health.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/health.png
--------------------------------------------------------------------------------
/src/assets/images/category/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/house.png
--------------------------------------------------------------------------------
/src/assets/images/category/insurance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/insurance.png
--------------------------------------------------------------------------------
/src/assets/images/category/interest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/interest.png
--------------------------------------------------------------------------------
/src/assets/images/category/miscellaneous.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/miscellaneous.png
--------------------------------------------------------------------------------
/src/assets/images/category/personal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/personal.png
--------------------------------------------------------------------------------
/src/assets/images/category/rent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/rent.png
--------------------------------------------------------------------------------
/src/assets/images/category/salary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/salary.png
--------------------------------------------------------------------------------
/src/assets/images/category/shopping.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/shopping.png
--------------------------------------------------------------------------------
/src/assets/images/category/tax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/tax.png
--------------------------------------------------------------------------------
/src/assets/images/category/transport.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/transport.png
--------------------------------------------------------------------------------
/src/assets/images/category/utilities.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/category/utilities.png
--------------------------------------------------------------------------------
/src/assets/images/exp-track.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/exp-track.png
--------------------------------------------------------------------------------
/src/assets/images/expense.svg:
--------------------------------------------------------------------------------
1 |
38 |
--------------------------------------------------------------------------------
/src/assets/images/fonts/Expense-Analysis-Sample.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/Expense-Analysis-Sample.eot
--------------------------------------------------------------------------------
/src/assets/images/fonts/Expense-Analysis-Sample.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/images/fonts/Expense-Analysis-Sample.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/Expense-Analysis-Sample.ttf
--------------------------------------------------------------------------------
/src/assets/images/fonts/Expense-Analysis-Sample.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/Expense-Analysis-Sample.woff
--------------------------------------------------------------------------------
/src/assets/images/fonts/controls.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/controls.eot
--------------------------------------------------------------------------------
/src/assets/images/fonts/controls.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/images/fonts/controls.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/controls.ttf
--------------------------------------------------------------------------------
/src/assets/images/fonts/controls.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/controls.woff
--------------------------------------------------------------------------------
/src/assets/images/fonts/icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/icons.eot
--------------------------------------------------------------------------------
/src/assets/images/fonts/icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/images/fonts/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/icons.ttf
--------------------------------------------------------------------------------
/src/assets/images/fonts/icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/fonts/icons.woff
--------------------------------------------------------------------------------
/src/assets/images/i.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/images/income.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/src/assets/images/no-records.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syncfusion/ej2-showcase-angular-expensetracker/e83ec6b422b78b4af7141fee40b0105f57443e77/src/assets/images/no-records.png
--------------------------------------------------------------------------------
/src/assets/images/t.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/images/title.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
81 |
--------------------------------------------------------------------------------
/src/assets/images/transaction.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/assets/styles.scss:
--------------------------------------------------------------------------------
1 | //sass-lint:disable-all
2 | @import 'definition/material.scss';
3 | @import 'ej2-base/styles/material-definition.scss';
4 | @import 'ej2-base/styles/all.scss';
5 | @import 'ej2-base/styles/definition/_material.scss';
6 | @import 'ej2-icons/styles/material.scss';
7 | $accent: #4273F9;
8 | $accent-font: #fff;
9 | @import 'ej2-buttons/styles/button/material-definition.scss';
10 | @import 'ej2-buttons/styles/button/all.scss';
11 | @import 'ej2-inputs/styles/input/material-definition.scss';
12 | @import 'ej2-inputs/styles/input/icons/material.scss';
13 | @import 'ej2-inputs/styles/input/all.scss';
14 | @import 'ej2-inputs/styles/numerictextbox/material-definition.scss';
15 | @import 'ej2-inputs/styles/numerictextbox/icons/material.scss';
16 | @import 'ej2-inputs/styles/numerictextbox/all.scss';
17 | @import 'ej2-calendars/styles/calendar/material-definition.scss';
18 | @import 'ej2-calendars/styles/calendar/icons/material.scss';
19 | @import 'ej2-calendars/styles/calendar/all.scss';
20 | @import 'ej2-buttons/styles/check-box/material-definition.scss';
21 | @import 'ej2-buttons/styles/check-box/icons/material.scss';
22 | @import 'ej2-buttons/styles/check-box/all.scss';
23 | @import 'ej2-navigations/styles/context-menu/material-definition.scss';
24 | @import 'ej2-navigations/styles/context-menu/icons/material.scss';
25 | @import 'ej2-navigations/styles/context-menu/all.scss';
26 | @import 'ej2-calendars/styles/datepicker/material-definition.scss';
27 | @import 'ej2-calendars/styles/datepicker/icons/material.scss';
28 | @import 'ej2-calendars/styles/datepicker/all.scss';
29 | @import 'ej2-calendars/styles/daterangepicker/material-definition.scss';
30 | @import 'ej2-calendars/styles/daterangepicker/icons/material.scss';
31 | @import 'ej2-calendars/styles/daterangepicker/all.scss';
32 | @import 'ej2-popups/styles/dialog/material-definition.scss';
33 | @import 'ej2-popups/styles/dialog/icons/material.scss';
34 | @import 'ej2-popups/styles/dialog/all.scss';
35 | @import 'ej2-dropdowns/styles/drop-down-base/material-definition.scss';
36 | @import 'ej2-dropdowns/styles/drop-down-base/all.scss';
37 | @import 'ej2-dropdowns/styles/drop-down-list/material-definition.scss';
38 | @import 'ej2-dropdowns/styles/drop-down-list/icons/material.scss';
39 | @import 'ej2-dropdowns/styles/drop-down-list/all.scss';
40 | @import 'ej2-navigations/styles/h-scroll/material-definition.scss';
41 | @import 'ej2-navigations/styles/h-scroll/icons/material.scss';
42 | @import 'ej2-navigations/styles/h-scroll/all.scss';
43 | @import 'ej2-lists/styles/list-view/material-definition.scss';
44 | @import 'ej2-lists/styles/list-view/icons/material.scss';
45 | @import 'ej2-lists/styles/list-view/all.scss';
46 | @import 'ej2-dropdowns/styles/multi-select/material-definition.scss';
47 | @import 'ej2-dropdowns/styles/multi-select/icons/material.scss';
48 | @import 'ej2-dropdowns/styles/multi-select/all.scss';
49 | @import 'ej2-popups/styles/popup/all.scss';
50 | @import 'ej2-buttons/styles/radio-button/material-definition.scss';
51 | @import 'ej2-buttons/styles/radio-button/all.scss';
52 | @import 'ej2-popups/styles/spinner/material-definition.scss';
53 | @import 'ej2-popups/styles/spinner/all.scss';
54 | @import 'ej2-calendars/styles/timepicker/material-definition.scss';
55 | @import 'ej2-calendars/styles/timepicker/icons/material.scss';
56 | @import 'ej2-calendars/styles/timepicker/all.scss';
57 | @import 'ej2-navigations/styles/toolbar/material-definition.scss';
58 | @import 'ej2-navigations/styles/toolbar/icons/material.scss';
59 | @import 'ej2-navigations/styles/toolbar/all.scss';
60 | @import 'ej2-popups/styles/tooltip/material-definition.scss';
61 | @import 'ej2-popups/styles/tooltip/icons/material.scss';
62 | @import 'ej2-popups/styles/tooltip/all.scss';
63 | @import 'ej2-grids/styles/grid/icons/material.scss';
64 | @import 'ej2-grids/styles/grid/material-definition.scss';
65 | @import 'ej2-grids/styles/grid/all.scss';
66 | @import 'ej2-grids/styles/pager/material-definition.scss';
67 | @import 'ej2-grids/styles/pager/icons/material.scss';
68 | @import 'ej2-grids/styles/pager/all.scss';
69 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
38 |
40 |