Merge pull request #3194 from richardlawley/update-billing-ui

Update Billing UI
2024-10-07 16:52:45 +00:00 · 2016-03-09 20:35:29 +00:00
parent aa0a59b526 972429838b
commit 3983705ba3
10 changed files with 590 additions and 684 deletions
--- a/html/includes/modal/new_bill.inc.php
+++ b/html/includes/modal/new_bill.inc.php
@@ -0,0 +1,67 @@
+<?php
+/*
+ * LibreNMS
+ *
+ * Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+if(is_admin() !== false) {
+    if (is_numeric($vars['port'])) {
+        $port = dbFetchRow('SELECT * FROM `ports` AS P, `devices` AS D WHERE `port_id` = ? AND D.device_id = P.device_id', array($vars['port']));
+    }
+?>
+
+ <div class="modal fade bs-example-modal-sm" id="create-bill" tabindex="-1" role="dialog" aria-labelledby="Create" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title" id="Create">Add Traffic Bill</h4>
+        </div>
+        <div class="modal-body">
+            <form method="post" role="form" action="bills/" class="form-horizontal alerts-form">
+                <input type="hidden" name="addbill" value="yes" />
+
+<?php
+    if (is_array($port)) {
+        $portalias = (empty($port['ifAlias']) ? '' : ' - '.$port['ifAlias'].'');
+?>
+    <div class="well">
+        <input type="hidden" name="port" value="<?php echo $port['port_id'] ?>" />
+        <p>
+            <?php echo generate_device_link($port) ?>
+            <i class="fa fa-random"></i>
+            <?php echo generate_port_link($port, $port['ifName'] . $portalias) ?>
+        </p>
+    </div>
+<?php
+        $bill_data['bill_name'] = $port['port_descr_descr'];
+        $bill_data['bill_ref'] = $port['port_descr_circuit'];
+        $bill_data['bill_notes'] = $port['port_descr_speed'];
+    }
+
+    $bill_data['bill_type'] = 'cdr';
+    $quota = array('select_gb' => ' selected');
+    $cdr = array('select_mbps' => ' selected');
+    include 'pages/bill/addoreditbill.inc.php';
+?>
+    <div class="form-group">
+      <div class="col-sm-offset-4 col-sm-4">
+        <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Add Bill</button>
+      </div>
+    </div>
+
+            </form>
+        </div>
+      </div>
+    </div>
+</div>
+
+<?php
+
+}
--- a/html/pages/bill.inc.php
+++ b/html/pages/bill.inc.php
@@ -61,90 +61,65 @@ if (bill_permitted($bill_id)) {
        array($bill_id)
    );
    
-    echo '<font face="Verdana, Arial, Sans-Serif"><h2>
-        Bill : '.$bill_data['bill_name'].'</h2>';
-
-    print_optionbar_start();
-
-    echo "<span style='font-weight: bold;'>Bill</span> &#187; ";
-
    if (!$vars['view']) {
        $vars['view'] = 'quick';
    }
    
-    if ($vars['view'] == 'quick') {
-        echo "<span class='pagemenu-selected'>";
+    function print_port_list() {
+        global $ports;
+?>      <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title">Billed Ports</h3>
+            </div>
+            <div class="list-group">
+            <?php
+            // Collected Earlier
+            foreach ($ports as $port) {
+                $portalias = (empty($port['ifAlias']) ? '' : ' - '.$port['ifAlias'].'');
+?>
+                <div class="list-group-item">
+                    <?php echo generate_port_link($port, $port['ifName'] . $portalias) ?> on <?php echo generate_device_link($port) ?>
+                </div>
+<?php       }
+            ?>        
+            </div>
+        </div>
+<?php    
+    }//end print_port_list
+    
+?>
+
+    <h2><?php   echo "Bill: ${bill_data['bill_name']}"; ?></h2>
+    
+<?php
+    print_optionbar_start();
+    echo "<strong>Bill</strong> &raquo; ";
+    $menu_options = array(
+        'quick' => 'Quick Graphs',
+        'accurate' => 'Accurate Graphs',
+        'transfer' => 'Transfer Graphs',
+        'history' => 'Historical Graphs'
+    );
+    if($_SESSION['userlevel'] >= '10') 
+    {
+        $menu_options['edit'] = 'Edit';
+        $menu_options['delete'] = 'Delete';
+        $menu_options['reset'] = 'Reset';
    }
-
-    echo '<a href="'.generate_url($vars, array('view' => 'quick')).'">Quick Graphs</a>';
-    if ($vars['view'] == 'quick') {
-        echo '</span>';
-    }
-
-    echo ' | ';
-
-    if ($vars['view'] == 'accurate') {
-        echo "<span class='pagemenu-selected'>";
-    }
-
-    echo '<a href="'.generate_url($vars, array('view' => 'accurate')).'">Accurate Graphs</a>';
-    if ($vars['view'] == 'accurate') {
-        echo '</span>';
-    }
-
-    echo ' | ';
-
-    if ($vars['view'] == 'transfer') {
-        echo "<span class='pagemenu-selected'>";
-    }
-
-    echo '<A href="'.generate_url($vars, array('view' => 'transfer')).'">Transfer Graphs</a>';
-    if ($vars['view'] == 'transfer') {
-        echo '</span>';
-    }
-
-    echo ' | ';
-
-    if ($vars['view'] == 'history') {
-        echo "<span class='pagemenu-selected'>";
-    }
-
-    echo '<A href="'.generate_url($vars, array('view' => 'history')).'">Historical Usage</a>';
-    if ($vars['view'] == 'history') {
-        echo '</span>';
-    }
-
-    if ($_SESSION['userlevel'] >= '10') {
-        echo ' | ';
-        if ($vars['view'] == 'edit') {
+    $sep = '';
+    foreach ($menu_options as $option => $text) {
+        echo $sep;
+        if ($vars['view'] == $option) {
            echo "<span class='pagemenu-selected'>";
        }

-        echo '<A href="'.generate_url($vars, array('view' => 'edit')).'">Edit</a>';
-        if ($vars['view'] == 'edit') {
+        echo generate_link($text, $vars, array('view' => $option));
+        if ($vars['view'] == $option) {
            echo '</span>';
        }

-        echo ' | ';
-        if ($vars['view'] == 'delete') {
-            echo "<span class='pagemenu-selected'>";
-        }
-
-        echo '<A href="'.generate_url($vars, array('view' => 'delete')).'">Delete</a>';
-        if ($vars['view'] == 'delete') {
-            echo '</span>';
-        }
-
-        echo ' | ';
-        if ($vars['view'] == 'reset') {
-            echo "<span class='pagemenu-selected'>";
-        }
-
-        echo '<A href="'.generate_url($vars, array('view' => 'reset')).'">Reset</a>';
-        if ($vars['view'] == 'reset') {
-            echo '</span>';
-        }
-    }//end if
+        $sep = ' | ';
+    }
    
    echo '<div style="font-weight: bold; float: right;"><a href="'.generate_url(array('page' => 'bills')).'/"><img align=absmiddle src="images/16/arrow_left.png"> Back to Bills</a></div>';

@@ -166,59 +141,71 @@ if (bill_permitted($bill_id)) {
        include 'pages/bill/transfer.inc.php';
    }
    else if ($vars['view'] == 'quick' || $vars['view'] == 'accurate') {
-        echo '<h3>Billed Ports</h3>';
+?>

-        // Collected Earlier
-        foreach ($ports as $port) {
-            echo generate_port_link($port).' on '.generate_device_link($port).'<br />';
-        }
+<?php   if ($bill_data['bill_type'] == 'quota') { ?>
+    <h3>Quota Bill</h3>
+<?php   }
+        else if ($bill_data['bill_type'] == 'cdr') {  ?>
+    <h3>
+        CDR / 95th Bill
+    </h3>
+<?php   } ?>
+<strong>Billing Period from <?php echo $fromtext ?> to <?php echo $totext ?></strong>
+<br /><br />

-        echo '<h3>Bill Summary</h3>';
-
-        if ($bill_data['bill_type'] == 'quota') {
+<div class="row">
+    <div class="col-lg-6 col-lg-push-6">
+        <?php print_port_list() ?>
+    </div>
+    <div class="col-lg-6 col-lg-pull-6">
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                Bill Summary
+            </h3>
+        </div>
+        <table class="table">
+        <tr>
+<?php   if ($bill_data['bill_type'] == 'quota') {
            // The Customer is billed based on a pre-paid quota with overage in xB
-            echo '<h4>Quota Bill</h4>';
-
            $percent    = round((($total_data) / $bill_data['bill_quota'] * 100), 2);
            $unit       = 'MB';
            $total_data = round($total_data, 2);
-            echo 'Billing Period from '.$fromtext.' to '.$totext;
-            echo '<br />Transferred '.format_bytes_billing($total_data).' of '.format_bytes_billing($bill_data['bill_quota']).' ('.$percent.'%)';
-            echo '<br />Average rate '.formatRates($rate_average);
-
            $background = get_percentage_colours($percent);
-
-            echo '<p>'.print_percentage_bar(350, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right']).'</p>';
-
            $type = '&amp;ave=yes';
+?>
+        <td>
+            <?php echo format_bytes_billing($total_data) ?> of <?php echo format_bytes_billing($bill_data['bill_quota']).' ('.$percent.'%)' ?>
+            - Average rate <?php echo formatRates($rate_average) ?>
+        </td>
+        <td style="width: 210px;"><?php echo print_percentage_bar(200, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right']) ?></td>
+<?php
        }
        else if ($bill_data['bill_type'] == 'cdr') {
            // The customer is billed based on a CDR with 95th%ile overage
-            echo '<h4>CDR / 95th Bill</h4>';
-
            $unit      = 'kbps';
            $cdr       = $bill_data['bill_cdr'];
            $rate_95th = round($rate_95th, 2);
-
            $percent = round((($rate_95th) / $cdr * 100), 2);
-
            $type = '&amp;95th=yes';
+?>
+        <td>
+            <?php echo format_si($rate_95th) ?> of <?php echo format_si($cdr).'bps ('.$percent.'%)' ?> (95th%ile)
+        </td>
+        <td style="width: 210px;">
+            <?php echo print_percentage_bar(200, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right']) ?>
+        </td>

-            echo '<strong>'.$fromtext.' to '.$totext.'</strong>
-                <br />Measured '.format_si($rate_95th).'bps of '.format_si($cdr).'bps ('.$percent.'%) @ 95th %ile';
+<?php   }//end if
+?>
+        </tr>
+        </table>
+    </div>
+    </div>
+    </div>

-            $background = get_percentage_colours($percent);
-
-            echo '<p>'.print_percentage_bar(350, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right']).'</p>';
-
-            // echo("<p>Billing Period : " . $fromtext . " to " . $totext . "<br />
-            // " . $paidrate_text . " <br />
-            // " . $total_data . "MB transfered in the current billing cycle. <br />
-            // " . $rate_average . "Kbps Average during the current billing cycle. </p>
-            // <font face=\"Trebuchet MS, Verdana, Arial, Sans-Serif\" color=" . $bill_color . "><B>" . $rate_95th . "Kbps @ 95th Percentile.</b> (" . $dir_95th . ") (" . $bill_text . ")</font>
-            // </td><td><img src=\"images/billing-key.png\"></td></tr></table>
-            // <br />");
-        }//end if
+<?php

        $lastmonth = dbFetchCell('SELECT UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 MONTH))');
        $yesterday = dbFetchCell('SELECT UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 DAY))');
@@ -227,25 +214,21 @@ if (bill_permitted($bill_id)) {
        if ($vars['view'] == 'accurate') {
            $bi  = "<img src='billing-graph.php?bill_id=".$bill_id.'&amp;bill_code='.$_GET['bill_code'];
            $bi .= '&amp;from='.$unixfrom.'&amp;to='.$unixto;
-            // $bi .= "&amp;x=800&amp;y=250";
            $bi .= '&amp;x=1190&amp;y=250';
            $bi .= "$type'>";

            $li  = "<img src='billing-graph.php?bill_id=".$bill_id.'&amp;bill_code='.$_GET['bill_code'];
            $li .= '&amp;from='.$unix_prev_from.'&amp;to='.$unix_prev_to;
-            // $li .= "&amp;x=800&amp;y=250";
            $li .= '&amp;x=1190&amp;y=250';
            $li .= "$type'>";

            $di  = "<img src='billing-graph.php?bill_id=".$bill_id.'&amp;bill_code='.$_GET['bill_code'];
            $di .= '&amp;from='.$config['time']['day'].'&amp;to='.$config['time']['now'];
-            // $di .= "&amp;x=800&amp;y=250";
            $di .= '&amp;x=1190&amp;y=250';
            $di .= "$type'>";

            $mi  = "<img src='billing-graph.php?bill_id=".$bill_id.'&amp;bill_code='.$_GET['bill_code'];
            $mi .= '&amp;from='.$lastmonth.'&amp;to='.$rightnow;
-            // $mi .= "&amp;x=800&amp;y=250";
            $mi .= '&amp;x=1190&amp;y=250';
            $mi .= "$type'>";
        }
@@ -267,52 +250,31 @@ if (bill_permitted($bill_id)) {
            $mi .= "&amp;width=1000&amp;height=200&amp;total=1'>";
        }//end if

-        if ($null) {
-            echo "
-                <script type='text/javascript' src='js/calendarDateInput.js'>
-  </script>
+?>
+    <div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Billing View</h3>
+    </div>
+    <?php echo $bi ?>
+    </div>
    
-  <FORM action='/' method='get'>
-    <INPUT type='hidden' name='bill' value='".$_GET['bill']."'>
-    <INPUT type='hidden' name='code' value='".$_GET['code']."'>
-    <INPUT type='hidden' name='page' value='bills'>
-    <INPUT type='hidden' name='custom' value='yes'>
+    <div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">24 Hour View</h3>
+    </div>
+    <?php echo $di ?>
+    </div>

-    From:
-    <script>DateInput('fromdate', true, 'YYYYMMDD')</script>
-
-    To:
-    <script>DateInput('todate', true, 'YYYYMMDD')</script>
-    <INPUT type='submit' value='Generate Graph'>
-
-  </FORM>
-
-  ";
-        }//end if
-
-        if ($_GET['all']) {
-            $ai  = '<img src="billing-graph.php?bill_id='.$bill_id.'&amp;bill_code='.$_GET['bill_code'];
-            $ai .= '&amp;from=0&amp;to='.$rightnow;
-            $ai .= '&amp;x=715&amp;y=250';
-            $ai .= '&amp;count=60">';
-            echo "<h3>Entire Data View</h3>$ai";
-        }
-        else if ($_GET['custom']) {
-            $cg  = '<img src="billing-graph.php?bill_id='.$bill_id.'&amp;bill_code='.$_GET['bill_code'];
-            $cg .= '&amp;from='.$_GET['fromdate'].'000000&amp;to='.$_GET['todate'].'235959';
-            $cg .= '&amp;x=715&amp;y=250';
-            $cg .= '&amp;count=60">';
-            echo "<h3>Custom Graph</h3>$cg";
-        }
-        else {
-            echo "<h3>Billing View</h3>$bi";
-            // echo("<h3>Previous Bill View</h3>$li");
-            echo "<h3>24 Hour View</h3>$di";
-            echo "<h3>Monthly View</h3>$mi";
-            // echo("<br /><a href=\"rate.php?" . $_SERVER['QUERY_STRING'] . "&amp;all=yes\">Graph All Data (SLOW)</a>");
-        }//end if
+    <div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Monthly View</h3>
+    </div>
+    <?php echo $mi ?>
+    </div>    
+<?php
    } //end if
 }
 else {
    include 'includes/error-no-perm.inc.php';
 }//end if
+?>
--- a/html/pages/bill/addoreditbill.inc.php
+++ b/html/pages/bill/addoreditbill.inc.php
@@ -0,0 +1,89 @@
+<div class="form-group">
+  <label for="bill_name" class="col-sm-4 control-label">Description</label>
+  <div class="col-sm-8">
+    <input class="form-control input-sm" type="text" id="bill_name" name="bill_name" value="<?php echo $bill_data['bill_name']; ?>">
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-4 control-label" for="bill_type">Billing Type</label>
+  <div class="col-sm-8">
+    <label class="radio-inline">
+      <input type="radio" name="bill_type" id="bill_type_cdr" value="cdr" <?php if ($bill_data['bill_type'] == 'cdr') { echo "checked"; } ?> onchange="javascript: billType();" /> CDR 95th
+    </label>
+    <label class="radio-inline">
+      <input type="radio" name="bill_type" id="bill_type_quota" value="quota" <?php if ($bill_data['bill_type'] == 'quota') { echo "checked"; } ?> onchange="javascript: billType();" /> Quota
+    </label>
+  </div>
+</div>
+<div class="form-group">
+  <div id="cdrDiv">
+    <label class="col-sm-4 control-label" for="bill_cdr">CDR</label>
+    <div class="col-sm-3">
+      <input class="form-control input-sm" type="text" name="bill_cdr" value="<?php echo $cdr['data'] ?>">
+    </div>
+    <div class="col-sm-5">
+      <select name="bill_cdr_type" class="form-control input-sm">
+        <option <?php echo $cdr['select_kbps'] ?> value="Kbps">Kilobits per second (Kbps)</option>
+        <option <?php echo $cdr['select_mbps'] ?> value="Mbps">Megabits per second (Mbps)</option>
+        <option <?php echo $cdr['select_gbps'] ?> value="Gbps">Gigabits per second (Gbps)</option>
+      </select>
+    </div>
+  </div>
+  <div id="quotaDiv">
+    <label class="col-sm-4 control-label" for="bill_quota">Quota</label>
+    <div class="col-sm-3">
+      <input class="form-control input-sm" type="text" name="bill_quota" value="<?php echo $quota['data'] ?>">
+    </div>
+    <div class="col-sm-5">
+      <select name="bill_quota_type" class="form-control input-sm">
+        <option <?php echo $quota['select_mb'] ?> value="MB">Megabytes (MB)</option>
+        <option <?php echo $quota['select_gb'] ?> value="GB">Gigabytes (GB)</option>
+        <option <?php echo $quota['select_tb'] ?> value="TB">Terabytes (TB)</option>
+      </select>
+    </div>
+  </div>
+</div>
+<div class="form-group">
+  <label class="col-sm-4 control-label" for="bill_day">Billing Day</label>
+  <div class="col-sm-2">
+    <select name="bill_day" class="form-control input-sm">
+    <?php
+        for ($x = 1; $x < 32; $x++) {
+            $sel = $bill_data['bill_day'] == $x ? "selected " : "";
+            echo "<option $sel value='$x'>$x</option>\n";
+        }
+    ?>
+    </select>
+  </div>
+</div>
+<fieldset>
+    <h4>Optional Information</h4>
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="bill_custid">Customer Reference</label>
+      <div class="col-sm-8">
+        <input class="form-control input-sm" type="text" name="bill_custid" value="<?php echo $bill_data['bill_custid'] ?>">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="bill_ref">Billing Reference</label>
+      <div class="col-sm-8">
+        <input class="form-control input-sm" type="text" name="bill_ref" value="<?php echo $bill_data['bill_ref']; ?>">
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-4 control-label" for="bill_notes">Notes</label>
+      <div class="col-sm-8">
+        <input class="form-control input-sm" type="textarea" name="bill_notes" value="<?php echo $bill_data['bill_notes']; ?>">
+      </div>
+    </div>
+</fieldset>
+
+<script type="text/javascript">
+function billType() {
+    var selected = $('input[name=bill_type]:checked').val();
+    
+    $('#cdrDiv').toggle(selected === 'cdr');
+    $('#quotaDiv').toggle(selected === 'quota');
+}
+billType();
+</script>
--- a/html/pages/bill/delete.inc.php
+++ b/html/pages/bill/delete.inc.php
@@ -10,8 +10,12 @@
    }
  </script>
  <input type="hidden" name="action" value="delete_bill">
-  <h3>Delete Bill</h3>
-  <hr>
+  
+  <div class="row">
+    <div class="col-md-8 col-md-push-2">
+       <div class="alert alert-danger alert-block">
+  
+  <h4>Delete Bill</h4>
  <div class="control-group">
    <label class="control-label" for="confirm"><strong>Confirm</strong></label>
    <div class="controls">
@@ -31,4 +35,8 @@
  <div class="form-actions">
    <button id="deleteBtn" type="submit" class="btn btn-danger" disabled="disabled"><i class="fa fa-trash"></i> <strong>Delete Bill</strong></button>
  </div>
+         </div>
+    </div>
+  </div>
+
 </form>
--- a/html/pages/bill/edit.inc.php
+++ b/html/pages/bill/edit.inc.php
@@ -60,240 +60,121 @@
          );
      }
  }//end if
-  
  ?>
-<form id="edit" name="edit" method="post" action="" class="form-horizontal" role="form">
-  <input type=hidden name="action" value="update_bill">
-  <script type="text/javascript">
-    function billType() {
-        $('#cdrDiv').toggle();
-        $('#quotaDiv').toggle();
-    }
-  </script>
-  <h3>Bill Properties</h3>
-  <hr>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="bill_name">
-        <h5><strong>Description</strong></h5>
-      </label>
-      <input class="form-control input-sm" name="bill_name" value="<?php echo $bill_data['bill_name']; ?>" />
+<div class="row">
+<div class="col-lg-6 col-md-12">
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Bill Properties</h3>
+        </div>
+        <div class="panel-body">
+            <form id="edit" name="edit" method="post" action="" class="form-horizontal" role="form">
+              <input type=hidden name="action" value="update_bill">
+              <script type="text/javascript">
+                function billType() {
+                    $('#cdrDiv').toggle();
+                    $('#quotaDiv').toggle();
+                }
+              </script>
+              <?php   include 'pages/bill/addoreditbill.inc.php'; ?>
+                <div class="form-group">
+                  <div class="col-sm-offset-4 col-sm-4">
+                    <button type="submit" class="btn btn-primary" name="Submit" value="Save" /><i class="fa fa-check"></i> Save Properties</button>
+                  </div>
+                </div>
+            </form>
+        </div>
    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="bill_type">
-        <h5><strong>Billing Type</strong></h5>
-      </label>
-      <br>
-      <div class="radio">
-        <label>
-        <input type="radio" name="bill_type" value="cdr" onchange="javascript: billType();"
+</div>
+<div class="col-lg-6 col-md-12">
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">Billed Ports</h3>
+        </div>
+        <div class="panel-body">
+        <div class="form-group">
          <?php
-            if ($bill_data['bill_type'] == 'cdr') {
-                echo 'checked ';
-            };
-            ?>
-          /> CDR 95th
-        </label>
-      </div>
-      <div class="radio">
-        <label>
-        <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();"
-          <?php
-            if ($bill_data['bill_type'] == 'quota') {
-                echo 'checked ';
-            };
-            ?>
-          /> Quota
-        </label>
-      </div>
-    </div>
-  </div>
-  <div id="cdrDiv"
-    <?php
-      if ($bill_data['bill_type'] == 'quota') {
-          echo ' style="display: none"';
-      };
-      ?>
-    >
-    <div class="form-group">
-      <div class="col-sm-2">
-        <input class="form-control input-sm" type="text" name="bill_cdr" value="<?php echo $cdr['data']; ?>">
-      </div>
-      <div class="col-sm-3">
-        <select name="bill_cdr_type" class="form-control input-sm">
-          <option value="Kbps"<?php echo $cdr['select_kbps']; ?>>Kilobits per second (Kbps)</option>
-          <option value="Mbps"<?php echo $cdr['select_mbps']; ?>>Megabits per second (Mbps)</option>
-          <option value="Gbps"<?php echo $cdr['select_gbps']; ?>>Gigabits per second (Gbps)</option>
-        </select>
-      </div>
-      <div class="col-sm-5">
-      </div>
-    </div>
-  </div>
-  <div id="quotaDiv"
-    <?php
-      if ($bill_data['bill_type'] == 'cdr') {
-          echo ' style="display: none"';
-      };
-      ?>
-    >
-    <div class="form-group">
-      <div class="col-sm-2">
-        <input class="form-control input-sm" type="text" name="bill_quota" value="<?php echo $quota['data']; ?>">
-      </div>
-      <div class="col-sm-2">
-        <select name="bill_quota_type" class="form-control input-sm">
-          <option value="MB"<?php echo $quota['select_mb']; ?>>Megabytes (MB)</option>
-          <option value="GB"<?php echo $quota['select_gb']; ?>>Gigabytes (GB)</option>
-          <option value="TB"<?php echo $quota['select_tb']; ?>>Terabytes (TB)</option>
-        </select>
-      </div>
-      <div class="col-sm-6">
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-2">
-      <label class="control-label" for="bill_day">
-        <h5><strong>Billing Day</strong></h5>
-      </label>
-      <select name="bill_day" class="form-control input">
-      <?php
-        for ($x = 1; $x < 32; $x++) {
-            $select = (($bill_data['bill_day'] == $x) ? ' selected' : '');
-            echo '          <option value="'.$x.'"'.$select.'>'.$x."</option>\n";
-        }
+            //This needs a proper cleanup
+            $ports = dbFetchRows(
+                'SELECT * FROM `bill_ports` AS B, `ports` AS P, `devices` AS D
+                WHERE B.bill_id = ? AND P.port_id = B.port_id
+                AND D.device_id = P.device_id ORDER BY D.device_id',
+                array($bill_data['bill_id'])
+            );
+            
+            if (is_array($ports)) {
+        ?>
+            <div class="list-group">
+        <?php   foreach ($ports as $port) { 
+                    $emptyCheck = true;
+                    $portalias  = (empty($port['ifAlias']) ? '' : ' - '.$port['ifAlias'].'');

        ?>
-      </select>
-    </div>
-  </div>
-  <br>
-  <h3>Optional Information</h3>
-  <hr>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="bill_custid">
-        <h5><strong>Customer&nbsp;Reference</strong></h5>
-      </label>
-      <input class="form-control input-sm" type="text" name="bill_custid" value="<?php echo $bill_data['bill_custid']; ?>" />
-    </div>
-    <div class="col-sm-6">
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="bill_ref">
-        <h5><strong>Billing Reference</strong></h5>
-      </label>
-      <input class="form-control input-sm" type="text" name="bill_ref" value="<?php echo $bill_data['bill_ref']; ?>" />
-    </div>
-    <div class="col-sm-6">
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="bill_notes">
-        <h5><strong>Notes</strong></h5>
-      </label>
-      <textarea rows="3" class="form-control input-sm" name="bill_notes" value="<?php echo $bill_data['bill_notes']; ?>"></textarea>
-    </div>
-  </div>
-  <button type="submit" class="btn btn-success" name="Submit" value="Save" /><i class="fa fa-check"></i> <strong>Save Properties</strong></button>
-</form>
-<br>
-<h3>Billed Ports</h3>
-<hr>
-<div class="form-group">
-  <?php
-    //This needs a proper cleanup
-    $ports = dbFetchRows(
-        'SELECT * FROM `bill_ports` AS B, `ports` AS P, `devices` AS D
-        WHERE B.bill_id = ? AND P.port_id = B.port_id
-        AND D.device_id = P.device_id ORDER BY D.device_id',
-        array($bill_data['bill_id'])
-    );
+                <div class="list-group-item">
+                    <form action="" class="form-inline" method="post" name="delete<?php echo $port['port_id'] ?>" style="display: none;">
+                        <input type="hidden" name="action" value="delete_bill_port" />
+                        <input type="hidden" name="port_id" value="<?php echo $port['port_id'] ?>" />
+                    </form>
                    
-    if (is_array($ports)) {
-        foreach ($ports as $port) {
-            $emptyCheck = true;
-            $devicebtn  = str_replace('list-device', 'btn', generate_device_link($port));
-            $devicebtn  = str_replace("overlib('", "overlib('<div style=\'border: 5px solid #e5e5e5; background: #fff; padding: 10px;\'>", $devicebtn);
-            $devicebtn  = str_replace("<div>',;", "</div></div>',", $devicebtn);
-            $portbtn    = str_replace('interface-upup', 'btn', generate_port_link($port));
-            $portbtn    = str_replace('interface-updown', 'btn btn-warning', $portbtn);
-            $portbtn    = str_replace('interface-downdown', 'btn btn-warning', $portbtn);
-            $portbtn    = str_replace('interface-admindown', 'btn btn-warning disabled', $portbtn);
-            $portbtn    = str_replace("overlib('", "overlib('<div style=\'border: 5px solid #e5e5e5; background: #fff; padding: 10px;\'>", $portbtn);
-            $portbtn    = str_replace("<div>',;", "</div></div>',", $portbtn);
-            $portalias  = (empty($port['ifAlias']) ? '' : ' - '.$port['ifAlias'].'');
-            $devicebtn  = str_replace('">'.$port['hostname'], '" style="color: #000;"><i class="fa fa-asterisk"></i> '.$port['hostname'], $devicebtn);
-            $portbtn    = str_replace('">'.strtolower($port['ifName']), '" style="color: #000;"><i class="fa fa-random"></i> '.$port['ifName'].''.$portalias, $portbtn);
-            echo '      <form action="" class="form-inline" method="post" name="delete'.$port['port_id']."\" style=\"display: none;\">\n";
-            echo "        <input type=\"hidden\" name=\"action\" value=\"delete_bill_port\" />\n";
-            echo '        <input type="hidden" name="port_id" value="'.$port['port_id']."\" />\n";
-            echo "      </form>\n";
-            echo "      <div class=\"btn-toolbar\">\n";
-            echo "        <div class=\"btn-group\" style=\"width: 600px;\">\n";
-            echo '          '.$devicebtn."\n";
-            echo '          '.$portbtn."\n";
-            echo "        </div>\n";
-            echo "        <div class=\"btn-group\">\n";
-            echo '          <a class="btn btn-danger btn-mini" href="javascript:;" onclick="document.forms[\'delete'.$port['port_id']."'].submit();\" style=\"color: #fff;\"><i class=\"fa fa-minus\"></i> <strong>Remove Interface</strong></a>\n";
-            echo "        </div>\n";
-            echo "      </div>\n";
-        }
+                    <button class="btn btn-danger btn-xs pull-right" onclick="if (confirm('Are you sure you wish to remove this port?')) { document.forms['delete<?php echo $port['port_id'] ?>'].submit(); }">
+                        <i class="fa fa-minus"></i>
+                        Remove Interface
+                    </button>
+                    <?php echo generate_device_link($port); ?>
+                    <i class="fa fa-random"></i>
+                    <?php echo generate_port_link($port, $port['ifName'] . '' . $portalias); ?>
+                </div>
+        <?php   }  
+                if (!$emptyCheck) { ?>
+                <div class="alert alert-info">There are no ports assigned to this bill</alert>
+        <?php   } ?>
+            
+            </div>
                
-        if (!$emptyCheck) {
-            echo "      <div class=\"alert alert-info\">\n";
-            echo "        <i class=\"fa fa-info\"></i> <strong>There are no ports assigned to this bill</strong>\n";
-            echo "      </div>\n";
-        }
-    }
-    ?>
-</div>
-</fieldset>
-<form action="" method="post" class="form-horizontal" role="form">
-  <input type="hidden" name="action" value="add_bill_port" />
-  <input type="hidden" name="bill_id" value="<?php echo $bill_id; ?>" />
-  <br>
-  <h3>Add Port</h3>
-  <hr>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="device">
-        <h5><strong>Device</strong></h5>
-      </label>
-      <select class="form-control input-sm" id="device" name="device" onchange="getInterfaceList(this)">
-        <option value=''>Select a device</option>
        <?php         
-          $devices = dbFetchRows('SELECT * FROM `devices` ORDER BY hostname');
-          foreach ($devices as $device) {
-              unset($done);
-              foreach ($access_list as $ac) {
-                  if ($ac == $device['device_id']) {
-                      $done = 1;
-                  }
-              }
+            }
+        ?>
+        </div>

-              if (!$done) {
-                  echo "          <option value='".$device['device_id']."'>".$device['hostname']."</option>\n";
-              }
-          }
+        <h4>Add Port</h4>
        
-          ?>
-      </select>
+        <form action="" method="post" class="form-horizontal" role="form">
+            <input type="hidden" name="action" value="add_bill_port" />
+            <input type="hidden" name="bill_id" value="<?php echo $bill_id; ?>" />
+            
+            <div class="form-group">
+                <label class="col-sm-2 control-label" for="device">Device</label>
+                <div class="col-sm-8">
+                    <select class="form-control input-sm" id="device" name="device" onchange="getInterfaceList(this)">
+                        <option value=''>Select a device</option>
+                        <?php
+                          $devices = dbFetchRows('SELECT * FROM `devices` ORDER BY hostname');
+                          foreach ($devices as $device) {
+                              unset($done);
+                              foreach ($access_list as $ac) {
+                                  if ($ac == $device['device_id']) {
+                                      $done = 1;
+                                  }
+                              }
+                          
+                              if (!$done) {
+                                  echo "          <option value='".$device['device_id']."'>".$device['hostname']."</option>\n";
+                              }
+                          }
+                          
+                          ?>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="col-sm-2 control-label" for="port_id">Port</label>
+                <div class="col-sm-8">
+                    <select class="form-control input-sm" id="port_id" name="port_id"></select>
+                </div>
+            </div>
+            <div class="col-sm-2 col-sm-offset-2">
+                <button type="submit" class="btn btn-primary" name="Submit" value=" Add " /><i class="fa fa-plus"></i> Add Port</button>
+            </div>
+        </form>
    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-sm-4">
-      <label class="control-label" for="port_id">
-        <h5><strong>Port</strong></h5>
-      </label>
-      <select class="form-control input-sm" id="port_id" name="port_id"></select>
-    </div>
-  </div>
-  <button type="submit" class="btn btn-primary" name="Submit" value=" Add " /><i class="fa fa-plus"></i> <strong>Add Port</strong></button>
-</form>
+</div>
--- a/html/pages/bill/history.inc.php
+++ b/html/pages/bill/history.inc.php
@@ -9,9 +9,18 @@ $img['his']  = '<img src="bandwidth-graph.php?bill_id='.$bill_id;
 $img['his'] .= '&amp;type=historical';
 $img['his'] .= '&amp;x=1190&amp;y=250';
 $img['his'] .= '" style="margin: 15px 5px 25px 5px;" />';
+?>

-echo $img['his'];
+<h3>Historical Usage</h3>

+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Monthly Usage</h3>
+    </div>
+    <?php echo $img['his'] ?>
+</div>
+
+<?php 

 function showDetails($bill_id, $imgtype, $from, $to, $bittype='Quota') {
    if ($imgtype == 'bitrate') {
@@ -40,21 +49,24 @@ function showDetails($bill_id, $imgtype, $from, $to, $bittype='Quota') {
 // $url        = generate_url($vars, array('detail' => 'yes'));
 $url = $PHP_SELF.'/bill/'.$bill_id.'/history/detail=all/';

-echo '<table class="table">
+echo '<table class="table table-striped">
+    <thead>
    <tr style="font-weight: bold; ">
-        <td width="7"></td>
-        <td width="250">Period</td>
-        <td>Type</td>
-        <td>Allowed</td>
-        <td>Inbound</td>
-        <td>Outbound</td>
-        <td>Total</td>
-        <td>95th %ile</td>
-        <td style="text-align: center;">Overusage</td>
-        <td colspan="2" style="text-align: right;"><a href="'.generate_url($vars, array('detail' => 'all')).'">
+        <th width="7"></th>
+        <th width="250">Period</th>
+        <th>Type</th>
+        <th>Allowed</th>
+        <th>Inbound</th>
+        <th>Outbound</th>
+        <th>Total</th>
+        <th>95th %ile</th>
+        <th style="text-align: center;">Overusage</th>
+        <th colspan="2" style="text-align: right;"><a href="'.generate_url($vars, array('detail' => 'all')).'">
            <img src="images/16/chart_curve.png" border="0" align="absmiddle" alt="Show details" title="Show details" /> Show all details</a>
-        </td>
-    </tr>';
+        </th>
+    </tr>
+    </thead>
+    <tbody>';

 foreach (dbFetchRows('SELECT * FROM `bill_history` WHERE `bill_id` = ? ORDER BY `bill_datefrom` DESC LIMIT 24', array($bill_id)) as $history) {
    if (bill_permitted($history['bill_id'])) {
@@ -68,7 +80,6 @@ foreach (dbFetchRows('SELECT * FROM `bill_history` WHERE `bill_id` = ? ORDER BY
        $total_data = format_number($history['traf_total'], $config['billing']['base']);

        $background = get_percentage_colours($percent);
-        $row_colour = ((!is_integer($i / 2)) ? $list_colour_a : $list_colour_b);

        if ($type == 'CDR') {
            $allowed = formatRates($history['bill_allowed']);
@@ -91,7 +102,7 @@ foreach (dbFetchRows('SELECT * FROM `bill_history` WHERE `bill_id` = ? ORDER BY
        $url = generate_url($vars, array('detail' => $history['bill_hist_id']));

        echo '
-            <tr style="background: '.$row_colour.';">
+            <tr>
                <td></td>
                <td><span style="font-weight: bold;" class="interface">'.strftime('%Y-%m-%d', strtotime($datefrom)).' to '.strftime('%Y-%m-%d', strtotime($dateto))."</span></td>
                <td>$type</td>
@@ -123,9 +134,8 @@ foreach (dbFetchRows('SELECT * FROM `bill_history` WHERE `bill_id` = ? ORDER BY
                    </td>
                </tr>';
        }
-
-        $i++;
    } //end if
 }//end foreach

-echo '</table>';
+echo '</tbody>
+</table>';
--- a/html/pages/bill/reset.inc.php
+++ b/html/pages/bill/reset.inc.php
@@ -12,8 +12,10 @@
    }
  </script>
  <input type="hidden" name="action" value="reset_bill">
-  <h3>Reset Bill</h3>
-  <hr>
+  <div class="row">
+  <div class="col-md-8 col-md-push-2">
+  <div class="alert alert-danger alert-block">
+  <h4>Reset Bill</h4>
  <div class="control-group">
    <label class="control-label" for="confirm"><strong>Confirm</strong></label>
    <div class="controls">
@@ -39,4 +41,7 @@
  <div class="form-actions">
    <button id="resetBtn" type="submit" class="btn btn-danger" disabled="disabled"><i class="fa fa-refresh"></i> <strong>Reset Bill</strong></button>
  </div>
+  </div>
+  </div>
+  </div>
 </form>
--- a/html/pages/bill/transfer.inc.php
+++ b/html/pages/bill/transfer.inc.php
@@ -30,12 +30,6 @@ $lastmonth      = dbFetchCell('SELECT UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1
 $yesterday      = dbFetchCell('SELECT UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 DAY))');
 $rightnow       = date(U);

-echo '<h3>Billed Ports</h3>';
-
-foreach ($ports as $port) {
-    echo generate_port_link($port).' on '.generate_device_link($port).'<br />';
-}
-
 $cur_days   = date('d', (strtotime('now') - strtotime($datefrom)));
 $total_days = date('d', (strtotime($dateto) - strtotime($datefrom)));

@@ -81,65 +75,84 @@ function showPercent($per) {
    $background       = get_percentage_colours($per);
    $right_background = $background['right'];
    $left_background  = $background['left'];
-    $res              = print_percentage_bar(350, 20, $per, null, 'ffffff', $left_background, $per.'%', 'ffffff', $right_background);
+    $res              = print_percentage_bar(200, 20, $per, null, 'ffffff', $left_background, $per.'%', 'ffffff', $right_background);
    return $res;

 }//end showPercent()

+?>

-echo '<h3>Bill Summary</h3>';
-echo '<h4>Quota Bill (Billing Period from '.$fromtext.' to '.$totext.')</h4>';
-echo '<table class="table">';
-echo '  <tr style="font-weight: bold;">';
-echo '    <td width="125">Bandwidth</td>';
-echo '    <td width="10"></td>';
-echo '    <td width="100">Used</td>';
-echo '    <td width="100">Allowed</td>';
-echo '    <td width="100">Average</td>';
-echo '    <td width="100">Estimated</td>';
-echo '    <td width="360"></td>';
-echo '  </tr>';
-echo '  <tr style="background: '.$list_colour_b.';">';
-echo '    <td>Transferred</td>';
-echo '    <td>:</td>';
-echo '    <td>'.$total['data'].'</td>';
-echo '    <td>'.$total['allow'].'</td>';
-echo '    <td>'.$total['ave'].'</td>';
-echo '    <td>'.$total['est'].'</td>';
-echo '    <td width="360">'.showPercent($total['per']).'</td>';
-echo '  </tr>';
+<h3>Transfer Report</h3>
+<strong>Billing Period from <?php echo $fromtext ?> to <?php echo $totext ?></strong>
+<br /><br />

-echo '  <tr style="background: '.$list_colour_a.';">';
-echo '    <td>Inbound</td>';
-echo '    <td>:</td>';
-echo '    <td>'.$in['data'].'</td>';
-echo '    <td>'.$in['allow'].'</td>';
-echo '    <td>'.$in['ave'].'</td>';
-echo '    <td>'.$in['est'].'</td>';
-echo '    <td>'.showPercent($in['per']).'</td>';
-echo '  </tr>';
-echo '  <tr style="background: '.$list_colour_b.';">';
-echo '    <td>Outbound</td>';
-echo '    <td>:</td>';
-echo '    <td>'.$out['data'].'</td>';
-echo '    <td>'.$out['allow'].'</td>';
-echo '    <td>'.$out['ave'].'</td>';
-echo '    <td>'.$out['est'].'</td>';
-echo '    <td>'.showPercent($out['per']).'</td>';
-echo '  </tr>';
-if ($ousage['over'] > 0 && $bill_data['bill_type'] == 'quota') {
-    echo '  <tr style="background: '.$list_colour_a.';">';
-    echo '    <td>Already overusage</td>';
-    echo '    <td>:</td>';
-    echo '    <td><span style="color: #'.$total['bg']['left'].'; font-weight: bold;">'.$ousage['data'].'</span></td>';
-    echo '    <td>'.$ousage['allow'].'</td>';
-    echo '    <td>'.$ousage['ave'].'</td>';
-    echo '    <td>'.$ousage['est'].'</td>';
-    echo '    <td>'.showPercent($ousage['per']).'</td>';
-}
+<div class="row">
+    <div class="col-lg-5 col-lg-push-7">
+        <?php print_port_list() ?>
+    </div>
+    <div class="col-lg-7 col-lg-pull-5">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    Bill Summary
+                </h3>
+            </div>
+            <table class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Bandwidth</th>
+                    <th>Used</th>
+                    <th>Allowed</th>
+                    <th>Average</th>
+                    <th>Estimated</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th>Transferred</th>
+                    <td><?php echo $total['data'] ?></td>
+                    <td><?php echo $total['allow'] ?></td>
+                    <td><?php echo $total['ave'] ?></td>
+                    <td><?php echo $total['est'] ?></td>
+                    <td><?php echo showPercent($total['per']) ?></td>
+                </tr>
+                <tr>
+                    <th>Inbound</th>
+                    <td><?php echo $in['data'] ?></td>
+                    <td><?php echo $in['allow'] ?></td>
+                    <td><?php echo $in['ave'] ?></td>
+                    <td><?php echo $in['est'] ?></td>
+                    <td><?php echo showPercent($in['per']) ?></td>
+                </tr>
+                <tr>
+                    <th>Outbound</th>
+                    <td><?php echo $out['data'] ?></td>
+                    <td><?php echo $out['allow'] ?></td>
+                    <td><?php echo $out['ave'] ?></td>
+                    <td><?php echo $out['est'] ?></td>
+                    <td><?php echo showPercent($out['per']) ?></td>
+                </tr>
+        <?php if ($ousage['over'] > 0 && $bill_data['bill_type'] == 'quota') { ?>
+                <tr>
+                    <th>Already overusage</th>
+                    <td><span style="color: #<?php echo $total['bg']['left'] ?>; font-weight: bold;"><?php echo $ousage['data'] ?></span></td>
+                    <td><?php echo $ousage['allow'] ?></td>
+                    <td><?php echo $ousage['ave'] ?></td>
+                    <td><?php echo $ousage['est'] ?></td>
+                    <td><?php echo showPercent($ousage['per']) ?></td>
+                </tr>
                
-echo '</table>';
+        <?php } ?>        
+            </tbody>
+            </table>
+        </div>
+    </div>
+</div>

+
+
+<?php 
 $bi  = "<img src='bandwidth-graph.php?bill_id=".$bill_id.'&amp;bill_code='.$_GET['bill_code'];
 $bi .= '&amp;from='.$unixfrom.'&amp;to='.$unixto;
 $bi .= '&amp;type=day&imgbill=1';
@@ -163,7 +176,31 @@ $mi .= '&amp;from='.$lastmonth.'&amp;to='.$rightnow;
 $mi .= '&amp;&type=day';
 $mi .= '&amp;x=1190&amp;y=250';
 $mi .= "$type'>";
+?>

-echo "<h3>Billing Period View</h3>$bi";
-echo "<h3>Rolling 24 Hour View</h3>$di";
-echo "<h3>Rolling Monthly View</h3>$mi";
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Billing Period View</h3>
+    </div>
+    <div class="panel-body">
+    <?php echo $bi ?>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Rolling 24 Hour View</h3>
+    </div>
+    <div class="panel-body">
+    <?php echo $di ?>
+    </div>
+</div>
+
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">Rolling Monthly View</h3>
+    </div>
+    <div class="panel-body">
+    <?php echo $mi ?>
+    </div>
+</div>
--- a/html/pages/bills.inc.php
+++ b/html/pages/bills.inc.php
@@ -1,6 +1,13 @@
 <?php

+$no_refresh = true;
+
 if ($_POST['addbill'] == 'yes') {
+    if ($_SESSION['userlevel'] < 10) {
+        include 'includes/error-no-perm.inc.php';
+        exit;
+    }
+    
    $updated = '1';

    if (isset($_POST['bill_quota']) or isset($_POST['bill_cdr'])) {
@@ -68,14 +75,12 @@ if ($_POST['addbill'] == 'yes') {

    $bill_id = dbInsert($insert, 'bills');

-    $message       .= $message_break.'Bill '.mres($_POST['bill_name']).' ('.$bill_id.') added!';
-    $message_break .= '<br />';
-
    if (is_numeric($bill_id) && is_numeric($_POST['port'])) {
        dbInsert(array('bill_id' => $bill_id, 'port_id' => $_POST['port']), 'bill_ports');
-        $message       .= $message_break.'Port '.mres($_POST['port']).' added!';
-        $message_break .= '<br />';
    }
+    
+    header('Location: /' . generate_url(array('page' => 'bill', 'bill_id' => $bill_id, 'view' => 'edit')));
+    exit();
 }

 $pagetitle[] = 'Billing';
@@ -86,171 +91,12 @@ if ($vars['view'] == 'history') {
    include 'pages/bills/search.inc.php';
    include 'pages/bills/pmonth.inc.php';
 }
-else if ($vars['view'] == 'add') {
-    if (is_numeric($vars['port'])) {
-        $port = dbFetchRow('SELECT * FROM `ports` AS P, `devices` AS D WHERE `port_id` = ? AND D.device_id = P.device_id', array($vars['port']));
-    }
-
-?>
-
-<?php
-    print_optionbar_start();
-    echo "<span style='font-weight: bold;'>Bill</span> &#187; ";
-    if (!$vars['view']) {
-        $vars['view'] = 'add';
-    }
-
-    if ($_SESSION['userlevel'] >= '10') {
-        if ($vars['view'] == 'add') {
-            echo "<span class='pagemenu-selected'>";
-        }
-
-        echo '<A href="'.generate_url(array('page' => 'bills/add')).'">Add</a>';
-        if ($vars['view'] == 'add') {
-            echo '</span>';
-        }
-    }
-
-    echo '<div style="font-weight: bold; float: right;"><a href="'.generate_url(array('page' => 'bills')).'/"><img align=absmiddle src="images/16/arrow_left.png"> Back to Bills</a></div>';
-    print_optionbar_end();
-?>
-
-<h3>Bill : Add Bill</h3>
-
-<form name="form1" method="post" action="bills/" class="form-horizontal" role="form">
-  <input type=hidden name=addbill value=yes>
-    <script type="text/javascript">
-    function billType() {
-        $('#cdrDiv').toggle();
-        $('#quotaDiv').toggle();
-    }
-    </script>
-<?php
-    if (is_array($port)) {
-        $devicebtn = str_replace('list-device', 'btn', generate_device_link($port));
-        $portbtn   = str_replace('interface-upup', 'btn', generate_port_link($port));
-        $portalias = (empty($port['ifAlias']) ? '' : ' - '.$port['ifAlias'].'');
-        $devicebtn = str_replace('">'.$port['hostname'], '" style="color: #000;"><i class="fa fa-asterisk"></i> '.$port['hostname'], $devicebtn);
-        $devicebtn = str_replace("overlib('", "overlib('<div style=\'border: 5px solid #e5e5e5; background: #fff; padding: 10px;\'>", $devicebtn);
-        $devicebtn = str_replace("<div>',;", "</div></div>',", $devicebtn);
-        $portbtn   = str_replace('">'.strtolower($port['ifName']), '" style="color: #000;"><i class="fa fa-random"></i> '.$port['ifName'].''.$portalias, $portbtn);
-        $portbtn   = str_replace("overlib('", "overlib('<div style=\'border: 5px solid #e5e5e5; background: #fff; padding: 10px;\'>", $portbtn);
-        $portbtn   = str_replace("<div>',;", "</div></div>',", $portbtn);
-        echo "  <fieldset>\n";
-        echo '    <input type="hidden" name="port" value="'.$port['port_id']."\">\n";
-        echo "    <legend>Ports</legend>\n";
-        echo "    <div class=\"control-group\">\n";
-        echo "      <div class=\"btn-toolbar\">\n";
-        echo "        <div class=\"btn-group\">\n";
-        echo '          '.$devicebtn."\n";
-        echo '          '.$portbtn."\n";
-        echo "        </div>\n";
-        echo "      </div>\n";
-        echo "    </div>\n";
-        echo "  </fieldset>\n";
-    }
-?>
-
-<div class="form-group">
-  <label for="bill_name" class="col-sm-2 control-label"><strong>Description</strong></label>
-  <div class="col-sm-4">
-    <input class="form-control input-sm" type="text" id="bill_name" name="bill_name" value="<?php echo $port['port_descr_descr']; ?>">
-  </div>
-  <div class="col-sm6">
-  </div>
-</div>
-<div class="form-group">
-  <label class="col-sm-2 control-label" for="bill_type"><strong>Billing Type</strong></label>
-  <div class="col-sm-10">
-    <input type="radio" name="bill_type" value="cdr" checked onchange="javascript: billType();" /> CDR 95th
-    <input type="radio" name="bill_type" value="quota" onchange="javascript: billType();" /> Quota
-  </div>
-</div>
-<div class="form-group">
-  <div id="cdrDiv">
-    <div class="col-sm-2">
-    </div>
-    <div class="col-sm-3">
-      <input class="form-control input-sm" type="text" name="bill_cdr">
-    </div>
-    <div class="col-sm-3">
-      <select name="bill_cdr_type" class="form-control input-sm">
-        <option value="Kbps">Kilobits per second (Kbps)</option>
-        <option value="Mbps" selected>Megabits per second (Mbps)</option>
-        <option value="Gbps">Gigabits per second (Gbps)</option>
-      </select>
-    </div>
-    <div class="col-sm-4">
-    </div>
-  </div>
-  <div id="quotaDiv" style="display: none">
-    <div class="col-sm-2">
-    </div>
-    <div class="col-sm-3">
-      <input class="form-control input-sm" type="text" name="bill_quota">
-    </div>
-    <div class="col-sm-3">
-      <select name="bill_quota_type" class="form-control input-sm">
-        <option value="MB">Megabytes (MB)</option>
-        <option value="GB" selected>Gigabytes (GB)</option>
-        <option value="TB">Terabytes (TB)</option>
-      </select>
-    </div>
-    <div class="col-sm-4">
-    </div>
-  </div>
-</div>
-<div class="form-group">
-  <label class="col-sm-2 control-label" for="bill_day"><strong>Billing Day</strong></label>
-  <div class="col-sm-1">
-    <select name="bill_day" class="form-control input-sm">
-<?php
-    for ($x = 1; $x < 32; $x++) {
-        echo '          <option value="'.$x.'">'.$x."</option>\n";
-    }
-
-?>
-    </select>
-  </div>
-  <div class="col-sm-9">
-  </div>
-</div>
-<h3>Optional Information</h3>
-<div class="form-group">
-  <label class="col-sm-2 control-label" for="bill_custid"><strong>Customer Reference</strong></label>
-  <div class="col-sm-4">
-    <input class="form-control input-sm" type="text" name="bill_custid">
-  </div>
-  <div class="col-sm-6">
-  </div>
-</div>
-<div class="form-group">
-  <label class="col-sm-2 control-label" for="bill_ref"><strong>Billing Reference</strong></label>
-  <div class="col-sm-4">
-    <input class="form-control input-sm" type="text" name="bill_ref" value="<?php echo $port['port_descr_circuit']; ?>">
-  </div>
-  <div class="col-sm-6">
-  </div>
-</div>
-<div class="form-group">
-  <label class="col-sm-2 control-label" for="bill_notes"><strong>Notes</strong></label>
-  <div class="col-sm-4">
-    <input class="form-control input-sm" type="textarea" name="bill_notes" value="<?php echo $port['port_descr_speed']; ?>">
-  </div>
-  <div class="col-sm-6">
-  </div>
-</div>
-<button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <strong>Add Bill</strong></button>
-</form>
-
-<?php
-}
 else {
    include 'pages/bills/search.inc.php';
-
-    $i = 0;
-    echo "<table border='0' cellspacing='0' cellpadding='5' class='table table-condensed'>
-        <tr>
+    include 'includes/modal/new_bill.inc.php';
+?>
+    <table class="table table-striped">
+    <thead>
        <th>Billing name</th>
        <th></th>
        <th>Type</th>
@@ -259,7 +105,9 @@ else {
        <th>Overusage</th>
        <th></th>
        <th></th>
-        </tr>";
+    </thead>
+    <tbody>
+<?php
    foreach (dbFetchRows('SELECT * FROM `bills` ORDER BY `bill_name`') as $bill) {
        if (bill_permitted($bill['bill_id'])) {
            unset($class);
@@ -293,30 +141,37 @@ else {

            $right_background = $background['right'];
            $left_background  = $background['left'];
-
-            if (!is_integer($i / 2)) {
-                $row_colour = $list_colour_a;
-            }
-            else {
-                $row_colour = $list_colour_b;
-            }
-
-            echo "
-                <tr bgcolor='$row_colour'>
-                <td><a href='".generate_url(array('page' => 'bill', 'bill_id' => $bill['bill_id']))."'><span style='font-weight: bold;' class=interface>".$bill['bill_name'].'</span></a><br />'.strftime('%F', strtotime($datefrom)).' to '.strftime('%F', strtotime($dateto))."</td>
-                <td>$notes</td>
-                <td>$type</td>
-                <td>$allowed</td>
-                <td>$used</td>
-                <td style=\"text-align: center;\">$overuse</td>
-                <td>".print_percentage_bar(250, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right'])."</td>
-                <td><a href='".generate_url(array('page' => 'bill', 'bill_id' => $bill['bill_id'], 'view' => 'edit'))."'><img src='images/16/wrench.png' align=absmiddle alt='Edit'> Edit</a></td>
-                </tr>
-                ";
-
-            $i++;
-        }
+?>
+        <tr>
+            <td>
+                <a href='<?php echo generate_url(array('page' => 'bill', 'bill_id' => $bill['bill_id'])) ?>'><span style='font-weight: bold;' class=interface><?php echo $bill['bill_name'] ?></span></a>
+                <br />  
+                <?php echo strftime('%F', strtotime($datefrom)) ?> to <?php echo strftime('%F', strtotime($dateto)) ?>
+            </td>
+            <td><?php echo $notes ?></td>
+            <td><?php echo $type ?></td>
+            <td><?php echo $allowed ?></td>
+            <td><?php echo $used ?></td>
+            <td style="text-align: center;"><?php echo $overuse ?></td>
+            <td><?php echo print_percentage_bar(250, 20, $percent, null, 'ffffff', $background['left'], $percent.'%', 'ffffff', $background['right'])?></td>
+            <td>
+                <?php if ($_SESSION['userlevel'] >= 10) { ?>
+                <a href='<?php echo generate_url(array('page' => 'bill', 'bill_id' => $bill['bill_id'], 'view' => 'edit')) ?>'><img src='images/16/wrench.png' align=absmiddle alt='Edit'> Edit</a>
+                <?php } ?>
+            </td>
+        </tr>
+<?php   }
+    }?>
+    </tbody>
+    </table>
+<?php 
+    if ($vars['view'] == 'add') {
+?>
+    <script type="text/javascript">
+        $(function() {
+            $('#create-bill').modal('show');    
+        });
+    </script>
+<?php
    }
-    
-    echo '</table>';
 }
--- a/html/pages/bills/search.inc.php
+++ b/html/pages/bills/search.inc.php
@@ -5,47 +5,39 @@
 ?>

 <form method='post' action='' class="form-inline" role="form">
-  <div class="form-group">
+  <fieldset class="form-group" disabled title="Search is currently broken">
    Bills
-  </div>
-  <div class="form-group">
    <input type="text" name="hostname" id="hostname" class="form-control input-sm" value="<?php echo $_POST['hostname']; ?>" />
-  </div>
-  <div class="form-group">
    <select name='os' id='os' class="form-control input-sm">
      <option value=''>All Types</option>
      <option value=''>CDR</option>
      <option value=''>95th</option>
      <option value=''>Quota</option>
    </select>
-  </div>
-  <div class="form-group">
    <select name='hardware' id='hardware' class="form-control input-sm">
      <option value=''>All States</option>
      <option value=''>Under Quota</option>
      <option value=''>Over Quota</option>
    </select>
-  </div>
-  <div class="form-group">
    <select name='location' id='location' class="form-control input-sm">
      <option value=''>All Customers</option>
    </select>
-  </div>
-  <button type="submit" class="btn btn-default input-sm">Search</button>
-  <div class="form-group">
+    <button type="submit" class="btn btn-default input-sm">Search</button>
+  </fieldset>
+  <div class="form-group pull-right">
 <?php
 if ($vars['view'] == 'history') {
-    echo '<a href="bills/"><img src="images/16/clock.png" align=absmiddle alt="Current Billing Period"> Current Billing Period</a>';
+    echo '<a class="btn btn-default btn-sm" href="bills/"><i class="fa fa-clock-o"></i> Current Billing Period</a>';
 }
 else {
    // FIXME - generate_url
-    echo '<a href="bills/view=history/"><img src="images/16/clock_red.png" align=absmiddle alt="Previous Billing Period"> Previous Billing Period</a>';
+    echo '<a class="btn btn-default btn-sm" href="bills/view=history/"><i class="fa fa-history"></i> Previous Billing Period</a>';
 }

 ?>
-  </div>
-  <div class="form-group">
-    <a href='bills/view=add/'><img src="images/16/add.png" align=absmiddle alt="Add"> Add Bill</a>
+<?php if ($_SESSION['userlevel'] >= 10) {  ?>
+    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#create-bill"><i class="fa fa-plus"></i> Create Bill</button>
+<?php } ?>
  </div>
 </form>