serve quality banking solution

Budget matrix form

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 
   <!-- bootsttrap icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
  <title>Document</title>

<!-- external css -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">




</head>
<body >
 

<div class="container-fluid ">

  <div class="card">

    <div class="card-header bg-transparent m-0 p-0 d-flex  justify-content-between">
      <img decoding="async"  class="img-fluid"  style="width: 5rem;" src="attachment/logo.png" alt>
     
  
      <div class=" d-flex align-items-center me-3">
        <h6>Personal Budget - 2023-24</h6>
       </div>
     <div class=" d-flex align-items-center me-3">
      <h6><a href="https://www.vbabundance.com">www.vbabundance.com</a></h6>
     </div> 
    </div>

   
  
   <div class="container">
    <div class="progress mt-2 " style="height: 20px;">
      <div class="progress-bar"  id="pb_bar" role="progressbar"  aria-valuemin="0" aria-valuemax="100"></div>
    </div>

   </div>
   


<div class="container-fluid" >
<form id="piform">
  <div class="card mt-3 " id="slide_1" >
    <div class="card-header">
      <div class="d-flex justify-content-center ">
          <h6>Personal Information</h6>
         
      </div>
    </div>


      <div class="card-body">
        <div class='input-group  mb-2'> 
          <label class='input-group-text mrequired' for='cus_name'><span>
          customer Name 
          </span>
          </label>
          <input id='cus_name' type='text' class='form-control input-group-lg' required >
          </div>

          <div class='input-group mb-2'> 
            <label class='input-group-text mrequired' for='phone'><span>
            Phone 
            </span>
            </label>
            <input id='phone' type='number' class='form-control'  required>
            </div>

            <div class='input-group mb-2'> 
              <label class='input-group-text' for='alternate_phone'><span>
              Alternate Phone 
              </span>
              </label>
              <input id='alternate_phone' type='number' class='form-control'  >
              </div>

              <div class='input-group mb-2'> 
                <label class='input-group-text' for='email'><span>
                Email 
                </span>
                </label>
                <input id='email' type='email' class='form-control'  >
                </div>
               
      </div>

      <div class="card-footer">
        <div class="d-flex justify-content-end mt-2">
          <button class='btn btn-primary' value="2" type="submit">Next</button>
         </div>
      </div>
 </div>
</form>

 <div class="card mt-3 " id="slide_2" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>INCOME(INFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table id="" class="table  table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-primary">INFLOW</th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          </tr>
        </thead>
        <tbody class="align-middle " id="income_table">
       

<tr>
 <td class='text-bg-primary'>
     Business/Salary
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
</tr>           


<tr>
 <td class='text-bg-primary'>
     Spouse Income
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
</tr>


<tr>
 <td class='text-bg-primary'>
     Dividends/Interest Income
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
     <td class='p-0 m-0'>
     <div class='input-group'>
     <input type='number'  class='form-control' >
     </div>
     </td>
 
</tr>

<tr>
<td class='text-bg-primary'>
 Agri Income
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
</tr>  


<tr>
<td class='text-bg-primary'>
 Refunds/Reimbursements
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>

</tr>  

<tr>
<td class='text-bg-primary'>
 Rental Income
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
</tr>  





<tr>
<td class='text-bg-primary'>
  variable income(Bonus/etc)
 </td>
 <td class='p-0 m-0'>
 <div class='input-group '>
 <input type='number'  class='form-control' >
 </div>
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
</tr>   


<tr>
<td class='text-bg-primary'>
 Other Income
 </td>
 <td class='p-0 m-0'>
 <div class='input-group '>
 <input type='number'  class='form-control' >
 </div>
 </td>
 <td class='p-0 m-0'>
 <div class='input-group'>
 <input type='number'  class='form-control' >
 </div>
 </td>
</tr>  



         
        </tbody>
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="1" type='button'>Prev</button>
        <button class='btn btn-primary' value="3" type='button'>Next</button>
       </div>
    </div>
</div>



<!-- <div class="card mt-3 " id="slide_3" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>INCOME(INFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
    
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="2" type='button'>Prev</button>
        <button class='btn btn-primary' value="4" type='button'>Next</button>
       </div>
    </div>
</div> -->



<div class="card mt-3 " id="slide_3" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">

      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="bg-warning">General Home		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="home_exp_table">
          <tr> 
            <td class='text-bg-warning'>
            Rent
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number' class='form-control' >
            </div>
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number' class='form-control' >
            </div>
            </td></tr>

            <tr> 
              <td class='text-bg-warning'>
              To Parents 
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number' class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number' class='form-control' >
              </div>
              </td></tr>

              <tr> 
                <td class='text-bg-warning'>
                Groceries 
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td></tr>

                <tr> 
                  <td class='text-bg-warning'>
                  Milk 
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number' class='form-control' >
                  </div>
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number' class='form-control' >
                  </div>
                  </td></tr>

                  <tr> 
                    <td class='text-bg-warning'>
                    Gas 
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number' class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number' class='form-control' >
                    </div>
                    </td></tr>

                    <tr> 
                      <td class='text-bg-warning'>
                      Fruits/Vegitables 
                      </td>
                      <td class='p-0 m-0'>
                      <div class='input-group'>
                      <input type='number' class='form-control' >
                      </div>
                      </td>
                      <td class='p-0 m-0'>
                      <div class='input-group'>
                      <input type='number' class='form-control' >
                      </div>
                      </td></tr>

                     

                        <tr> 
                          <td class='text-bg-warning'>
                          Water/Sewer/Trash 
                          </td>
                          <td class='p-0 m-0'>
                          <div class='input-group'>
                          <input type='number' class='form-control' >
                          </div>
                          </td>
                          <td class='p-0 m-0'>
                          <div class='input-group'>
                          <input type='number' class='form-control' >
                          </div>
                          </td></tr>

                          <tr> 
                            <td class='text-bg-warning'>
                            Tele Phone/Mobile 
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number' class='form-control' >
                            </div>
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number' class='form-control' >
                            </div>
                            </td></tr>

                            <tr> 
                              <td class='text-bg-warning'>
                              Cable TV 
                              </td>
                              <td class='p-0 m-0'>
                              <div class='input-group'>
                              <input type='number' class='form-control' >
                              </div>
                              </td>
                              <td class='p-0 m-0'>
                              <div class='input-group'>
                              <input type='number' class='form-control' >
                              </div>
                              </td></tr>

                              <tr> 
                                <td class='text-bg-warning'>
                                Internet/Wifi 
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number' class='form-control' >
                                </div>
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number' class='form-control' >
                                </div>
                                </td></tr>

                                <tr> 
                                  <td class='text-bg-warning'>
                                  News Paper/Magazine 
                                  </td>
                                  <td class='p-0 m-0'>
                                  <div class='input-group'>
                                  <input type='number' class='form-control' >
                                  </div>
                                  </td>
                                  <td class='p-0 m-0'>
                                  <div class='input-group'>
                                  <input type='number' class='form-control' >
                                  </div>
                                  </td></tr>

                                  <tr> 
                                    <td class='text-bg-warning'>
                                    Maintenance and Repairs 
                                    </td>
                                    <td class='p-0 m-0'>
                                    <div class='input-group'>
                                    <input type='number' class='form-control' >
                                    </div>
                                    </td>
                                    <td class='p-0 m-0'>
                                    <div class='input-group'>
                                    <input type='number' class='form-control' >
                                    </div>
                                    </td></tr>

                                    <tr> 
                                      <td class='text-bg-warning'>
                                      Maid/driver/helper 
                                      </td>
                                      <td class='p-0 m-0'>
                                      <div class='input-group'>
                                      <input type='number' class='form-control' >
                                      </div>
                                      </td>
                                      <td class='p-0 m-0'>
                                      <div class='input-group'>
                                      <input type='number' class='form-control' >
                                      </div>
                                      </td></tr>

                                      <tr> 
                                        <td class='text-bg-warning'>
                                        Laundry 
                                        </td>
                                        <td class='p-0 m-0'>
                                        <div class='input-group'>
                                        <input type='number' class='form-control' >
                                        </div>
                                        </td>
                                        <td class='p-0 m-0'>
                                        <div class='input-group'>
                                        <input type='number' class='form-control' >
                                        </div>
                                        </td></tr>

                                        <tr> 
                                          <td class='text-bg-warning'>
                                          Salon/Barber 
                                          </td>
                                          <td class='p-0 m-0'>
                                          <div class='input-group'>
                                          <input type='number' class='form-control' >
                                          </div>
                                          </td>
                                          <td class='p-0 m-0'>
                                          <div class='input-group'>
                                          <input type='number' class='form-control' >
                                          </div>
                                          </td></tr>

                                          <tr> 
                                            <td class='text-bg-warning'>
                                            Electricity 
                                            </td>
                                            <td class='p-0 m-0'>
                                            <div class='input-group'>
                                            <input type='number' class='form-control' >
                                            </div>
                                            </td>
                                            <td class='p-0 m-0'>
                                            <div class='input-group'>
                                            <input type='number' class='form-control' >
                                            </div>
                                            </td></tr>

                                            <tr> 
                                              <td class='text-bg-warning'>
                                              Petrol 
                                              </td>
                                              <td class='p-0 m-0'>
                                              <div class='input-group'>
                                              <input type='number' class='form-control' >
                                              </div>
                                              </td>
                                              <td class='p-0 m-0'>
                                              <div class='input-group'>
                                              <input type='number' class='form-control' >
                                              </div>
                                              </td></tr>   
                                              
                                              <tr> 
                                                <td class='text-bg-warning'>
                                                Travel and Transport 
                                                </td>
                                                <td class='p-0 m-0'>
                                                <div class='input-group'>
                                                <input type='number' class='form-control' >
                                                </div>
                                                </td>
                                                <td class='p-0 m-0'>
                                                <div class='input-group'>
                                                <input type='number' class='form-control' >
                                                </div>
                                                </td></tr>

                                                <tr> 
                                                  <td class='text-bg-warning'>
                                                  Pets 
                                                  </td>
                                                  <td class='p-0 m-0'>
                                                  <div class='input-group'>
                                                  <input type='number' class='form-control' >
                                                  </div>
                                                  </td>
                                                  <td class='p-0 m-0'>
                                                  <div class='input-group'>
                                                  <input type='number' class='form-control' >
                                                  </div>
                                                  </td></tr>

                                                  <tr> 
                                                    <td class='text-bg-warning'>
                                                    others 
                                                    </td>
                                                    <td class='p-0 m-0'>
                                                    <div class='input-group'>
                                                    <input type='number' class='form-control' >
                                                    </div>
                                                    </td>
                                                    <td class='p-0 m-0'>
                                                    <div class='input-group'>
                                                    <input type='number' class='form-control' >
                                                    </div>
                                                    </td></tr>

        </tbody>
        
      </table>


     

             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="2" type='button'>Prev</button>
        <button class='btn btn-primary' value="4" type='button'>Next</button>
       </div>
    </div>
</div>



<div class="card mt-3 " id="slide_4" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Childrens Expenses		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle "  id="child_exp_table">
            <tr> 
                <td class='text-bg-warning'>
                School Fees
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>
                <tr> 
                    <td class='text-bg-warning'>
                    Tution Fees
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td></tr>


                    <tr> 
                        <td class='text-bg-warning'>
                        Others(Sports/Extra curricular)
                       
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td></tr>    
        
        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="3" type='button'>Prev</button>
        <button class='btn btn-primary' value="5" type='button'>Next</button>
       </div>
    </div>
</div>


<div class="card mt-3 " id="slide_5" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Insurance		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="insurance_table" >
            <tr> 
                <td class='text-bg-warning'>
                Life
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>

                <tr> 
                    <td class='text-bg-warning'>
                    Health
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number' class='form-control' >
                    </div>
                    </td></tr>

                    <tr> 
                        <td class='text-bg-warning'>
                        Auto - Car/Two
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td></tr>


                        <tr> 
                            <td class='text-bg-warning'>
                            Others
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number' class='form-control' >
                            </div>
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number' class='form-control' >
                            </div>
                            </td></tr>            

        </tbody>
        
      </table> 
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="4" type='button'>Prev</button>
        <button class='btn btn-primary' value="6" type='button'>Next</button>
       </div>
    </div>
</div>

<div class="card mt-3 " id="slide_6" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Movies and Recreation		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="movies_exp_table" >
            <tr> 
                <td class='text-bg-warning'>
                Movies/Netflix
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td></tr>
                <tr> 
                    <td class='text-bg-warning'>
                    Concerts/Plays
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td></tr>

                    <tr> 
                        <td class='text-bg-warning'>
                        Sports/Club Membership
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td></tr>
                        
           
                            
                            <tr> 
                                <td class='text-bg-warning'>
                                Dining/Clothing
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number' class='form-control' >
                                </div>
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number'  class='form-control' >
                                </div>
                                </td></tr>
                                
                
                                    
                                    <tr> 
                                      <td class='text-bg-warning'>
                                      Others
                                      </td>
                                      <td class='p-0 m-0'>
                                      <div class='input-group'>
                                      <input type='number' class='form-control' >
                                      </div>
                                      </td>
                                      <td class='p-0 m-0'>
                                      <div class='input-group'>
                                      <input type='number'  class='form-control' >
                                      </div>
                                      </td></tr>

        </tbody>
        
      </table>

             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="5" type='button'>Prev</button>
        <button class='btn btn-primary' value="7" type='button'>Next</button>
       </div>
    </div>
</div>


<div class="card mt-3 " id="slide_7" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Health Expenses		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle "  id="health_exp_table">
          <tr> 
            <td class='text-bg-warning'>
            Gym
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number' class='form-control' >
            </div>
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number' class='form-control' >
            </div>
            </td></tr>

            <tr> 
              <td class='text-bg-warning'>
              Doctors
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td></tr>

              <tr> 
                <td class='text-bg-warning'>
                Medicine
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>
        
        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="6" type='button'>Prev</button>
        <button class='btn btn-primary' value="8" type='button'>Next</button>
       </div>
    </div>
</div>


<div class="card mt-3 " id="slide_8" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Festival Expenses		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="festival_exp_table">
          <tr> 
            <td class='text-bg-warning'>
            Diwali Pongal
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td></tr>
            <tr> 
              <td class='text-bg-warning'>
              Christmas
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td></tr>

              <tr> 
                <td class='text-bg-warning'>
                Ramzan
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td></tr>
                
                <tr> 
                  <td class='text-bg-warning'>
                  Others (Birthday)
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number'  class='form-control' >
                  </div>
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number'  class='form-control' >
                  </div>
                  </td></tr>       

        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="7" type='button'>Prev</button>
        <button class='btn btn-primary' value="9" type='button'>Next</button>
       </div>
    </div>
</div>


<div class="card mt-3 " id="slide_9" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
    
      <table id="" class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">Holiday Expenses		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="holiday_exp_table">
        
            <tr> 
              <td class='text-bg-warning'>
              Hotel & Airfare
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td></tr>

              <tr> 
                <td class='text-bg-warning'>
                Rental car & Site Seeing
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>

        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="8" type='button'>Prev</button>
        <button class='btn btn-primary' value="10" type='button'>Next</button>
       </div>
    </div>
</div>


<div class="card mt-3 " id="slide_10" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
  


      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">LOANS(EMI)</th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
            
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="loan_table" >
            <tr> 
                <td class='text-bg-warning'>
                Housing Loan
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>

                <tr> 
                    <td class='text-bg-warning'>
                    Car Loan
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td></tr>
                    
                    <tr> 
                        <td class='text-bg-warning'>
                        Personal Loan
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td>
                        <td class='p-0 m-0'>
                        <div class='input-group'>
                        <input type='number'  class='form-control' >
                        </div>
                        </td></tr>
                        
                        <tr> 
                            <td class='text-bg-warning'>
                            Education Loan
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number'  class='form-control' >
                            </div>
                            </td>
                            <td class='p-0 m-0'>
                            <div class='input-group'>
                            <input type='number'  class='form-control' >
                            </div>
                            </td></tr>
                            
                            

                            <tr> 
                                <td class='text-bg-warning'>
                                Credit card
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number'  class='form-control' >
                                </div>
                                </td>
                                <td class='p-0 m-0'>
                                <div class='input-group'>
                                <input type='number'  class='form-control' >
                                </div>
                                </td></tr>
                                
                                <tr> 
                                    <td class='text-bg-warning'>
                                    Chit
                                    </td>
                                    <td class='p-0 m-0'>
                                    <div class='input-group'>
                                    <input type='number'  class='form-control' >
                                    </div>
                                    </td>
                                    <td class='p-0 m-0'>
                                    <div class='input-group'>
                                    <input type='number'  class='form-control' >
                                    </div>
                                    </td></tr>

                                    <tr> 
                                        <td class='text-bg-warning'>
                                        Others
                                        </td>
                                        <td class='p-0 m-0'>
                                        <div class='input-group'>
                                        <input type='number' class='form-control' >
                                        </div>
                                        </td>
                                        <td class='p-0 m-0'>
                                        <div class='input-group'>
                                        <input type='number'  class='form-control' >
                                        </div>
                                        </td></tr>
        

        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="9" type='button'>Prev</button>
        <button class='btn btn-primary' value="11" type='button'>Next</button>
       </div>
    </div>
</div>

<div class="card mt-3 " id="slide_11" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
     
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-warning">TAX		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="tax_exp_table" >
            <tr> 
                <td class='text-bg-warning'>
               INCOME
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td></tr>
               
        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="10" type='button'>Prev</button>
        <button class='btn btn-primary' value="12" type='button'>Next</button>
       </div>
    </div>
</div>

<div class="card mt-3 " id="slide_12" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>EXPENSES(OUTFLOW)</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="bg-warning">Miscellaneous		
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody class="align-middle " id="misc_table">
          <tr> 
            <td class='text-bg-warning'>
            Family Function
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td></tr>
            <tr> 
              <td class='text-bg-warning'>
              Charity/Donation
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td></tr>


<tr> 
<td class='text-bg-warning'>
Others
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number' class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>
        </tbody>
        
      </table>

             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="11" type='button'>Prev</button>
        <button class='btn btn-primary' value="13" type='button'>Next</button>
       </div>
    </div>
</div>

<div class="card mt-3 " id="slide_13" >
  <div class="card-header">
    <div class="d-flex justify-content-center ">
      <h6>SAVINGS</h6>
       
    </div>
  </div>


    <div class="card-body m-0 p-0">
      <table  class="table   table-bordered border-dark border-opacity-50 text-center " >
        <thead >
          <tr>
          
            <th  colspan="8" scope="col" class="text-bg-success">Savings	
            </th>
          
          </tr>
    
          <tr>
          
            <th scope="col">Heads</th>
            <th scope="col">Monthly</th>
            <th scope="col">Yearly</th>
           
          
           
          
          </tr>
        </thead>
        <tbody id="savings_table" class="align-middle " >
          <tr> 
            <td class='text-bg-success'>
            Emergency in house
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td>
            <td class='p-0 m-0'>
            <div class='input-group'>
            <input type='number'  class='form-control' >
            </div>
            </td></tr>
            <tr> 
              <td class='text-bg-success'>
              Savings Acct Balance
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number' class='form-control' >
              </div>
              </td>
              <td class='p-0 m-0'>
              <div class='input-group'>
              <input type='number'  class='form-control' >
              </div>
              </td></tr>
              <tr> 
                <td class='text-bg-success'>
                Savings
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number' class='form-control' >
                </div>
                </td>
                <td class='p-0 m-0'>
                <div class='input-group'>
                <input type='number'  class='form-control' >
                </div>
                </td></tr>
                <tr> 
                  <td class='text-bg-success'>
                  Gold
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number'  class='form-control' >
                  </div>
                  </td>
                  <td class='p-0 m-0'>
                  <div class='input-group'>
                  <input type='number'  class='form-control' >
                  </div>
                  </td></tr>
                  <tr> 
                    <td class='text-bg-success'>
                    MF
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td>
                    <td class='p-0 m-0'>
                    <div class='input-group'>
                    <input type='number'  class='form-control' >
                    </div>
                    </td></tr>



<tr> 
<td class='text-bg-success'>
Shares and Investment
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>


<tr> 
<td class='text-bg-success'>
Real Estate
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>


<tr> 
  <td class='text-bg-success'>
  Retirement Plans
  </td>
  <td class='p-0 m-0'>
  <div class='input-group'>
  <input type='number'  class='form-control' >
  </div>
  </td>
  <td class='p-0 m-0'>
  <div class='input-group'>
  <input type='number'  class='form-control' >
  </div>
  </td></tr>




<tr> 
<td class='text-bg-success'>
post office_FD_RD
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>


<tr> 
<td class='text-bg-success'>
Other - Chit
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>

<tr> 
<td class='text-bg-success'>
Others
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td>
<td class='p-0 m-0'>
<div class='input-group'>
<input type='number'  class='form-control' >
</div>
</td></tr>


        </tbody>
        
      </table>
             
    </div>

    <div class="card-footer">
      <div class="d-flex justify-content-between mt-2">
        <button class='btn btn-primary' value="12" type='button'>Prev</button>
        <button class='btn btn-primary' id="pb_submit_btn"  type='button'>Submit</button>
       </div>
    </div>
</div>



  
</div>

<div class="card-footer d-flex  justify-content-between mt-3">
  <div class=" d-flex align-items-center me-3">
    <h6>9943018682</h6>
   </div>
 <div class=" d-flex align-items-center me-3">
  <h6> contact@vbabundance.com</h6>
 </div> 
</div>

</div>

</div>   


<!-- jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <!-- bootstrap include -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

<!-- font awesome -->
<script src="https://kit.fontawesome.com/86b62f3d3e.js" crossorigin="anonymous"></script>

<!-- Sweet alert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script src="js/printThis.js" type="module"></script>
<!-- external js -->
<script src="js/personal_budget_tool.js" type="module"></script>
<script src="js/menu.js" type="module"></script>
</body>
</html>
				
			
Document
Personal Budget - 2023-24
Personal Information
INCOME(INFLOW)
INFLOW
Heads Monthly Yearly
Business/Salary
Spouse Income
Dividends/Interest Income
Agri Income
Refunds/Reimbursements
Rental Income
variable income(Bonus/etc)
Other Income
EXPENSES(OUTFLOW)
General Home
Heads Monthly Yearly
Rent
To Parents
Groceries
Milk
Gas
Fruits/Vegitables
Water/Sewer/Trash
Tele Phone/Mobile
Cable TV
Internet/Wifi
News Paper/Magazine
Maintenance and Repairs
Maid/driver/helper
Laundry
Salon/Barber
Electricity
Petrol
Travel and Transport
Pets
others
EXPENSES(OUTFLOW)
Childrens Expenses
Heads Monthly Yearly
School Fees
Tution Fees
Others(Sports/Extra curricular)
EXPENSES(OUTFLOW)
Insurance
Heads Monthly Yearly
Life
Health
Auto - Car/Two
Others
EXPENSES(OUTFLOW)
Movies and Recreation
Heads Monthly Yearly
Movies/Netflix
Concerts/Plays
Sports/Club Membership
Dining/Clothing
Others
EXPENSES(OUTFLOW)
Health Expenses
Heads Monthly Yearly
Gym
Doctors
Medicine
EXPENSES(OUTFLOW)
Festival Expenses
Heads Monthly Yearly
Diwali Pongal
Christmas
Ramzan
Others (Birthday)
EXPENSES(OUTFLOW)
Holiday Expenses
Heads Monthly Yearly
Hotel & Airfare
Rental car & Site Seeing
EXPENSES(OUTFLOW)
LOANS(EMI)
Heads Monthly Yearly
Housing Loan
Car Loan
Personal Loan
Education Loan
Credit card
Chit
Others
EXPENSES(OUTFLOW)
TAX
Heads Monthly Yearly
INCOME
EXPENSES(OUTFLOW)
Miscellaneous
Heads Monthly Yearly
Family Function
Charity/Donation
Others
SAVINGS
Savings
Heads Monthly Yearly
Emergency in house
Savings Acct Balance
Savings
Gold
MF
Shares and Investment
Real Estate
Retirement Plans
post office_FD_RD
Other - Chit
Others
x

We are passionate about our work. Our designers stay ahead to provide engaging and user-friendly website designs to make your business stand out.

Our Services

Contact Us

+123 456 7890
fintok@gmail.com
27 Division St, New York, United States
Cart (0 items)
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
Click outside to hide the comparison bar
Compare