From 1fe2a26e8336a03b5730e7b03441e8cd52411296 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Fri, 10 May 2024 12:38:31 +1200
Subject: [PATCH] Tabify Admin page

---
 client/admin/admin.jsx | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/admin/admin.jsx b/client/admin/admin.jsx
index 92e0b2aee..c20b6abed 100644
--- a/client/admin/admin.jsx
+++ b/client/admin/admin.jsx
@@ -8,11 +8,38 @@ const BrewLookup = require('./brewLookup/brewLookup.jsx');
 const BrewCompress = require ('./brewCompress/brewCompress.jsx');
 const Stats = require('./stats/stats.jsx');
 
+const tabGroups = ['brews'];
+
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
+	getInitialState : function() {
+		return {
+			currentTab : 'brews'
+		};
+	},
+
+	handleClick : function(newTab) {
+		if(this.state.currentTab === newTab) return;
+		this.setState({
+			currentTab : newTab
+		});
+	},
+
+	renderBrewTools : function(){
+		return <>
+			<Stats />
+			<hr />
+			<BrewLookup />
+			<hr />
+			<BrewCleanup />
+			<hr />
+			<BrewCompress />
+		</>;
+	},
+
 	render : function(){
 		return <div className='admin'>
 
@@ -23,13 +50,12 @@ const Admin = createClass({
 				</div>
 			</header>
 			<div className='container'>
-				<Stats />
-				<hr />
-				<BrewLookup />
-				<hr />
-				<BrewCleanup />
-				<hr />
-				<BrewCompress />
+				<div className='tabs'>
+					{tabGroups.map((name, idx)=>{
+						return <button className='tab' key={idx} onClick={()=>{return this.handleClick(name);}}>{name.toUpperCase()}</button>;
+					})}
+				</div>
+				{this.state.currentTab == 'brews' && this.renderBrewTools()}
 			</div>
 		</div>;
 	}