11< div [@routerTransition] >
2- < div class ="block-header ">
3- < h2 > {{l('WellcomeMessage')}}</ h2 >
4- </ div >
2+
3+ < div class ="block-header ">
4+ < h2 > SAMPLE DASHBOARD</ h2 >
5+ </ div >
6+
7+ <!-- Widgets -->
8+ < div class ="row clearfix ">
9+ < div class ="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
10+ < div class ="info-box bg-pink hover-expand-effect ">
11+ < div class ="icon ">
12+ < i class ="material-icons "> playlist_add_check</ i >
13+ </ div >
14+ < div class ="content ">
15+ < div class ="text "> NEW TASKS</ div >
16+ < div class ="number count-to " data-from ="0 " data-to ="125 " data-speed ="1000 " data-fresh-interval ="20 "> </ div >
17+ </ div >
18+ </ div >
19+ </ div >
20+ < div class ="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
21+ < div class ="info-box bg-cyan hover-expand-effect ">
22+ < div class ="icon ">
23+ < i class ="material-icons "> help</ i >
24+ </ div >
25+ < div class ="content ">
26+ < div class ="text "> NEW TICKETS</ div >
27+ < div class ="number count-to " data-from ="0 " data-to ="257 " data-speed ="1000 " data-fresh-interval ="20 "> </ div >
28+ </ div >
29+ </ div >
30+ </ div >
31+ < div class ="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
32+ < div class ="info-box bg-light-green hover-expand-effect ">
33+ < div class ="icon ">
34+ < i class ="material-icons "> forum</ i >
35+ </ div >
36+ < div class ="content ">
37+ < div class ="text "> NEW COMMENTS</ div >
38+ < div class ="number count-to " data-from ="0 " data-to ="243 " data-speed ="1000 " data-fresh-interval ="20 "> </ div >
39+ </ div >
40+ </ div >
41+ </ div >
42+ < div class ="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
43+ < div class ="info-box bg-orange hover-expand-effect ">
44+ < div class ="icon ">
45+ < i class ="material-icons "> person_add</ i >
46+ </ div >
47+ < div class ="content ">
48+ < div class ="text "> NEW VISITORS</ div >
49+ < div class ="number count-to " data-from ="0 " data-to ="1225 " data-speed ="1000 " data-fresh-interval ="20 "> </ div >
50+ </ div >
51+ </ div >
52+ </ div >
53+ </ div >
54+ <!-- #END# Widgets -->
55+ <!-- CPU Usage -->
56+ < div class ="row clearfix ">
57+ < div class ="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
58+ < div class ="card ">
59+ < div class ="header ">
60+ < div class ="row clearfix ">
61+ < div class ="col-xs-12 col-sm-6 ">
62+ < h2 > CPU USAGE (%)</ h2 >
63+ </ div >
64+ < div class ="col-xs-12 col-sm-6 align-right ">
65+ < div class ="switch panel-switch-btn ">
66+ < span class ="m-r-10 font-12 "> REAL TIME</ span >
67+ < label > OFF< input type ="checkbox " id ="realtime " checked > < span class ="lever switch-col-cyan "> </ span > ON</ label >
68+ </ div >
69+ </ div >
70+ </ div >
71+ < ul class ="header-dropdown m-r--5 ">
72+ < li class ="dropdown ">
73+ < a href ="javascript:void(0); " class ="dropdown-toggle " data-toggle ="dropdown " role ="button " aria-haspopup ="true " aria-expanded ="false ">
74+ < i class ="material-icons "> more_vert</ i >
75+ </ a >
76+ < ul class ="dropdown-menu pull-right ">
77+ < li > < a href ="javascript:void(0); "> Action</ a > </ li >
78+ < li > < a href ="javascript:void(0); "> Another action</ a > </ li >
79+ < li > < a href ="javascript:void(0); "> Something else here</ a > </ li >
80+ </ ul >
81+ </ li >
82+ </ ul >
83+ </ div >
84+ < div class ="body ">
85+ < div id ="real_time_chart " class ="dashboard-flot-chart "> </ div >
86+ </ div >
87+ </ div >
88+ </ div >
89+ </ div >
90+ <!-- #END# CPU Usage -->
91+ < div class ="row clearfix ">
92+ <!-- Visitors -->
93+ < div class ="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
94+ < div class ="card ">
95+ < div class ="body bg-pink ">
96+ < div class ="sparkline " data-type ="line " data-spot-Radius ="4 " data-highlight-Spot-Color ="rgb(233, 30, 99) " data-highlight-Line-Color ="#fff "
97+ data-min-Spot-Color ="rgb(255,255,255) " data-max-Spot-Color ="rgb(255,255,255) " data-spot-Color ="rgb(255,255,255) "
98+ data-offset ="90 " data-width ="100% " data-height ="92px " data-line-Width ="2 " data-line-Color ="rgba(255,255,255,0.7) "
99+ data-fill-Color ="rgba(0, 188, 212, 0) ">
100+ 12,10,9,6,5,6,10,5,7,5,12,13,7,12,11
101+ </ div >
102+ < ul class ="dashboard-stat-list ">
103+ < li >
104+ TODAY
105+ < span class ="pull-right "> < b > 1 200</ b > < small > USERS</ small > </ span >
106+ </ li >
107+ < li >
108+ YESTERDAY
109+ < span class ="pull-right "> < b > 3 872</ b > < small > USERS</ small > </ span >
110+ </ li >
111+ < li >
112+ LAST WEEK
113+ < span class ="pull-right "> < b > 26 582</ b > < small > USERS</ small > </ span >
114+ </ li >
115+ </ ul >
116+ </ div >
117+ </ div >
118+ </ div >
119+ <!-- #END# Visitors -->
120+ <!-- Latest Social Trends -->
121+ < div class ="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
122+ < div class ="card ">
123+ < div class ="body bg-cyan ">
124+ < div class ="m-b--35 font-bold "> LATEST SOCIAL TRENDS</ div >
125+ < ul class ="dashboard-stat-list ">
126+ < li >
127+ #socialtrends
128+ < span class ="pull-right ">
129+ < i class ="material-icons "> trending_up</ i >
130+ </ span >
131+ </ li >
132+ < li >
133+ #materialdesign
134+ < span class ="pull-right ">
135+ < i class ="material-icons "> trending_up</ i >
136+ </ span >
137+ </ li >
138+ < li > #adminbsb</ li >
139+ < li > #freeadmintemplate</ li >
140+ < li > #bootstraptemplate</ li >
141+ < li >
142+ #freehtmltemplate
143+ < span class ="pull-right ">
144+ < i class ="material-icons "> trending_up</ i >
145+ </ span >
146+ </ li >
147+ </ ul >
148+ </ div >
149+ </ div >
150+ </ div >
151+ <!-- #END# Latest Social Trends -->
152+ <!-- Answered Tickets -->
153+ < div class ="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
154+ < div class ="card ">
155+ < div class ="body bg-teal ">
156+ < div class ="font-bold m-b--35 "> ANSWERED TICKETS</ div >
157+ < ul class ="dashboard-stat-list ">
158+ < li >
159+ TODAY
160+ < span class ="pull-right "> < b > 12</ b > < small > TICKETS</ small > </ span >
161+ </ li >
162+ < li >
163+ YESTERDAY
164+ < span class ="pull-right "> < b > 15</ b > < small > TICKETS</ small > </ span >
165+ </ li >
166+ < li >
167+ LAST WEEK
168+ < span class ="pull-right "> < b > 90</ b > < small > TICKETS</ small > </ span >
169+ </ li >
170+ < li >
171+ LAST MONTH
172+ < span class ="pull-right "> < b > 342</ b > < small > TICKETS</ small > </ span >
173+ </ li >
174+ < li >
175+ LAST YEAR
176+ < span class ="pull-right "> < b > 4 225</ b > < small > TICKETS</ small > </ span >
177+ </ li >
178+ < li >
179+ ALL
180+ < span class ="pull-right "> < b > 8 752</ b > < small > TICKETS</ small > </ span >
181+ </ li >
182+ </ ul >
183+ </ div >
184+ </ div >
185+ </ div >
186+ <!-- #END# Answered Tickets -->
187+ </ div >
188+ < div class ="row clearfix ">
189+ <!-- Task Info -->
190+ < div class ="col-xs-12 col-sm-12 col-md-8 col-lg-8 ">
191+ < div class ="card ">
192+ < div class ="header ">
193+ < h2 > TASK INFOS</ h2 >
194+ < ul class ="header-dropdown m-r--5 ">
195+ < li class ="dropdown ">
196+ < a href ="javascript:void(0); " class ="dropdown-toggle " data-toggle ="dropdown " role ="button " aria-haspopup ="true " aria-expanded ="false ">
197+ < i class ="material-icons "> more_vert</ i >
198+ </ a >
199+ < ul class ="dropdown-menu pull-right ">
200+ < li > < a href ="javascript:void(0); "> Action</ a > </ li >
201+ < li > < a href ="javascript:void(0); "> Another action</ a > </ li >
202+ < li > < a href ="javascript:void(0); "> Something else here</ a > </ li >
203+ </ ul >
204+ </ li >
205+ </ ul >
206+ </ div >
207+ < div class ="body ">
208+ < div class ="table-responsive ">
209+ < table class ="table table-hover dashboard-task-infos ">
210+ < thead >
211+ < tr >
212+ < th > #</ th >
213+ < th > Task</ th >
214+ < th > Status</ th >
215+ < th > Manager</ th >
216+ < th > Progress</ th >
217+ </ tr >
218+ </ thead >
219+ < tbody >
220+ < tr >
221+ < td > 1</ td >
222+ < td > Task A</ td >
223+ < td > < span class ="label bg-green "> Doing</ span > </ td >
224+ < td > John Doe</ td >
225+ < td >
226+ < div class ="progress ">
227+ < div class ="progress-bar bg-green " role ="progressbar " aria-valuenow ="62 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 62% "> </ div >
228+ </ div >
229+ </ td >
230+ </ tr >
231+ < tr >
232+ < td > 2</ td >
233+ < td > Task B</ td >
234+ < td > < span class ="label bg-blue "> To Do</ span > </ td >
235+ < td > John Doe</ td >
236+ < td >
237+ < div class ="progress ">
238+ < div class ="progress-bar bg-blue " role ="progressbar " aria-valuenow ="40 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 40% "> </ div >
239+ </ div >
240+ </ td >
241+ </ tr >
242+ < tr >
243+ < td > 3</ td >
244+ < td > Task C</ td >
245+ < td > < span class ="label bg-light-blue "> On Hold</ span > </ td >
246+ < td > John Doe</ td >
247+ < td >
248+ < div class ="progress ">
249+ < div class ="progress-bar bg-light-blue " role ="progressbar " aria-valuenow ="72 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 72% "> </ div >
250+ </ div >
251+ </ td >
252+ </ tr >
253+ < tr >
254+ < td > 4</ td >
255+ < td > Task D</ td >
256+ < td > < span class ="label bg-orange "> Wait Approvel</ span > </ td >
257+ < td > John Doe</ td >
258+ < td >
259+ < div class ="progress ">
260+ < div class ="progress-bar bg-orange " role ="progressbar " aria-valuenow ="95 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 95% "> </ div >
261+ </ div >
262+ </ td >
263+ </ tr >
264+ < tr >
265+ < td > 5</ td >
266+ < td > Task E</ td >
267+ < td >
268+ < span class ="label bg-red "> Suspended</ span >
269+ </ td >
270+ < td > John Doe</ td >
271+ < td >
272+ < div class ="progress ">
273+ < div class ="progress-bar bg-red " role ="progressbar " aria-valuenow ="87 " aria-valuemin ="0 " aria-valuemax ="100 " style ="width: 87% "> </ div >
274+ </ div >
275+ </ td >
276+ </ tr >
277+ </ tbody >
278+ </ table >
279+ </ div >
280+ </ div >
281+ </ div >
282+ </ div >
283+ <!-- #END# Task Info -->
284+ <!-- Browser Usage -->
285+ < div class ="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
286+ < div class ="card ">
287+ < div class ="header ">
288+ < h2 > BROWSER USAGE</ h2 >
289+ < ul class ="header-dropdown m-r--5 ">
290+ < li class ="dropdown ">
291+ < a href ="javascript:void(0); " class ="dropdown-toggle " data-toggle ="dropdown " role ="button " aria-haspopup ="true " aria-expanded ="false ">
292+ < i class ="material-icons "> more_vert</ i >
293+ </ a >
294+ < ul class ="dropdown-menu pull-right ">
295+ < li > < a href ="javascript:void(0); "> Action</ a > </ li >
296+ < li > < a href ="javascript:void(0); "> Another action</ a > </ li >
297+ < li > < a href ="javascript:void(0); "> Something else here</ a > </ li >
298+ </ ul >
299+ </ li >
300+ </ ul >
301+ </ div >
302+ < div class ="body ">
303+ < div id ="donut_chart " class ="dashboard-donut-chart "> </ div >
304+ </ div >
305+ </ div >
306+ </ div >
307+ <!-- #END# Browser Usage -->
308+ </ div >
309+
5310</ div >
0 commit comments