import React, {Component} from 'react';
import {NavLink, Route} from 'react-router-dom';
import {Link} from "react-router-dom";

import AddFinance from './add_financial_details';
import ViewFinance from './view_financial_details';
import EditFinance from './edit_financial_details';
import AddClass from './add_class_details';
import Analytics from "./analytics";
import studentRequest from './StudentRequestForClass';
import TestTeacher from "../../Images/defaultimageicon.jpg";
import AddStudPer from './add_stud_perf_details';
import ProgressStudents from "./progress_students";
import ViewProgress from "./view_progress";

export default class Dashboard extends Component {

    constructor(props) {
        super(props);

        this.state = {
            user_email : '',
            user_id : '',
            user_name :'',
            user_type :'',
            isLogged : false
        }
    }

    componentDidMount() {

        const user_email = localStorage.getItem("email");
        const user_id = localStorage.getItem("userID");
        const user_name = localStorage.getItem("userName");
        const user_type = localStorage.getItem("userType");

        if(user_id !== " "){
            this.setState({
                isLogged : true
            })
        }

        this.setState({
            user_email: user_email,
            user_id : user_id,
            user_name : user_name,
            user_type : user_type
        })



    }
    render() {
        return (

            <div>
                <meta charSet="utf-8"/>
                <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
                <meta httpEquiv="Content-Language" content="en"/>
                <meta httpEquiv="Content-Type" content="text/html; charset=utf-8"/>
                <title>SMART COACH - Tutor Dashboard</title>
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"/>

                <div className="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
                    <div className="app-header header-shadow">
                        <div className="app-header__logo">
                            <div className="logo-src"/>
                            <div className="header__pane ml-auto">
                                <div>
                                    <button type="button" className="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
                                      <span className="hamburger-box">
                                        <span className="hamburger-inner"/>
                                      </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div className="app-header__mobile-menu">
                            <div>
                                <button type="button" className="hamburger hamburger--elastic mobile-toggle-nav">
                                    <span className="hamburger-box">
                                      <span className="hamburger-inner"/>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <div className="app-header__menu">
                            <span>
                              <button type="button" className="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                                <span className="btn-icon-wrapper">
                                  <i className="fa fa-ellipsis-v fa-w-6"/>
                                </span>
                              </button>
                            </span>
                        </div>
                        <div className="app-header__content">

                            <div className="app-header-left">
                                {/* Search Bar */}
                                <div className="search-wrapper">
                                    <div className="input-holder">
                                        <input type="text" className="search-input" placeholder="Type to search"/>
                                        <button className="search-icon"><span/></button>
                                    </div>
                                    <button className="close"/>
                                </div>
                            </div>

                            <div className="app-header-right">
                                <div className="header-btn-lg pr-0">
                                    <div className="widget-content p-0">
                                        <div className="widget-content-wrapper">
                                            <div className="widget-content-left">
                                                <div className="btn-group">
                                                    <div className="dropdown1">
                                                        <img src={TestTeacher} className="rounded-circle" style={{width:'50px', height:'50px', float:'left', margin:'0px'}}/>
                                                        {/*<img width="42" className="rounded-circle" src="DashboardAssets/images/user.jpg" alt=""/>*/}
                                                        <i className="fa fa-angle-down ml-2 opacity-8"/>

                                                        <div className="dropdown-content1 dropdown-menu-right">
                                                            <button type="button" className="dropdown-item">User Account</button>
                                                            <button type="button" className="dropdown-item" style={{color:"red"}} onClick={()=>{
                                                                localStorage.clear();
                                                                window.location.replace("/UserLogin");}}>Sign Out</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="widget-content-left  ml-3 header-user-info">
                                                <div className="widget-heading">
                                                    {this.state.user_name}
                                                </div>
                                                <div className="widget-subheading">
                                                    Tutor
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div className="ui-theme-settings">
                        <button type="button" id="TooltipDemo" className="btn-open-options btn btn-outline-secondary btn-warning" style={{color:"black"}}>
                            <i className="fa fa-cog fa-w-16 fa-spin fa-2x"/>
                        </button>
                        <div className="theme-settings__inner">
                            <div className="scrollbar-container">
                                <div className="theme-settings__options-wrapper">
                                    <h3 className="themeoptions-heading">Layout Options
                                    </h3>
                                    <div className="p-3">
                                        <ul className="list-group">
                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-wrapper">
                                                        <div className="widget-content-left mr-3">
                                                            <div className="switch has-switch switch-container-class"
                                                                 data-class="fixed-header">
                                                                <div className="switch-animate switch-on">
                                                                    <input type="checkbox" defaultChecked data-toggle="toggle" data-onstyle="success"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="widget-content-left">
                                                            <div className="widget-heading">
                                                                Fixed Header
                                                            </div>
                                                            <div className="widget-subheading">
                                                                Makes the header top fixed, always visible!
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-wrapper">
                                                        <div className="widget-content-left mr-3">
                                                            <div className="switch has-switch switch-container-class" data-class="fixed-sidebar">
                                                                <div className="switch-animate switch-on">
                                                                    <input type="checkbox" data-toggle="toggle" data-onstyle="success"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="widget-content-left">
                                                            <div className="widget-heading">
                                                                Fixed Sidebar
                                                            </div>
                                                            <div className="widget-subheading">
                                                                Makes the sidebar left fixed, always visible!
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li className="list-group-item">
                                                <div className="widget-content p-0">
                                                    <div className="widget-content-wrapper">
                                                        <div className="widget-content-left mr-3">
                                                            <div className="switch has-switch switch-container-class"
                                                                 data-class="fixed-footer">
                                                                <div className="switch-animate switch-off">
                                                                    <input type="checkbox" data-toggle="toggle" data-onstyle="success"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="widget-content-left">
                                                            <div className="widget-heading">Fixed Footer
                                                            </div>
                                                            <div className="widget-subheading">
                                                                Makes the app footer bottom fixed, always visible!
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                    <h3 className="themeoptions-heading">
                                        <div>
                                            Header Options
                                        </div>
                                        <button type="button" className="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class>
                                            Restore Default
                                        </button>
                                    </h3>

                                    <div className="p-3">
                                        <ul className="list-group">
                                            <li className="list-group-item">
                                                <h5 className="pb-2">Choose Color Scheme</h5>
                                                <div className="theme-settings-swatches">
                                                    <div className="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light"></div>
                                                    <div className="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light"></div>
                                                    <div className="swatch-holder bg-success switch-header-cs-class"data-class="bg-success header-text-dark"></div>
                                                    <div className="swatch-holder bg-info switch-header-cs-class"ata-class="bg-info header-text-dark"></div>
                                                    <div className="swatch-holder bg-warning switch-header-cs-class"data-class="bg-warning header-text-dark"></div>
                                                    <div className="swatch-holder bg-danger switch-header-cs-class"data-class="bg-danger header-text-light"></div>
                                                    <div className="swatch-holder bg-light switch-header-cs-class"data-class="bg-light header-text-dark"></div>
                                                    <div className="swatch-holder bg-dark switch-header-cs-class"data-class="bg-dark header-text-light"></div>
                                                    <div className="swatch-holder bg-focus switch-header-cs-class"data-class="bg-focus header-text-light"></div>
                                                    <div className="swatch-holder bg-alternate switch-header-cs-class"data-class="bg-alternate header-text-light"></div>

                                                    <div className="divider"></div>

                                                    <div className="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light"></div>
                                                    <div className="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light"></div>
                                                    <div className="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light"></div>
                                                    <div className="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light"></div>
                                                    <div className="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light"></div>
                                                    <div className="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light"></div>
                                                    <div className="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark"></div>
                                                    <div className="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark"></div>
                                                    <div className="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark"></div>
                                                    <div className="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark"></div>
                                                    <div className="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark"></div>
                                                    <div className="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark"></div>
                                                    <div className="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark"></div>
                                                    <div className="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light"></div>
                                                    <div className="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark"></div>
                                                    <div className="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light"></div>
                                                    <div className="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light"></div>
                                                    <div className="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light"></div>
                                                    <div className="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark"></div>
                                                    <div className="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light"></div>
                                                    <div className="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light"></div>
                                                    <div className="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light"></div>
                                                    <div className="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light"></div>
                                                    <div className="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light"></div>
                                                    <div className="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light"></div>
                                                    <div className="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                    <h3 className="themeoptions-heading">
                                        <div>Sidebar Options</div>
                                        <button type="button" className="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class>
                                            Restore Default
                                        </button>
                                    </h3>
                                    <div className="p-3">
                                        <ul className="list-group">
                                            <li className="list-group-item">
                                                <h5 className="pb-2">Choose Color Scheme</h5>
                                                <div className="theme-settings-swatches">
                                                    <div className="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light"></div>

                                                    <div className="divider"></div>

                                                    <div className="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark"></div>
                                                    <div className="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light"></div>
                                                    <div className="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light"></div>

                                                </div>
                                            </li>
                                        </ul>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="app-main">
                        <div className="app-sidebar sidebar-shadow">
                            <div className="app-header__logo">
                                <div className="logo-src"/>
                                <div className="header__pane ml-auto">
                                    <div>
                                        <button type="button" className="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
                                            <span className="hamburger-box">
                                              <span className="hamburger-inner"/>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div className="app-header__mobile-menu">
                                <div>
                                    <button type="button" className="hamburger hamburger--elastic mobile-toggle-nav">
                                      <span className="hamburger-box">
                                        <span className="hamburger-inner"/>
                                      </span>
                                    </button>
                                </div>
                            </div>
                            <div className="app-header__menu">
                              <span>
                                <button type="button" className="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                                  <span className="btn-icon-wrapper">
                                    <i className="fa fa-ellipsis-v fa-w-6"/>
                                  </span>
                                </button>
                              </span>
                            </div>

                            {/* Side Bar */}
                            <div className="scrollbar-sidebar">
                                <div className="app-sidebar__inner">
                                    <ul className="vertical-nav-menu">

                                        <li>
                                            <NavLink activeClassName='mm-active' to={"/admin"}>
                                                <i className="metismenu-icon fa fa-tachometer"></i>
                                                Dashboard
                                            </NavLink>
                                            {/*<Link to={"/admin"}>*/}
                                            {/*    <i className="metismenu-icon fa fa-tachometer"></i>*/}
                                            {/*    Dashboard*/}
                                            {/*</Link>*/}
                                        </li>

                                        <li>
                                        <a href="#">
                                            <i className="metismenu-icon fa fa-book"></i>
                                            Exams
                                            <i className="metismenu-state-icon fa fa-caret-down"></i>
                                        </a>
                                            <ul>
                                                <li>
                                                    <NavLink to={"/questionbank"}>
                                                        <i className="metismenu-icon"></i>
                                                        Question Bank
                                                    </NavLink>
                                                </li>
                                            </ul>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i className="metismenu-icon fa fa-book"></i>
                                                Lesson
                                                <i className="metismenu-state-icon fa fa-caret-down"></i>
                                            </a>
                                            <ul>
                                                <li>
                                                    <NavLink to={"/upload"}>
                                                        <i className="metismenu-icon"></i>
                                                        Lesson upload
                                                    </NavLink>
                                                </li>
                                            </ul>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i className="metismenu-icon fa fa-calendar"></i>
                                                Classes
                                                <i className="metismenu-state-icon fa fa-caret-down"></i>
                                            </a>
                                            <ul>
                                                <li>
                                                    <NavLink to={"/admin/classes/add/"}>
                                                        <i className="metismenu-icon"></i>
                                                        Create Class
                                                    </NavLink>
                                                </li>
                                                <li>
                                                    <NavLink to={"/admin/classes/studentRequests/"}>
                                                        <i className="metismenu-icon"></i>
                                                        Student Requests
                                                    </NavLink>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i className="metismenu-icon"></i>
                                                        Manage Schedule
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i className="metismenu-icon fa fa-graduation-cap"></i>
                                                Students
                                                <i className="metismenu-state-icon fa fa-caret-down"></i>
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="#">
                                                        <i className="metismenu-icon"></i>
                                                        Attendance
                                                    </a>
                                                </li>
                                                <li>
                                                    <NavLink activeClassName="mm-active" to={"/admin/studper/tutor/"+this.state.user_id}>
                                                        <i className="metismenu-icon"></i>
                                                        Progress
                                                    </NavLink>
                                                </li>
                                                <li>
                                                    <NavLink activeClassName='mm-active' to={"/admin/studper/add/"}>
                                                        <i className="metismenu-icon"></i>
                                                        Add Progress Details
                                                    </NavLink>
                                                </li>
                                            </ul>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i className="metismenu-icon fa fa-dollar-sign"></i>
                                                Finance
                                                <i className="metismenu-state-icon fa fa-caret-down"></i>
                                            </a>
                                            <ul>
                                                <li>
                                                    <NavLink activeClassName='mm-active' to={"/admin/finance/add/"}>
                                                        <i className="metismenu-icon"></i>
                                                        Add Details
                                                    </NavLink>
                                                </li>
                                                <li>
                                                    <NavLink to={"/admin/finance/"}>
                                                        <i className="metismenu-icon"></i>
                                                        Manage Details
                                                    </NavLink>
                                                </li>
                                            </ul>
                                        </li>

                                        <li>
                                            <a href="#">
                                                <i className="metismenu-icon fa fa-file-pdf-o"></i>
                                                Reports
                                                <i className="metismenu-state-icon fa fa-caret-down"></i>
                                            </a>
                                            <ul>
                                                <li>
                                                    <a href="#">
                                                        <i className="metismenu-icon"></i>
                                                        Revenue Report
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <i className="metismenu-icon"></i>
                                                        Student Progress Report
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            {/*  End of Side Bar  */}

                        </div>
                        <div className="app-main__outer">
                            <div className="app-main__inner">

                            {/*  ------------------------------Content----------------------------------------  */}
                                <Route path="/admin/" exact component={Analytics}/>
                                <Route path="/admin/finance/" exact component={ViewFinance}/>
                                <Route path="/admin/finance/add" exact component={AddFinance} />
                                <Route path={"/admin/finance/edit/:id"} exact component={EditFinance}/>
                                <Route path="/admin/classes/add" exact component={AddClass}/>
                                <Route path="/admin/classes/studentRequests" exact component={studentRequest}/>
                                <Route path="/admin/studper/add" exact component={AddStudPer}/>
                                <Route path="/admin/studper/tutor/:id" exact component={ProgressStudents}/>
                                <Route path="/admin/studper/student/:id" exact component={ViewProgress}/>
                                <Route path="/admin/predict_quiz_marks" exact component={ViewProgress}/>
                                <Route path="/admin/predict_pass_fail" exact component={ViewProgress}/>
                                <Route path="/admin/predict_grade" exact component={ViewProgress}/>
                            </div>

                            {/* Footer */}
                            <div className="app-wrapper-footer">
                                <div className="app-footer">
                                    <div className="app-footer__inner">

                                        <div className="app-footer-left">
                                            <ul className="nav">
                                                <li className="nav-item">
                                                    <a href="javascript:void(0);" className="nav-link">Copyright  &copy; 2021</a>
                                                </li>
                                                <li className="nav-item">
                                                    <a href="javascript:void(0);" className="nav-link" style={{color:"red",marginLeft:"-25px"}}>SMART COACH</a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div className="app-footer-right">
                                            <ul className="nav">
                                                <li className="nav-item">
                                                    <a href="javascript:void(0);" className="nav-link">Engineered By</a>
                                                </li>
                                                <li className="nav-item">
                                                    <a href="javascript:void(0);" className="nav-link" style={{color:"red",marginLeft:"-25px"}}>2021-049</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


        )
    }
}