From 68e051edb3d3267a15d15935fb5b1533ecbafe47 Mon Sep 17 00:00:00 2001
From: Sean Zicari <sean.zicari@gmail.com>
Date: Sat, 2 Nov 2019 19:21:47 -0500
Subject: [PATCH] Incorporate Elm app.

---
 .gitignore                                  |    2 +
 elm.json                                    |   28 +
 package.json                                |    6 +
 src/assets/scripts/elm/Main.elm             |  156 +++
 src/assets/scripts/elm/Pages/Counselors.elm |  264 +++++
 src/assets/scripts/elm/Pages/Login.elm      |    5 +
 src/assets/scripts/elm/Session.elm          |    9 +
 src/assets/scripts/elm/firebaseConfig.js    |    9 +
 src/assets/scripts/elm/index.js             |   62 ++
 src/assets/scripts/fullcalendar/index.js    |   76 +-
 src/assets/scripts/index.js                 |   16 +-
 src/dashboard.html                          | 1100 +++++++++++++++++++
 webpack/rules/elm.js                        |    8 +
 webpack/rules/index.js                      |    1 +
 14 files changed, 1689 insertions(+), 53 deletions(-)
 create mode 100644 elm.json
 create mode 100644 src/assets/scripts/elm/Main.elm
 create mode 100644 src/assets/scripts/elm/Pages/Counselors.elm
 create mode 100644 src/assets/scripts/elm/Pages/Login.elm
 create mode 100644 src/assets/scripts/elm/Session.elm
 create mode 100644 src/assets/scripts/elm/firebaseConfig.js
 create mode 100644 src/assets/scripts/elm/index.js
 create mode 100755 src/dashboard.html
 create mode 100644 webpack/rules/elm.js

diff --git a/.gitignore b/.gitignore
index 9848098..b026d0c 100755
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,5 @@ package-lock.json
 # ----------------------------
 
 build/
+
+elm-stuff/
diff --git a/elm.json b/elm.json
new file mode 100644
index 0000000..63125ba
--- /dev/null
+++ b/elm.json
@@ -0,0 +1,28 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src/assets/scripts/elm"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "arowM/elm-form-decoder": "1.2.0",
+            "elm/browser": "1.0.1",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0",
+            "elm/http": "2.0.0",
+            "elm/json": "1.1.3",
+            "elm/url": "1.0.0"
+        },
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/time": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index b9565ec..e0c467a 100755
--- a/package.json
+++ b/package.json
@@ -27,6 +27,10 @@
     "copy-webpack-plugin": "^4.2.0",
     "cross-env": "^5.1.0",
     "css-loader": "^0.28.7",
+    "elm": "0.19.0-bugfix6",
+    "elm-hot-webpack-loader": "^1.0.2",
+    "elm-test": "^0.19.0-rev5",
+    "elm-webpack-loader": "github:halfzebra/elm-webpack-loader#updated-elm-compiler",
     "eslint": "^4.9.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "2.7.0",
@@ -54,6 +58,8 @@
     "datatables": "^1.10.13",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^1.1.5",
+    "firebase": "^7.2.3",
+    "firebaseui": "^4.2.0",
     "fullcalendar": "^3.6.2",
     "jquery": "^3.2.1",
     "jquery-sparkline": "^2.4.0",
diff --git a/src/assets/scripts/elm/Main.elm b/src/assets/scripts/elm/Main.elm
new file mode 100644
index 0000000..21bbcc5
--- /dev/null
+++ b/src/assets/scripts/elm/Main.elm
@@ -0,0 +1,156 @@
+port module Main exposing (Model, Msg(..), init, main, update, view)
+
+import Browser exposing (Document, UrlRequest(..))
+import Browser.Navigation as Nav exposing (Key)
+import Html exposing (Html, a, br, div, h1, img, text)
+import Html.Attributes exposing (class, href, id, src)
+import Html.Events exposing (onClick)
+import Pages.Counselors as Counselors
+import Session exposing (User)
+import Url exposing (Url)
+import Url.Parser as Parser exposing (Parser, map, oneOf, s, top)
+
+
+
+---- MODEL ----
+
+
+type alias Model =
+    { navKey : Key, page : Page, user : Maybe User }
+
+
+type Page
+    = Dashboard
+    | Counselors Counselors.Model
+
+
+init : Maybe User -> Url -> Key -> ( Model, Cmd Msg )
+init user url key =
+    ( { navKey = key
+      , page = whichPage url
+      , user = user
+      }
+    , Cmd.none
+    )
+
+
+routes : Parser (Page -> Page) Page
+routes =
+    oneOf
+        [ map Dashboard top
+        , map (Counselors Counselors.init) (s "counselors")
+        ]
+
+
+whichPage : Url -> Page
+whichPage url =
+    Maybe.withDefault Dashboard (Parser.parse routes url)
+
+
+
+---- UPDATE ----
+
+
+type Msg
+    = ClickedLink UrlRequest
+    | ChangedUrl Url
+    | CounselorsMsg Counselors.Msg
+    | Logout
+    | NoOp
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case ( msg, model.page ) of
+        ( ClickedLink req, _ ) ->
+            case req of
+                Internal url ->
+                    ( model
+                    , Nav.pushUrl model.navKey (Url.toString url)
+                    )
+
+                External href ->
+                    ( model, Nav.load href )
+
+        ( ChangedUrl url, _ ) ->
+            ( { model | page = whichPage url }, Cmd.none )
+
+        ( CounselorsMsg cMsg, Counselors cModel ) ->
+            let
+                ( cModel_, cCmd ) =
+                    Counselors.update cMsg cModel
+            in
+            ( { model
+                | page = Counselors cModel_
+              }
+            , Cmd.map CounselorsMsg cCmd
+            )
+
+        ( Logout, _ ) ->
+            ( { model | user = Nothing }, logout () )
+
+        _ ->
+            ( model, Cmd.none )
+
+
+
+---- VIEW ----
+
+
+view : Model -> Document Msg
+view model =
+    let
+        content =
+            case model.page of
+                Counselors cModel ->
+                    Html.map CounselorsMsg Counselors.view
+
+                Dashboard ->
+                    mainHtml
+    in
+    { title = "InteroCare Admin"
+    , body =
+        [ div []
+            [ img [ src "/ALFBLogo.png" ] []
+            , div [ id "firebaseui-auth-container", class "hidden" ] []
+            , content
+            ]
+        ]
+    }
+
+
+mainHtml : Html Msg
+mainHtml =
+    div
+        []
+        [ div [ id "firebaseui-auth-container" ] []
+        , h1
+            []
+            [ text "Dashboard" ]
+        , a [ href "/counselors" ] [ text "Counselors" ]
+        , br [] []
+        , a [ href "/", onClick Logout ] [ text "Logout" ]
+        ]
+
+
+
+---- PROGRAM ----
+
+
+main : Program (Maybe User) Model Msg
+main =
+    Browser.application
+        { view = view
+        , init = init
+        , update = update
+        , subscriptions = always Sub.none
+        , onUrlRequest = ClickedLink
+        , onUrlChange = ChangedUrl
+        }
+
+
+
+-- Ports
+
+
+port logout : () -> Cmd msg
diff --git a/src/assets/scripts/elm/Pages/Counselors.elm b/src/assets/scripts/elm/Pages/Counselors.elm
new file mode 100644
index 0000000..fe19422
--- /dev/null
+++ b/src/assets/scripts/elm/Pages/Counselors.elm
@@ -0,0 +1,264 @@
+module Pages.Counselors exposing (Model, Msg, init, update, view)
+
+import Debug exposing (log)
+import Form.Decoder as Decoder exposing (Decoder)
+import Html
+    exposing
+        ( Html
+        , a
+        , br
+        , button
+        , div
+        , fieldset
+        , form
+        , h1
+        , input
+        , label
+        , legend
+        , p
+        , span
+        , text
+        )
+import Html.Attributes
+    exposing
+        ( action
+        , class
+        , for
+        , href
+        , method
+        , name
+        , placeholder
+        , type_
+        , value
+        )
+import Html.Events exposing (onClick, onInput, onSubmit)
+import Http
+import Json.Encode as E
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { form : NewCounselorForm, counselor : Maybe NewCounselor }
+
+
+type alias NewCounselorForm =
+    { firstName : String
+    , lastName : String
+    , email : String
+    }
+
+
+type Msg
+    = NewCounselorSubmitted (Result Http.Error ())
+    | NewCounselorFormSubmitted
+    | EmailCharEntered String
+    | FirstNameCharEntered String
+    | LastNameCharEntered String
+
+
+type alias NewCounselor =
+    { firstName : String
+    , lastName : String
+    , email : String
+    }
+
+
+
+-- UPDATE & INIT
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        NewCounselorSubmitted _ ->
+            ( model, Cmd.none )
+
+        NewCounselorFormSubmitted ->
+            let
+                ( newCounselor, _ ) =
+                    case Decoder.run form model.form of
+                        Ok newCounselor_ ->
+                            ( Just newCounselor_, Nothing )
+
+                        Err _ ->
+                            ( Nothing, Nothing )
+            in
+            ( { model | counselor = newCounselor }, Cmd.none )
+
+        FirstNameCharEntered char ->
+            let
+                cForm : NewCounselorForm
+                cForm =
+                    model.form
+
+                form_ : NewCounselorForm
+                form_ =
+                    { cForm | firstName = String.trim char }
+            in
+            ( { model | form = form_ }, Cmd.none )
+
+        LastNameCharEntered char ->
+            let
+                cForm : NewCounselorForm
+                cForm =
+                    model.form
+
+                form_ : NewCounselorForm
+                form_ =
+                    { cForm | lastName = String.trim char }
+            in
+            ( { model | form = form_ }, Cmd.none )
+
+        EmailCharEntered char ->
+            let
+                cForm : NewCounselorForm
+                cForm =
+                    model.form
+
+                form_ : NewCounselorForm
+                form_ =
+                    { cForm | email = String.trim char }
+            in
+            ( { model | form = form_ }, Cmd.none )
+
+
+init : Model
+init =
+    { form = NewCounselorForm "" "" "", counselor = Nothing }
+
+
+
+-- VIEW
+
+
+view : Html Msg
+view =
+    div
+        []
+        [ h1 [] [ text "Counselors" ]
+        , a [ href "/" ] [ text "Dashboard" ]
+        , br [] []
+        , Html.form
+            [ class "pure-form pure-form-aligned"
+            , onSubmit NewCounselorFormSubmitted
+            ]
+            [ legend
+                []
+                [ text "Invite a Counselor"
+                , fieldset []
+                    [ div
+                        [ class "pure-control-group" ]
+                        [ label [ for "first_name" ] [ text "First Name" ]
+                        , input
+                            [ type_ "text", placeholder "First Name", name "first_name", onInput FirstNameCharEntered ]
+                            []
+                        ]
+                    , div
+                        [ class "pure-control-group" ]
+                        [ label [ for "last_name" ] [ text "Last Name" ]
+                        , input
+                            [ type_ "text", name "last_name", placeholder "Last Name", onInput LastNameCharEntered ]
+                            []
+                        ]
+                    , div
+                        [ class "pure-control-group" ]
+                        [ label [ for "email" ] [ text "Email" ]
+                        , input
+                            [ type_ "text", name "email", placeholder "Email", onInput EmailCharEntered ]
+                            []
+                        , div
+                            [ class "pure-controls" ]
+                            [ input
+                                [ type_ "submit"
+                                , class "pure-button pure-button-primary"
+                                , value "Submit"
+                                ]
+                                []
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+
+-- Form Handling
+
+
+type FormError
+    = FirstNameRequired
+    | LastNameRequired
+    | EmailRequired
+    | InvalidEmail
+
+
+firstName : Decoder String FormError String
+firstName =
+    Decoder.identity
+        |> Decoder.assert (Decoder.minLength FirstNameRequired 1)
+
+
+lastName : Decoder String FormError String
+lastName =
+    Decoder.identity
+        |> Decoder.assert (Decoder.minLength LastNameRequired 1)
+
+
+email : Decoder String FormError String
+email =
+    Decoder.identity
+        |> Decoder.assert (Decoder.minLength EmailRequired 1)
+
+
+firstName_ : Decoder NewCounselorForm FormError String
+firstName_ =
+    Decoder.lift .firstName firstName
+
+
+lastName_ : Decoder NewCounselorForm FormError String
+lastName_ =
+    Decoder.lift .lastName lastName
+
+
+email_ : Decoder NewCounselorForm FormError String
+email_ =
+    Decoder.lift .email email
+
+
+form : Decoder NewCounselorForm FormError NewCounselor
+form =
+    Decoder.top NewCounselor
+        |> Decoder.field firstName_
+        |> Decoder.field lastName_
+        |> Decoder.field email_
+
+
+toNewCounselor : NewCounselorForm -> Result (List FormError) NewCounselor
+toNewCounselor theForm =
+    Ok <| NewCounselor "" "" ""
+
+
+
+-- API
+
+
+encodeNewCounselor : NewCounselor -> E.Value
+encodeNewCounselor counselor =
+    E.object
+        [ ( "firstName", E.string counselor.firstName )
+        , ( "lastName", E.string counselor.lastName )
+        , ( "email", E.string counselor.email )
+        ]
+
+
+submitNewCounselor : NewCounselor -> Cmd Msg
+submitNewCounselor counselor =
+    Http.post
+        { url = "/counselors"
+        , body = Http.jsonBody (encodeNewCounselor counselor)
+        , expect = Http.expectWhatever NewCounselorSubmitted
+        }
diff --git a/src/assets/scripts/elm/Pages/Login.elm b/src/assets/scripts/elm/Pages/Login.elm
new file mode 100644
index 0000000..10b9f53
--- /dev/null
+++ b/src/assets/scripts/elm/Pages/Login.elm
@@ -0,0 +1,5 @@
+module Pages.Login exposing (Model)
+
+
+type alias Model =
+    {}
diff --git a/src/assets/scripts/elm/Session.elm b/src/assets/scripts/elm/Session.elm
new file mode 100644
index 0000000..c0fba2e
--- /dev/null
+++ b/src/assets/scripts/elm/Session.elm
@@ -0,0 +1,9 @@
+module Session exposing (User)
+
+
+type alias User =
+    { email : String
+    , photoUrl : String
+    , orgId : Maybe String
+    , accessToken : String
+    }
diff --git a/src/assets/scripts/elm/firebaseConfig.js b/src/assets/scripts/elm/firebaseConfig.js
new file mode 100644
index 0000000..f881815
--- /dev/null
+++ b/src/assets/scripts/elm/firebaseConfig.js
@@ -0,0 +1,9 @@
+module.exports = {
+    apiKey: "AIzaSyDaihAI-PZdy0lNSsIhzciKWWy2tYOIUVE",
+    authDomain: "dev-interocare.firebaseapp.com",
+    databaseURL: "https://dev-interocare.firebaseio.com",
+    projectId: "dev-interocare",
+    storageBucket: "dev-interocare.appspot.com",
+    messagingSenderId: "820163062176",
+    appId: "1:820163062176:web:33ea3278ea9166900c1cc5"
+};
\ No newline at end of file
diff --git a/src/assets/scripts/elm/index.js b/src/assets/scripts/elm/index.js
new file mode 100644
index 0000000..0490267
--- /dev/null
+++ b/src/assets/scripts/elm/index.js
@@ -0,0 +1,62 @@
+import { Elm } from './Main.elm';
+
+export default (function () {
+    var firebaseConfig = require('./firebaseConfig');
+
+    const firebase = require('firebase/app');
+
+    // Initialize Firebase
+    firebase.initializeApp(firebaseConfig);
+
+    const firebaseui = require('firebaseui');
+    const ui = new firebaseui.auth.AuthUI(firebase.auth());
+
+    firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+            Promise.all([user.getIdToken(), user.getIdTokenResult()]).then(([accessToken, idToken]) => {
+                const app = Elm.Main.init({
+                    flags: {
+                        email: user.email,
+                        photoUrl: user.photoURL,
+                        orgId: idToken.claims.orgId || null,
+                        accessToken: accessToken
+                    }
+                });
+
+                app.ports.logout.subscribe(() => {
+                    firebase.auth().signOut().then(() => {
+                        window.location.reload();
+                    });
+                });
+            });
+        } else {
+            initLoginForm();
+        }
+    });
+
+    const initLoginForm = () => {
+        const uiConfig = {
+            callbacks: {
+                signInSuccessWithAuthResult: function (authResult, redirectUrl) {
+                    // User successfully signed in.
+                    // Return type determines whether we continue the redirect automatically
+                    // or whether we leave that to developer to handle.
+                    return true;
+                }
+            },
+            // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
+            // signInFlow: 'popup',
+            signInSuccessUrl: window.location.href,
+            signInOptions: [
+                // Leave the lines as is for the providers you want to offer your users.
+                firebase.auth.GoogleAuthProvider.PROVIDER_ID
+            ],
+            // Terms of service url.
+            tosUrl: '<your-tos-url>',
+            // Privacy policy url.
+            privacyPolicyUrl: '<your-privacy-policy-url>'
+        };
+
+        ui.start('#firebaseui-auth-container', uiConfig);
+    }
+}());
\ No newline at end of file
diff --git a/src/assets/scripts/fullcalendar/index.js b/src/assets/scripts/fullcalendar/index.js
index de3ebba..29bd927 100755
--- a/src/assets/scripts/fullcalendar/index.js
+++ b/src/assets/scripts/fullcalendar/index.js
@@ -4,56 +4,56 @@ import 'fullcalendar/dist/fullcalendar.min.css';
 
 export default (function () {
   const date = new Date();
-  const d    = date.getDate();
-  const m    = date.getMonth();
-  const y    = date.getFullYear();
+  const d = date.getDate();
+  const m = date.getMonth();
+  const y = date.getFullYear();
 
   const events = [{
-    title  : 'All Day Event',
-    start  : new Date(y, m, 1),
-    desc   : 'Meetings',
-    bullet : 'success',
+    title: 'All Day Event',
+    start: new Date(y, m, 1),
+    desc: 'Meetings',
+    bullet: 'success',
   }, {
-    title  : 'Long Event',
-    start  : new Date(y, m, d - 5),
-    end    : new Date(y, m, d - 2),
-    desc   : 'Hangouts',
-    bullet : 'success',
+    title: 'Long Event',
+    start: new Date(y, m, d - 5),
+    end: new Date(y, m, d - 2),
+    desc: 'Hangouts',
+    bullet: 'success',
   }, {
-    title  : 'Repeating Event',
-    start  : new Date(y, m, d - 3, 16, 0),
-    allDay : false,
-    desc   : 'Product Checkup',
-    bullet : 'warning',
+    title: 'Repeating Event',
+    start: new Date(y, m, d - 3, 16, 0),
+    allDay: false,
+    desc: 'Product Checkup',
+    bullet: 'warning',
   }, {
-    title  : 'Repeating Event',
-    start  : new Date(y, m, d + 4, 16, 0),
-    allDay : false,
-    desc   : 'Conference',
-    bullet : 'danger',
+    title: 'Repeating Event',
+    start: new Date(y, m, d + 4, 16, 0),
+    allDay: false,
+    desc: 'Conference',
+    bullet: 'danger',
   }, {
-    title  : 'Birthday Party',
-    start  : new Date(y, m, d + 1, 19, 0),
-    end    : new Date(y, m, d + 1, 22, 30),
-    allDay : false,
-    desc   : 'Gathering',
+    title: 'Birthday Party',
+    start: new Date(y, m, d + 1, 19, 0),
+    end: new Date(y, m, d + 1, 22, 30),
+    allDay: false,
+    desc: 'Gathering',
   }, {
-    title  : 'Click for Google',
-    start  : new Date(y, m, 28),
-    end    : new Date(y, m, 29),
-    url    : 'http ://google.com/',
-    desc   : 'Google',
-    bullet : 'success',
+    title: 'Click for Google',
+    start: new Date(y, m, 28),
+    end: new Date(y, m, 29),
+    url: 'http ://google.com/',
+    desc: 'Google',
+    bullet: 'success',
   }];
 
   $('#full-calendar').fullCalendar({
     events,
-    height   : 800,
-    editable : true,
+    height: 800,
+    editable: true,
     header: {
-      left   : 'month,agendaWeek,agendaDay',
-      center : 'title',
-      right  : 'today prev,next',
+      left: 'month,agendaWeek,agendaDay',
+      center: 'title',
+      right: 'today prev,next',
     },
   });
 }())
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index d448c1d..f5fa6df 100755
--- a/src/assets/scripts/index.js
+++ b/src/assets/scripts/index.js
@@ -1,17 +1,3 @@
 import '../styles/index.scss';
 
-import './masonry';
-import './charts';
-import './popover';
-import './scrollbar';
-import './search';
-import './sidebar';
-import './skycons';
-import './vectorMaps';
-import './chat';
-import './datatable';
-import './datepicker';
-import './email';
-import './fullcalendar';
-import './googleMaps';
-import './utils';
+import './elm';
\ No newline at end of file
diff --git a/src/dashboard.html b/src/dashboard.html
new file mode 100755
index 0000000..d511d54
--- /dev/null
+++ b/src/dashboard.html
@@ -0,0 +1,1100 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Dashboard</title>
+
+    <style>
+      #loader {
+        transition: all 0.3s ease-in-out;
+        opacity: 1;
+        visibility: visible;
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        background: #fff;
+        z-index: 90000;
+      }
+
+      #loader.fadeOut {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: calc(50% - 20px);
+        left: calc(50% - 20px);
+        background-color: #333;
+        border-radius: 100%;
+        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+        animation: sk-scaleout 1.0s infinite ease-in-out;
+      }
+
+      @-webkit-keyframes sk-scaleout {
+        0% { -webkit-transform: scale(0) }
+        100% {
+          -webkit-transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+
+      @keyframes sk-scaleout {
+        0% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        } 100% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+    </style>
+  </head>
+  <body class="app">
+    <!-- @TOC -->
+    <!-- =================================================== -->
+    <!--
+      + @Page Loader
+      + @App Content
+          - #Left Sidebar
+              > $Sidebar Header
+              > $Sidebar Menu
+
+          - #Main
+              > $Topbar
+              > $App Screen Content
+    -->
+
+    <!-- @Page Loader -->
+    <!-- =================================================== -->
+    <div id='loader'>
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      window.addEventListener('load', function load() {
+        const loader = document.getElementById('loader');
+        setTimeout(function() {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    <!-- @App Content -->
+    <!-- =================================================== -->
+    <div>
+      <!-- #Left Sidebar ==================== -->
+      <div class="sidebar">
+        <div class="sidebar-inner">
+          <!-- ### $Sidebar Header ### -->
+          <div class="sidebar-logo">
+            <div class="peers ai-c fxw-nw">
+              <div class="peer peer-greed">
+                <a class="sidebar-link td-n" href="index.html">
+                  <div class="peers ai-c fxw-nw">
+                    <div class="peer">
+                      <div class="logo">
+                        <img src="assets/static/images/logo.png" alt="">
+                      </div>
+                    </div>
+                    <div class="peer peer-greed">
+                      <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
+                    </div>
+                  </div>
+                </a>
+              </div>
+              <div class="peer">
+                <div class="mobile-toggle sidebar-toggle">
+                  <a href="" class="td-n">
+                    <i class="ti-arrow-circle-left"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ### $Sidebar Menu ### -->
+          <ul class="sidebar-menu scrollable pos-r">
+            <li class="nav-item mT-30 actived">
+              <a class="sidebar-link" href="index.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-home"></i>
+                </span>
+                <span class="title">Dashboard</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="email.html">
+                <span class="icon-holder">
+                  <i class="c-brown-500 ti-email"></i>
+                </span>
+                <span class="title">Email</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="compose.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-share"></i>
+                </span>
+                <span class="title">Compose</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="calendar.html">
+                <span class="icon-holder">
+                  <i class="c-deep-orange-500 ti-calendar"></i>
+                </span>
+                <span class="title">Calendar</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="chat.html">
+                <span class="icon-holder">
+                  <i class="c-deep-purple-500 ti-comment-alt"></i>
+                </span>
+                <span class="title">Chat</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="charts.html">
+                <span class="icon-holder">
+                  <i class="c-indigo-500 ti-bar-chart"></i>
+                </span>
+                <span class="title">Charts</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class='sidebar-link' href="forms.html">
+                <span class="icon-holder">
+                  <i class="c-light-blue-500 ti-pencil"></i>
+                </span>
+                <span class="title">Forms</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="sidebar-link" href="ui.html">
+                <span class="icon-holder">
+                    <i class="c-pink-500 ti-palette"></i>
+                  </span>
+                <span class="title">UI Elements</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-orange-500 ti-layout-list-thumb"></i>
+                </span>
+                <span class="title">Tables</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class='sidebar-link' href="basic-table.html">Basic Table</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="datatable.html">Data Table</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-purple-500 ti-map"></i>
+                  </span>
+                <span class="title">Maps</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a href="google-maps.html">Google Map</a>
+                </li>
+                <li>
+                  <a href="vector-maps.html">Vector Map</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-red-500 ti-files"></i>
+                  </span>
+                <span class="title">Pages</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class='sidebar-link' href="blank.html">Blank</a>
+                </li>                 
+                <li>
+                  <a class='sidebar-link' href="404.html">404</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="500.html">500</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="signin.html">Sign In</a>
+                </li>
+                <li>
+                  <a class='sidebar-link' href="signup.html">Sign Up</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-teal-500 ti-view-list-alt"></i>
+                </span>
+                <span class="title">Multiple Levels</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                    <span class="arrow">
+                      <i class="ti-angle-right"></i>
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- #Main ============================ -->
+      <div class="page-container">
+        <!-- ### $Topbar ### -->
+        <div class="header navbar">
+          <div class="header-container">
+            <ul class="nav-left">
+              <li>
+                <a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
+                  <i class="ti-menu"></i>
+                </a>
+              </li>
+              <li class="search-box">
+                <a class="search-toggle no-pdd-right" href="javascript:void(0);">
+                  <i class="search-icon ti-search pdd-right-10"></i>
+                  <i class="search-icon-close ti-close pdd-right-10"></i>
+                </a>
+              </li>
+              <li class="search-input">
+                <input class="form-control" type="text" placeholder="Search...">
+              </li>
+            </ul>
+            <ul class="nav-right">
+              <li class="notifications dropdown">
+                <span class="counter bgc-red">3</span>
+                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                  <i class="ti-bell"></i>
+                </a>
+
+                <ul class="dropdown-menu">
+                  <li class="pX-20 pY-15 bdB">
+                    <i class="ti-bell pR-10"></i>
+                    <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
+                  </li>
+                  <li>
+                    <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">John Doe</span>
+                              <span class="c-grey-600">liked your <span class="text-dark">post</span>
+                              </span>
+                            </span>
+                            <p class="m-0">
+                              <small class="fsz-xs">5 mins ago</small>
+                            </p>
+                          </div>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">Moo Doe</span>
+                              <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
+                              </span>
+                            </span>
+                            <p class="m-0">
+                              <small class="fsz-xs">7 mins ago</small>
+                            </p>
+                          </div>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <span>
+                              <span class="fw-500">Lee Doe</span>
+                              <span class="c-grey-600">commented on your <span class="text-dark">video</span>
+                              </span>
+                            </span>
+                            <p class="m-0">
+                              <small class="fsz-xs">10 mins ago</small>
+                            </p>
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="pX-20 pY-15 ta-c bdT">
+                    <span>
+                      <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
+                    </span>
+                  </li>
+                </ul>
+              </li>
+              <li class="notifications dropdown">
+                <span class="counter bgc-blue">3</span>
+                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                  <i class="ti-email"></i>
+                </a>
+
+                <ul class="dropdown-menu">
+                  <li class="pX-20 pY-15 bdB">
+                    <i class="ti-email pR-10"></i>
+                    <span class="fsz-sm fw-600 c-grey-900">Emails</span>
+                  </li>
+                  <li>
+                    <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <div>
+                              <div class="peers jc-sb fxw-nw mB-5">
+                                <div class="peer">
+                                  <p class="fw-500 mB-0">John Doe</p>
+                                </div>
+                                <div class="peer">
+                                  <small class="fsz-xs">5 mins ago</small>
+                                </div>
+                              </div>
+                              <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                            </div>
+                          </div>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <div>
+                              <div class="peers jc-sb fxw-nw mB-5">
+                                <div class="peer">
+                                  <p class="fw-500 mB-0">Moo Doe</p>
+                                </div>
+                                <div class="peer">
+                                  <small class="fsz-xs">15 mins ago</small>
+                                </div>
+                              </div>
+                              <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                            </div>
+                          </div>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
+                          <div class="peer mR-15">
+                            <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <div>
+                              <div class="peers jc-sb fxw-nw mB-5">
+                                <div class="peer">
+                                  <p class="fw-500 mB-0">Lee Doe</p>
+                                </div>
+                                <div class="peer">
+                                  <small class="fsz-xs">25 mins ago</small>
+                                </div>
+                              </div>
+                              <span class="c-grey-600 fsz-sm">
+                                Want to create your own customized data generator for your app...
+                              </span>
+                            </div>
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="pX-20 pY-15 ta-c bdT">
+                    <span>
+                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                    </span>
+                  </li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                  <div class="peer mR-10">
+                    <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
+                  </div>
+                  <div class="peer">
+                    <span class="fsz-sm c-grey-900">John Doe</span>
+                  </div>
+                </a>
+                <ul class="dropdown-menu fsz-sm">
+                  <li>
+                    <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                      <i class="ti-settings mR-10"></i>
+                      <span>Setting</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                      <i class="ti-user mR-10"></i>
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                      <i class="ti-email mR-10"></i>
+                      <span>Messages</span>
+                    </a>
+                  </li>
+                  <li role="separator" class="divider"></li>
+                  <li>
+                    <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                      <i class="ti-power-off mR-10"></i>
+                      <span>Logout</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- ### $App Screen Content ### -->
+        <main class='main-content bgc-grey-100'>
+          <div id='mainContent'>
+            <div class="row gap-20 masonry pos-r">
+              <div class="masonry-sizer col-md-6"></div>
+              <div class="masonry-item  w-100">
+                <div class="row gap-20">
+                  <!-- #Toatl Visits ==================== -->
+                  <div class='col-md-3'>
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Total Visits</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Total Page Views ==================== -->
+                  <div class='col-md-3'>
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Total Page Views</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash2"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Unique Visitors ==================== -->
+                  <div class='col-md-3'>
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Unique Visitor</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash3"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Bounce Rate ==================== -->
+                  <div class='col-md-3'>
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Bounce Rate</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash4"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-12">
+                <!-- #Site Visits ==================== -->
+                <div class="bd bgc-white">
+                  <div class="peers fxw-nw@lg+ ai-s">
+                    <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
+                      <div class="layers">
+                        <div class="layer w-100 mB-10">
+                          <h6 class="lh-1">Site Visits</h6>
+                        </div>
+                        <div class="layer w-100">
+                          <div id="world-map-marker"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
+                      <div class="layers">
+                        <div class="layer w-100">
+                          <!-- Progress Bars -->
+                          <div class="layers">
+                            <div class="layer w-100">
+                              <h5 class="mB-5">100k</h5>
+                              <small class="fw-600 c-grey-700">Visitors From USA</small>
+                              <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">1M</h5>
+                              <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                              <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">450k</h5>
+                              <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                              <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">1B</h5>
+                              <small class="fw-600 c-grey-700">Visitors From India</small>
+                              <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- Pie Charts -->
+                          <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">New Users</h6>
+                            </div>
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">New Purchases</h6>
+                            </div>
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">Bounce Rate</h6>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Monthly Stats ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 pX-20 pT-20">
+                      <h6 class="lh-1">Monthly Stats</h6>
+                    </div>
+                    <div class="layer w-100 p-20">
+                      <canvas id="line-chart" height="220"></canvas>
+                    </div>
+                    <div class="layer bdT p-20 w-100">
+                      <div class="peers ai-c jc-c gapX-20">
+                        <div class="peer">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
+                          <small class="c-grey-500 fw-600">APPL</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
+                          <small class="c-grey-500 fw-600">Average</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
+                          <small class="c-grey-500 fw-600">Sales</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
+                          <small class="c-grey-500 fw-600">Profit</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Todo ==================== -->
+                <div class="bd bgc-white p-20">
+                  <div class="layers">
+                    <div class="layer w-100 mB-10">
+                      <h6 class="lh-1">Todo List</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <ul class="list-task list-group" data-role="tasklist">
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Call John for Dinner</span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall2" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Book Boss Flight</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall3" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Hit the Gym</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall4" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Give Purchase Report</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall5" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Watch Game of Thrones Episode</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall6" class=" peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Give Purchase report</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Sales Report ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 p-20">
+                      <h6 class="lh-1">Sales Report</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <div class="bgc-light-blue-500 c-white p-20">
+                        <div class="peers ai-c jc-sb gap-40">
+                          <div class="peer peer-greed">
+                            <h5>November 2017</h5>
+                            <p class="mB-0">Sales Report</p>
+                          </div>
+                          <div class="peer">
+                            <h3 class="text-right">$6,000</h3>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="table-responsive p-20">
+                        <table class="table">
+                          <thead>
+                            <tr>
+                              <th class=" bdwT-0">Name</th>
+                              <th class=" bdwT-0">Status</th>
+                              <th class=" bdwT-0">Date</th>
+                              <th class=" bdwT-0">Price</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td class="fw-600">Item #1 Name</td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
+                              <td>Nov 18</td>
+                              <td><span class="text-success">$12</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #2 Name</td>
+                              <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td>Nov 19</td>
+                              <td><span class="text-info">$34</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #3 Name</td>
+                              <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td>Nov 20</td>
+                              <td><span class="text-danger">-$45</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #4 Name</td>
+                              <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
+                              <td>Nov 21</td>
+                              <td><span class="text-success">$65</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #5 Name</td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
+                              <td>Nov 22</td>
+                              <td><span class="text-success">$78</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #6 Name</td>
+                              <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
+                              <td>Nov 23</td>
+                              <td><span class="text-danger">-$88</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #7 Name</td>
+                              <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
+                              <td>Nov 22</td>
+                              <td><span class="text-success">$56</span></td>
+                            </tr>
+                          </tbody>
+                        </table>
+                       </div>
+                    </div>
+                  </div>
+                  <div class="ta-c bdT w-100 p-20">
+                    <a href="#">Check all the sales</a>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Weather ==================== -->
+                <div class="bd bgc-white p-20">
+                  <div class="layers">
+                    <!-- Widget Title -->
+                    <div class="layer w-100 mB-20">
+                      <h6 class="lh-1">Weather</h6>
+                    </div>
+
+                    <!-- Today Weather -->
+                    <div class="layer w-100">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer peer-greed">
+                          <div class="layers">
+                            <!-- Temprature -->
+                            <div class="layer w-100">
+                              <div class="peers fxw-nw ai-c">
+                                <div class="peer mR-20">
+                                  <h3>32<sup>°F</sup></h3>
+                                </div>
+                                <div class="peer">
+                                  <canvas class="sleet" width="44" height="44"></canvas>
+                                </div>
+                              </div>
+                            </div>
+
+                            <!-- Condition -->
+                            <div class="layer w-100">
+                              <span class="fw-600 c-grey-600">Partly Clouds</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="peer">
+                          <div class="layers ai-fe">
+                            <div class="layer">
+                              <h5 class="mB-5">Monday</h5>
+                            </div>
+                            <div class="layer">
+                              <span class="fw-600 c-grey-600">Nov, 01 2017</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Today Weather Extended -->
+                    <div class="layer w-100 mY-30">
+                      <div class="layers bdB">
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Wind</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">10km/h</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Sunrise</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">05:00 AM</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Pressure</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">1B</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Week Forecast -->
+                    <div class="layer w-100">
+                      <div class="peers peers-greed ai-fs ta-c">
+                        <div class="peer">
+                          <h6 class="mB-10">MON</h6>
+                          <canvas class="sleet" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">TUE</h6>
+                          <canvas class="clear-day" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">30<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">WED</h6>
+                          <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">28<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">THR</h6>
+                          <canvas class="cloudy" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">FRI</h6>
+                          <canvas class="snow" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">24<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">SAT</h6>
+                          <canvas class="wind" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">28<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">SUN</h6>
+                          <canvas class="sleet" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Chat ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 p-20">
+                      <h6 class="lh-1">Quick Chat</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <!-- Chat Box -->
+                      <div class="bgc-grey-200 p-20 gapY-15">
+                        <!-- Chat Conversation -->
+                        <div class="peers fxw-nw">
+                          <div class="peer mR-20">
+                            <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <div class="layers ai-fs gapY-5">
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>Lorem Ipsum is simply dummy text of</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>the printing and typesetting industry.</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>Lorem Ipsum has been the industry's</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Chat Conversation -->
+                        <div class="peers fxw-nw ai-fe">
+                          <div class="peer ord-1 mL-20">
+                            <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed ord-0">
+                            <div class="layers ai-fe gapY-10">
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mL-10 ord-1">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed ord-0">
+                                    <span>Heloo</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mL-10 ord-1">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed ord-0">
+                                    <span>??</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Chat Send -->
+                      <div class="p-20 bdT bgc-white">
+                        <div class="pos-r">
+                          <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                          <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                            <i class="fa fa-paper-plane-o"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+
+        <!-- ### $App Screen Footer ### -->
+        <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+          <span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/webpack/rules/elm.js b/webpack/rules/elm.js
new file mode 100644
index 0000000..5ea1f8d
--- /dev/null
+++ b/webpack/rules/elm.js
@@ -0,0 +1,8 @@
+module.exports = {
+    test: /\.elm$/,
+    exclude: [/elm-stuff/, /node_modules/],
+    use: {
+        loader: 'elm-webpack-loader',
+        options: {}
+    }
+};
diff --git a/webpack/rules/index.js b/webpack/rules/index.js
index 16105c6..588bdec 100755
--- a/webpack/rules/index.js
+++ b/webpack/rules/index.js
@@ -2,6 +2,7 @@ module.exports = [
   require('./js'),
   require('./images'),
   require('./css'),
+  require('./elm'),
   require('./sass'),
   require('./fonts'),
 ];