    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
include(&quot;db/cn.php&quot;);
if(isset($_SESSION[&#039;user_name&#039;]) &amp;&amp; isset($_SESSION[&#039;user_role&#039;])&amp;&amp; isset($_SESSION[&#039;outlet_name&#039;])
&amp;&amp; isset($_SESSION[&#039;outlet_address&#039;])) {
    $userName = $_SESSION[&#039;user_name&#039;];
    $userRole = $_SESSION[&#039;user_role&#039;];
	$outlet_address = $_SESSION[&#039;outlet_address&#039;];
	$outlet_name = $_SESSION[&#039;outlet_name&#039;];
}
?&gt;

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;title&gt;DashBoard - Jabbar Glass House&lt;/title&gt;
    
    &lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/custom_css.css&quot; /&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
  
&lt;/head&gt;

&lt;style&gt;
 #product-container-wrapper {
    max-height: 700px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}
/* Custom styles for sidebar */
 #table-container-wrapper {
    max-height: 500px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}
@media (max-width: 880px) {
    .col-4 {
        width: 33.33% !important;
    }
    .fa-wifi {
        display: none !important;
    }
    .col-6 {
        width: 50% !important;
    }
}

@media (min-width: 880px) {
    .sidebar {
        width: 100%;
        /* Change sidebar width to 100% on mobile */
        max-width: 120px; /* Set maximum width for the sidebar */
    }
}

@media (min-width: 880px) {
    .main-content {
        margin-left: ; /* Width of the sidebar */
    }
}

/* Added new class to control overlay */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none; /* Initially hidden */
}
    /* Custom styles for sidebar */
    .sidebar {
        width: 100px;
        background: linear-gradient(360deg, #060606, #0A5064);
        position: fixed;
        bottom: 0;
        top: 60px;
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
        z-index: 1;
        height: 100%;
        border-radius: 0px;
		   transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    .sidebar.hide {
        transform: translateX(-100px);
        /* Move sidebar out of the viewport when it is hidden */
    }

    .sidebar .nav-item {
        padding: 10px 0;
        text-align: center;
        position: relative;
        font-size: 12px;
    }

    .sidebar .nav-link {
        color: #fff;
        position: relative;
        /* Ensure icon and text are positioned relative to the nav link */
        z-index: 2;
        /* Ensure the text and icon are above the hover background */
    }

    .sidebar .nav-link i {
        margin-bottom: 5px;
        /* Adjust the margin of the icon */
    }

    /* Custom styles for hover effect */
    .sidebar .nav-item:hover:after {
        background-color: #fff;
        content: &#039;&#039;;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Ensure the hover background is below the text and icon */
    }

    .sidebar .nav-item:hover .nav-link {
        color: #524C42;
    }

    /* Custom styles for divider */
    .sidebar .nav-item:after {
        content: &quot;&quot;;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
        transition: height 0.3s ease-in-out;
        /* Transition effect for smooth animation */
    }

    /* Custom styles for header */
    .header {
        background: linear-gradient(270deg, #060606, #0A5064);
        color: #fff;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        height: 69px;
        box-shadow: #FFF 2px 0px 0px 0px;
        /* Ensure header appears above sidebar */
    }

    .header .navbar-toggler {
        color: #fff;
    }

    .header .navbar-toggler-icon {
        color: #fff;
        /* Set the color of the toggle button to white */
    }

    .header .navbar-toggler.white {
        color: #fff !important;
        /* Ensure the toggle button is white */
    }

    .header .navbar-brand {
        color: #fff;
        /* Set navbar brand text color to white */
    }

    .header .nav-item .nav-link {
        color: #fff;
        /* Set nav link text color to white */
    }

.main-content {
    margin-top: 50px; /* Height of fixed header */
    margin-left: 100px; /* Initially, set margin-left to 0 */
    padding-top: 30px; /* Height of fixed header */
    transition: margin-left 0.3s ease-in-out; /* Add transition for smoother animation */
}


    /* Custom styles for search bar */
    .search-container {
        display: flex;
        align-items: center;
       width:100%;
        margin: 2px auto;
        float:left;
	}

/* Updated hide class to apply to the overlay */
.sidebar.hide, .overlay.hide {
    transform: translateX(-100%);
}

    .search-input {
        width: 100%;
        padding: 10px 30px 10px 10px;
        /* Adjust padding to accommodate the icon */
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
    }

    .search-icon {
        position: relative;
        left: -25px;
        /* Adjust the position of the icon */
        color: #aaa;
    }

    .search-icon i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-dark {
        background: #0A5064;
        color: #fff;
        border: 1px solid #0A5064;
    }

    .btn-dark:hover {
        background: #fff;
        color: #0A5064;
        border: 1px solid #0A5064;
    }

    .bg-dark2 {
        background: #8A1218;
        color: #fff;
    }

    .modal-content {
        animation: modal-animation 0.5s;
    }

    @keyframes modal-animation {
        from {
            opacity: 0;
            transform: scale(0.8);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

	
		
		        #searchResults {
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            max-height: 200px;
            overflow-y: auto;
            width: 85%;
            display: none;
        }
        #searchResults div {
            padding: 10px;
            cursor: pointer;
        }
        #searchResults div:hover {
            background-color: #f1f1f1;
        }
		    .chart-container {
      position: relative;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    canvas {
      max-width: 100%;
      height: auto;
    }
	.border-left-dark{
	   border-left:7px solid #000;
	   border-right:2px solid #0A5064;
	   border-bottom:2px solid #0A5064;
	   border-top:2px solid #0A5064;	
	   border-radius:7px;
		}
		.btn-black{
		background:#4C0027;
		color:#fff;
		border:1px #4C0027 solid;	
			}
			.btn-black:hover{
			  	background:#fff;
		color:#4C0027;
		border:1px #4C0027 solid;
				}
&lt;/style&gt;

&lt;body&gt;

&lt;?php
if(isset($msg)){
	
	echo $msg;
	}
?&gt;
&lt;?php include(&quot;common/hd.php&quot;); ?&gt;
&lt;!-- Sidebar --&gt;
&lt;?php include(&quot;common/sd.php&quot;); ?&gt;
&lt;div class=&quot;main-content&quot;&gt;
&lt;div class=&quot;container-fluid&quot;&gt;
                     &lt;div class=&quot;d-sm-flex align-items-center justify-content-between mb-4&quot;&gt;
                        &lt;h1 class=&quot;h3 mb-0 text-gray-800&quot;&gt;Dashboard&lt;/h1&gt;
                        
                    &lt;/div&gt;

                    &lt;div class=&quot;container&quot; style=&quot;background: linear-gradient(360deg, #060606, #0A5064); border:5px solid #0A5064; border-radius:20px;&quot;&gt;
                    &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-sm-5&quot;&gt; 
                    &lt;br&gt;
                    &lt;img src=&quot;img/Jabbas Fav (1).png&quot; width=&quot;55&quot; height=&quot;70&quot;&gt;
                    &lt;br&gt;&lt;br&gt;
                    &lt;h3 class=&quot;mb-3 text-white&quot; style=&quot;font-size:25px&quot;&gt;Welcome Admin ,&lt;br&gt;Jabbar Glass House &amp; Aluminium Works&lt;/h3&gt;
                    &lt;p class=&quot;text-white btn btn-dark btn-sm&quot;&gt;Logged In&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-sm-2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;col-sm-5&quot;&gt;
                    
                    &lt;img src=&quot;../img/school.png&quot; width=&quot;596&quot; height=&quot;371&quot; class=&quot;img-fluid&quot; /&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
                    
                    &lt;/div&gt;        

&lt;br&gt;&lt;br&gt;
                   &lt;div class=&quot;container&quot;&gt;
                     &lt;div class=&quot;row&quot;&gt;
&lt;?php
$date_time22 = date(&quot;Y-m-d&quot;);

// Get the first and last day of the current month
$first_day_of_month1 = date(&quot;Y-m-01&quot;);
$last_day_of_month1 = date(&quot;Y-m-t&quot;);

// First, select the unique order_id with their respective discount_amount
$query = &quot;
    SELECT order_id, discount_amount
    FROM log_user_sales
    WHERE date_time BETWEEN &#039;$first_day_of_month1&#039; AND &#039;$last_day_of_month1&#039;
    GROUP BY order_id
&quot;;

$sale_month = mysqli_query($connection, $query);

if ($sale_month) {
    $total_sale_now_month = 0;
    while ($row = mysqli_fetch_array($sale_month)) {
        if (isset($row[&#039;discount_amount&#039;])) {
            $total_sale_now_month += $row[&#039;discount_amount&#039;];
        }
    }
   // echo &quot;Total discount amount for the current month (unique order IDs): &quot; . $total_sale_now_month;
} else {
    echo &quot;Error executing query: &quot; . mysqli_error($connection);
}
?&gt;

                         &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot; style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                                Sale Revenue(Monthly)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($total_sale_now_month);
											$total_sale_monthly =  round($total_sale_now_month);?&gt;/-&lt;/div&gt;                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-calendar fa-2x &quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;?php
$date_time11 = date(&quot;Y-m-d&quot;);

// SQL query to select unique order_id with their respective discount_amount
$query = &quot;
    SELECT order_id, discount_amount
    FROM log_user_sales
    GROUP BY order_id
&quot;;

$sale_anu = mysqli_query($connection, $query);

if ($sale_anu) {
    $total_sale_anu = 0;
    while ($row = mysqli_fetch_assoc($sale_anu)) {
        if (isset($row[&#039;discount_amount&#039;])) {
            $total_sale_anu += $row[&#039;discount_amount&#039;];
        } else {
            echo &quot;No sale_amount found for order_id: &quot; . $row[&#039;order_id&#039;] . &quot;&lt;br&gt;&quot;;
        }
    }
   // echo &quot;Total discount amount for unique order IDs: &quot; . $total_sale_anu;
} else {
    echo &quot;Error executing query: &quot; . mysqli_error($connection);
}
?&gt;

                        &lt;!-- Earnings (Monthly) Card Example --&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                                Sale Revenue(Annual)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($total_sale_anu);
											
											$total_sale_yearly = round($total_sale_anu); ?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x&quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        
                   

                        &lt;!-- Earnings (Monthly) Card Example --&gt;
                         &lt;?php
					$date_time22 = date(&quot;Y-m-d&quot;);
					
					// Get the first and last day of the current month
					$first_day_of_month12 = date(&quot;Y-m-01&quot;);
					$last_day_of_month12 = date(&quot;Y-m-t&quot;);
					
					// Modify the SQL query to filter records within the current month
					$sale_month2 = mysqli_query($connection, &quot;
						SELECT SUM(sale_cost) AS sale_amount 
						FROM log_user_sales 
						WHERE date_time BETWEEN &#039;$first_day_of_month1&#039; AND &#039;$last_day_of_month1&#039;
					&quot;);
					
					if ($sale_month2) {
						$sale_now_month2 = mysqli_fetch_array($sale_month2);
						if ($sale_now_month2 &amp;&amp; isset($sale_now_month2[&#039;sale_amount&#039;])) {
							$total_sale_now_month2 = $sale_now_month2[&#039;sale_amount&#039;];
							echo &quot;&quot;;
						} else {
							echo &quot;&quot;;
						}
					} else {
						echo &quot;Error executing query: &quot; . mysqli_error($connection);
					}
						?&gt;

                        &lt;!-- Pending Requests Card Example --&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                                Sale Cost(Monthly)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($total_sale_now_month2);
											$cost_sale_monthly = round($total_sale_now_month2); ?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x&quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                             &lt;?php
					 $date_time13 = date(&quot;Y-m-d&quot;);
					 $sale_cost = mysqli_query($connection, &quot;SELECT SUM(sale_cost) AS sale_amount FROM log_user_sales &quot;);
					 if ($sale_cost) {
						$sale_costdata = mysqli_fetch_array($sale_cost);
						if ($sale_costdata &amp;&amp; isset($sale_costdata[&#039;sale_amount&#039;])) {
							$sale_cost_data = $sale_costdata[&#039;sale_amount&#039;];
							echo &quot;&quot;;
						} else {
							echo &quot;&quot;;
						}
						} else {
							echo &quot;Error executing query: &quot; . mysqli_error($connection);
						}
						?&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                                Sale Cost(Annual)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($sale_cost_data);
											$sale_cost_yearly = round($sale_cost_data);  ?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x&quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                     
                     &lt;div class=&quot;row&quot;&gt;
                       &lt;?php
					$date_time212 = date(&quot;Y-m-d&quot;);
					
					// Get the first and last day of the current month
					$first_day_of_month = date(&quot;Y-m-01&quot;);
					$last_day_of_month = date(&quot;Y-m-t&quot;);
					
					// Modify the SQL query to filter records within the current month
					$cash_out_month = mysqli_query($connection, &quot;
						SELECT SUM(amount) AS total_amount 
						FROM incash 
						WHERE date_time BETWEEN &#039;$first_day_of_month&#039; AND &#039;$last_day_of_month&#039;
					&quot;);
					
					if ($cash_out_month) {
						$cash_outdata_month = mysqli_fetch_array($cash_out_month);
						if ($cash_outdata_month &amp;&amp; isset($cash_outdata_month[&#039;total_amount&#039;])) {
							$totalAmount_cashexpense_month = $cash_outdata_month[&#039;total_amount&#039;];
							echo &quot;&quot;;
						} else {
							echo &quot;&quot;;
						}
					} else {
						echo &quot;Error executing query: &quot; . mysqli_error($connection);
					}
						?&gt;
                    
                        
                         &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                                Expense (Monthly)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($totalAmount_cashexpense_month); 
											$expense_cost_month = round($totalAmount_cashexpense_month);
											?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-calendar fa-2x &quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;?php
					 $date_time21 = date(&quot;Y-m-d&quot;);
					 $cash_out = mysqli_query($connection, &quot;SELECT SUM(amount) AS total_amount FROM incash &quot;);
					 if ($cash_out) {
						$cash_outdata = mysqli_fetch_array($cash_out);
						if ($cash_outdata &amp;&amp; isset($cash_outdata[&#039;total_amount&#039;])) {
							$totalAmount_cashexpense = $cash_outdata[&#039;total_amount&#039;];
							echo &quot;&quot;;
						} else {
							echo &quot;&quot;;
						}
						} else {
							echo &quot;Error executing query: &quot; . mysqli_error($connection);
						}
						?&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                               Expense (Annual)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php echo round($totalAmount_cashexpense);
											$expense_cost_yearly = round($totalAmount_cashexpense);
											 ?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x &quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!-- Earnings (Monthly) Card Example --&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                               Net-Profit (Monthly)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php 
											
											$netProfitm =$total_sale_monthly - $cost_sale_monthly - $expense_cost_month;
											 echo round($netProfitm); 
											
											
											?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x &quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!-- Earnings (Monthly) Card Example --&gt;
                        &lt;div class=&quot;col-xl-3 col-md-6 mb-4&quot;&gt;
                            &lt;div class=&quot;card border-left-dark shadow h-100 py-2&quot;&gt;
                                &lt;div class=&quot;card-body&quot;&gt;
                                    &lt;div class=&quot;row no-gutters align-items-center&quot;&gt;
                                        &lt;div class=&quot;col mr-2&quot;&gt;
                                            &lt;div class=&quot;text-xs font-weight-bold text-uppercase mb-1&quot;  style=&quot;font-size:13px;color:#0A5064;&quot;&gt;
                                               Net-Profit (Annual)&lt;/div&gt;
                                            &lt;div class=&quot;h5 mb-0 font-weight-bold text-gray-800&quot;&gt;Rs.&lt;?php 
											
									$netProfita = $total_sale_yearly - $sale_cost_yearly - $expense_cost_yearly; 
											 echo round($netProfita);
											 ?&gt;/-&lt;/div&gt;
                                        &lt;/div&gt;
                                        &lt;div class=&quot;col-auto&quot;&gt;
                                            &lt;i class=&quot;fas fa-dollar-sign fa-2x &quot; style=&quot;color:#0A5064;&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!-- Pending Requests Card Example --&gt;
                        
                        
                     &lt;/div&gt;
                     
                   &lt;/div&gt;
                   
                   
              
                   &lt;!--line graph--&gt;
                   &lt;div class=&quot;container&quot; style=&quot;margin-bottom:80px;&quot;&gt;
                    &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-sm-8 &quot;&gt;
                        &lt;div class=&quot;chart-container&quot;&gt;
                        &lt;div&gt;
                                &lt;button class=&quot;btn btn-dark btn-sm&quot; onclick=&quot;filterData(7)&quot;&gt;7 Days&lt;/button&gt;
                                &lt;button class=&quot;btn btn-dark btn-sm&quot; onclick=&quot;filterData(14)&quot;&gt;14 Days&lt;/button&gt;
                                &lt;button class=&quot;btn btn-dark btn-sm&quot; onclick=&quot;filterData(28)&quot;&gt;28 Days&lt;/button&gt;
                            &lt;/div&gt;
                          &lt;canvas class=&quot;col-sm-12&quot; id=&quot;lineChart&quot;&gt;&lt;/canvas&gt;
                            
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-sm-4&quot;&gt;
                         &lt;div class=&quot;chart-container&quot;&gt;
                           &lt;canvas id=&quot;donutChart&quot;&gt;&lt;/canvas&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;



                &lt;/div&gt;


&lt;?php
// Database connection (assuming $connection is already defined)
$start_of_month = date(&quot;Y-m-01&quot;);
$end_of_month = date(&quot;Y-m-t&quot;);

// Fetch daily sales data for the current month
$sales_query = mysqli_query($connection, &quot;
    SELECT DATE(date_time) AS date, SUM(discount_amount) AS total_sales 
    FROM log_user_sales 
    WHERE date_time BETWEEN &#039;$start_of_month&#039; AND &#039;$end_of_month&#039;
    GROUP BY DATE(date_time)
&quot;);

$sales_data = [];
while ($row = mysqli_fetch_assoc($sales_query)) {
    $sales_data[$row[&#039;date&#039;]] = $row[&#039;total_sales&#039;];
}

// Fetch daily purchase data for the current month
$purchases_query = mysqli_query($connection, &quot;
    SELECT DATE(date_time) AS date, SUM(sale_cost) AS total_purchases 
    FROM log_user_sales 
    WHERE date_time BETWEEN &#039;$start_of_month&#039; AND &#039;$end_of_month&#039;
    GROUP BY DATE(date_time)
&quot;);

$purchases_data = [];
while ($row = mysqli_fetch_assoc($purchases_query)) {
    $purchases_data[$row[&#039;date&#039;]] = $row[&#039;total_purchases&#039;];
}

// Pass data to JavaScript
$sales_data_json = json_encode($sales_data);
$purchases_data_json = json_encode($purchases_data);
?&gt;
  &lt;?php
// Database connection (assuming $connection is already defined)
$current_date_expense = date(&quot;Y-m-d&quot;);

// Get the first and last day of the current month
$start_of_month_expense = date(&quot;Y-m-01&quot;);
$end_of_month_expense = date(&quot;Y-m-t&quot;);

// Sales Query
$sales_query_expense = mysqli_query($connection, &quot;
    SELECT SUM(discount_amount) AS total_sales_expense 
    FROM log_user_sales 
    WHERE date_time BETWEEN &#039;$start_of_month_expense&#039; AND &#039;$end_of_month_expense&#039;
&quot;);

$total_sales_expense = 0;
if ($sales_query_expense) {
    $sales_result_expense = mysqli_fetch_array($sales_query_expense);
    if ($sales_result_expense &amp;&amp; isset($sales_result_expense[&#039;total_sales_expense&#039;])) {
        $total_sales_expense = $sales_result_expense[&#039;total_sales_expense&#039;];
    }
}

// Purchase Query
$purchases_query_expense = mysqli_query($connection, &quot;
    SELECT SUM(sale_cost) AS total_purchases_expense 
    FROM log_user_sales 
    WHERE date_time BETWEEN &#039;$start_of_month_expense&#039; AND &#039;$end_of_month_expense&#039;
&quot;);

$total_purchases_expense = 0;
if ($purchases_query_expense) {
    $purchases_result_expense = mysqli_fetch_array($purchases_query_expense);
    if ($purchases_result_expense &amp;&amp; isset($purchases_result_expense[&#039;total_purchases_expense&#039;])) {
        $total_purchases_expense = $purchases_result_expense[&#039;total_purchases_expense&#039;];
    }
}

// Expense Query
$expense_query_expense = mysqli_query($connection, &quot;
    SELECT SUM(amount) AS total_expense_expense 
    FROM incash 
    WHERE date_time BETWEEN &#039;$start_of_month_expense&#039; AND &#039;$end_of_month_expense&#039;
&quot;);

$total_expense_expense = 0;
if ($expense_query_expense) {
    $expense_result_expense = mysqli_fetch_array($expense_query_expense);
    if ($expense_result_expense &amp;&amp; isset($expense_result_expense[&#039;total_expense_expense&#039;])) {
        $total_expense_expense = $expense_result_expense[&#039;total_expense_expense&#039;];
    }
}

// Pass data to JavaScript
$sales_data_json_expense = json_encode($total_sales_expense);
$purchases_data_json_expense = json_encode($total_purchases_expense);
$expense_data_json_expense = json_encode($total_expense_expense);
?&gt;  
&lt;/div&gt;    
&lt;/body&gt;
 &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        // Retrieve PHP data
        var salesData = &lt;?php echo $sales_data_json; ?&gt;;
        var purchasesData = &lt;?php echo $purchases_data_json; ?&gt;;

        // Get the current date and first and last day of the current month
        var currentDate = new Date();
        var firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
        var lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

        // Generate labels for the current month
        var labels = [];
        for (var d = new Date(firstDay); d &lt;= lastDay; d.setDate(d.getDate() + 1)) {
            labels.push(d.toISOString().split(&#039;T&#039;)[0]);
        }

        // Function to filter data
        function filterData(days) {
            var endDate = new Date();
            var startDate = new Date();
            startDate.setDate(endDate.getDate() - days + 1); // Calculate start date based on days

            var filteredLabels = [];
            var filteredSalesData = [];
            var filteredPurchasesData = [];

            labels.forEach(function(label, index) {
                var currentDate = new Date(label);
                if (currentDate &gt;= startDate &amp;&amp; currentDate &lt;= endDate) {
                    filteredLabels.push(label);
                    filteredSalesData.push(salesData[label] || 0);
                    filteredPurchasesData.push(purchasesData[label] || 0);
                }
            });

            // Update chart data
            myChart.data.labels = filteredLabels;
            myChart.data.datasets[0].data = filteredPurchasesData;
            myChart.data.datasets[1].data = filteredSalesData;
            myChart.update();
        }

        // Initial data for the line chart
        var initialSalesDataArray = [];
        var initialPurchasesDataArray = [];

        labels.forEach(function(label) {
            initialSalesDataArray.push(salesData[label] || 0);
            initialPurchasesDataArray.push(purchasesData[label] || 0);
        });

        // Data for the line chart
        var data = {
            labels: labels,
            datasets: [
                {
                    label: &#039;Purchase&#039;,
                    borderColor: &#039;rgba(10, 75, 94, 1)&#039;,
                    backgroundColor: &#039;rgba(10, 75, 94, 0.2)&#039;,
                    data: initialPurchasesDataArray,
                    fill: &#039;origin&#039;
                },
                {
                    label: &#039;Sale&#039;,
                    borderColor: &#039;rgba(6, 8, 9, 1)&#039;,
                    backgroundColor: &#039;rgba(6, 8, 9, 0.2)&#039;,
                    data: initialSalesDataArray,
                    fill: &#039;origin&#039;
                }
            ]
        };

        // Chart configuration
        var config = {
            type: &#039;line&#039;,
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: &#039;top&#039;,
                    },
                    title: {
                        display: true,
                        text: &#039;Purchase Vs Sale Report&#039;
                    }
                },
                scales: {
                    x: {
                        type: &#039;category&#039;,
                        labels: labels
                    }
                },
                animation: {
                    duration: 2800, // 2 seconds
                    easing: &#039;easeInOutQuad&#039;
                }
            }
        };

        // Create the chart
        var ctx = document.getElementById(&#039;lineChart&#039;).getContext(&#039;2d&#039;);
        var myChart = new Chart(ctx, config);
    &lt;/script&gt;
  &lt;script&gt;
           // Retrieve PHP data
        var salesDataExpense = &lt;?php echo $sales_data_json_expense; ?&gt;;
        var purchasesDataExpense = &lt;?php echo $purchases_data_json_expense; ?&gt;;
        var expenseDataExpense = &lt;?php echo $expense_data_json_expense; ?&gt;;

        // Data for the doughnut chart
        var dataExpense = {
            labels: [&#039;Expense&#039;, &#039;purchase&#039;, &#039;Sale&#039;],
            datasets: [{
                data: [expenseDataExpense, purchasesDataExpense, salesDataExpense],
                backgroundColor: [
                    &#039;rgba(0, 182, 228, 0.8)&#039;,
                    &#039;rgba(6, 8, 9, 0.8)&#039;,
                    &#039;rgba(10, 75, 94, 0.8)&#039;
                ],
                hoverBackgroundColor: [
                    &#039;rgba(0, 182, 228, 1)&#039;,
                    &#039;rgba(6, 8, 9, 1)&#039;,
                    &#039;rgba(10, 75, 94, 1)&#039;
                ]
            }]
        };

        // Chart configuration
        var configExpense = {
            type: &#039;doughnut&#039;,
            data: dataExpense,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: &#039;top&#039;,
                    },
                    title: {
                        display: true,
                        text: &#039;Expense, Purchase, and Sale Report&#039;
                    }
                },
                animation: {
                    animateRotate: true,
                    animateScale: true,
                    duration: 2000, // 2 seconds
                    easing: &#039;easeInOutQuad&#039;
                }
            }
        };

        // Create the chart
        var ctxExpense = document.getElementById(&#039;donutChart&#039;).getContext(&#039;2d&#039;);
        var myChartExpense = new Chart(ctxExpense, configExpense);
 
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    var sidebar = document.getElementById(&quot;sidebar&quot;);
    var overlay = document.createElement(&quot;div&quot;);
    overlay.classList.add(&quot;overlay&quot;);
    document.body.appendChild(overlay);

    function toggleSidebar() {
        sidebar.classList.toggle(&quot;hide&quot;);
        overlay.classList.toggle(&quot;hide&quot;);

        var mainContent = document.querySelector(&quot;.main-content&quot;);
        if (sidebar.classList.contains(&quot;hide&quot;)) {
            mainContent.style.marginLeft = &quot;0&quot;;
        } else {
            mainContent.style.marginLeft = &quot;100px&quot;; // Width of the sidebar
        }
    }

    overlay.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Add toggle functionality to navbar toggler
    var navbarToggler = document.querySelector(&quot;.navbar-toggler&quot;);
    navbarToggler.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Automatically hide sidebar on all screen sizes
    // sidebar.classList.add(&quot;hide&quot;);
    // overlay.classList.add(&quot;hide&quot;);
    
    // Add class to body to prevent scrolling when sidebar is open
    // document.body.classList.add(&quot;noscroll&quot;);

    // Check if screen size is larger than a certain threshold (e.g., 768px for desktop screens)
    function checkScreenSize() {
        if (window.innerWidth &gt; 768) {
            sidebar.classList.remove(&quot;hide&quot;);
            overlay.classList.remove(&quot;hide&quot;);
        } else {
            sidebar.classList.add(&quot;hide&quot;);
            overlay.classList.add(&quot;hide&quot;);
        }
    }

    // Check screen size on initial load and whenever the window is resized
    checkScreenSize();
    window.addEventListener(&quot;resize&quot;, checkScreenSize);
});
    // Function to toggle submenu
    function toggleSubMenu(element) {
        $(element).next(&#039;.sub-menu&#039;).slideToggle();
    }
&lt;/script&gt;
&lt;!-- jQuery library --&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Popper JS --&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;

&lt;/html&gt;</code></pre>        </div>
    </div>