Finished stats and brew lookup on admin panel

client/admin/stats/stats.jsx

@@ -0,0 +1,48 @@
+const React       = require('react');
+const createClass = require('create-react-class');
+const cx          = require('classnames');
+
+const request = require('superagent');
+
+
+const Stats = createClass({
+	displayName : 'Stats',
+	getDefaultProps(){
+		return {
+			adminKey : ''
+		};
+	},
+	getInitialState(){
+		return {
+			stats : {
+				totalBrews : 0
+			},
+			fetching : false
+		}
+	},
+	componentDidMount(){
+		this.fetchStats();
+	},
+	fetchStats(){
+		this.setState({ fetching : true})
+		request.get('/admin/stats')
+			.query({ admin_key : this.props.adminKey })
+			.then((res)=> this.setState({ stats : res.body }))
+			.finally(()=>this.setState({fetching : false}));
+	},
+	render(){
+		return <div className='Stats'>
+			<h2> Stats </h2>
+			<dl>
+				<dt>Total Brew Count</dt>
+				<dd>{this.state.stats.totalBrews}</dd>
+			</dl>
+
+			{this.state.fetching
+				&& <div className='pending'><i className='fa fa-spin fa-spinner' /></div>
+			}
+		</div>;
+	}
+});
+
+module.exports = Stats;

client/admin/stats/stats.less

@@ -0,0 +1,28 @@
+
+.Stats{
+	position : relative;
+	.pending{
+		position         : absolute;
+		top              : 0px;
+		left             : 0px;
+		height           : 100%;
+		width            : 100%;
+		background-color : rgba(238,238,238, 0.5);
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			margin  : 0 0 0 @maxItemWidth + 10px;
+			padding : 0 0 0.5em 0;
+		}
+	}
+}