Time Sheet Management using visualforce salesforce

Visualforce Page :
--------------------

<apex:page controller="shiftRosterController" tabStyle="Account" sidebar="false" action="{!onloadfunction}" showHeader="false">
    <style>
       .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }      
        .dropdown {
            position: relative;
            display: inline-block;
        }
       
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
       
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
       
        .dropdown-content a:hover {background-color: #f1f1f1}
       
        .dropdown:hover .dropdown-content {
            display: block;
        }
       
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
                * {box-sizing:border-box;}
        ul {list-style-type: none;}
        body {font-family: Verdana,sans-serif;}
       
        .month {
            padding: 50px 15px;
            width: 100%;
            background: #1abc9c;
        }
       
        .month ul {
            margin: 0;
            padding: 0;
            margin-top: -10px;
        }
       
        .month ul li {
            color: white;
            font-size: 17px;
            text-transform: inherit;
            letter-spacing: 1px;
        }
       
        .month .prev {
            float: left;
            padding-top: 10px;
        }
       
        .month .next {
            float: right;
            padding-top: 10px;
        }
       
        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #ddd;
        }
       
        .weekdays li {
            display: inline-block;
            width: 10.6%;
            color: #666;
            text-align: center;
        }
       
        .days {
            padding: 10px 0;
            background: #eee;
            margin: 0;
        }
       
        .days li {
            list-style-type: none;
            display: inline-block;
            width: 13.6%;
            text-align: center;
            margin-bottom: 5px;
            font-size:12px;
            color: #777;
        }
       
        .days li .active {
            padding: 2px;
            background: #1abc9c;
            color: white !important
        }
       
        /* Add media queries for smaller screens */
        @media screen and (max-width:720px) {
            .weekdays li, .days li {width: 13.1%;}
        }
       
        @media screen and (max-width: 420px) {
            .weekdays li, .days li {width: 12.5%;}
            .days li .active {padding: 2px;}
        }
       
        @media screen and (max-width: 290px) {
            .weekdays li, .days li {width: 12.2%;}
        }
        </style>
<apex:form >
     <div class="month">
     <ul>
     <li style="text-align:center">
     <!--<img src="{!$Resource.AccentureWhiteLogo}" style="margin-left: 200px;margin-top: -20px;"/>-->
     <b>Week Selection</b>&nbsp;&nbsp;&nbsp;
      <apex:selectList value="{!weekselection}" size="1" id="weekselect" style="color: black;padding: 1px;color: black;padding: 1px;box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);">
          <apex:actionSupport event="onchange" action="{!onloadfunction}" reRender="AllTables" status="status"/>
          <apex:selectOptions value="{!weekvalues}"/>
      </apex:selectList>
      </li>
      </ul>
      <ul style="margin-left: 1200px;list-style-type:disc;font-family: initial;font-size: 17px;">
      <li>Shift A :(07AM to 4:30PM)</li>
      <li>Shift G :(9AM to 6:30PM )</li>
      <li>Shift B :(12PM to 9:30PM)</li>
      <li>Shift C :(9PM to 6:30AM)</li>
      </ul>
      </div>
      <apex:outputpanel >
    <apex:actionstatus id="status">
        <apex:facet name="start">
            <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;height: 100%;opacity:0.65;width:100%;">
                <div class="waitingHolder" style="top: 115px; width: 50px;">
                    <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                    <span class="waitingDescription">Loading...</span>
                </div>
            </div>
        </apex:facet>
    </apex:actionstatus>
    </apex:outputpanel>
          <br/>
          <apex:outputPanel id="AllTables">
            <apex:tabPanel switchType="client" selectedTab="inceffort" id="theTabPanel" >              
                <apex:tab label="Resource Shift Roster" name="othereffort" id="tabTwo" style="font-weight:bold;width:200px;">  
                <apex:outputPanel id="otherentrytable">
                <apex:pagemessages />
                <apex:outputPanel rendered="{!sectionPageBlockShow}">
                <apex:dataTable cellspacing="10" value="{!otherentrylist}" var="acc" rendered="{!NOT(ISNULL(otherentrylist))}" width="100%" border="0">
                         <apex:column headervalue="Resource Name">
                             <apex:inputField value="{!acc.Account__c}"/>
                         </apex:column>                        
                         <apex:column headervalue="Application">
                             <apex:inputField value="{!acc.Application__c}" required="true"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+0}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Monday_Shift__c}" required="true"/>                            
                         </apex:column>                        
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+1}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Tuesday_Shift__c}" required="true"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+2}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Wed_Shift__c}" required="true"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+3}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Thurs_Shift__c}" required="true"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+4}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Friday_Shift__c}" required="true"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+5}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Saturday_Shift__c}"/>
                         </apex:column>
                         <apex:column >
                             <apex:facet name="header"><apex:outputText value="{0,date,d-MMMM (EEEE)}"><apex:param value="{!SelectedRowDate+6}" /></apex:outputText></apex:facet>
                             <apex:inputField value="{!acc.Sunday_Shift__c}" />
                         </apex:column>  
                     </apex:dataTable>
                     </apex:outputpanel>
                     </apex:outputpanel>
                     <br/> <br/>    
                     <apex:commandButton value="Save Roster" action="{!savetimesheet}" rendered="{!cmdSaveRosterShow}" style="margin-top: 22px;padding: 8px;margin-left: 10px;"/>            
                    <apex:commandButton value="Add another row" action="{!addrowothers}" reRender="AllTables" status="status" rendered="{!cmdAddRowRosterShow}" style="margin-top: 22px;padding: 8px;margin-left: 10px;"/>
                </apex:tab>
                <apex:tab label="Manager Console" name="othereffort1" id="tabTwo1" style="font-weight:bold;width:200px;">
                    <apex:pageMessage detail="Info: Working In progress" severity="Info"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                </apex:tab>
            </apex:tabPanel>
          </apex:outputPanel>
          <br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</apex:form>      
</apex:page>

Apex Controller :
---------------------

public class shiftRosterController{
    public String weekselection{get; set;}
    public String incselection{get; set;}
    Public List<Employee_Shift_Roster__c> tentries;
    Public List<Employee_Shift_Roster__c> otherentries;
    Public Date SelectedWeek;
    Public Date SelectedRowDate{get;set;}
    public boolean cmdAddRowRosterShow {get;set;}
    public boolean cmdSaveRosterShow{get;set;}
    public Id oppId {get; set;}
    public boolean sectionPageBlockShow{get;set;}
    public void shiftRosterController(){
        cmdAddRowRosterShow = false;
        cmdSaveRosterShow = false;
        sectionPageBlockShow = false;
    }
    public void onloadfunction(){
        try{
            if(weekselection=='--None--'|| weekselection == null){
                ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Confirm,'Please select week value from above picklist'));
                cmdAddRowRosterShow = false;
                cmdSaveRosterShow = false;
                sectionPageBlockShow = false;
            }else{
                if ( weekselection != null){
                    SelectedWeek = date.valueOf(weekselection);
                    system.debug('The Selected Week is'+SelectedWeek);
                    tentries = [select id,Account__c,Work_Week__c ,Application__c,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
                    otherentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
                    SelectedRowDate = Date.valueOf(weekselection);
                    cmdAddRowRosterShow = true;
                    cmdSaveRosterShow = true;
                    sectionPageBlockShow = true;
                }else{
                    Date currentdate = date.today();
                    SelectedWeek = currentdate.toStartofWeek()+1;
                    system.debug('The Selected Week is'+SelectedWeek);
                    tentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
                    otherentries = [select id,Account__c,Application__c,Work_Week__c ,Friday_Shift__c,Monday_Shift__c,Saturday_Shift__c,Sunday_Shift__c,Thurs_Shift__c,Tuesday_Shift__c,Wed_Shift__c from Employee_Shift_Roster__c where Work_Week__c=:SelectedWeek];
                    SelectedRowDate = Date.valueOf(weekselection);
                    cmdAddRowRosterShow = true;
                    cmdSaveRosterShow = true;
                    sectionPageBlockShow = true;
                }
           }
        }catch(exception e){
           
        }          
    }      
    public List<Employee_Shift_Roster__c> getentrylist(){
        if (tentries!=NULL && tentries.size()>0)
        return tentries;
        else
    return null;  
    }
    public List<Employee_Shift_Roster__c> getotherentrylist(){
        if (otherentries!=NULL && otherentries.size()>0)
        return otherentries;
        else
    return null;  
    }
   
    public List<SelectOption> getweekvalues(){
        List<SelectOption> options = new List<SelectOption>();
        Date currentdate = date.today();
        Date currentweekstart = currentdate.toStartofWeek()+1;
        Date currentweekend = currentweekstart +6;
        Date oldestweekstart = currentweekstart - 7;
        Date oldestweekend;
        options.add(new SelectOption('--None--','--None--'));
        options.add(new SelectOption(currentweekstart+'',currentweekstart.format()+' to '+currentweekend.format()));
        for (Integer i =0; i<=10 ; i++){
        oldestweekend = oldestweekstart+6;
        options.add(new SelectOption(oldestweekstart+'',oldestweekstart.format()+' to '+oldestweekend.format()));
        oldestweekstart +=7;
        }
    return options;
    }
    public void addrowothers(){
        system.debug('The Selected Week is'+SelectedWeek);
        Employee_Shift_Roster__c newentry = new Employee_Shift_Roster__c(Work_Week__c=SelectedWeek);
    otherentries.add(newentry);
    }
    Public Pagereference canceltimesheet(){
        Pagereference p = Page.timesheetmanagement;
    return p;
    }
    public Pagereference savetimesheet(){
    try{
        upsert tentries;
        upsert otherentries;
        Pagereference p = Page.ShiftRosterController_Pge;
    return p;
    }catch(exception e){
        return null;
    }  
  }    
}

Screen Shot :
--------------