EVOLUTION-NINJA

Edit File: dashboard.php

<?php echo view('includes/sidebar'); ?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

.projectsummary {
        width: 96%;
        height: auto;
        background-color: white;
        padding: 20px;
        margin: auto;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        margin-top: 20px;
    }

.projectsummary>h4 {
        color: #05004E;
        font-family: 'poppins';
        font-size: 20px;
        font-weight: 600;
    }

.summarydetails {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        width: 100%;
        margin: auto;
        margin-top: 15px;
        padding: 15px;
    }

.projsumm {
        width: 100%;
        height: 100%;
        padding: 15px;
        border-radius: 16px;
    }

.projsumm>.totalproj {
        color: #151D48;
        font-family: 'poppins';
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 0;
        margin-top: 8px;
    }

.projsumm>.projecttitle {
        color: #002354;
        font-family: 'poppins';
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 0;
        margin-top: 8px;
    }

.projsumm>.projectsadded {
        color: #4079ED;
        font-family: 'poppins';
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 0;
        margin-top: 8px;
    }

.p1 {
        background-color: #FFE2E5;
    }

.p2 {
        background-color: #FFF4DE;
    }

.p3 {
        background-color: #DCFCE7;
    }

.p4 {
        background-color: #F3E8FF;
    }

.p5 {
        background-color: #E8EDFF;
    }

/* Activity block style -----------  */
    .activitytab {
        /* border: 1px solid */
    }

.activityhistory {
        /* border:1px solid; */
        background-color: white;
        padding: 12px;
        border-radius: 17px;

}

.activitylist {
        border: 1px solid;
        width: 100%;
        margin: auto;
        border: none;
        border-bottom: 0.6px solid #ECECEE;
        border-top: 0.6px solid #ECECEE;
        padding: 7px 3px;

}

.usericonnot {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.activityboard {
        margin-left: auto;
        /* padding: 9px; */
    }

::-webkit-scrollbar {
        display: none;
    }

.activity {
        width: 97%;
        margin: auto;
        height: 100%;
    }

.usernameact {
        font-size: 15px;
        color: #15192C;
        font-weight: 500;

}

.useractivity {
        font-size: 13px;
        color: #15192C;
        font-weight: 500;
    }

.activityheading {
        color: #05004E;
        font-size: 21px;
        font-weight: 600;
    }

.activitychart {
        /* border:1px solid; */
        border-radius: 16px;
        background-color: white;
        padding: 9px;
        min-height:430px;

}

.activityofusers {
        overflow-y: auto;
        max-height: 450px;

}

#chart_div {
        height:80%;
        overflow-x: scroll;
    }

/* -----------------activity block end  */

@media (min-width: 768px) and (max-width: 1024px) {
        .summarydetails {
            grid-template-columns: repeat(2, 1fr);
        }

.activity {
            flex-direction: column;
        }

.activitychart {
            max-width: 100%;
            min-height:auto !important ;
            overflow-x: scroll;
        }

.activityboard {
            max-width: 100%;
            margin-top: 14px;
            padding: 0
        }
        #chart_div {
            height:auto;
        }
    }

@media only screen and (max-width:620px) {
        .projectsummary {
            padding: 15px 20px
        }

.summarydetails {
            grid-template-columns: repeat(1, 1fr);
        }

.usericonnot {

align-items: flex-start;
        }

.activityboard {
           padding: 0;
            margin-top: 13px;
        }

.activitychart {
            overflow-x: scroll;
        }

.activity {
            width: 95%;
        }
        
        #chart_div {
        height:auto;
        width:100%;
        }
    }
    
    
    @media only screen and (orientation: landscape) {

@media (min-width:628px) and (max-width:767px){
            .summarydetails {
                grid-template-columns: repeat(2, 1fr);
            }
             #chart_div {
               height:auto;
               width:100%;
            }
            .activityboard{
                margin-top:13px;
            }
        }
        
        @media (min-width: 768px) and (max-width: 1024px) {
        .summarydetails {
            grid-template-columns: repeat(2, 1fr);
        }
         #chart_div {
                height:auto;
                 width:100%;
         }
    
         .activityboard{
               margin-top:13px;
          }
      }
       
}
</style>

<section class="home-section fullpage">
    <div class="home-content">
        <i class='bx bx-menu'></i>
        
    </div>
    <!-- <div class="row m-0">
        <div class="col-sm-12">
            <h1 class="crt-pjt">Project Summary</h1>
        </div>

</div> -->

<section>
        <div class="projectsummary">
        
            <h4>Project Summary</h4>
            <div class="summarydetails">
                <div class="projectdetail">
                    <div class="projsumm p1">
                        <img src="public/assets/images/Icon-4.png" alt="Icon">
                        <p class="totalproj"><?php echo $project  ?? 0 ;?></p>
                        <p class="projecttitle">Total Projects</p>

</div>
                </div>

<div class="projectdetail">
                    <div class="projsumm p3">
                        <img src="public/assets/images/Icon-2.png" alt="Icon">
                        <p class="totalproj"><?php echo $to_be_started ?? 0 ;  ?></p>
                        <p class="projecttitle">To Be Start</p>

</div>
                </div>
                
                <div class="projectdetail">
                    <div class="projsumm p4">
                        <img src="public/assets/images/Icon-1.png" alt="Icon">
                        <p class="totalproj"><?php echo $progress ?? 0 ;  ?></p>
                        <p class="projecttitle">In Progress</p>

</div>
                </div>
           
                <div class="projectdetail">
                    <div class="projsumm p5">
                        <img src="public/assets/images/Icon.png" alt="Icon">
                        <p class="totalproj"><?php echo $completed ?? 0 ; ?></p>
                        <p class="projecttitle">Completed</p>

</div>
                </div>

</div>

</section>

<section class="mt-4">
        <div class="activitytab">
            <div class="activity row">
                <div class="col-sm-9 activitychart">
                    <h2 class="activityheading ml-3">Total Fund Release</h2>
                    <div id="chart_div" style="height:80%"></div>

</div>

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

</div>
</section>

<?php
// Assuming $fund_released is an associative array with keys 'year' and 'total_amount'
// Sort the data by year
usort($fund_released, function($a, $b) {
    return $a['year'] <=> $b['year'];
});
?>

function drawMultSeries() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Fund Release (in Lakhs) :');

// PHP code to echo fund release data with the desired year format
        data.addRows([
            <?php 
            foreach ($fund_released as $release): 
                // Format year to '2024-25'
                $year = $release['year'];
                $next_year = $year + 1; // Assuming year is in YYYY format
                $year_formatted = "{$year}-" . substr($next_year, -2);
            ?>
                ['<?= esc($year_formatted) ?>', <?= esc($release['total_amount']) ?>],
            <?php endforeach; ?>
        ]);

var options = {
            title: 'Yearly Fund Release',
            hAxis: {
                title: 'Year',
                format: '0', // Format the year without decimals
            },
            vAxis: {
                title: 'Fund Release Amount (in Lakhs)',
                minValue: 0,
                format: 'short', // Format values as short numbers
            },
            legend: { position: 'top' },
            bar: { groupWidth: '20%' }, // Adjust bar width as needed
        };

var chart = new google.visualization.ColumnChart(
            document.getElementById('chart_div'));

chart.draw(data, options);
    }
</script>

<?php echo view('includes/footer'); ?>