diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2b1298
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+keys
+xero-php-master
+.settings
+.buildpath
+.project
+sample
diff --git a/css/bts_timesheet.css b/css/bts_timesheet.css
new file mode 100644
index 0000000..1765316
--- /dev/null
+++ b/css/bts_timesheet.css
@@ -0,0 +1,488 @@
+@CHARSET "UTF-8";
+
+html,
+body {
+    margin: 0px !important;
+    overflow: hidden;
+}
+
+.titlebar_gradient {
+    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100 */
+    background: rgb(246,230,180); /* Old browsers */
+    background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
+}
+
+.timesheets {
+    width: calc(100vw - 300px);
+    height: 100vh;
+    margin: 0px;
+    padding: 0px;
+    left: 150px;
+    position: fixed;
+    background-color: red;
+    overflow: hidden;
+}
+
+.peoplebar {
+    position: fixed;
+    top: 0px;
+    width: 150px;
+    height: 100vh;
+    background: lightgrey;
+    overflow: hidden;
+}
+
+.peoplebar.left {
+    border-radius: 5px 0px 0px 0px;
+    left: 0px;
+}
+
+.peoplebar.right {
+    right: 0px;
+    border-radius: 0px 5px 0px 0px;
+}
+
+.timesheets .sheettitle {
+    padding-top: 8px;
+    text-align: center;
+    background-color: lightgrey;
+    height: 40px;
+    text-shadow: 1px 1px 1px #fcfcfc;
+}
+
+.timesheets .workspace {
+    height: calc(100vh - 180px);
+    background-color: white;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.timesheets .statusbar {
+    position: relative;
+    height: 40px;
+    background-color: ivory;
+    box-shadow: 1px 1px 10px black;
+}
+
+/* staff search bar*/
+.b_search {
+    position: relative;
+    height: 40px;
+}
+
+.b_search input {
+    margin-top: 5px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 20px;
+    box-shadow: 1px 1px 2px grey inset;
+    height: 30px;
+}
+
+.b_search .ticon-search {
+    position: absolute;
+    top: 15px;
+    left: 5px;
+}
+
+.b_search .ticon-times-circle-o {
+    position: absolute;
+    top: 15px;
+    right: 5px;
+}
+
+.peoplebar button {
+    width: 100%;
+    padding: 0px;
+    height: 20px;
+}
+
+.peoplebar .stafflist,
+.peoplebar .clientlist {
+    height: calc(100vh - 80px);
+    background-color: dimgrey;
+    overflow: hidden;
+
+    /*    scroll-behavior: smooth;  */
+}
+
+.peopleitem {
+    position: relative;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    height: 100px;
+    background: transparent;
+}
+
+/* hover box */
+div.peopleitem > label {
+    -webkit-perspective: 1000px;
+    perspective: 1000px;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    display: block;
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+}
+
+div.peopleitem .card {
+    position: relative;
+    height: 100%;
+    width: 95%;
+    margin: auto;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transition: all 600ms;
+    transition: all 600ms;
+    z-index: 20;
+    border: 1px solid black;
+    box-shadow: 1px 1px 10px black;
+}
+
+div.peopleitem .card div {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: #FFF;
+    text-align: center;
+
+    /* line-height: 200px; */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    border-radius: 2px;
+}
+
+div.peopleitem .card .back {
+    background: #222;
+    color: #FFF;
+    -webkit-transform: rotateX(180deg);
+    transform: rotateX(180deg);
+}
+
+div.peopleitem label:hover .card {
+    -webkit-transform: rotateX(20deg);
+    transform: rotateX(20deg);
+    box-shadow: 0 20px 20px rgba(50,50,50,.2);
+}
+
+div.peopleitem input {
+    display: none;
+}
+
+div.peopleitem :checked + .card {
+    transform: rotateX(180deg);
+    -webkit-transform: rotateX(180deg);
+}
+
+div.peopleitem label:hover :checked + .card {
+    transform: rotateX(160deg);
+    -webkit-transform: rotateX(160deg);
+    box-shadow: 0 20px 20px rgba(255,255,255,.2);
+}
+
+/* end of hover box */
+.satusbar {
+    position: relative;
+}
+
+.statusbar * {
+    vertical-align: top;
+    text-shadow: 1px 1px 1px #fcfcfc;
+}
+
+.statusbar div {
+    position: relative;
+    display: inline;
+}
+
+.statusbar .xero {
+    width: 40px;
+    height: 100%;
+    margin-left: 5px;
+    margin-right: 5px;
+    display: inline-block;
+    background-color: white;
+    box-shadow: inset 0px 0px 2px dotted white;
+    border-radius: 100px;
+    background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/xero.png);
+    background-size: 40px;
+    box-shadow: 0px 0px 10px white;
+}
+
+.statusbar .wifi i,
+.statusbar .xero i {
+    font-size: 20px;
+    color: red;
+    position: absolute;
+    right: 0px;
+    top: -5px;
+}
+
+.statusbar .wifi {
+    width: 40px;
+    height: 100%;
+    margin-left: 0px;
+    margin-right: 100px;
+    display: inline-block;
+    background-color: white;
+    box-shadow: inset 0px 0px 2px black;
+    border-radius: 100px;
+    background-image: url(http://acaresydney.com.au/wp-content/uploads/2019/06/wnet.png);
+    background-size: 40px;
+    box-shadow: 0px 0px 10px white;
+}
+
+.statusbar .xero:hover,
+.statusbar .wifi:hover {
+    box-shadow: 0px 0px 3px black;
+}
+
+.statusbar .wages {
+    text-align: center;
+    width: 150px;
+    height: 100%;
+    display: inline-block;
+    background-color: transparent;
+    font-size: 24px;
+    font-weight: bold;
+    color: dimgrey;
+    border: 1px dotted white;
+    position: absolute;
+    right: 400px;
+}
+
+.statusbar .workinghours {
+    background-color: transparent;
+    width: 175px;
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+    right: 220px;
+}
+
+.workinghours label {
+    transform: unset;
+    left: 0;
+    top: 0;
+    width: 50px;
+    height: 100%;
+    padding: 0.5em;
+    text-align: left;
+    display: inline-block;
+    color: #A974D;
+    font-weight: bolder;
+    line-height: 15px;
+    background-color: transparent;
+    margin-right: 0px;
+}
+
+.statusbar input {
+    margin: 0px;
+    width: 115px;
+    height: 100%;
+    display: inline-block;
+    font-size: 24px;
+    background: transparent;
+    text-align: center;
+}
+
+.statusbar button[name='confirmschedule'] {
+    margin-top: 5px;
+    margin-bottom: 5px ;
+    text-shadow: 0px 0px 2px black;
+    width: 200px ;
+    height: calc( 100% - 10px );
+    font-weight: bolder;
+    position: absolute;
+    right: 10px;
+}
+
+div.sheetsheader {
+    height: 100px;
+    background: darkorange;
+    position: relative;
+}
+
+div.prevweek {
+    display: inline-block;
+    height: 70px;
+    width: 40px;
+    font-size: 36px;
+    padding-top: 5px;
+    padding-left: 2px;
+    float: left;
+    background: darkorange;
+}
+
+div.prevweek span:hover,
+div.nextweek span:hover {
+    box-shadow: 1px 1px 10px black;
+}
+
+div.nextweek {
+    display: inline-block;
+    height: 70px;
+    width: 40px;
+    font-size: 36px;
+    padding-top: 5px;
+    padding-left: 4px;
+    float: right;
+}
+
+div.weekly {
+    width: calc( 100% - 80px ) ;
+    display: inline-block;
+    background-color: black;
+    height: 70px;
+}
+
+div.weekly div {
+    margin: 0px;
+}
+
+div.weekly div.weekname {
+    position: relative;
+    width: 130px;
+    top: -5px;
+    border: 2px solid grey;
+    border-radius: 10px;
+    text-align: center;
+    background-color: white;
+}
+
+div.weekly div.weekname.prev {
+    position: absolute;
+    left: 100px;
+    z-index: 1;
+}
+
+div.weekly div.weekname.next {
+    position: absolute;
+    right: 100px;
+    z-index: 1;
+}
+
+div.weekly div.copyprogress {
+    position: absolute;
+    top: 0px;
+    display: inline-block;
+    width: calc(100% - 80px);
+    height: 15px;
+    background-color: yellow;
+    top: 0px;
+    border-radius: 2px;
+    box-shadow: inset 1px 1px 2px black;
+}
+
+div.copyprogress div[name='copyschedule'] {
+    position: absolute;
+    color: white;
+    top: 0px;
+    left: 200px;
+    width: 100px;
+    height: 15px;
+    padding: 0px;
+    border-radius: 10px;
+    text-align: center;
+    background-color: black;
+}
+
+div.weekdays {
+    position: absolute;
+    top: 15px;
+    width: calc(100% - 80px);
+    height: 55px;
+    background-color: darkorange;
+    text-align: center;
+}
+
+div.week1,
+div.week2 {
+    display: inline-block;
+    width: 45%;
+    height: 55px;
+    background-color: darkorange;
+    text-align: justify;
+    border: 1px dashed lightgrey;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+div.week1:after, div.week2:after{
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+div.week1 {
+    position: relative;
+    left: -10px;
+}
+
+div.week2 {
+    position: relative;
+    left: 10px;
+}
+
+div.week1 > div, div.week2 > div{
+    display: inline-block;
+    text-align: center;
+    width: 10%;
+    height: 40px;
+    color: white;
+    margin-top: 5px;
+    font-weight: bolder;
+}
+
+div.week1 > div{
+    box-shadow: 0px 0px 10px white inset;
+}
+div.week2 > div{
+    background-color: dodgerblue;
+    box-shadow: 0px 0px 10px white inset;
+}
+
+div.sheettableheader{
+    margin-top: 0px;
+    height: 30px;
+    background-color: lightgrey;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+div.bday, div.bdate, div.btos, div.bstart, div.bfinish, div.bhours, div.bstaff, div.bclients, div.bconfirmed, div.bdelete{
+    display: block;
+    float: left;
+    background-color: black;
+    text-align: center;
+    border: 1px dotted white;
+    font-weight: bolder;
+    font-size: 20px;
+    color: white;
+    /* box-shadow: 1px 1px 10px black; */
+    width:10%;
+    height: 30px;
+}
+div.bdelete, div.bconfirmed{
+    width: 5%;
+}
+div.btos{
+    width: 20%;
+}
+
+div.assignment > div{
+    color:navy;
+    background-color: white;
+    font-size: 20px;
+    font-weight: lighter;
+    border: 1px dotted lightgrey;
+}
diff --git a/css/ts.css b/css/ts.css
new file mode 100644
index 0000000..b7f8dc7
--- /dev/null
+++ b/css/ts.css
@@ -0,0 +1,4 @@
+@CHARSET "UTF-8";
+.white_txt {
+	color: #ffffff;
+}
diff --git a/js/bts_timesheet.js b/js/bts_timesheet.js
new file mode 100644
index 0000000..adcd51f
--- /dev/null
+++ b/js/bts_timesheet.js
@@ -0,0 +1,5 @@
+(function ($) {
+    $(function () {
+    	console.log("in timesheets %o", bts());
+    });
+})(jQuery);
diff --git a/js/ts.js b/js/ts.js
new file mode 100644
index 0000000..5a23d73
--- /dev/null
+++ b/js/ts.js
@@ -0,0 +1,14 @@
+/**
+ * broker.js copyright patrick@lawipac.com all rights reserved. Only a end user
+ * with a valid license can use this php file.
+ */
+
+function bts(){
+	return bts1;
+}
+
+(function ($) {
+    $(function () {
+    	console.log("%o", bts());
+    });
+})(jQuery);
diff --git a/ts.php b/ts.php
index 5e77102..29017e1 100644
--- a/ts.php
+++ b/ts.php
@@ -8,6 +8,7 @@
  * Author URI: http://biukop.com.au/
  */
 
+namespace Biukop;
 require_once(dirname(__FILE__) .  '/autoload.php');
 require_once (ABSPATH . 'wp-includes/pluggable.php');
 
@@ -16,10 +17,14 @@ class AcareOffice{
     
     private $nonce; //for ajax verification
     private $pages = array('time-sheets', 'user-list');
+    private $acaresydney_userid = 0;
     
     public function __construct() {
         add_action('init', array($this, 'class_loader'));
-        add_action('after_setup_theme', array($this, 'remove_admin_bar'));
+        add_action('wp', array($this, 'check_auth'));
+        add_action('wp_enqueue_scripts', array($this, 'register_js_css'), 99);
+        
+        add_filter('show_admin_bar', '__return_false');
     }
     
     /**
@@ -28,7 +33,7 @@ class AcareOffice{
     public function class_loader()
     {
         // Create a new instance of the autoloader
-        $loader = new Psr4AutoloaderClass();
+        $loader = new \Psr4AutoloaderClass();
         
         // Register this instance
         $loader->register();
@@ -38,37 +43,49 @@ class AcareOffice{
         $loader->addNamespace('\Biukop', dirname(__FILE__) . '/' );
 
 
-        $n = new Biukop\Xero();
+        $n = new Xero();
     }
     
-//     private function pagename(){
-//         global $wp_query;
-//         $pagename = get_query_var('pagename');
-//         if ( !$pagename ) {
-//             // If a static page is set as the front page, $pagename will not be set. Retrieve it from the queried object
-//             $post = $wp_query->get_queried_object();
-//             $pagename = $post->post_name;
-//         }
-//         return $pagename;
-//     }
+
     
     //
-    public function remove_admin_bar(){
+    //
+    ///check auth
+    public function check_auth(){
         global $pagename;
-        //$pagename = $this->pagename();
-        if (!$pagename)
-            $pagename = get_query_var('pagename'); 
-        
-        if (!current_user_can('administrator')) {
-            show_admin_bar(false);
-            add_filter('show_admin_bar', '__return_false');
+        //echo $pagename;
+    }
+    
+    ///
+    // enqueue / register css /js
+    //
+    public function register_js_css() {
+        $this->nonce = wp_create_nonce('acaresydney');
+        $this->acaresydney_userid = get_query_var( 'acaresydney_userid' ) ;
+        $this->register_bts_js();
+        $this->register_timesheet_js_css();
+    }
+    private function register_bts_js()
+    {
+        wp_enqueue_style( 'bts', plugins_url('css/ts.css', __FILE__));
+        wp_enqueue_script('bts', plugins_url('js/ts.js', __FILE__), array('jquery', 'jquery-ui-core'));
+        wp_localize_script( 'bts', 'bts1', array(
+            'ajax_url' => admin_url( 'admin-ajax.php' ),
+            'nonce'    => $this->nonce, // It is common practice to comma after
+            'display_name' => wp_get_current_user()->display_name,
+            'anonymous' => !is_user_logged_in(),
+            'me'=> get_current_user_id(),
+            'userid'=> $this->acaresydney_userid,
+        ) );
+    }
+    
+    private function register_timesheet_js_css(){
+        global $pagename;
+        if ($pagename != 'time-sheets'){
             return;
         }
-        
-        if (in_array($pagename, $this->pages)){
-            show_admin_bar(false);
-            add_filter('show_admin_bar', '__return_false');
-        }
+        wp_enqueue_style( 'bts_ts', plugins_url('css/bts_timesheet.css', __FILE__));
+        wp_enqueue_script( 'bts_ts', plugins_url('js/bts_timesheet.js', __FILE__), array( 'jquery' , 'bts' ));
     }
     
 }