Initial commit of Fax portal

app.js

@@ -0,0 +1,518 @@
+define(function(require){
+	var $ = require('jquery'),
+		_ = require('underscore'),
+		monster = require('monster'),
+		chosen = require('chosen');
+
+	var app = {
+		name: 'fax',
+
+		css: [ 'app' ],
+
+		i18n: { 
+			'en-US': { customCss: false }
+		},
+
+		requests: {},
+		subscribe: {},
+
+		load: function(callback){
+			var self = this;
+
+			self.initApp(function() {
+				callback && callback(self);
+			});
+		},
+
+		appFlags: {
+			ranges: {
+				default: 7,
+				max: 31
+			},
+			faxboxes: {}
+		},
+
+		initApp: function(callback) {
+			var self = this;
+
+			monster.pub('auth.initApp', {
+				app: self,
+				callback: callback
+			});
+		},
+
+		render: function(container) {
+			var self = this;
+
+			self.listFaxboxes(function(faxboxes) {
+				console.log(faxboxes);
+				self.appFlags.faxboxes = _.indexBy(faxboxes, 'id');
+
+				monster.ui.generateAppLayout(self, {
+					appName: self.i18n.active().fax.title,
+					menus: [
+						{
+							tabs: [
+								{
+									text: self.i18n.active().fax.menuTitles.inbound,
+									callback: self.renderInbound
+								},
+								{
+									text: self.i18n.active().fax.menuTitles.outbound,
+									callback: self.renderOutbound
+								}
+							]
+						}
+					]
+				});
+			});
+		},
+
+		renderInbound: function(pArgs) {
+			var self = this,
+				args = pArgs || {},
+				parent = args.container || $('#fax_app_container .app-content-wrapper'),
+				dates = monster.util.getDefaultRangeDates(self.appFlags.ranges.default),
+				fromDate = dates.from,
+				toDate = dates.to;
+
+			var template = $(monster.template(self, 'inbound-faxes', { faxboxes: self.appFlags.faxboxes }));
+
+			self.bindCommon(template);
+			self.bindInbound(template);
+
+			self.initDatePicker('inbound', template, fromDate, toDate);
+
+			parent
+				.fadeOut(function() {
+					$(this)
+						.empty()
+						.append(template)
+						.fadeIn();
+				});
+
+			self.displayInboundFaxesList(template, fromDate, toDate);
+		},
+
+		renderOutbound: function(pArgs) {
+			var self = this,
+				args = pArgs || {},
+				parent = args.container || $('#fax_app_container .app-content-wrapper'),
+				dates = monster.util.getDefaultRangeDates(self.appFlags.ranges.default),
+				fromDate = dates.from,
+				toDate = dates.to;
+
+			var template = $(monster.template(self, 'outbound-faxes', { faxboxes: self.appFlags.faxboxes }));
+
+			self.bindCommon(template);
+			self.bindOutbound(template);
+
+			self.initDatePicker('outbound', template, fromDate, toDate);
+
+			parent
+				.fadeOut(function() {
+					$(this)
+						.empty()
+						.append(template)
+						.fadeIn();
+				});
+
+			self.displayOutboundFaxesList(template, fromDate, toDate);
+		},
+
+		displayInboundFaxesList: function(container, fromDate, toDate) {
+			var self = this;
+
+			container.find('.data-state')
+					 .hide();
+
+			container.find('.loading-state')
+					 .show();
+
+			self.getInboundData(fromDate, toDate, function(data) {
+				var dataTemplate = self.formatInboundData(data);
+
+				container.removeClass('empty');
+
+				container.find('.main-select-message').prop('checked', false);
+
+				var template = $(monster.template(self, 'inbound-faxes-list', { faxes: dataTemplate }));
+
+				monster.ui.footable(template.find('.footable'));
+
+				self.bindTableCommon(template);
+
+				container.find('.data-state')
+						 .empty()
+						 .append(template)
+						 .show();
+
+				container.find('.loading-state')
+						 .hide();
+			});
+		},
+
+		displayOutboundFaxesList: function(container, fromDate, toDate) {
+			var self = this;
+
+			container.find('.data-state')
+					 .hide();
+
+			container.find('.loading-state')
+					 .show();
+
+			self.getOutboundData(fromDate, toDate, function(data) {
+				var dataTemplate = self.formatOutboundData(data);
+
+				container.removeClass('empty');
+
+				container.find('.main-select-message').prop('checked', false);
+
+				var template = $(monster.template(self, 'outbound-faxes-list', { faxes: dataTemplate }));
+
+				monster.ui.footable(template.find('.footable'));
+
+				self.bindTableCommon(template);
+
+				container.find('.data-state')
+						 .empty()
+						 .append(template)
+						 .show();
+
+				container.find('.loading-state')
+						 .hide();
+			});
+		},
+
+		bindTableCommon: function(template) {
+			var self = this;
+
+			template.find('#fax_list').on('click', '.details-fax', function() {
+				var $this = $(this),
+					type = $this.parents('.faxes-table').data('type'),
+					id = $(this).parents('tr').data('id');
+
+				self.renderDetailsFax(type, id);
+			});
+		},
+
+		renderDetailsFax: function(type, id) {
+			var self = this;
+
+			self.getFaxDetails(type, id, function(faxDetails) {
+				var template = $(monster.template(self, 'fax-CDRDialog'));
+
+				monster.ui.renderJSON(faxDetails, template.find('#jsoneditor'));
+
+				monster.ui.dialog(template, { title: self.i18n.active().fax.CDRPopup.title });
+			});
+		},
+
+		getInboundData: function(fromDate, toDate, callback) {
+			var self = this;
+
+			self.getInboundFaxes(fromDate, toDate, function(faxes) {
+				callback && callback(faxes)
+			});
+		},
+
+		getOutboundData: function(fromDate, toDate, callback) {
+			var self = this;
+
+			self.getOutboundFaxes(fromDate, toDate, function(faxes) {
+				callback && callback(faxes)
+			});
+		},
+
+		initDatePicker: function(type, template, fromDate, toDate) {
+			var self = this;
+
+			var optionsDatePicker = {
+				container: template,
+				range: self.appFlags.ranges.max
+			};
+
+			monster.ui.initRangeDatepicker(optionsDatePicker);
+
+			template.find('#startDate').datepicker('setDate', fromDate);
+			template.find('#endDate').datepicker('setDate', toDate);
+
+			template.find('.apply-filter').on('click', function(e) {
+				self.refreshFaxes(type, template);
+			});
+		},
+
+		refreshFaxes: function(type, template) {
+			var self = this,
+				fnName = type === 'inbound' ? 'displayInboundFaxesList' : 'displayOutboundFaxesList',
+				fromDate = template.find('input.filter-from').datepicker("getDate"),
+				toDate = template.find('input.filter-to').datepicker("getDate");
+
+			self[fnName](template, fromDate, toDate);
+		},
+
+		bindCommon: function(template) {
+			var self = this,
+				currentVM,
+				$selectFaxbox = template.find('#select_faxbox');
+
+			monster.ui.tooltips(template);
+
+			$selectFaxbox.chosen({search_contains: true, width: '220px', placeholder_text_single: self.i18n.active().fax.actionBar.selectFax.none });
+
+			$selectFaxbox.on('change', function(e) {
+				var filtering = FooTable.get('#fax_list').use(FooTable.Filtering),
+					filter = $(this).val();
+
+				if(filter === 'all') {
+					filtering.removeFilter('faxbox_filter');
+				}
+				else {
+					filtering.addFilter('faxbox_filter', filter, [0]);
+				}
+
+				filtering.filter();
+			});
+
+			function afterSelect() {
+				if(template.find('.select-fax:checked').length) {
+					template.find('.main-select-fax').prop('checked', true);
+					template.find('.actionable').show();
+				}
+				else{
+					template.find('.main-select-fax').prop('checked', false);
+					template.find('.actionable').hide();
+				}
+			}
+
+			template.on('click', '.select-fax', function() {
+				afterSelect();
+			});
+
+			template.find('.main-select-fax').on('click', function() {
+				var $this = $(this),
+					isChecked = $this.prop('checked');
+
+				template.find('.select-fax').prop('checked', isChecked);
+
+				afterSelect();
+			});
+
+			template.find('.select-some-faxes').on('click', function() {
+				var $this = $(this),
+					type = $this.data('type');
+
+				template.find('.select-fax').prop('checked', false);
+
+				if(type !== 'none') {
+					if(type === 'all') {
+						template.find('.select-fax').prop('checked', true);
+					}
+					else {
+						template.find('.select-fax[data-status="' + type + '"]').prop('checked', true);
+					}
+				}
+
+				afterSelect();
+			});
+		},
+
+		bindInbound: function(template) {
+			var self = this;
+
+			template.find('#refresh_faxbox').on('click', function() {
+				self.refreshInboundFaxes(template);
+			});
+		},
+
+		bindOutbound: function(template) {
+			var self = this;
+
+			template.find('#refresh_faxbox').on('click', function() {
+				self.refreshOutboundFaxes(template);
+			});
+		},
+
+		formatInboundData: function(data) {
+			var self = this,
+				formattedFaxes = self.formatFaxes(data);
+
+			return formattedFaxes;
+		},
+
+		formatOutboundData: function(data) {
+			var self = this,
+				formattedFaxes = self.formatFaxes(data);
+
+			return formattedFaxes;
+		},
+
+		formatFaxes: function(data) {
+			var self = this;
+
+			_.each(data, function(fax) {
+				fax.formatted = {};
+				fax.formatted.timestamp = monster.util.toFriendlyDate(fax.created);
+				fax.formatted.receivingFaxbox = self.appFlags.faxboxes.hasOwnProperty(fax.faxbox_id) ? self.appFlags.faxboxes[fax.faxbox_id].name : '-';
+				fax.formatted.receivingNumber = monster.util.formatPhoneNumber(fax.to);
+				fax.formatted.sendingFaxbox = self.appFlags.faxboxes.hasOwnProperty(fax.faxbox_id) ? self.appFlags.faxboxes[fax.faxbox_id].name : '-';
+				fax.formatted.sendingNumber = monster.util.formatPhoneNumber(fax.from);
+				fax.formatted.pages = fax.hasOwnProperty('pages') ? fax.pages : self.i18n.active().fax.table.noData;
+				fax.formatted.uri = self.formatFaxURI(fax.id);
+			});
+
+			return data;
+		},
+
+		formatFaxURI: function(mediaId) {
+			var self = this;
+
+			return self.apiUrl + 'accounts/' + self.accountId + '/faxes/' + mediaId + '/attachments?auth_token=' + self.authToken;
+		},
+
+/*		getFaxbox: function(faxboxId, callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'faxbox.get',
+				data: {
+					accountId: self.accountId,
+					faxboxId: faxboxId
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});
+		},
+*/
+		getInboundFaxes: function(fromDate, toDate, callback) {
+			var self = this;
+
+			var data = {
+					data: [
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321',  status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63554255365, faxbox_id: '02a83067c611d8567373775ac848ed16', to: '+1141412321', from: '+14159993333', pages: 2 }
+					]
+				};
+
+			self.listFaxboxes(function() {
+				callback && callback(data.data);
+			});
+
+			// fake processing time
+			/*self.callApi({
+				resource: 'faxes.listInbound',
+				data: {
+					accountId: self.accountId,
+					filters: {
+						created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
+						created_to:  monster.util.dateToEndOfGregorianDay(toDate),
+						paginate: false
+					},
+
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});*/
+		},
+
+		getOutboundFaxes: function(fromDate, toDate, callback) {
+			var self = this;
+
+			var data = {
+					data: [
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'failed', timestamp: 63574255365, faxbox_id: 'ee6d7483b508bf3dfd2699a9e5ff5414', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'processing', timestamp: 63514255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 1 },
+						{ id: '239183-102830-1293132130210321',  status: 'success', timestamp: 63524255365, faxbox_id: 'c9e068f1808125194739047e4c11c5f0', to: '+1141412321', from: '+14159993333', pages: 4 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63534255365, faxbox_id: 'bf67dc990c6beb73336e3052b3f5a99d', to: '+1141412321', from: '+14159993333', pages: 3 },
+						{ id: '239183-102830-1293132130210321', status: 'success', timestamp: 63554255365, faxbox_id: '02a83067c611d8567373775ac848ed16', to: '+1141412321', from: '+14159993333', pages: 2 }
+					]
+				};
+
+
+			self.listFaxboxes(function() {
+				callback && callback(data.data);
+			});
+
+			/*self.callApi({
+				resource: 'faxes.listOutbound',
+				data: {
+					accountId: self.accountId,
+					filters: {
+						created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
+						created_to:  monster.util.dateToEndOfGregorianDay(toDate),
+						paginate: false
+					},
+
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});*/
+		},
+
+		listFaxboxes: function(callback) {
+			var self = this;
+
+			self.callApi({
+				resource: 'faxbox.list',
+				data: {
+					accountId: self.accountId,
+					filters: {
+						paginate: false
+					}
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});
+		},
+
+		getFaxDetails: function(type, faxId, callback) {
+			var self = this,
+				resourceName = 'faxes.' + (type === 'inbound' ? 'getAttachmentInbound' : 'getAttachmentOutbound');
+				//resourceName = 'faxes.' + (type === 'inbound' ? 'getDetailsInbound' : 'getDetailsOutbound');
+
+			self.callApi({
+				resource: resourceName,
+				data: {
+					accountId: self.accountId,
+					faxId: faxId
+				},
+				success: function(data) {
+					callback && callback(data.data);
+				}
+			});
+		}
+	};
+
+	return app;
+});

i18n/en-US.json

@@ -0,0 +1,59 @@
+{
+	"fax": {
+		"title": "Fax Portal",
+		"menuTitles": {
+			"inbound": "Inbound faxes",
+			"outbound": "Outbound faxes"
+		},
+		"table": {
+			"columns": {
+				"status": "Status",
+				"sent": "Sent",
+				"sendingFaxbox": "Sending Faxbox",
+				"sendingNumber": "Sending Number",
+				"received": "Received",
+				"receivingFaxbox": "Receiving Faxbox",
+				"receivingNumber": "Receiving Number",
+				"pages": "Pages",
+				"from": "From"
+			},
+			"emptyRow": "There are no faxes listed under this Fax Box",
+			"status": {
+				"success": "Success",
+				"processing": "Processing",
+				"failed": "Failed",
+				"pending": "Pending",
+				"completed": "Completed"
+			},
+			"noData": "N/A"
+		},
+		"actionBar": {
+			"select": {
+				"all": "All on page",
+				"failed": "Failed",
+				"completed": "Completed",
+				"none": "None"
+			},
+			"selectFax": {
+				"none": "Filter to a specific Faxbox",
+				"all": "Show All Faxboxes"
+			},
+			"from": "From",
+			"to": "To",
+			"markAsNew": "Mark as New",
+			"tooltips": {
+				"refresh": "Refresh",
+				"select": "Select",
+				"resend": "Resend",
+				"delete": "Delete"
+			}
+		},
+		"empty": {
+			"headline": "In order to view and manage faxes, first select the desired fax box in this account.",
+			"subtitle": "Use the 'Filter to a specific Faxbox' above and to the left."
+		},
+		"CDRPopup": {
+			"title": "Fax Details"
+		}
+	}
+}

metadata/app.json

@@ -0,0 +1,28 @@
+{
+	"name": "voicemails",
+	"i18n": {
+		"en-US": {
+			"label": "Voicemail Manager",
+			"description": "The Voicemail Manager lets you browse your users voicemails boxes and manage their voicemails.",
+			"extended_description": "",
+			"features": [
+			]
+		}
+	},
+	"tags": [
+		"reseller"
+	],
+	"icon": "",
+	"api_url": "http://10.26.0.41:8000/v2",
+	"author": "2600Hz",
+	"version": "1.0",
+	"license": "-", 
+	"price": 0,
+	"screenshots": [
+	],
+	"urls": {
+		"documentation": "{documentation_url}",
+		"howto": "{howto_video_url}"
+	},
+	"pvt_type": "app"
+}

style/app.css

@@ -0,0 +1,178 @@
+/* Default empty state */
+.faxes-container.empty .empty-state {
+	display: block;
+}
+
+.faxes-container .empty-state {
+	background: #FFF;
+	border: 1px dashed #ccc;
+	display: none;
+	padding: 0 10px 40px;
+	text-align: center;
+}
+
+.faxes-container .empty-state .icon-title {
+	color: #333;
+	font-size: 148px;
+}
+
+.faxes-container .empty-state .headline {
+	margin-top: -10px;
+}
+
+.faxes-container .empty-state .subtitle {
+	margin-top :10px;
+	color: #909099;
+}
+
+.faxes-container .data-state {
+	display: none;
+}
+
+.faxes-container.empty .loading-state {
+	top: 0;
+}
+
+.faxes-container .loading-state {
+	display: none;
+	background: #fff none repeat scroll 0 0;
+	border: 1px dashed #aaa;
+	font-size: 60px;
+	padding: 50px;
+	text-align: center;
+	position: relative;
+	top: 50px;
+}
+
+/* Action Bar */
+.faxes-container .filters.basic-actions {
+	display: inline-block;
+	margin-right: 10px;
+	width: 131px;
+}
+
+.faxes-container.outbound-faxes .filters.basic-actions {
+	width: 186px;
+}
+
+.faxes-container:not(.empty) .action-bar {
+	position: absolute;
+	z-index: 2;
+}
+
+.faxes-container .action-bar .actionable {
+	display: none;
+}
+
+.faxes-container .action-bar {
+	margin-bottom: 25px;
+}
+
+.faxes-container .action-bar .filters > :first-child {
+	margin-left: 0;
+}
+
+.faxes-container .action-bar .margin-left {
+	margin-left: 10px;
+}
+
+.faxes-container .action-bar .faxbox-selector {
+	display: inline-block;
+}
+
+.faxes-container .action-bar #select_faxbox {
+	width: 105px;
+	margin-bottom: 0;
+}
+
+.faxes-container .action-bar .mark-as-wrapper {
+	display: inline-block;
+}
+
+.faxes-container .action-bar .mark-as-wrapper.hidden {
+	display: none;
+}
+
+@media (min-width: 1240px) {
+	.faxes-container .action-bar .faxbox-selector {
+		margin-right: 65px;
+	}
+}
+
+.faxes-container .action-bar .sub-ranges {
+	display: inline-block;
+	margin-left: 10px;
+}
+
+@media (max-width: 1250px) {
+	.faxes-container .action-bar .sub-ranges {
+		display: none;
+	}
+}
+
+.faxes-container .action-bar .custom-range > * {
+	margin: 0 10px 0 0;
+	vertical-align: middle;
+}
+
+.faxes-container .action-bar .custom-range > span {
+	margin-right: 5px;
+}
+
+.faxes-container .action-bar .custom-range input.date-filter {
+	height: 24px;
+	width: 80px;
+}
+
+/* Table */
+.faxes-container .faxes-table table {
+	margin-top: 0;
+}
+
+.faxes-container .faxes-table table .footable-header th:nth-child(1) {
+	width: 25px;
+}
+
+.faxes-container .faxes-table tbody tr {
+	height: 55px;
+}
+
+.faxes-container .faxes-table tbody tr > td:first-child .monster-checkbox {
+	margin-right: 10px;
+	margin-top: 8px;
+}
+
+.faxes-container .faxes-table table.highlighted tbody tr {
+	opacity: 0.3;
+}
+
+.faxes-container .faxes-table table.highlighted tbody tr.active {
+	opacity: 1;
+}
+
+.faxes-container .faxes-table .status {
+	font-weight: 600;
+	text-transform: uppercase;
+}
+
+.faxes-container .faxes-table .status[data-status="success"] {
+	color: #33DB24;
+}
+
+.faxes-container .faxes-table .status[data-status="processing"] {
+	color: #02a5ff;
+}
+
+.faxes-container .faxes-table .status[data-status="failed"] {
+	color: #e01a00;
+}
+
+.faxes-container .faxes-table .empty-vm-row td {
+	text-align: center !important;
+}
+
+/* CDR Popup */
+#faxbox_cdr_details_dialog {
+	width: 750px;
+	margin: 15px;
+}

views/fax-CDRDialog.html

@@ -0,0 +1,4 @@
+<div id="faxbox_cdr_details_dialog">
+	<div id="jsoneditor">
+	</div>
+</div>

views/inbound-faxes-list.html

@@ -0,0 +1,42 @@
+<div data-type="inbound" class="faxes-table">
+	<table id="fax_list" class="monster-table footable">
+		<thead>
+			<tr>
+				<th data-filterable="false" data-type="html" data-sortable="false"></th>
+				<th data-type="html" data-sorted="true" data-direction="DESC">{{ i18n.fax.table.columns.received }}</th>
+				<th>{{ i18n.fax.table.columns.receivingFaxbox }}</th>
+				<th>{{ i18n.fax.table.columns.receivingNumber }}</th>
+				<th>{{ i18n.fax.table.columns.from }}</th>
+				<th data-breakpoints="xs">{{ i18n.fax.table.columns.pages }}</th>
+				<th data-filterable="false" data-type="html" data-sortable="false"></th>
+			</tr>
+		</thead>
+		<tbody>
+
+		{{#each faxes}}
+			<tr class="fax-row" data-faxbox-id="{{faxbox_id}}" data-id="{{id}}">
+				<td data-filter-value="{{id}} {{faxbox_id}}">
+					{{#monsterCheckbox}}
+						<input class="select-fax" type="checkbox" data-fax-id="{{id}}"/>
+					{{/monsterCheckbox}}
+				</td>
+				<td data-sort-value="{{timestamp}}">{{formatted.timestamp}}</td>
+				<td>{{formatted.receivingFaxbox}}</td>
+				<td>{{formatted.receivingNumber}}</td>
+				<td>{{formatted.sendingNumber}}</td>
+				<td>{{formatted.pages}}</td>
+				<td class="actions">
+					<a class="action-item" target="_blank" href="https://www.wsop.com/2014/2014-WSOP-Rules.pdf" href2="{{formatted.uri}}">
+						<i class="fa fa-file-o action-item view-fax"></i>
+					</a>
+					<a class="action-item" download target="_blank" href="https://www.wsop.com/2014/2014-WSOP-Rules.pdf" href2="{{formatted.uri}}">
+						<i class="fa fa-cloud-download download-fax"></i>
+					</a>
+					<i class="fa fa-list action-item details-fax"></i>
+				</td>
+			</tr>
+		{{/each}}
+
+		</tbody>
+	</table>
+</div>

views/inbound-faxes.html

@@ -0,0 +1,59 @@
+<div class="inbound-faxes faxes-container empty">
+	<div class="action-bar clearfix">
+		<div class="filters basic-actions pull-left">
+			<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
+				<li class="dropdown">
+					<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
+						{{#monsterCheckbox}}
+							<input class="main-select-fax" type="checkbox"/>
+						{{/monsterCheckbox}}
+						<i class="icon-telicon-caret-down"></i>
+					</a>
+					<ul class="dropdown-menu">
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
+					</ul>
+				</li>
+			</div>
+
+			<div class="filters selected-actions pull-left margin-left">
+				<button id="delete_faxes" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
+					<i class="fa fa-trash"></i>
+				</button>
+			</div>
+		</div>
+
+		<div class="filters faxbox-selector">
+			<select id="select_faxbox">
+				<option value="none"></option>
+				<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
+				{{#each faxboxes}}
+					<option value="{{id}}">{{name}}</option>
+				{{/each}}
+			</select>
+
+			<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
+				<i class="fa fa-refresh"></i>
+			</button>
+		</div>
+
+		<div class="sub-ranges">
+			<div class="custom-range">
+				<span>{{i18n.startDate}}</span>
+				<input id="startDate" type="text" class="date-filter filter-from">
+				<span>{{i18n.endDate}}</span>
+				<input id="endDate" type="text" class="date-filter filter-to">
+				<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="content">
+		<div class="data-state">
+
+		</div>
+		<div class="loading-state">
+			<i class="fa fa-spin fa-spinner monster-blue"></i>
+		</div>
+	</div>
+</div>

views/outbound-faxes-list.html

@@ -0,0 +1,44 @@
+<div data-type="outbound" class="faxes-table">
+	<table id="fax_list" class="monster-table footable">
+		<thead>
+			<tr>
+				<th data-filterable="false" data-type="html" data-sortable="false"></th>
+				<th data-type="html">{{ i18n.fax.table.columns.status }}</th>
+				<th data-type="html" data-sorted="true" data-direction="DESC">{{ i18n.fax.table.columns.sent }}</th>
+				<th>{{ i18n.fax.table.columns.sendingFaxbox }}</th>
+				<th>{{ i18n.fax.table.columns.sendingNumber }}</th>
+				<th>{{ i18n.fax.table.columns.receivingNumber }}</th>
+				<th data-breakpoints="xs">{{ i18n.fax.table.columns.pages }}</th>
+				<th data-filterable="false" data-type="html" data-sortable="false"></th>
+			</tr>
+		</thead>
+		<tbody>
+
+		{{#each faxes}}
+			<tr class="fax-row" data-faxbox-id="{{faxbox_id}}" data-id="{{id}}">
+				<td data-filter-value="{{id}} {{faxbox_id}}">
+					{{#monsterCheckbox}}
+						<input class="select-fax" type="checkbox" data-fax-id="{{id}}" data-status="{{status}}"/>
+					{{/monsterCheckbox}}
+				</td>
+				<td class="status" data-sort-value="{{status}}" data-filter-value="{{status}}" data-status="{{status}}">{{status}}</td>
+				<td data-sort-value="{{timestamp}}">{{formatted.timestamp}}</td>
+				<td>{{formatted.sendingFaxbox}}</td>
+				<td>{{formatted.sendingNumber}}</td>
+				<td>{{formatted.receivingNumber}}</td>
+				<td>{{formatted.pages}}</td>
+				<td class="actions">
+					<a class="action-item" target="_blank" href="https://www.wsop.com/2014/2014-WSOP-Rules.pdf" href2="{{formatted.uri}}">
+						<i class="fa fa-file-o action-item view-fax"></i>
+					</a>
+					<a class="action-item" download target="_blank" href="https://www.wsop.com/2014/2014-WSOP-Rules.pdf" href2="{{formatted.uri}}">
+						<i class="fa fa-cloud-download download-fax"></i>
+					</a>
+					<i class="fa fa-list action-item details-fax"></i>
+				</td>
+			</tr>
+		{{/each}}
+
+		</tbody>
+	</table>
+</div>

views/outbound-faxes.html

@@ -0,0 +1,65 @@
+<div class="outbound-faxes faxes-container empty">
+	<div class="action-bar clearfix">
+		<div class="filters basic-actions pull-left">
+			<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
+				<li class="dropdown">
+					<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
+						{{#monsterCheckbox}}
+							<input class="main-select-fax" type="checkbox"/>
+						{{/monsterCheckbox}}
+						<i class="icon-telicon-caret-down"></i>
+					</a>
+					<ul class="dropdown-menu">
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="failed">{{ i18n.fax.actionBar.select.failed }}</a></li>
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="completed">{{ i18n.fax.actionBar.select.completed }}</a></li>
+						<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
+					</ul>
+				</li>
+			</div>
+
+			<div class="filters selected-actions pull-left margin-left">
+				<button id="delete_faxes" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
+					<i class="fa fa-trash"></i>
+				</button>
+
+				<button id="resend_faxes" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.resend }}">
+					<i class="fa fa-mail-forward"></i>
+				</button>
+			</div>
+		</div>
+
+		<div class="filters faxbox-selector">
+			<select id="select_faxbox">
+				<option value="none"></option>
+				<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
+				{{#each faxboxes}}
+					<option value="{{id}}">{{name}}</option>
+				{{/each}}
+			</select>
+
+			<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
+				<i class="fa fa-refresh"></i>
+			</button>
+		</div>
+
+		<div class="sub-ranges">
+			<div class="custom-range">
+				<span>{{i18n.startDate}}</span>
+				<input id="startDate" type="text" class="date-filter filter-from">
+				<span>{{i18n.endDate}}</span>
+				<input id="endDate" type="text" class="date-filter filter-to">
+				<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
+			</div>
+		</div>
+	</div>
+
+	<div class="content">
+		<div class="data-state">
+
+		</div>
+		<div class="loading-state">
+			<i class="fa fa-spin fa-spinner monster-blue"></i>
+		</div>
+	</div>
+</div>